## Client-Side TicTacToe

[[wpde>Tic-Tac-Toe]] ist ein Spiel mit 3x3 Feldern. Die Spieler:innen setzen abwechslungsweise ein leeres Feld auf `X` bzw. `O`. Das Spiel ist beendet, wenn ein Spieler drei Felder in horizontaler, vertikaler oder diagonaler Reihe besetzen kann, oder wenn keine freien Felder übrig sind (unentschieden).

{{:ksk_ef:web:apps:client:pasted:20240811-074304.png?nolink&300}}

### Auftrag A: Struktur & Formatierung

Erstelle HTML & CSS, um ein TicTacToe-Spiel darzustellen:

  * Erstelle einen neuen Ordner, in dem die ganze Web-App enthalten sein wird!
  * Erstelle erst nur das HTML in `tictactoe.html`!
    * Eine gute Möglichkeit wäre ein Element mit 9 `<button>` Elementen, die mit einem Grid-Layout auf 3x3 Felder formatiert werden können.
    * Eine andere Möglichkeit wäre, die Matrix zu verschachteln mit einem Container, der drei Zeilen-Elemente mit je drei Feldern enthält.
  * Formatiere anschliessend mit CSS!
    * Muss:
      * Layout des Spielfelds auf 3x3 Felder.
      * Horizontale Zentrierung des Spielfelds ([[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Ausrichtung/Inhalte_zentrieren#horizontale_Zentrierung|selfhtml]])
      * Ansprechende Formatierung (Hintergrundfarbe, Schriftgrösse, Abstände, abgerundete Ecken...)
    * Nice-to have:
      * 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]])
  * Halt, nicht einfach im Internet abschreiben!

### Auftrag B: Spiel-Logik

Das Ziel dieses Auftrags ist, dass zu zweit im Browser TicTacToe gespielt werden kann. Dazu nutzen wir [[..:js]].

Jeder `button` benötigt einen Click-Handler, der ausgeführt wird, wenn die spielende Person darauf klickt.

Der Click-Handler:
    * überprüft, ob der Spielzug legal ist (Feld frei, Spiel noch nicht beendet?)
    * setzt das Feld auf `X` oder `O`
      * 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,
      * oder weil keine freien Felder übrig sind
    * ... 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`:
<code javascript tictactoe.js>
    let color = 'X'; // or 'O'
    button.innerText = color;
    button.setAttribute('data-state', color);
</code>

In [[..: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>
button[data-state="X"] {  
    background-color: red;
}
button[data-state="O"] {  
    background-color: blue;
}
</code>

Für Benachrichtigungen (z.B. über das Ende des Spiels) kann man die Funktion `alert(message)` nützen, die ein Browser-Popup anzeigt. Schöner ist es, einen Bereich im HTML zu definieren, der Meldungen anzeigt.

<nodisp 2>
++++Hinweise|
    * [[ef_informatik:web_app|Vier Gewinnt im KSR-Ergänzungsfach]]
    * [[https://github.com/tkilla77/ksr_tictactoe/tree/client_only/static|TicTacToe auf Github]]
++++
</nodisp>