Vier gewinnt — Kurzdokumentation

Funktionsübersicht

Die Anwendung bietet folgende Kernfunktionen, die durch den Custom Hook useConnectFour gesteuert werden:

Funktion	Technische Beschreibung
`dropPiece(colIndex)`	Kern-Spielzug: Implementiert die Gravity Logic (Suche nach tiefstem freien Slot in Spalte). Aktualisiert das Board immutabel, pusht den alten State in die History und triggert `checkWin`.
`checkWin(board, player)`	Algorithmus zur Gewinnermittlung. Scannt das Grid mittels "Sliding Window" auf 4 zusammenhängende Tokens (Horizontal, Vertikal, Diagonal).
`undo()`	Entfernt den aktuellen State und stellt den vorletzten Zustand aus dem `history`-Array wieder her (LIFO-Prinzip). Setzt bei leerer History auf Initialzustand.
`resetGame()`	Setzt `gameState` auf `INITIAL_STATE` zurück und leert den gesamten History-Stack. Bereinigt zudem Fehlermeldungen.
`saveGame()`	Persistenz-Wrapper: Delegiert das Speichern an `StorageService.save`. Verarbeitet das Resultat und gibt Feedback (Alert bei Erfolg, Error-State bei Fehlschlag).
`loadGame()`	State Hydration: Lädt Daten via `StorageService.load`. Bei Erfolg werden State und History komplett überschrieben, bei Fehler wird `meta.error` gesetzt.
`doku(url)`	Öffnet diese Dokumentation in einem neuen Tab. Nutzt `noopener,noreferrer` aus Sicherheitsgründen.

Funktion	Technische Beschreibung
`getStatusMessage()`	Evaluiert boolesche Flags (`gameOver`) und Enum-Werte (`winner`), um den Spielstatus textuell zurückzugeben.
`getStatusColor()`	Mapping-Funktion, die basierend auf dem aktiven Spieler/Gewinner den CSS-Farbstring ("blue"/"red") für die UI zurückgibt.

Das Projekt wurde mit folgenden Technologien umgesetzt:

Die Anwendung folgt dem Prinzip der "Separation of Concerns" (Trennung der Zuständigkeiten):

View (ConnectFour.jsx): Verantwortlich für die Darstellung der Benutzeroberfläche. Das Board wird mittels CSS Grid (7 Spalten x 6 Zeilen) gerendert. Es enthält keine Spielelogik, sondern konsumiert diese nur.
Logic (useConnectFour.js): Ein Custom Hook, der den kompletten useState für das Board, den aktuellen Spieler und den Spielstatus (Game Over) verwaltet.
Datenhaltung: Das Spielfeld wird als 2D-Array (6x7) repräsentiert. Ein History-Array speichert vergangene Zustände für die Undo-Funktion.
Storage Service: Ein integrierter Service kapselt die Zugriffe auf den localStorage, um Speicher- und Ladefehler abzufangen (Error Handling).

Animationen: CSS Keyframes (@keyframes drop) sorgen für eine flüssige Animation beim Einwerfen der Steine.
Responsivität: Das Layout passt sich mittels Media Queries an mobile Endgeräte an, wobei die Anordnung der Steuerelemente und die Grösse des Boards optimiert werden.