dev #4

Merged
nessi merged 25 commits from dev into main 2026-02-06 13:36:47 +00:00
2 changed files with 104 additions and 7 deletions
Showing only changes of commit 3cbb4ce89a - Show all commits

View File

@@ -263,6 +263,15 @@ export default function App() {
// ===== New game flow =====
const createGame = async () => {
// ✅ wichtig: alten Game-State weg, damit nix "hängen" bleibt
setSheet(null);
setGameMeta(null);
setMembers([]);
setWinnerUserId("");
setPulseId(null);
setChipOpen(false);
setChipEntry(null);
const g = await api("/games", {
method: "POST",
body: JSON.stringify({ name: "Spiel " + new Date().toLocaleString() }),
@@ -270,9 +279,10 @@ export default function App() {
const gs = await api("/games");
setGames(gs);
// ✅ auf neues Spiel wechseln (triggered dann reloadSheet/loadGameMeta via effect)
setGameId(g.id);
// meta/members will load via gameId effect
return g; // includes code
};
@@ -503,6 +513,9 @@ export default function App() {
onClose={() => setNewGameOpen(false)}
onCreate={createGame}
onJoin={joinGame}
currentCode={gameMeta?.code || ""}
gameFinished={!!gameMeta?.winner_user_id}
hasGame={!!gameId}
/>
<ChipModal

View File

@@ -1,4 +1,4 @@
import React, { useMemo, useState } from "react";
import React, { useEffect, useMemo, useState } from "react";
import { styles } from "../styles/styles";
import { stylesTokens } from "../styles/theme";
@@ -7,8 +7,14 @@ export default function NewGameModal({
onClose,
onCreate,
onJoin,
// ✅ neu:
currentCode = "",
gameFinished = false,
hasGame = false,
}) {
const [mode, setMode] = useState("choice"); // choice | create | join
// modes: running | choice | create | join
const [mode, setMode] = useState("choice");
const [joinCode, setJoinCode] = useState("");
const [err, setErr] = useState("");
const [created, setCreated] = useState(null); // { code }
@@ -16,6 +22,23 @@ export default function NewGameModal({
const canJoin = useMemo(() => joinCode.trim().length >= 4, [joinCode]);
// ✅ wichtig: beim Öffnen entscheidet der Modus anhand "läuft vs beendet"
useEffect(() => {
if (!open) return;
setErr("");
setToast("");
setJoinCode("");
setCreated(null);
// Wenn ein Spiel läuft (und nicht finished) -> nur Code anzeigen
if (hasGame && !gameFinished) {
setMode("running");
} else {
setMode("choice");
}
}, [open, hasGame, gameFinished]);
if (!open) return null;
const showToast = (msg) => {
@@ -44,15 +67,19 @@ export default function NewGameModal({
}
};
const copyCode = async () => {
const copyText = async (text, okMsg = "✅ Code kopiert") => {
try {
await navigator.clipboard.writeText(created?.code || "");
showToast("✅ Code kopiert");
await navigator.clipboard.writeText(text || "");
showToast(okMsg);
} catch {
showToast("❌ Copy nicht möglich");
}
};
const codeToShow =
(created?.code || "").trim() ||
(currentCode || "").trim();
return (
<div style={styles.modalOverlay} onMouseDown={onClose}>
<div style={styles.modalCard} onMouseDown={(e) => e.stopPropagation()}>
@@ -85,6 +112,63 @@ export default function NewGameModal({
)}
<div style={{ marginTop: 12, display: "grid", gap: 10 }}>
{/* ✅ RUNNING: Nur Code anzeigen, keine Choice */}
{mode === "running" && (
<>
<div style={{ color: stylesTokens.textMain, opacity: 0.92 }}>
Das Spiel läuft noch. Hier ist der <b>Join-Code</b>:
</div>
<div
style={{
display: "grid",
gap: 8,
padding: 12,
borderRadius: 16,
border: `1px solid ${stylesTokens.panelBorder}`,
background: stylesTokens.panelBg,
textAlign: "center",
}}
>
<div style={{ fontSize: 12, opacity: 0.8, color: stylesTokens.textDim }}>
Spiel-Code
</div>
<div
style={{
fontSize: 28,
fontWeight: 1100,
letterSpacing: 2,
color: stylesTokens.textGold,
fontFamily: '"Cinzel Decorative", "IM Fell English", system-ui',
}}
>
{codeToShow || "—"}
</div>
<button
onClick={() => copyText(codeToShow)}
style={styles.primaryBtn}
disabled={!codeToShow}
title={!codeToShow ? "Kein Code verfügbar" : "Code kopieren"}
>
Code kopieren
</button>
</div>
<div style={{ fontSize: 12, opacity: 0.75, color: stylesTokens.textDim }}>
Sobald ein Sieger gesetzt wurde, kannst du hier ein neues Spiel erstellen oder beitreten.
</div>
<div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
<button onClick={onClose} style={styles.primaryBtn}>
Fertig
</button>
</div>
</>
)}
{/* ✅ CHOICE: nur wenn Spiel beendet oder kein Spiel selected */}
{mode === "choice" && (
<>
<div style={{ color: stylesTokens.textMain, opacity: 0.92 }}>
@@ -159,7 +243,7 @@ export default function NewGameModal({
{created.code}
</div>
<button onClick={copyCode} style={styles.primaryBtn}>
<button onClick={() => copyText(created?.code || "")} style={styles.primaryBtn}>
Code kopieren
</button>
</div>