diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 19afbdf..3b54669 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,4 +1,5 @@ import React, { useEffect, useRef, useState } from "react"; +import { createPortal } from "react-dom"; import { api } from "./api/client"; import { cycleTag } from "./utils/cycleTag"; @@ -581,6 +582,7 @@ export default function App() { currentCode={gameMeta?.code || ""} gameFinished={!!gameMeta?.winner_user_id} hasGame={!!gameId} + currentMembers={members} /> {/* Bottom snack for joins */} - {snack && ( -
- {snack} -
- )} + {snack && + createPortal( +
+ {snack} +
, + document.body + ) + } ); } diff --git a/frontend/src/components/NewGameModal.jsx b/frontend/src/components/NewGameModal.jsx index d77048e..4b01079 100644 --- a/frontend/src/components/NewGameModal.jsx +++ b/frontend/src/components/NewGameModal.jsx @@ -12,6 +12,7 @@ export default function NewGameModal({ currentCode = "", gameFinished = false, hasGame = false, + currentMembers = [], }) { // modes: running | choice | create | join const [mode, setMode] = useState("choice"); @@ -168,6 +169,47 @@ export default function NewGameModal({ )} + {currentMembers?.length > 0 && ( +
+
+ Aktuelle Spieler ({currentMembers.length}) +
+ +
+ {currentMembers.map((m) => { + const name = ((m.display_name || "").trim() || (m.email || "").trim() || "—"); + return ( +
+ {name} +
+ ); + })} +
+
+ )} + + {/* ✅ CHOICE: nur wenn Spiel beendet oder kein Spiel selected */} {mode === "choice" && ( <>