/* global React, Btn, Eyebrow, Display, Field, Wordmark, Monogram, FigureNum */
const { useState: useStateJoin, useEffect: useEffectJoin, useRef: useRefJoin } = React;
function savePlayerSession(code, playerId) {
try { localStorage.setItem(`kwist.player.${code}`, playerId); } catch {}
}
function getSavedPlayerId(code) {
try { return localStorage.getItem(`kwist.player.${code}`) || null; } catch { return null; }
}
function clearPlayerSession(code) {
try { localStorage.removeItem(`kwist.player.${code}`); } catch {}
}
function JoinScreen({ theme, initialCode }) {
const [phase, setPhase] = useStateJoin(initialCode ? "code" : "code");
const [code, setCode] = useStateJoin((initialCode || "").toUpperCase());
const [session, setSession] = useStateJoin(null);
const [quiz, setQuiz] = useStateJoin(null);
const [name, setName] = useStateJoin("");
const [team, setTeam] = useStateJoin("");
const [player, setPlayer] = useStateJoin(null);
const [question, setQuestion] = useStateJoin(null);
const [feedback, setFeedback] = useStateJoin(null);
const [totalScore, setTotalScore] = useStateJoin(0);
const [error, setError] = useStateJoin(null);
const [busy, setBusy] = useStateJoin(false);
const [rejoinAvailable, setRejoinAvailable] = useStateJoin(null);
const wsRef = useRefJoin(null);
const playerTokenRef = useRefJoin(null);
const questionStartRef = useRefJoin(0);
useEffectJoin(() => {
if (initialCode) lookup(initialCode);
}, []);
const lookup = async (c) => {
setError(null); setBusy(true);
try {
const res = await fetch(`/api/sessions/code/${encodeURIComponent(c)}`);
if (!res.ok) {
if (res.status === 404) throw new Error("Onbekende code.");
throw new Error(`HTTP ${res.status}`);
}
const r = await res.json();
setSession(r.session); setQuiz(r.quiz);
const savedId = getSavedPlayerId(c.toUpperCase());
if (savedId) {
const savedPlayer = (r.players || []).find((p) => p.id === savedId);
if (savedPlayer) {
setRejoinAvailable(savedPlayer);
setPhase("rejoin");
return;
} else {
clearPlayerSession(c.toUpperCase());
}
}
setPhase("name");
} catch (e) {
setError(e.message || "Kon de sessie niet vinden.");
} finally {
setBusy(false);
}
};
const rejoin = async () => {
if (!rejoinAvailable) return;
setError(null); setBusy(true);
try {
const res = await fetch(`/api/sessions/${session.code}/rejoin`, {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify({ playerId: rejoinAvailable.id }),
});
if (!res.ok) {
const err = await res.json().catch(() => ({}));
if (res.status === 404 || res.status === 409) {
clearPlayerSession(session.code);
setRejoinAvailable(null);
setPhase("name");
throw new Error(err.error || "Sessie niet meer beschikbaar.");
}
throw new Error(err.error || `HTTP ${res.status}`);
}
const r = await res.json();
setPlayer(r.player);
setTotalScore(r.player.score || 0);
playerTokenRef.current = r.playerToken;
openSocket(r.player.id);
const status = r.session?.status || session?.status;
if (status === "running") setPhase("playing");
else if (status === "finished") setPhase("done");
else setPhase("lobby");
} catch (e) {
setError(e.message || "Herverbinding mislukt.");
} finally {
setBusy(false);
}
};
const joinAsNew = () => {
clearPlayerSession(code);
setRejoinAvailable(null);
setPhase("name");
};
const join = async () => {
if (!name.trim()) { setError("Naam invullen graag."); return; }
setError(null); setBusy(true);
try {
const res = await fetch(`/api/sessions/${session.code}/join`, {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify({
name: name.trim(),
team: session.teamsEnabled ? (team || null) : null,
}),
});
if (!res.ok) {
const err = await res.json().catch(() => ({}));
throw new Error(err.error || `HTTP ${res.status}`);
}
const r = await res.json();
setPlayer(r.player);
playerTokenRef.current = r.playerToken;
savePlayerSession(session.code, r.player.id);
openSocket(r.player?.id);
setPhase("lobby");
} catch (e) {
setError(e.message || "Kon niet joinen.");
} finally {
setBusy(false);
}
};
const openSocket = (pid) => {
if (wsRef.current) return;
const proto = window.location.protocol === "https:" ? "wss:" : "ws:";
const ws = new WebSocket(`${proto}//${window.location.host}/ws/sessions/${session.code}`);
wsRef.current = ws;
ws.onopen = () => {
// Announce presence so the host can see this player as online.
try { ws.send(JSON.stringify({ type: "presence:hello", playerId: pid || null })); } catch {}
};
ws.onmessage = (ev) => {
let msg = null;
try { msg = JSON.parse(ev.data); } catch { return; }
if (msg.type === "session:started") {
setPhase("playing"); setQuestion(null); setFeedback(null);
} else if (msg.type === "question:show" && msg.question) {
setQuestion(msg.question);
setFeedback(null);
questionStartRef.current = Date.now();
setPhase("playing");
} else if (msg.type === "session:finished") {
setPhase("done");
}
};
ws.onclose = () => { wsRef.current = null; };
};
const submit = async (answer) => {
if (!question) return;
const msTaken = Date.now() - (questionStartRef.current || Date.now());
setFeedback({ pending: true });
try {
// Direct fetch met het player-token — niet via window.kwistApi om geen
// host-state te verstoren.
const res = await fetch(`/api/sessions/${session.code}/answer`, {
method: "POST",
headers: {
"content-type": "application/json",
authorization: `Bearer ${playerTokenRef.current}`,
},
body: JSON.stringify({ questionId: question.id, answer, msTaken }),
});
const r = await res.json().catch(() => ({}));
if (!res.ok) throw new Error(r.error || `HTTP ${res.status}`);
if (r.correct && r.points) setTotalScore((s) => s + r.points);
setFeedback({ correct: r.correct, points: r.points });
} catch (e) {
setFeedback({ error: e.message });
}
};
return (
── DOE MEE
{phase === "code" && (
lookup(code)} busy={busy} error={error} />
)}
{phase === "rejoin" && rejoinAvailable && (
)}
{phase === "name" && session && (
)}
{phase === "lobby" && (
)}
{phase === "playing" && (
)}
{phase === "done" && (
)}
);
}
function CodeStep({ theme, code, setCode, onSubmit, busy, error }) {
return (
De code,
graag.
Hij staat op het scherm van de host. Vier letters, soms cijfers.
);
}
function RejoinStep({ theme, player, quiz, onRejoin, onJoinNew, busy, error }) {
return (
Welkom terug!
Je was al ingeschreven als {player.name}.
Wil je herverbinden met je bestaande score?
── HUIDIGE SCORE
{(player.score || 0).toLocaleString("nl-NL")}
{error &&
{error}}
{busy ? "Herverbinden..." : "Herverbinden als " + player.name} →
Nee, ik wil opnieuw joinen
);
}
function NameStep({ theme, session, quiz, name, setName, team, setTeam, onSubmit, busy, error }) {
const teams = ["De Slimmeriken", "Kennistycoons", "Brain Storm", "Q-Force"];
return (
── {(quiz?.category || "QUIZ").toUpperCase()}
{quiz?.title || "Quiz"}
Sessie {session.code} · status: {session.status}
);
}
function LobbyWait({ theme, player, quiz }) {
return (
Je staat erin.
Welkom {player?.name}. We wachten tot de host op start drukt.
QUIZ · {(quiz?.title || "").toUpperCase()}
VRAGEN: {quiz?.questions || "—"}
WACHTEN OP DE HOST
);
}
function Playing({ theme, question, feedback, totalScore, onSubmit }) {
if (!question) {
return (
De quiz is begonnen.
WACHTEN OP DE EERSTE VRAAG…
);
}
if (feedback && (feedback.correct !== undefined || feedback.error)) {
return (
{feedback.correct ? (
<>
✓
Juist!
+ {feedback.points} PUNTEN
) : feedback.error ? (
{feedback.error}
) : (
<>
✕
Helaas.
)}
── JOUW SCORE
{(totalScore || 0).toLocaleString("nl-NL")}
Wachten op de volgende vraag…
── VRAAG {question.position + 1}
{question.prompt}
{question.type === "mc" && (question.options || []).map((opt, i) => (
))}
{question.type === "tf" && ["waar", "niet waar"].map((v) => (
))}
{question.type === "open" && (
)}
{feedback?.pending &&
VERZENDEN…}
);
}
function OpenInput({ theme, onSubmit, disabled }) {
const [val, setVal] = useStateJoin("");
return (
);
}
function Done({ theme, player, totalScore }) {
return (
Tot de volgende!
── JOUW EINDSCORE
{(totalScore || player?.score || 0).toLocaleString("nl-NL")}
);
}
window.JoinScreen = JoinScreen;