4Gewinnt 🎮

Ein modernes Vier-Gewinnt-Projekt mit:

• ASP.NET Core Web API + SignalR (Backend)
• Vue 3 + TypeScript + Vite (Frontend)

Ziel ist ein flüssiges Online-Spielerlebnis mit Lobby/Spiel-Code, Echtzeit-Zügen und sauberer Trennung zwischen UI und Spiellogik.

Features

• Online-Multiplayer über SignalR-Hub (/api/gamehub)
• Spielfelder mit variabler Größe
• Lobby-System mit 6-stelligem Spielcode
• Spielstatus-Events in Echtzeit (GameStarted, FieldUpdated, GameEnded)
• Lokaler Modus im Frontend

Projektstruktur

4Gewinnt/
├── API/                 # .NET 9 Backend (REST + SignalR)
│   ├── Controllers/     # HTTP- und Hub-Endpunkte
│   ├── Models/          # Domänenmodelle (Game, Player, Field, DTOs)
│   ├── Repository/      # In-Memory Datenhaltung
│   └── Services/        # GameManager mit Spielregeln/Use-Cases
├── GUI/                 # Vue 3 Frontend
│   ├── src/components/  # UI-Komponenten
│   ├── src/routes/      # Seiten (Local/Online)
│   └── src/scripts/     # Spiel- und SignalR-Logik
└── 4Gewinnt.sln

Voraussetzungen

• .NET SDK 9
• Node.js 20+ (laut package.json: ^20.19.0 || >=22.12.0)
• npm

Schnellstart (Entwicklung)

1) Backend starten

cd API
dotnet run

Backend läuft standardmäßig auf einem lokalen ASP.NET-Port (siehe Terminalausgabe).

2) Frontend starten

cd GUI
npm install
npm run dev

Danach Vite-URL im Browser öffnen (z. B. http://localhost:5173).

Build für Produktion

Frontend bauen

cd GUI
npm install
npm run build

Backend bauen

cd API
dotnet build

API/Hub-Überblick

• Healthcheck: GET /api/status
• SignalR Hub: /api/gamehub
  • CreateGame(playerName, gFs)
  • JoinGame(playerName, gameCode)
  • RequestGameInformation(gameId)
  • Drop(gameId, column)

Hinweise

• Das Spiel verwendet derzeit eine In-Memory-Repository-Implementierung (kein persistenter Speicher).
• Bei Disconnects oder Spielende werden Spiele zeitgesteuert entfernt.