Mit unserem Wissen über Web-APIs und JSON wollen wir nun die TicTacToe Web-App weiterentwickeln, so dass zwei Spieler:innen übers Web gegeneinander spielen können.

Dazu muss Folgendes geschehen:

• Die Spiel-Logik muss vom Browser auf den Server wandern.
  • Dazu muss ein Server-Prozess gestartet werden, wir verwenden dafür nodejs und express.
  • Der Server muss geeignete Web-APIs zur Verfügung stellen:
    • /game/<gameid>: gibt den Zustand des Games mit Id <gameid> im JSON-Format zurück.
    • /join: nimmt an einem Spiel teil (entweder an einem bereits mit einem Spieler wartenden, oder es wird ein neues Spiel gestartet). Gibt anschliessend den Game-Zustand zurück.
    • /set/<gameid>/<cellid>: Setzt im Game mit Id <gameid> die Zelle <cellid> (muss im Bereich von 0-8 sein) an. Gibt anschliessend den Game-Zustand zurück.
• Das Javascript im Browser muss sich nur noch darum kümmern, die richtigen Web-APIs auf dem Server aufzurufen, und den Zustand des Spiels im HTML darzustellen.

• Node.js installieren:
  • https://nodejs.org/en/download/prebuilt-installer
• Projekt initialisieren:
  • Eine Eingabeaufforderung im Ordner der Webapp öffnen.
    • npm init
    • npm install express cookie-parser
  • Öffne die Datei package.json:
    • füge einen Eintrag hinzu: "type": "module"
  • Falls du git verwendest:
    • füge node-modules zu .gitignore hinzu.

Zuerst benötigen wir eine Datei app.js, die definiert, wie der Server funktioniert, und welche APIs wir bereitstellen:

app.js

import express from 'express'
 
const app = express()
const port = 3000
 
// Hello World.
app.get('/hello', (req, res) => {
  res.send('Hello World!')
})
 
// Listen on the given port
app.listen(port, () => {
    console.log(`Example app listening on port ${port}`)
})

Mit dem Kommandozeilenaufruf node app.js wird der Node-Server gestartet. Auf der Adresse http://localhost:3000/hello können wir auf die oben definierte API zugreifen.

Der Code bedeutet: Wann immer eine Anfrage für den Pfad /hello ankommt, so sende als Response (res) den String Hello World zurück.

Es ist auch möglich, Teile der im Request (req) verlangten Adresse als Parameter zu erhalten:

app.get('/hello/:name', (req, res) => {
    let name = req.params['name']
    res.send(`Hello ${name}!``)
})

Erstelle eine Kopie deiner tictactoe.js Datei, um auf dem Server ein Spiel laufen zu lassen. Idealerweise ist deine Datei bereits objektorientiert, damit der Server eine Vielzahl von Spielen parallell betreuen kann.

Was muss sich ändern?

• Der Spielzustand kann nicht mehr im HTML gespeichert werden. Es bietet sich an, ein Array von Buchstaben zu verwenden let grid = Array(9).fill(' ').
• Der Spielzustand muss als JSON vom Server zu den Clients gesendet werden. Schreibe eine Funktion toJson(), die Code ähnlich wie den folgenden produziert:

{
  id: 0,           // game id
  state: "ended",  // "waiting", "playing", "ended"
  grid: [          // the nine game grid cells
    "X",
    " ",
    " ",
    "X",
    "O",
    " ",
    "X",
    "O",
    " "
  ],
  winner: "X",     // the player who won, if there is one.
  player: "X",     // the user's color
  next: "O"        // the color of the player next in turn
}