From 3cbb4ce89a6723e7be1adb54dbc30dd8418c7b91 Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Fri, 6 Feb 2026 14:17:39 +0100
Subject: [PATCH] Enhance new game modal with running game state handling

Introduced functionality to detect and handle ongoing games in the new game modal. The modal now switches between "running" and "choice" modes based on game state, improving clarity for users. Added a dedicated section to display the game code when a game is active.
---
 frontend/src/App.jsx                     | 15 +++-
 frontend/src/components/NewGameModal.jsx | 96 ++++++++++++++++++++++--
 2 files changed, 104 insertions(+), 7 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 9d9f07e..fd762f8 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -263,6 +263,15 @@ export default function App() {
 
   // ===== New game flow =====
   const createGame = async () => {
+    // ✅ wichtig: alten Game-State weg, damit nix "hängen" bleibt
+    setSheet(null);
+    setGameMeta(null);
+    setMembers([]);
+    setWinnerUserId("");
+    setPulseId(null);
+    setChipOpen(false);
+    setChipEntry(null);
+
     const g = await api("/games", {
       method: "POST",
       body: JSON.stringify({ name: "Spiel " + new Date().toLocaleString() }),
@@ -270,9 +279,10 @@ export default function App() {
 
     const gs = await api("/games");
     setGames(gs);
+
+    // ✅ auf neues Spiel wechseln (triggered dann reloadSheet/loadGameMeta via effect)
     setGameId(g.id);
 
-    // meta/members will load via gameId effect
     return g; // includes code
   };
 
@@ -503,6 +513,9 @@ export default function App() {
         onClose={() => setNewGameOpen(false)}
         onCreate={createGame}
         onJoin={joinGame}
+        currentCode={gameMeta?.code || ""}
+        gameFinished={!!gameMeta?.winner_user_id}
+        hasGame={!!gameId}
       />
 
       <ChipModal
diff --git a/frontend/src/components/NewGameModal.jsx b/frontend/src/components/NewGameModal.jsx
index 4fc036f..d77048e 100644
--- a/frontend/src/components/NewGameModal.jsx
+++ b/frontend/src/components/NewGameModal.jsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
 
@@ -7,8 +7,14 @@ export default function NewGameModal({
   onClose,
   onCreate,
   onJoin,
+
+  // ✅ neu:
+  currentCode = "",
+  gameFinished = false,
+  hasGame = false,
 }) {
-  const [mode, setMode] = useState("choice"); // choice | create | join
+  // modes: running | choice | create | join
+  const [mode, setMode] = useState("choice");
   const [joinCode, setJoinCode] = useState("");
   const [err, setErr] = useState("");
   const [created, setCreated] = useState(null); // { code }
@@ -16,6 +22,23 @@ export default function NewGameModal({
 
   const canJoin = useMemo(() => joinCode.trim().length >= 4, [joinCode]);
 
+  // ✅ wichtig: beim Öffnen entscheidet der Modus anhand "läuft vs beendet"
+  useEffect(() => {
+    if (!open) return;
+
+    setErr("");
+    setToast("");
+    setJoinCode("");
+    setCreated(null);
+
+    // Wenn ein Spiel läuft (und nicht finished) -> nur Code anzeigen
+    if (hasGame && !gameFinished) {
+      setMode("running");
+    } else {
+      setMode("choice");
+    }
+  }, [open, hasGame, gameFinished]);
+
   if (!open) return null;
 
   const showToast = (msg) => {
@@ -44,15 +67,19 @@ export default function NewGameModal({
     }
   };
 
-  const copyCode = async () => {
+  const copyText = async (text, okMsg = "✅ Code kopiert") => {
     try {
-      await navigator.clipboard.writeText(created?.code || "");
-      showToast("✅ Code kopiert");
+      await navigator.clipboard.writeText(text || "");
+      showToast(okMsg);
     } catch {
       showToast("❌ Copy nicht möglich");
     }
   };
 
+  const codeToShow =
+    (created?.code || "").trim() ||
+    (currentCode || "").trim();
+
   return (
     <div style={styles.modalOverlay} onMouseDown={onClose}>
       <div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
@@ -85,6 +112,63 @@ export default function NewGameModal({
         )}
 
         <div style={{ marginTop: 12, display: "grid", gap: 10 }}>
+          {/* ✅ RUNNING: Nur Code anzeigen, keine Choice */}
+          {mode === "running" && (
+            <>
+              <div style={{ color: stylesTokens.textMain, opacity: 0.92 }}>
+                Das Spiel läuft noch. Hier ist der <b>Join-Code</b>:
+              </div>
+
+              <div
+                style={{
+                  display: "grid",
+                  gap: 8,
+                  padding: 12,
+                  borderRadius: 16,
+                  border: `1px solid ${stylesTokens.panelBorder}`,
+                  background: stylesTokens.panelBg,
+                  textAlign: "center",
+                }}
+              >
+                <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
+                  Spiel-Code
+                </div>
+
+                <div
+                  style={{
+                    fontSize: 28,
+                    fontWeight: 1100,
+                    letterSpacing: 2,
+                    color: stylesTokens.textGold,
+                    fontFamily: '"Cinzel Decorative", "IM Fell English", system-ui',
+                  }}
+                >
+                  {codeToShow || "—"}
+                </div>
+
+                <button
+                  onClick={() => copyText(codeToShow)}
+                  style={styles.primaryBtn}
+                  disabled={!codeToShow}
+                  title={!codeToShow ? "Kein Code verfügbar" : "Code kopieren"}
+                >
+                  ⧉ Code kopieren
+                </button>
+              </div>
+
+              <div style={{ fontSize: 12, opacity: 0.75, color: stylesTokens.textDim }}>
+                Sobald ein Sieger gesetzt wurde, kannst du hier ein neues Spiel erstellen oder beitreten.
+              </div>
+
+              <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
+                <button onClick={onClose} style={styles.primaryBtn}>
+                  Fertig
+                </button>
+              </div>
+            </>
+          )}
+
+          {/* ✅ CHOICE: nur wenn Spiel beendet oder kein Spiel selected */}
           {mode === "choice" && (
             <>
               <div style={{ color: stylesTokens.textMain, opacity: 0.92 }}>
@@ -159,7 +243,7 @@ export default function NewGameModal({
                   {created.code}
                 </div>
 
-                <button onClick={copyCode} style={styles.primaryBtn}>
+                <button onClick={() => copyText(created?.code || "")} style={styles.primaryBtn}>
                   ⧉ Code kopieren
                 </button>
               </div>