===== 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).

{{:ef_informatik:webapps:client:pasted:20240920-061215.png?nolink&400}}

==== 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|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!

=== Grid Layout ===

Eine gute Möglichkeit, um die grossen Blöcke einer Seite zu organisieren, ist das Grid-Layout. Wie der Name schon sagt, wird ein Container-Element mit ''display: grid'' in einem Raster aufgeteilt, und dessen Kind-Knoten füllen das Raster aus:

{{:gf_informatik:web_sca:grid_layout.svg?nolink&600}}

Der Container für das TicTacToe-Spiel könnte zum Beispiel folgendes CSS haben:

<code css>
ttt-grid {
    display: grid;                          /* Grid-Layout verwenden */
    grid-template-columns: repeat(3, 1fr);  /* Je 3 Spalten & Zeilen. */
    grid-template-rows: repeat(3, 1fr);     /* Jede 1fr = fractional unit, also ein Drittel gross. */
    gap: 1em:                               /* Abstand im Innern des Grid. */
    aspect-ratio: 1 / 1;                    /* Das Element soll quadratisch sein. */   
}
</code>

Ohne weitere CSS-Angaben werden die neun Kinder-Knoten (z.B. ''button'' Elemente) der Reihe nach in die Felder des Grids eingefügt.
Zusammen mit ''border'' etc. ergibt sich ein gut aussehendes 3x3 Spielfeld.

Mehr Informationen zum [[https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid|Grid-Layout auf Selfhtml]].
==== Auftrag B: Spiel-Logik ====

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

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.

++++Hinweise|
    * [[https://github.com/tkilla77/ksr_tictactoe/tree/client_only/static|TicTacToe auf Github]]
++++