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).
This commit is contained in:
2026-08-02 09:20:26 +02:00
parent fd94753dcb
commit 46c6044948
2 changed files with 8 additions and 2 deletions
+2
View File
@@ -660,6 +660,8 @@ 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}
/>
+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>
)}