From d4e629b2118f8fe9c00d00d119a624d8ae674cad Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Fri, 6 Feb 2026 14:53:11 +0100
Subject: [PATCH] Enhance member display in GamePickerCard and remove
 redundancy

Added functionality to display members in GamePickerCard, replacing the previously redundant implementation in NewGameModal. This change centralizes member display logic, reducing code duplication and improving maintainability.
---
 frontend/src/App.jsx                       |  1 +
 frontend/src/components/GamePickerCard.jsx | 33 ++++++++++++++++-
 frontend/src/components/NewGameModal.jsx   | 41 ----------------------
 3 files changed, 33 insertions(+), 42 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 3b54669..ff3a337 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -514,6 +514,7 @@ export default function App() {
           gameId={gameId}
           setGameId={setGameId}
           onOpenHelp={() => setHelpOpen(true)}
+          members={members}
         />
 
         {/* Sieger Badge: zwischen Spiel und Verdächtigte Person */}
diff --git a/frontend/src/components/GamePickerCard.jsx b/frontend/src/components/GamePickerCard.jsx
index 45578c7..90c616f 100644
--- a/frontend/src/components/GamePickerCard.jsx
+++ b/frontend/src/components/GamePickerCard.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import { styles } from "../styles/styles";
 import { stylesTokens } from "../styles/theme";
 
-export default function GamePickerCard({ games, gameId, setGameId, onOpenHelp }) {
+export default function GamePickerCard({ games, gameId, setGameId, onOpenHelp, members = [] }) {
   return (
     <div style={{ marginTop: 14 }}>
       <div style={styles.card}>
@@ -36,6 +36,37 @@ export default function GamePickerCard({ games, gameId, setGameId, onOpenHelp })
             </div>
           );
         })()}
+
+        {members?.length > 0 && (
+          <div style={{ marginTop: 8 }}>
+            <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
+              Spieler ({members.length})
+            </div>
+
+            <div style={{ marginTop: 6, display: "flex", flexWrap: "wrap", gap: 8 }}>
+              {members.map((m) => {
+                const name = ((m.display_name || "").trim() || (m.email || "").trim() || "—");
+                return (
+                  <div
+                    key={m.id}
+                    style={{
+                      padding: "6px 10px",
+                      borderRadius: 999,
+                      border: "1px solid rgba(233,216,166,0.18)",
+                      background: "rgba(10,10,12,0.35)",
+                      color: stylesTokens.textMain,
+                      fontSize: 13,
+                      fontWeight: 900,
+                    }}
+                  >
+                    {name}
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        )}
+
       </div>
     </div>
   );
diff --git a/frontend/src/components/NewGameModal.jsx b/frontend/src/components/NewGameModal.jsx
index 4b01079..04d291e 100644
--- a/frontend/src/components/NewGameModal.jsx
+++ b/frontend/src/components/NewGameModal.jsx
@@ -12,7 +12,6 @@ export default function NewGameModal({
   currentCode = "",
   gameFinished = false,
   hasGame = false,
-  currentMembers = [],
 }) {
   // modes: running | choice | create | join
   const [mode, setMode] = useState("choice");
@@ -169,46 +168,6 @@ export default function NewGameModal({
             </>
           )}
 
-          {currentMembers?.length > 0 && (
-            <div
-              style={{
-                marginTop: 10,
-                padding: 10,
-                borderRadius: 14,
-                border: `1px solid ${stylesTokens.panelBorder}`,
-                background: stylesTokens.panelBg,
-                display: "grid",
-                gap: 8,
-              }}
-            >
-              <div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
-                Aktuelle Spieler ({currentMembers.length})
-              </div>
-
-              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
-                {currentMembers.map((m) => {
-                  const name = ((m.display_name || "").trim() || (m.email || "").trim() || "—");
-                  return (
-                    <div
-                      key={m.id}
-                      style={{
-                        padding: "6px 10px",
-                        borderRadius: 999,
-                        border: `1px solid rgba(233,216,166,0.18)`,
-                        background: "rgba(10,10,12,0.35)",
-                        color: stylesTokens.textMain,
-                        fontSize: 13,
-                        fontWeight: 900,
-                      }}
-                    >
-                      {name}
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-          )}
-
 
           {/* ✅ CHOICE: nur wenn Spiel beendet oder kein Spiel selected */}
           {mode === "choice" && (