Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- talit:web:webapps:client [2025-02-04 14:05] – [Auftrag A: Struktur & Formatierung] hof
+++ talit:web:webapps:client [2025-04-13 10:47] (aktuell) – [Client-Side Vier Gewinnt] 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).
 {{:talit:web:webapps:client:pasted:20250204-140319.png?nolink&300|Vier Gewinnt}}
@@ Zeile 78: / Zeile 78: @@
       * oder weil keine freien Felder übrig sind
     * ... schaltet die Farbe des Spielers um.
+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>
+/** 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 entsprechend angepasst:
+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. Für die Formatierung mit CSS speichern wir den Zustand zudem in einem Attribut `data-state`:
+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 tictactoe.js>
     let color = game.board[cell];              // 1, or 2
-    button.innerText = color;                  // remove once CSS formatting works
+    button.textContent = color;                // remove once CSS formatting works
     button.setAttribute('data-state', color);
 </code>