Add Phase 1 MVP: D&D text-adventure server

FastAPI + Postgres backend with fastapi-users auth, games/characters CRUD, and a WebSocket chat endpoint where an x.ai Grok DM narrates play, rolls dice, and maintains character sheets via tool calls. React + Tailwind frontend covers registration/login, game list and creation, participation-code join flow, character viewer, and a real-time chat session view. Docker Compose skeleton (Postgres + backend) included; Caddy/frontend container wiring is deferred to the deploy milestone. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-31 18:43:08 +02:00
commit f37dc9fa76
75 changed files with 106988 additions and 0 deletions
@@ -0,0 +1,95 @@
+import { FormEvent, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+import { createGame, Game, listGames } from "../api/games";
+import GameCard from "../components/GameCard";
+
+export default function GamesList() {
+  const navigate = useNavigate();
+  const [games, setGames] = useState<Game[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showCreate, setShowCreate] = useState(false);
+
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  async function load() {
+    setLoading(true);
+    try {
+      setGames(await listGames());
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  async function handleCreate(e: FormEvent) {
+    e.preventDefault();
+    setError(null);
+    try {
+      const game = await createGame(name, description);
+      navigate(`/games/${game.id}`);
+    } catch {
+      setError("Spiel konnte nicht erstellt werden.");
+    }
+  }
+
+  return (
+    <div className="mx-auto max-w-3xl px-4 py-8">
+      <div className="mb-6 flex items-center justify-between">
+        <h1 className="text-2xl font-bold text-amber-400">Spiele</h1>
+        <div className="flex gap-2">
+          <button
+            onClick={() => setShowCreate((v) => !v)}
+            className="rounded bg-amber-500 px-3 py-2 text-sm font-semibold text-slate-950 hover:bg-amber-400"
+          >
+            Neues Spiel
+          </button>
+        </div>
+      </div>
+
+      {showCreate && (
+        <form onSubmit={handleCreate} className="mb-6 flex flex-col gap-3 rounded-lg border border-slate-800 bg-slate-900 p-4">
+          <input
+            required
+            placeholder="Name des Spiels"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            className="rounded bg-slate-800 px-3 py-2 outline-none focus:ring-2 focus:ring-amber-400"
+          />
+          <textarea
+            placeholder="Kurzbeschreibung (Genre, Welt, ...)"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            className="rounded bg-slate-800 px-3 py-2 outline-none focus:ring-2 focus:ring-amber-400"
+            rows={3}
+          />
+          <button
+            type="submit"
+            className="self-start rounded bg-amber-500 px-3 py-2 text-sm font-semibold text-slate-950 hover:bg-amber-400"
+          >
+            Erstellen
+          </button>
+        </form>
+      )}
+
+      {error && <p className="mb-4 text-sm text-red-400">{error}</p>}
+
+      {loading ? (
+        <p className="text-slate-400">Lädt…</p>
+      ) : games.length === 0 ? (
+        <p className="text-slate-400">Noch keine Spiele vorhanden.</p>
+      ) : (
+        <div className="flex flex-col gap-3">
+          {games.map((game) => (
+            <GameCard key={game.id} game={game} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}