{sseStatus !== "open" && (
{sseStatus === "connecting" ? t("common.connecting") : t("common.disconnected")}
)}
{countdown == null ? (
<>
{(player.name[0] || "").toUpperCase()}
{(player.surname[0] || "").toUpperCase()}
{t("player.welcome")}
{player.name} {player.surname}
{t("player.waiting_host")}
) : (
{t("player.starting")}
{countdown <= 0 ? "GO" : countdown}
)}
{players.map((p, i) => (
{(p.name[0] || "").toUpperCase()}
{(p.surname[0] || "").toUpperCase()}
{p.name} {p.surname[0] || ""}.
))}
{onReset && (
{t("player.lobby_reset_help")}
)}
);
}
// =====================================================
// QUESTION (player view — just shapes, question text on display)
// =====================================================
function QuestionScreen({ idx, total, durationSec, startedAt, onAnswer, picked, optionCount }) {
useLang();
const [now, setNow] = useState(Date.now());
useEffect(() => {
const id = setInterval(() => setNow(Date.now()), 100);
return () => clearInterval(id);
}, []);
const elapsed = Math.max(0, (now - startedAt) / 1000);
const timeLeft = Math.max(0, durationSec - elapsed);
const pct = Math.max(0, timeLeft / durationSec);
// Clamp to supported counts so a malformed payload doesn't blow up the grid.
const count = optionCount === 2 || optionCount === 5 ? optionCount : 4;
const shapes = SHAPES.slice(0, count);
const gridClass = count === 2 ? "shape-grid shape-grid--2"
: count === 5 ? "shape-grid shape-grid--5"
: "shape-grid";
return (
{t("player.q_idx")} {idx + 1} / {total}
{picked == null && (
Sahnedeki ekrandan soruyu oku ve cevabını seç
)}
{shapes.map((shape, i) => {
const state = picked == null ? "" : (i === picked ? "picked" : "dim");
return (
picked == null && onAnswer(i)}
disabled={picked != null}
>
{KEY_LETTERS[i]}
{KEY_LETTERS[i]}
);
})}
);
}
// =====================================================
// RESULT (per question — derived from question_end)
// =====================================================
function ResultScreen({ isCorrect, isTimeout, gained, total, streak, last, rank, totalPlayers, explanation }) {
useLang();
return (
{t("player.lb_title")}
{yourRank > 0 ? (
{t("player.lb_your_rank")} #{yourRank} · {yourScore} {t("common.points")}
) : (
{t("player.lb_not_listed")}
)}
{[1, 0, 2].map((idx) => {
const p = top10[idx];
if (!p) return
;
const you = p.id === player.playerId;
return (
{p.name} {p.surname[0] || ""}.{you && " " + t("common.you_paren")}
{p.score}
{idx + 1}
);
})}
{top10.slice(3).map((p, i) => {
const you = p.id === player.playerId;
return (
#{i + 4}
{p.name} {p.surname[0] || ""}.{you && " · " + t("common.you")}
{p.score}
);
})}
{t("common.brand_thanks")}
);
}
// =====================================================
// APP
// =====================================================
const LS_KEY = "kahoot_player_v1";
const LS_TTL_MS = 2 * 60 * 60 * 1000; // 2 saat — etkinlik süresinin biraz üstü
function loadStoredPlayer() {
try {
const raw = localStorage.getItem(LS_KEY);
if (!raw) return null;
const obj = JSON.parse(raw);
if (!obj || typeof obj !== "object") return null;
if (!obj.pin || !obj.playerId || !obj.playerToken || !obj.name) return null;
if (typeof obj.savedAt !== "number" || Date.now() - obj.savedAt > LS_TTL_MS) {
localStorage.removeItem(LS_KEY);
return null;
}
return obj;
} catch {
return null;
}
}
function clearStoredPlayer() {
try { localStorage.removeItem(LS_KEY); } catch {}
}
function saveStoredPlayer(p) {
try {
localStorage.setItem(LS_KEY, JSON.stringify({
pin: p.pin,
playerId: p.playerId,
playerToken: p.playerToken,
name: p.name,
surname: p.surname,
savedAt: Date.now(),
}));
} catch {}
}
function App() {
useLang();
const [stage, setStage] = useState("loading"); // loading | join | lobby | question | result | leaderboard
const [player, setPlayer] = useState(null); // {pin, playerId, playerToken, name, surname}
const [players, setPlayers] = useState([]);
const [countdown, setCountdown] = useState(null);
const [question, setQuestion] = useState(null); // {idx, total, durationSec, startedAt}
const [picked, setPicked] = useState(null);
const [score, setScore] = useState(0);
const [streak, setStreak] = useState(0);
const [lastResult, setLastResult] = useState(null);
const [finalLb, setFinalLb] = useState([]);
const [sseStatus, setSseStatus] = useState("connecting");
const sseRef = useRef(null);
const startedAtRef = useRef(0);
// Refs mirror state for values the SSE handler reads — guards against React
// render lag (a question_end could arrive before setPicked has flushed).
const pickedRef = useRef(null);
const scoreRef = useRef(0);
const questionRef = useRef(null);
const countdownIntervalRef = useRef(null);
// Detect ?pin=... in URL
const initialPin = useMemo(() => {
const p = new URLSearchParams(location.search).get("pin");
return p && /^\d{6}$/.test(p) ? p : null;
}, []);
// Mount: try to resume from localStorage. If the saved room no longer exists,
// or the user clearly came here to join a *different* PIN (QR scan with a new
// pin in the URL), clear the stale localStorage and show the join screen.
useEffect(() => {
const stored = loadStoredPlayer();
const urlPin = new URLSearchParams(location.search).get("pin");
// The QR / shared link case: URL says a specific PIN, stored is for a
// different one. User explicitly chose this new game — discard stale data.
if (urlPin && stored && stored.pin !== urlPin) {
clearStoredPlayer();
setStage("join");
return;
}
if (!stored) {
setStage("join");
return;
}
let cancelled = false;
fetch(`/api/rooms/${stored.pin}`)
.then((r) => r.json().then((d) => ({ ok: r.ok, d })))
.then(({ ok, d }) => {
if (cancelled) return;
if (!ok || !d.exists) {
clearStoredPlayer();
setStage("join");
} else if (d.status === "ended") {
clearStoredPlayer();
setStage("join");
} else {
setPlayer(stored);
setStage("lobby");
}
})
.catch(() => {
if (cancelled) return;
// Network blip on resume — assume the room is still there; SSE will retry.
setPlayer(stored);
setStage("lobby");
});
return () => { cancelled = true; };
}, []);
// Cleanup countdown interval on unmount.
useEffect(() => () => {
if (countdownIntervalRef.current) clearInterval(countdownIntervalRef.current);
}, []);
useEffect(() => {
if (!player) return;
let cancelled = false;
setSseStatus("connecting");
// Preflight: validate pin+pid+token via HTTP before opening the SSE stream.
// If anything's wrong (token expired, stale localStorage, DO doesn't know
// this player), we get a precise reason instead of an opaque stream close.
(async () => {
try {
const url = `/api/rooms/${player.pin}/players/${player.playerId}?token=${encodeURIComponent(player.playerToken)}`;
const res = await fetch(url);
if (cancelled) return;
if (!res.ok) {
const data = await res.json().catch(() => ({}));
console.warn("Preflight failed:", data.reason || res.status);
clearStoredPlayer();
setPlayer(null);
setStage("join");
return;
}
} catch (err) {
console.warn("Preflight network error, proceeding to SSE:", err);
if (cancelled) return;
}
if (cancelled) return;
const sse = window.createSse({
pin: player.pin,
role: "player",
playerId: player.playerId,
playerToken: player.playerToken,
onMessage: handleMessage,
onStatus: setSseStatus,
onFailedFast: (reason) => {
// Server explicitly refused (401/404) or stream couldn't establish
// after many retries — kayıt artık geçerli değil. Reset to join.
console.warn("SSE unavailable:", reason);
clearStoredPlayer();
setPlayer(null);
setStage("join");
},
});
sseRef.current = sse;
})();
return () => {
cancelled = true;
if (sseRef.current) {
sseRef.current.close();
sseRef.current = null;
}
};
}, [player]);
function handleMessage(msg) {
switch (msg.t) {
case "snapshot": {
// Server-dictated UI language for this session — overrides any local
// preference so every device in the same quiz speaks the same chrome.
if (msg.language) setLang(msg.language);
// Orphan check: if I'm not in the player list, my row is gone (DO was
// re-init'd, host ended + restarted, etc.). Clear LS and bounce to join.
const meInRoom = msg.players.some((p) => p.id === player.playerId);
if (!meInRoom) {
clearStoredPlayer();
if (sseRef.current) sseRef.current.close();
setPlayer(null);
setStage("join");
return;
}
// Resume score from snapshot so refresh mid-game shows the right total.
const me = msg.players.find((p) => p.id === player.playerId);
if (me) {
scoreRef.current = me.score;
setScore(me.score);
}
setPlayers(msg.players);
if (msg.status === "ended") setStage("leaderboard");
else if (stage === "loading") setStage("lobby");
break;
}
case "lobby_update":
setPlayers(msg.players);
break;
case "countdown":
setCountdown(msg.n);
setStage("lobby");
// Local tick to GO — clear any prior interval so reconnect-driven
// countdown replays don't stack and double-decrement.
if (countdownIntervalRef.current) clearInterval(countdownIntervalRef.current);
if (msg.n > 0) {
let n = msg.n;
countdownIntervalRef.current = setInterval(() => {
n--;
setCountdown(Math.max(0, n));
if (n <= 0) {
clearInterval(countdownIntervalRef.current);
countdownIntervalRef.current = null;
}
}, 1000);
}
break;
case "question": {
// Store option count so the shape grid renders the right layout (2/4/5).
const q = {
idx: msg.idx,
total: msg.total,
durationSec: msg.durationSec,
startedAt: msg.startedAt,
optionCount: Array.isArray(msg.answers) ? msg.answers.length : 4,
};
setQuestion(q);
questionRef.current = q;
startedAtRef.current = msg.startedAt;
// Snapshot replay path: server tells us whether we already answered
// (and what we picked). Restore the lock so reconnect mid-question
// doesn't let the user click again, and so the later question_end
// doesn't mis-compute "gained" off a wrong baseline. Live broadcasts
// omit both fields → treat as a fresh question.
if (msg.myAlreadyAnswered) {
const myPick = msg.myPick ?? null;
pickedRef.current = myPick;
setPicked(myPick);
} else {
pickedRef.current = null;
setPicked(null);
}
setCountdown(null);
setStage("question");
break;
}
case "ack_answer":
// server confirmed our answer; nothing to do (UI already optimistic)
break;
case "question_end": {
const meIdx = msg.leaderboard.findIndex((p) => p.id === player.playerId);
const me = meIdx >= 0 ? msg.leaderboard[meIdx] : null;
const prevScore = scoreRef.current;
const newTotal = me?.score ?? prevScore;
const localQuestion = questionRef.current;
// Snapshot replay path: when reconnecting mid-reveal, the server
// replays `question` (which resets pickedRef) then this `question_end`
// with the player's actual pick + points-on-this-question attached.
// Live broadcast omits both fields → fall back to local refs.
const usingServerSide = msg.myPointsThisQ !== undefined;
const localPicked = usingServerSide
? (msg.myPick ?? null)
: pickedRef.current;
const gained = usingServerSide
? msg.myPointsThisQ
: (newTotal - prevScore);
const isCorrect = localPicked != null && localPicked === msg.correct;
const isTimeout = localPicked == null;
scoreRef.current = newTotal;
setScore(newTotal);
// Streak is a cosmetic 🔥 badge. On reconnect we don't know prior
// streak length, so leave it untouched in the snapshot path.
if (!usingServerSide) {
if (isCorrect) setStreak((s) => s + 1); else setStreak(0);
}
setLastResult({
isCorrect,
isTimeout,
gained,
last: localQuestion && localQuestion.idx + 1 >= localQuestion.total,
rank: meIdx >= 0 ? meIdx + 1 : null,
totalPlayers: msg.leaderboard.length,
// Only surface the explanation to players who answered wrong or timed out.
explanation: !isCorrect ? (msg.explanation || null) : null,
});
setStage("result");
break;
}
case "game_end":
setFinalLb(msg.leaderboard);
setStage("leaderboard");
break;
case "error":
// For an event device, surfacing as an alert is simplest.
console.warn("server error:", msg.message);
break;
}
}
function handleAnswer(i) {
if (pickedRef.current != null) return;
const elapsedMs = Date.now() - startedAtRef.current;
pickedRef.current = i;
setPicked(i);
// Always POST — SSE is one-way (server→client). Failure isn't fatal: the
// server's question timer will count it as a timeout if we never reach.
fetch(`/api/rooms/${player.pin}/players/${player.playerId}/answer`, {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify({ pick: i, elapsedMs, token: player.playerToken }),
}).catch(() => {});
}
function handleRestart() {
if (sseRef.current) {
sseRef.current.close();
sseRef.current = null;
}
if (countdownIntervalRef.current) {
clearInterval(countdownIntervalRef.current);
countdownIntervalRef.current = null;
}
clearStoredPlayer();
pickedRef.current = null;
scoreRef.current = 0;
questionRef.current = null;
setPlayer(null);
setPlayers([]);
setQuestion(null);
setScore(0);
setStreak(0);
setLastResult(null);
setFinalLb([]);
setStage("join");
}
// Render the active screen, then wrap with the always-visible floating
// language switcher so it appears on join / lobby / question / result /
// leaderboard alike.
let screen;
if (stage === "loading") {
screen = 