From 1bbbe31500a301d11a96a01c583600e418cfb1fd Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Sun, 2 Aug 2026 09:21:01 +0200
Subject: [PATCH] Hide game sheet sections and winner selection until game has
 started

Wrapped WinnerBadge, SheetSection grid, and WinnerCard components in conditional rendering based on `gameStarted` flag derived from game metadata's `started` property. Prevents display of game content in lobby state before host initiates gameplay.
---
 frontend/src/App.jsx | 60 ++++++++++++++++++++++++--------------------
 1 file changed, 33 insertions(+), 27 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 516d2fd..35b3d74 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -622,6 +622,7 @@ export default function App() {
     : [];
 
   const isHost = !!(me?.id && gameMeta?.host_user_id && me.id === gameMeta.host_user_id);
+  const gameStarted = !!gameMeta?.started;
 
   return (
     <div style={styles.page}>
@@ -666,38 +667,43 @@ export default function App() {
           onStartGame={startGame}
         />
 
-        {/* Sieger Badge: zwischen Spiel und Verdächtigte Person */}
-        <WinnerBadge
-          winner={{
-            display_name: gameMeta?.winner_display_name || "",
-            email: gameMeta?.winner_email || "",
-          }}
-        />
+        {gameStarted && (
+          <WinnerBadge
+            winner={{
+              display_name: gameMeta?.winner_display_name || "",
+              email: gameMeta?.winner_email || "",
+            }}
+          />
+        )}
 
         <HelpModal open={helpOpen} onClose={() => setHelpOpen(false)} />
 
-        <div style={{ marginTop: 14, display: "grid", gap: 14 }}>
-          {sections.map((sec) => (
-            <SheetSection
-              key={sec.key}
-              title={sec.title}
-              entries={sec.entries}
-              pulseId={pulseId}
-              onCycleStatus={cycleStatus}
-              onToggleTag={toggleTag}
-              displayTag={displayTag}
-            />
-          ))}
-        </div>
+        {gameStarted && (
+          <div style={{ marginTop: 14, display: "grid", gap: 14 }}>
+            {sections.map((sec) => (
+              <SheetSection
+                key={sec.key}
+                title={sec.title}
+                entries={sec.entries}
+                pulseId={pulseId}
+                onCycleStatus={cycleStatus}
+                onToggleTag={toggleTag}
+                displayTag={displayTag}
+              />
+            ))}
+          </div>
+        )}
 
         {/* Host-only Winner Auswahl */}
-        <WinnerCard
-          isHost={isHost}
-          members={members}
-          winnerUserId={winnerUserId}
-          setWinnerUserId={setWinnerUserId}
-          onSave={saveWinner}
-        />
+        {gameStarted && (
+          <WinnerCard
+            isHost={isHost}
+            members={members}
+            winnerUserId={winnerUserId}
+            setWinnerUserId={setWinnerUserId}
+            onSave={saveWinner}
+          />
+        )}
 
         <div style={{ height: 24 }} />
       </div>