Skip to content

Repository files navigation

Spiele-Duell

Eine kleine Web-Plattform, um auf dem eigenen Handy/Tablet/Notebook gegen einen realen Gegner zu spielen. Du startest eine Partie, bekommst einen 6-stelligen Code und gibst ihn deinem Gegner. Er gibt den Code ein – und ihr spielt gegeneinander, jeder auf seinem eigenen Gerät.

Spiele: Schach, Dame und Mühle.

Wie es funktioniert

  • Ein einziger Node.js-Server liefert die Web-Oberfläche und wickelt die Echtzeit-Kommunikation per WebSocket ab.
  • Der Server ist autoritativ: Er kennt den Spielstand, prüft jeden Zug auf Regelkonformität und schickt jedem Spieler nur dessen erlaubte Züge. Schummeln über manipulierte Clients ist damit nicht möglich.
  • Aktive Partien liegen im Arbeitsspeicher. Es wird keine Datenbank benötigt. Bei einem Server-Neustart gehen laufende Partien verloren.
  • Trennt sich ein Spieler kurz (z. B. Tunnel), nimmt er die Partie automatisch wieder auf (Sitzungs-Token im Browser). Wurde der Browser versehentlich geschlossen und der Token ist weg, kann er einfach den Code erneut eingeben und seinen Platz zurückerobern – aber nur, solange dieser Platz wirklich getrennt ist. Sind beide Spieler verbunden, wird ein Beitritt mit dem Code abgelehnt. Ein Heartbeat (Ping/Pong) erkennt auch abrupt geschlossene Verbindungen zuverlässig. Inaktive Partien werden nach 60 Minuten aufgeräumt.

Lokal starten

Voraussetzung: Node.js (≥ 16).

npm install
npm run build
npm start

Dann im Browser http://localhost:3000 öffnen. Für das Spielen zu zweit im selben WLAN: die lokale IP des Rechners verwenden (z. B. http://192.168.x.y:3000) und auf beiden Geräten öffnen.

Während der Entwicklung mit automatischem Neustart:

npm run dev

Im Container betreiben

Einfachster Weg (ein Container, kein weiteres Setup):

docker compose up --build

Oder direkt mit Docker:

docker build -t online-games-duell .
docker run -p 3000:3000 online-games-duell

Erreichbar unter http://localhost:3000. Über die Umgebungsvariable PORT lässt sich der Port ändern.

Hinweis zum öffentlichen Betrieb: Damit Freunde von außerhalb beitreten können, muss der Server über das Internet erreichbar sein (z. B. hinter einem Reverse-Proxy mit HTTPS). Bei HTTPS wird die WebSocket-Verbindung automatisch auf wss:// umgestellt. Der Reverse-Proxy muss WebSocket-Upgrades durchreichen (Standard bei Caddy, Traefik und nginx mit Upgrade-Headern).

Projektstruktur

src/
  server.ts          Express + WebSocket-Server, Nachrichten-Protokoll
  rooms.ts           Verwaltung aktiver Partien, 6-stellige Codes
  games/
    types.ts         Gemeinsame Engine-Schnittstelle
    chess.ts         Schach (nutzt chess.js)
    checkers.ts      Dame (eigene Regel-Engine)
    morris.ts        Mühle (eigene Regel-Engine)
    index.ts         Spiel-Registry
public/
  index.html, styles.css
  js/app.js          Lobby, Verbindung, Bildschirm-Steuerung
  js/games/*.js      Darstellung der Bretter + Eingabe

Ein neues Spiel hinzufügen

  1. In src/games/ eine Datei mit einer GameEngine anlegen (siehe types.ts).
  2. In src/games/index.ts registrieren.
  3. In public/js/app.js unter GAME_META und RENDERERS eintragen und in public/js/games/ einen Renderer ergänzen.

Verwendete Spielregeln

  • Schach: vollständige Regeln über chess.js (Rochade, en passant, Umwandlung, Schachmatt, Patt, Remis-Regeln).
  • Dame (8×8, an internationale Regeln angelehnt): Schlagzwang, Schlagen in alle Richtungen, Mehrfachschlag, fliegende Dame. Es gilt nicht die Regel, immer die maximale Anzahl schlagen zu müssen.
  • Mühle (Nine Men's Morris): Setzen → Ziehen → Springen (bei 3 Steinen), Mühle erlaubt das Entfernen eines gegnerischen Steins (nicht aus einer Mühle, außer alle gegnerischen Steine stehen in Mühlen). Verloren bei < 3 Steinen oder Zugunfähigkeit.

Tests

npm test

Der Testlauf kompiliert zuerst, prüft dann die Spiel-Engines direkt (Schlagzwang, Mehrfachschlag, fliegende Dame, Mühle-Bildung) und startet anschließend einen echten Server für End-to-End-Tests über WebSocket (Partie erstellen, beitreten, illegale Züge ablehnen, Schachmatt erkennen).

CI/CD (GitHub Actions)

Die Pipeline unter .github/workflows/ci.yml läuft bei jedem Push und Pull Request:

  1. build-test: npm ci, npm run build, npm test.
  2. docker: baut das Container-Image. Bei Push auf main (oder einem v*-Tag) wird es zusätzlich in die GitHub Container Registry (GHCR) unter ghcr.io/<owner>/<repo> veröffentlicht – ohne zusätzliche Secrets, über den eingebauten GITHUB_TOKEN. Bei Pull Requests wird nur gebaut, nicht veröffentlicht.

About

No description, website, or topics provided.

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages