Integrate join codes, player management, and themes

This update introduces "join codes" for games to simplify game joining. Enhancements include player role and winner management for better organization. Additionally, theme preferences are now user-configurable and persisted server-side.
2026-02-06 11:08:41 +01:00
parent be0f5e9a9f
commit d0f65b856e
10 changed files with 564 additions and 147 deletions
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,16 +1,13 @@
 // src/App.jsx
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";

 import { api } from "./api/client";
 import { cycleTag } from "./utils/cycleTag";
-import { getChipLS, setChipLS, clearChipLS } from "./utils/chipStorage";
-
-import { getWinnerLS, setWinnerLS, clearWinnerLS } from "./utils/winnerStorage";

 import { useHpGlobalStyles } from "./styles/hooks/useHpGlobalStyles";
 import { styles } from "./styles/styles";

-import { applyTheme, loadThemeKey, saveThemeKey, DEFAULT_THEME_KEY } from "./styles/themes";
+import { applyTheme, DEFAULT_THEME_KEY } from "./styles/themes";

 import AdminPanel from "./components/AdminPanel";
 import LoginPage from "./components/LoginPage";
@@ -23,6 +20,7 @@ import SheetSection from "./components/SheetSection";
 import DesignModal from "./components/DesignModal";
 import WinnerCard from "./components/WinnerCard";
 import WinnerBadge from "./components/WinnerBadge";
+import JoinGameModal from "./components/JoinGameModal";

 export default function App() {
  useHpGlobalStyles();
@@ -39,8 +37,10 @@ export default function App() {
  const [sheet, setSheet] = useState(null);
  const [pulseId, setPulseId] = useState(null);

-  // Winner (per game)
-  const [winnerName, setWinnerName] = useState("");
+  // Game meta / players / winner
+  const [gameMeta, setGameMeta] = useState(null);
+  const [players, setPlayers] = useState([]);
+  const [winnerUserId, setWinnerUserId] = useState(null);

  // Modals
  const [helpOpen, setHelpOpen] = useState(false);
@@ -60,13 +60,20 @@ export default function App() {
  const [designOpen, setDesignOpen] = useState(false);
  const [themeKey, setThemeKey] = useState(DEFAULT_THEME_KEY);

+  // Join game
+  const [joinOpen, setJoinOpen] = useState(false);
+
+  const currentGame = useMemo(
+    () => games.find((g) => String(g.id) === String(gameId)) || null,
+    [games, gameId]
+  );
+
  // ===== Data loaders =====
  const load = async () => {
    const m = await api("/auth/me");
    setMe(m);

-    // Theme pro User laden & anwenden
-    const tk = loadThemeKey(m?.email);
+    const tk = m?.theme_key || DEFAULT_THEME_KEY;
    setThemeKey(tk);
    applyTheme(tk);

@@ -82,6 +89,19 @@ export default function App() {
    setSheet(sh);
  };

+  const reloadMeta = async () => {
+    if (!gameId) return;
+    const meta = await api(`/games/${gameId}/meta`);
+    setGameMeta(meta);
+    setWinnerUserId(meta?.winner?.id || null);
+  };
+
+  const reloadPlayers = async () => {
+    if (!gameId) return;
+    const ps = await api(`/games/${gameId}/players`);
+    setPlayers(ps);
+  };
+
  // ===== Effects =====

  // Dropdown outside click
@@ -106,19 +126,13 @@ export default function App() {
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

-  // load sheet + winner when game changes
+  // load sheet/meta when game changes
  useEffect(() => {
    (async () => {
      if (!gameId) return;
-
      try {
-        await reloadSheet();
-      } catch {
-        // ignore
-      }
-
-      // Sieger pro Game aus localStorage laden
-      setWinnerName(getWinnerLS(gameId));
+        await Promise.all([reloadSheet(), reloadMeta(), reloadPlayers()]);
+      } catch {}
    })();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [gameId]);
@@ -138,7 +152,9 @@ export default function App() {
    setGames([]);
    setGameId(null);
    setSheet(null);
-    setWinnerName("");
+    setGameMeta(null);
+    setPlayers([]);
+    setWinnerUserId(null);
  };

  // ===== Password change =====
@@ -184,10 +200,19 @@ export default function App() {
    setUserMenuOpen(false);
  };

-  const selectTheme = (key) => {
+  const selectTheme = async (key) => {
    setThemeKey(key);
    applyTheme(key);
-    saveThemeKey(me?.email, key);
+
+    try {
+      await api("/auth/theme", {
+        method: "PATCH",
+        body: JSON.stringify({ theme_key: key }),
+      });
+      setMe((prev) => (prev ? { ...prev, theme_key: key } : prev));
+    } catch {
+      // ignore; UI already switched
+    }
  };

  // ===== Game actions =====
@@ -196,29 +221,34 @@ export default function App() {
      method: "POST",
      body: JSON.stringify({ name: "Spiel " + new Date().toLocaleString() }),
    });
-
    const gs = await api("/games");
    setGames(gs);
    setGameId(g.id);
-
-    // Neues Spiel -> Sieger leer
-    clearWinnerLS(g.id);
-    setWinnerName("");
  };

-  // ===== Winner actions =====
-  const saveWinner = () => {
+  const openJoinModal = () => {
+    setJoinOpen(true);
+    setUserMenuOpen(false);
+  };
+
+  const joinGame = async (code) => {
+    const res = await api("/games/join", {
+      method: "POST",
+      body: JSON.stringify({ code }),
+    });
+    const gs = await api("/games");
+    setGames(gs);
+    setGameId(res?.game?.id || null);
+  };
+
+  // ===== Winner actions (shared per game) =====
+  const saveWinner = async () => {
    if (!gameId) return;
-    const v = (winnerName || "").trim();
-
-    if (!v) {
-      clearWinnerLS(gameId);
-      setWinnerName("");
-      return;
-    }
-
-    setWinnerLS(gameId, v);
-    setWinnerName(v);
+    await api(`/games/${gameId}/winner`, {
+      method: "PATCH",
+      body: JSON.stringify({ winner_user_id: winnerUserId || null }),
+    });
+    await reloadMeta();
  };

  // ===== Sheet actions =====
@@ -248,8 +278,6 @@ export default function App() {
      return;
    }

-    if (next === null) clearChipLS(gameId, entry.entry_id);
-
    await api(`/games/${gameId}/sheet/${entry.entry_id}`, {
      method: "PATCH",
      body: JSON.stringify({ note_tag: next }),
@@ -265,12 +293,10 @@ export default function App() {
    setChipOpen(false);
    setChipEntry(null);

-    setChipLS(gameId, entry.entry_id, chip);
-
    try {
      await api(`/games/${gameId}/sheet/${entry.entry_id}`, {
        method: "PATCH",
-        body: JSON.stringify({ note_tag: "s" }),
+        body: JSON.stringify({ note_tag: "s", chip_code: chip }),
      });
    } finally {
      await reloadSheet();
@@ -287,8 +313,6 @@ export default function App() {
    setChipOpen(false);
    setChipEntry(null);

-    clearChipLS(gameId, entry.entry_id);
-
    try {
      await api(`/games/${gameId}/sheet/${entry.entry_id}`, {
        method: "PATCH",
@@ -303,8 +327,7 @@ export default function App() {
    const t = entry.note_tag;
    if (!t) return "—";
    if (t === "s") {
-      const chip = getChipLS(gameId, entry.entry_id);
-      return chip ? `s.${chip}` : "s";
+      return entry.chip_code ? `s.${entry.chip_code}` : "s";
    }
    return t;
  };
@@ -332,6 +355,8 @@ export default function App() {
      ]
    : [];

+  const winnerObj = gameMeta?.winner || null;
+
  return (
    <div style={styles.page}>
      <div style={styles.bgFixed} aria-hidden="true">
@@ -345,6 +370,7 @@ export default function App() {
          setUserMenuOpen={setUserMenuOpen}
          openPwModal={openPwModal}
          openDesignModal={openDesignModal}
+          openJoinModal={openJoinModal}
          doLogout={doLogout}
          newGame={newGame}
        />
@@ -355,13 +381,13 @@ export default function App() {
          games={games}
          gameId={gameId}
          setGameId={setGameId}
+          joinCode={currentGame?.join_code || ""}
          onOpenHelp={() => setHelpOpen(true)}
        />

-        <HelpModal open={helpOpen} onClose={() => setHelpOpen(false)} />
+        {winnerObj && <WinnerBadge winnerEmail={winnerObj.email} />}

-        {/* Sieger Badge: nur wenn gesetzt */}
-        <WinnerBadge winner={(winnerName || "").trim()} />
+        <HelpModal open={helpOpen} onClose={() => setHelpOpen(false)} />

        <div style={{ marginTop: 14, display: "grid", gap: 14 }}>
          {sections.map((sec) => (
@@ -377,8 +403,13 @@ export default function App() {
          ))}
        </div>

-        {/* Sieger ganz unten */}
-        <WinnerCard value={winnerName} setValue={setWinnerName} onSave={saveWinner} />
+        {/* Sieger (shared per Spiel) */}
+        <WinnerCard
+          players={players}
+          winnerUserId={winnerUserId}
+          setWinnerUserId={setWinnerUserId}
+          onSave={saveWinner}
+        />

        <div style={{ height: 24 }} />
      </div>
@@ -399,12 +430,21 @@ export default function App() {
        open={designOpen}
        onClose={() => setDesignOpen(false)}
        themeKey={themeKey}
-        onSelect={(k) => {
-          selectTheme(k);
+        onSelect={async (k) => {
+          await selectTheme(k);
          setDesignOpen(false);
        }}
      />

+      <JoinGameModal
+        open={joinOpen}
+        onClose={() => setJoinOpen(false)}
+        onJoin={async (code) => {
+          await joinGame(code);
+          setJoinOpen(false);
+        }}
+      />
+
      <ChipModal
        chipOpen={chipOpen}
        closeChipModalToDash={closeChipModalToDash}
--- a/frontend/src/components/GamePickerCard.jsx
+++ b/frontend/src/components/GamePickerCard.jsx
@@ -1,13 +1,9 @@
 // src/components/GamePickerCard.jsx
 import React from "react";
 import { styles } from "../styles/styles";
+import { stylesTokens } from "../styles/theme";

-export default function GamePickerCard({
-  games,
-  gameId,
-  setGameId,
-  onOpenHelp,
-}) {
+export default function GamePickerCard({ games, gameId, setGameId, joinCode, onOpenHelp }) {
  return (
    <div style={{ marginTop: 14 }}>
      <div style={styles.card}>
@@ -30,6 +26,19 @@ export default function GamePickerCard({
            Hilfe
          </button>
        </div>
+
+        {!!joinCode && (
+          <div
+            style={{
+              padding: "0 12px 12px",
+              fontSize: 12,
+              opacity: 0.85,
+              color: stylesTokens.textDim,
+            }}
+          >
+            Spiel-Code: <b style={{ color: stylesTokens.textGold }}>{joinCode}</b>
+          </div>
+        )}
      </div>
    </div>
  );
--- a/frontend/src/components/JoinGameModal.jsx
+++ b/frontend/src/components/JoinGameModal.jsx
@@ -0,0 +1,74 @@
+// src/components/JoinGameModal.jsx
+import React, { useEffect, useState } from "react";
+import { styles } from "../styles/styles";
+import { stylesTokens } from "../styles/theme";
+
+export default function JoinGameModal({ open, onClose, onJoin }) {
+  const [code, setCode] = useState("");
+  const [msg, setMsg] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setCode("");
+    setMsg("");
+    setBusy(false);
+  }, [open]);
+
+  if (!open) return null;
+
+  const doJoin = async () => {
+    const c = (code || "").trim();
+    if (!c) return setMsg("❌ Bitte Code eingeben.");
+    setBusy(true);
+    setMsg("");
+    try {
+      await onJoin(c);
+    } catch (e) {
+      setMsg("❌ Fehler: " + (e?.message || "unknown"));
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div style={styles.modalOverlay} onMouseDown={onClose}>
+      <div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
+        <div style={styles.modalHeader}>
+          <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>Spiel beitreten</div>
+          <button onClick={onClose} style={styles.modalCloseBtn} aria-label="Schließen">
+            ✕
+          </button>
+        </div>
+
+        <div style={{ marginTop: 12, display: "grid", gap: 10 }}>
+          <input
+            value={code}
+            onChange={(e) => setCode(e.target.value)}
+            placeholder="z.B. 123456"
+            style={styles.input}
+            inputMode="numeric"
+            autoFocus
+            onKeyDown={(e) => {
+              if (e.key === "Enter") doJoin();
+            }}
+          />
+
+          {msg && <div style={{ opacity: 0.92, color: stylesTokens.textMain }}>{msg}</div>}
+
+          <div style={{ display: "flex", gap: 8, justifyContent: "flex-end", marginTop: 4 }}>
+            <button onClick={onClose} style={styles.secondaryBtn} disabled={busy}>
+              Abbrechen
+            </button>
+            <button onClick={doJoin} style={styles.primaryBtn} disabled={busy}>
+              {busy ? "Beitreten..." : "Beitreten"}
+            </button>
+          </div>
+
+          <div style={{ fontSize: 12, opacity: 0.75, color: stylesTokens.textDim }}>
+            Tipp: Der Spiel-Code steht beim Host unter dem Spiel-Dropdown.
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/frontend/src/components/TopBar.jsx
+++ b/frontend/src/components/TopBar.jsx
@@ -8,16 +8,19 @@ export default function TopBar({
  setUserMenuOpen,
  openPwModal,
  openDesignModal,
+  openJoinModal,
  doLogout,
  newGame,
 }) {
  return (
    <div style={styles.topBar}>
+      {/* LINKS */}
      <div>
        <div style={{ fontWeight: 900, color: stylesTokens.textGold }}>Notizbogen</div>
        <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>{me.email}</div>
      </div>

+      {/* RECHTS */}
      <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "nowrap" }} data-user-menu>
        <div style={{ position: "relative" }}>
          <button onClick={() => setUserMenuOpen((v) => !v)} style={styles.userBtn} title="User Menü">
@@ -28,13 +31,14 @@ export default function TopBar({

          {userMenuOpen && (
            <div style={styles.userDropdown}>
+              {/* Email Info */}
              <div
                style={{
                  padding: "10px 12px",
                  fontSize: 13,
                  opacity: 0.85,
                  color: stylesTokens.textDim,
-                  borderBottom: "1px solid rgba(233,216,166,0.12)",
+                  borderBottom: `1px solid ${stylesTokens.goldLine}`,
                }}
              >
                {me.email}
@@ -44,10 +48,26 @@ export default function TopBar({
                Passwort setzen
              </button>

-              <button onClick={openDesignModal} style={styles.userDropdownItem}>
+              <button
+                onClick={() => {
+                  setUserMenuOpen(false);
+                  openDesignModal();
+                }}
+                style={styles.userDropdownItem}
+              >
                Design ändern
              </button>

+              <button
+                onClick={() => {
+                  setUserMenuOpen(false);
+                  openJoinModal();
+                }}
+                style={styles.userDropdownItem}
+              >
+                Spiel beitreten
+              </button>
+
              <div style={styles.userDropdownDivider} />

              <button
@@ -64,7 +84,7 @@ export default function TopBar({
        </div>

        <button onClick={newGame} style={styles.primaryBtn}>
-          ✦ New Game
+          ✦ Neues Spiel
        </button>
      </div>
    </div>
--- a/frontend/src/components/WinnerBadge.jsx
+++ b/frontend/src/components/WinnerBadge.jsx
@@ -1,43 +1,27 @@
-// src/components/WinnerBadge.jsx
 import React from "react";
-import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";

-export default function WinnerBadge({ winner }) {
-  const w = (winner || "").trim();
-  if (!w) return null;
+export default function WinnerBadge({ winnerEmail }) {
+  if (!winnerEmail) return null;

  return (
-    <div style={{ marginTop: 14 }}>
-      <div
-        style={{
-          ...styles.card,
-          padding: 12,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          gap: 10,
-        }}
-      >
-        <div>
-          <div style={{ fontWeight: 1000, color: stylesTokens.textGold }}>🏆 Sieger</div>
-          <div style={{ marginTop: 2, color: stylesTokens.textMain, opacity: 0.95 }}>{w}</div>
-        </div>
-
-        <div
-          style={{
-            padding: "8px 12px",
-            borderRadius: 999,
-            border: `1px solid ${stylesTokens.panelBorder}`,
-            background: stylesTokens.panelBg,
-            color: stylesTokens.textGold,
-            fontWeight: 1000,
-            whiteSpace: "nowrap",
-          }}
-        >
-          Gewonnen
-        </div>
-      </div>
+    <div
+      style={{
+        marginTop: 14,
+        padding: "12px 14px",
+        borderRadius: 16,
+        border: `1px solid ${stylesTokens.panelBorder}`,
+        background: stylesTokens.panelBg,
+        boxShadow: "0 12px 30px rgba(0,0,0,0.45)",
+        backdropFilter: "blur(6px)",
+        display: "flex",
+        gap: 10,
+        alignItems: "center",
+      }}
+    >
+      <span style={{ fontSize: 16 }}>🏆</span>
+      <span style={{ fontWeight: 1000, color: stylesTokens.textGold }}>Sieger:</span>
+      <span style={{ color: stylesTokens.textMain }}>{winnerEmail}</span>
    </div>
  );
 }
--- a/frontend/src/components/WinnerCard.jsx
+++ b/frontend/src/components/WinnerCard.jsx
@@ -1,31 +1,55 @@
+// src/components/WinnerCard.jsx
 import React from "react";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";

-export default function WinnerCard({ value, setValue, onSave }) {
+/**
+ * props:
+ * - players: [{id,email}]
+ * - winnerUserId: string|null
+ * - setWinnerUserId: fn
+ * - onSave: fn (async ok)
+ */
+export default function WinnerCard({ players, winnerUserId, setWinnerUserId, onSave }) {
+  const hasPlayers = Array.isArray(players) && players.length > 0;
+
  return (
    <div style={{ marginTop: 14 }}>
      <div style={styles.card}>
        <div style={styles.sectionHeader}>Sieger</div>

-        <div style={styles.cardBody}>
-          <input
-            value={value}
-            onChange={(e) => setValue(e.target.value)}
-            placeholder="Name des Siegers"
-            style={{ ...styles.input, flex: 1 }}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") onSave();
-            }}
-          />
+        <div style={{ padding: 12, display: "grid", gap: 10 }}>
+          {!hasPlayers ? (
+            <div style={{ color: stylesTokens.textDim, opacity: 0.9 }}>
+              Keine Spieler gefunden (Admin wird nicht angezeigt).
+            </div>
+          ) : (
+            <select
+              value={winnerUserId || ""}
+              onChange={(e) => setWinnerUserId(e.target.value || null)}
+              style={styles.input}
+            >
+              <option value="">— kein Sieger gesetzt —</option>
+              {players.map((p) => (
+                <option key={p.id} value={p.id}>
+                  {p.email}
+                </option>
+              ))}
+            </select>
+          )}

-          <button onClick={onSave} style={styles.primaryBtn} title="Speichern">
-            Speichern
-          </button>
-        </div>
+          <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
+            <button onClick={() => setWinnerUserId(null)} style={styles.secondaryBtn}>
+              Leeren
+            </button>
+            <button onClick={onSave} style={styles.primaryBtn} disabled={!hasPlayers}>
+              Speichern
+            </button>
+          </div>

-        <div style={{ padding: "0 12px 12px", fontSize: 12, color: stylesTokens.textDim }}>
-          Wird pro Spiel lokal gespeichert.
+          <div style={{ fontSize: 12, opacity: 0.75, color: stylesTokens.textDim }}>
+            Der Sieger wird im Spiel gespeichert und ist für alle Spieler sichtbar.
+          </div>
        </div>
      </div>
    </div>