From 46c60449484cbf5484ae665172bc70b5bd83e33c Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Sun, 2 Aug 2026 09:20:26 +0200
Subject: [PATCH] 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).
---
 frontend/src/App.jsx                       | 2 ++
 frontend/src/components/GamePickerCard.jsx | 8 ++++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 80a3234..516d2fd 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -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}
         />
diff --git a/frontend/src/components/GamePickerCard.jsx b/frontend/src/components/GamePickerCard.jsx
index 6a253ba..7cb06f4 100644
--- a/frontend/src/components/GamePickerCard.jsx
+++ b/frontend/src/components/GamePickerCard.jsx
@@ -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>
         )}