Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- talit:web:webapps:client [2025-02-02 14:22] – hof
+++ talit:web:webapps:client [2026-08-10 15:12] (aktuell) – [Darstellung in HTML] hof
@@ Zeile 1: / Zeile 1: @@
 ## Client-Side Vier Gewinnt
-[[wpde>Vier_gewinnt]] ist ein Spiel mit 6x7 Feldern. Die Spieler:innen werfen abwechslungsweise ein Stein ihrer Farbe in Spalten mit leeren Feldern. Das Spiel ist beendet, wenn ein Spieler vier Felder in horizontaler, vertikaler oder diagonaler Richtung besetzen kann, oder wenn keine freien Felder übrig sind (unentschieden).
+[[wpde>Vier_gewinnt|Vier gewinnt]] ist ein Spiel mit 6x7 Feldern. Die Spieler:innen werfen abwechslungsweise ein Stein ihrer Farbe in Spalten mit leeren Feldern. Das Spiel ist beendet, wenn ein Spieler vier Felder in horizontaler, vertikaler oder diagonaler Richtung besetzen kann, oder wenn keine freien Felder übrig sind (unentschieden).
-{{:ef_informatik:connect4-css.jpg?nolink&300}}
+{{:talit:web:webapps:client:pasted:20250204-140319.png?nolink&300|Vier Gewinnt}}
 ### Auftrag A: Struktur & Formatierung
-Erstelle HTML & CSS, um ein Vier-Gewinnt-Spiel darzustellen:
+Erstelle [[gf_informatik:web:start|HTML & CSS]], um ein Vier-Gewinnt-Spiel darzustellen:
   * Erstelle einen neuen Ordner, in dem die ganze Web-App enthalten sein wird!
   * Erstelle erst nur das HTML in `connect4.html`!
-    * Eine gute Möglichkeit wäre ein Element mit 42 `<button>` Elementen, die mit einem Grid-Layout auf 6x7 Felder formatiert werden können.
+    * Eine gute Möglichkeit wäre ein Container-Element mit 42 `<button>` Kind-Elementen, die mit einem Grid-Layout auf 6x7 Felder formatiert werden können.
     * Eine andere Möglichkeit wäre, die Matrix zu verschachteln mit einem Container, der sechs Zeilen-Elemente mit je sieben Feldern enthält.
   * Formatiere anschliessend mit CSS!
@@ Zeile 20: / Zeile 18: @@
       * Ansprechende Formatierung (Hintergrundfarbe, Schriftgrösse, Abstände, abgerundete Ecken...)
     * Nice-to have:
+      * Runde Löcher: z.B. mit `border-radius: 50%;`
+      * 3D-Effekt mit `box-shadow`.
       * Responsive (Spielfeld passt sich der Grösse des Browserfensters an)
       * Mobile funktioniert gut ([[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Webseiten_responsiv_umbauen|selfhtml]])
@@ Zeile 56: / Zeile 56: @@
 Alle Änderungen des Spiels sollen zuerst auf diesem Spiel-Modell durchgeführt werden. Anschliessend wird das Spiel vom HTML dargestellt (en. _rendering_).
 #### Verhalten
@@ Zeile 71: / Zeile 70: @@
 Der Click-Handler:
+    * findet heraus, welches das unterste leere Feld in der Spalte ist.
     * überprüft, ob der Spielzug legal ist (Spalte frei, Spiel noch nicht beendet?)
-    * findet heraus, welches das unterste leere Feld ist.
     * setzt das Feld auf die Farbe des Spielers.
-      * einerseits muss der Inhalt des Buttons gesetzt werden, damit der Wert im HTML angezeigt wird.
-      * andererseits setzen wir ein Attribut `data-state`, das dazu dient, die Spiellogik zu betreiben.
     * ... überprüft ob das Spiel zu Ende ist
       * entweder, weil ein Spieler gewonnen hat,
@@ Zeile 81: / Zeile 78: @@
     * ... schaltet die Farbe des Spielers um.
-Um die Darstellung des Spiels zu ändern, setzen wir den Text des Buttons. Um die Spiellogik zu betreiben, speichern wir den Zustand zudem in einem Attribut `data-state`:
+Um den Code etwas zu strukturieren, hilft es, die obigen Aufgaben als _Funktionsaufrufe_ hinzuschreiben, und diese erst anschliessend zu implementieren. Die `dropPiece` Funktion könnte also so aussehen:
-<code javascript tictactoe.js>
-    let color = game.next;                     // 1, or 2
+<code javascript>
-    button.innerText = color;                  // remove once CSS formatting works
+/** Drops a piece in the given column and updates the game state accordingly. */
+function dropPiece(grid, status, game, column) {
+  // Check if move is valid.
+  if (game.state != "playing") {
+    return;  // or throw new Error("can't play in this game")
+  }
+  // Compute the lowest empty row in the selected column.
+  let row = computeEmptyRow(game, column);
+  let cell = row * 7 + column;
+  // Update game state.
+  game.board[cell] = game.next;
+  // Check for winner / tie, will set game.state if game ended.
+  checkWinner(game, cell);
+  // Swap active player
+  if (game.state == "playing") {
+    togglePlayer(game);
+  }
+  // Update the HTML view.
+  updateHtml(grid, game);
+  // Update game status area to reflect active player / winner / tie
+  updateStatus(status, game);
+}
+</code>
+#### Darstellung in HTML
+Wenn der Spielzustand geändert worden ist, wird das HTML (genauer: das HTML _Document Object Model_ (DOM)) entsprechend angepasst:
+Um die Darstellung des Spiels zu ändern, setzen wir den Text des Buttons mit der [[https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent|textContent]] Eigenschaft. Für die Formatierung mit CSS speichern wir den Zustand zudem in einem Attribut `data-state`. Sobald die Formatierung funktioniert, können wir den Text auch wieder entfernen.
+<code javascript connect4.js>
+    let color = game.board[cell];              // 1, or 2
+    button.textContent = color;                // remove once CSS formatting works
     button.setAttribute('data-state', color);
 </code>
@@ Zeile 90: / Zeile 118: @@
 In [[gf_informatik:web:css|CSS]] können wir mit einem [[https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors|geeigneten Selektor]] die Zellen formatieren, die einen bestimmten Attributwert haben:
-<code css tictactoe.css>
+<code css connect4.css>
 button[data-state="1"] {
     background-color: red;
@@ Zeile 102: / Zeile 130: @@
 <nodisp 2>
-++++Hinweise|
+++++Hinweise (LP)|
     * [[ef_informatik:web_app|Vier Gewinnt im KSR-Ergänzungsfach]]
     * [[https://github.com/tkilla77/ksr_tictactoe/tree/client_only/static|TicTacToe auf Github]]