) : (
<>
Start de sessie · {players.length} {players.length === 1 ? "speler" : "spelers"}
→
Open projectorvenster ↗
)}
SPELERS KUNNEN OOK NOG TIJDENS DE COUNTDOWN AANSLUITEN
);
}
// =================== HOST ONBOARDING WIZARD ===================
function HostGuide({ theme, onClose, onDismissForever }) {
const [step, setStep] = useStateLobby(0);
const steps = [
{
eyebrow: "── WELKOM, QUIZMASTER",
title: "Klaar om te starten?",
body: "Even snel door de basics. Drie stappen, je bent in 30 seconden weg.",
},
{
eyebrow: "── STAP 1 · DEEL DE CODE",
title: "Spelers joinen via een code.",
body: "Op het hoofdscherm zie je een grote code en een QR. Spelers gaan naar kwisthet.be/join, vullen die in, kiezen een naam — en je ziet ze rechts verschijnen. Wacht tot iedereen erin staat.",
},
{
eyebrow: "── STAP 2 · OPEN DE PROJECTOR",
title: "Twee schermen, twee rollen.",
body: "Het projectorvenster opent automatisch in een nieuw browservenster. Sleep dat naar je beamer of tweede scherm — daar zien spelers de vraag, zonder het antwoord. Op je eigen scherm hou jij de regie: je ziet wél het juiste antwoord, hoeveel mensen al geantwoord hebben, en de live tussenstand.",
},
{
eyebrow: "── STAP 3 · GA DOOR DE VRAGEN",
title: "Jij bent de dirigent.",
body: "Druk op 'Volgende vraag' wanneer iedereen geantwoord heeft of de tijd op is. Tussen vragen door kun je 'Toon tussenstand' tonen — dat verschijnt ook live op de projector met geanimeerde balkjes. Aan het einde zie je het volledige klassement.",
},
{
eyebrow: "── EXTRA",
title: "Goed om te weten.",
body: "Alles wordt automatisch opgeslagen. Mocht je browser crashen, dan kun je terug naar deze sessie. De resultaten van afgelopen quizzes vind je later terug onder 'Resultaten' in de hoofdnavigatie.",
},
];
const cur = steps[step];
const isLast = step === steps.length - 1;
return (
e.stopPropagation()}>
QUIZMASTER · GIDS{step + 1} / {steps.length}
{cur.visual}
{cur.eyebrow}{cur.title}
{cur.body}
{steps.map((_, i) => (
))}
{step > 0 && (
setStep(step - 1)}>← Terug
)}
{!isLast ? (
setStep(step + 1)}>Volgende →
) : (
<>
Laat volgende keer niet meer zien
Aan de slag →
)}
);
}
// =================== HOST GAME RUNNER ===================
// Toont de huidige vraag (met juist antwoord), live answer count, en heeft
// een "Volgende vraag"-knop die /api/sessions/:code/next aanroept.
function HostGameView({ theme, quiz, question, players, answeredIds = [], answeredCount, onlineIds = [], onAdvance, onClose, onOpenProjector, onBroadcastStandings }) {
const [secondsLeft, setSecondsLeft] = useStateLobby(null);
const [showStandings, setShowStandings] = useStateLobby(false);
const toggleStandings = () => {
setShowStandings((s) => {
const next = !s;
if (onBroadcastStandings) onBroadcastStandings(next);
return next;
});
};
useEffectLobby(() => {
if (!question || !question.time_limit) { setSecondsLeft(null); return; }
setSecondsLeft(question.time_limit);
const id = setInterval(() => {
setSecondsLeft((s) => (s === null || s <= 0) ? s : s - 1);
}, 1000);
return () => clearInterval(id);
}, [question?.id]);
const accent = quiz?.color || theme.accent;
const optionsHasCorrect = (opts) => Array.isArray(opts) && opts.some((o) => o.correct);
return (
{/* LEFT: question */}
{!question ? (
── DE QUIZ IS BEGONNENKlaar?
Druk op "Toon eerste vraag" om de quiz écht te starten. Spelers zien hem direct op hun telefoon.