Compare commits

...
2 Commits
Author SHA1 Message Date
nessi 1bbbe31500 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.
2026-08-02 09:21:01 +02:00
nessi 46c6044948 Add game completion status display with winner information to GamePickerCard
Implemented finished game state detection and winner display in the game picker UI. Added `finished` and `winnerName` props to GamePickerCard component, passed through from game metadata's `winner_user_id` and winner display name/email. Updated status message styling to show trophy icon and winner name when game is complete, with distinct background color (gold tint) to differentiate from active games (green tint).
2026-08-02 09:20:26 +02:00
2 changed files with 41 additions and 29 deletions
+35 -27
View File
@@ -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}>
@@ -660,42 +661,49 @@ export default function App() {
hostUserId={gameMeta?.host_user_id || ""}
isHost={isHost}
started={!!gameMeta?.started}
finished={!!gameMeta?.winner_user_id}
winnerName={gameMeta?.winner_display_name || gameMeta?.winner_email || ""}
chipCount={gameChips.length}
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>
+6 -2
View File
@@ -12,6 +12,8 @@ export default function GamePickerCard({
hostUserId,
isHost = false,
started = false,
finished = false,
winnerName = "",
chipCount = 0,
onStartGame,
}) {
@@ -175,8 +177,10 @@ export default function GamePickerCard({
{startError && <div style={{ marginTop: 8, color: "#ffb3b3", fontSize: 12 }}>{startError}</div>}
</div>
) : (
<div style={{ margin: "0 12px 12px", padding: "10px 12px", borderRadius: 13, border: `1px solid ${stylesTokens.panelBorder}`, background: "rgba(124,255,182,0.07)", color: stylesTokens.textDim, fontSize: 12 }}>
Spiel läuft · {chipCount} Spieler-Chips erstellt
<div style={{ margin: "0 12px 12px", padding: "10px 12px", borderRadius: 13, border: `1px solid ${stylesTokens.panelBorder}`, background: finished ? "rgba(233,216,166,0.09)" : "rgba(124,255,182,0.07)", color: stylesTokens.textDim, fontSize: 12 }}>
{finished
? `🏆 Spiel beendet${winnerName ? ` · Sieger: ${winnerName}` : ""}`
: `✓ Spiel läuft · ${chipCount} Spieler-Chips erstellt`}
</div>
)}