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 isHost = !!(me?.id && gameMeta?.host_user_id && me.id === gameMeta.host_user_id);
const gameStarted = !!gameMeta?.started;
return ( return (
<div style={styles.page}> <div style={styles.page}>
@@ -660,42 +661,49 @@ export default function App() {
hostUserId={gameMeta?.host_user_id || ""} hostUserId={gameMeta?.host_user_id || ""}
isHost={isHost} isHost={isHost}
started={!!gameMeta?.started} started={!!gameMeta?.started}
finished={!!gameMeta?.winner_user_id}
winnerName={gameMeta?.winner_display_name || gameMeta?.winner_email || ""}
chipCount={gameChips.length} chipCount={gameChips.length}
onStartGame={startGame} onStartGame={startGame}
/> />
{/* Sieger Badge: zwischen Spiel und Verdächtigte Person */} {gameStarted && (
<WinnerBadge <WinnerBadge
winner={{ winner={{
display_name: gameMeta?.winner_display_name || "", display_name: gameMeta?.winner_display_name || "",
email: gameMeta?.winner_email || "", email: gameMeta?.winner_email || "",
}} }}
/> />
)}
<HelpModal open={helpOpen} onClose={() => setHelpOpen(false)} /> <HelpModal open={helpOpen} onClose={() => setHelpOpen(false)} />
<div style={{ marginTop: 14, display: "grid", gap: 14 }}> {gameStarted && (
{sections.map((sec) => ( <div style={{ marginTop: 14, display: "grid", gap: 14 }}>
<SheetSection {sections.map((sec) => (
key={sec.key} <SheetSection
title={sec.title} key={sec.key}
entries={sec.entries} title={sec.title}
pulseId={pulseId} entries={sec.entries}
onCycleStatus={cycleStatus} pulseId={pulseId}
onToggleTag={toggleTag} onCycleStatus={cycleStatus}
displayTag={displayTag} onToggleTag={toggleTag}
/> displayTag={displayTag}
))} />
</div> ))}
</div>
)}
{/* Host-only Winner Auswahl */} {/* Host-only Winner Auswahl */}
<WinnerCard {gameStarted && (
isHost={isHost} <WinnerCard
members={members} isHost={isHost}
winnerUserId={winnerUserId} members={members}
setWinnerUserId={setWinnerUserId} winnerUserId={winnerUserId}
onSave={saveWinner} setWinnerUserId={setWinnerUserId}
/> onSave={saveWinner}
/>
)}
<div style={{ height: 24 }} /> <div style={{ height: 24 }} />
</div> </div>
+6 -2
View File
@@ -12,6 +12,8 @@ export default function GamePickerCard({
hostUserId, hostUserId,
isHost = false, isHost = false,
started = false, started = false,
finished = false,
winnerName = "",
chipCount = 0, chipCount = 0,
onStartGame, onStartGame,
}) { }) {
@@ -175,8 +177,10 @@ export default function GamePickerCard({
{startError && <div style={{ marginTop: 8, color: "#ffb3b3", fontSize: 12 }}>{startError}</div>} {startError && <div style={{ marginTop: 8, color: "#ffb3b3", fontSize: 12 }}>{startError}</div>}
</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 }}> <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 }}>
Spiel läuft · {chipCount} Spieler-Chips erstellt {finished
? `🏆 Spiel beendet${winnerName ? ` · Sieger: ${winnerName}` : ""}`
: `✓ Spiel läuft · ${chipCount} Spieler-Chips erstellt`}
</div> </div>
)} )}