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.
This commit is contained in:
@@ -514,6 +514,7 @@ export default function App() {
|
|||||||
gameId={gameId}
|
gameId={gameId}
|
||||||
setGameId={setGameId}
|
setGameId={setGameId}
|
||||||
onOpenHelp={() => setHelpOpen(true)}
|
onOpenHelp={() => setHelpOpen(true)}
|
||||||
|
members={members}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Sieger Badge: zwischen Spiel und Verdächtigte Person */}
|
{/* Sieger Badge: zwischen Spiel und Verdächtigte Person */}
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import React from "react";
|
|||||||
import { styles } from "../styles/styles";
|
import { styles } from "../styles/styles";
|
||||||
import { stylesTokens } from "../styles/theme";
|
import { stylesTokens } from "../styles/theme";
|
||||||
|
|
||||||
export default function GamePickerCard({ games, gameId, setGameId, onOpenHelp }) {
|
export default function GamePickerCard({ games, gameId, setGameId, onOpenHelp, members = [] }) {
|
||||||
return (
|
return (
|
||||||
<div style={{ marginTop: 14 }}>
|
<div style={{ marginTop: 14 }}>
|
||||||
<div style={styles.card}>
|
<div style={styles.card}>
|
||||||
@@ -36,6 +36,37 @@ export default function GamePickerCard({ games, gameId, setGameId, onOpenHelp })
|
|||||||
</div>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -12,7 +12,6 @@ export default function NewGameModal({
|
|||||||
currentCode = "",
|
currentCode = "",
|
||||||
gameFinished = false,
|
gameFinished = false,
|
||||||
hasGame = false,
|
hasGame = false,
|
||||||
currentMembers = [],
|
|
||||||
}) {
|
}) {
|
||||||
// modes: running | choice | create | join
|
// modes: running | choice | create | join
|
||||||
const [mode, setMode] = useState("choice");
|
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 */}
|
{/* ✅ CHOICE: nur wenn Spiel beendet oder kein Spiel selected */}
|
||||||
{mode === "choice" && (
|
{mode === "choice" && (
|
||||||
|
|||||||
Reference in New Issue
Block a user