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" && (
<>