// games-extras.jsx, negen kindvriendelijke spelletjes voor 1ste/2de leerjaar.
// Elk spel is mobiel-vriendelijk, kort, met positieve feedback en zonder
// veel leestekst om te starten. Iedere component is via SpelModal te openen.
// ─── Gedeelde helpers, opgeleukte versie met confetti, streak, floaters ──
const SHELL_THEMES = {
groen: { bg1: "#D6EFC7", bg2: "#A8DAB0", dot: "rgba(0,0,0,0.07)", accent: "#3FA34D" },
rood: { bg1: "#FFE4D6", bg2: "#FFB59A", dot: "rgba(0,0,0,0.07)", accent: "#E63946" },
oranje: { bg1: "#FFE7CE", bg2: "#FFC58A", dot: "rgba(0,0,0,0.07)", accent: "#FF8C1A" },
geel: { bg1: "#FFF2BD", bg2: "#FFD96B", dot: "rgba(0,0,0,0.07)", accent: "#FFD23F" },
blauw: { bg1: "#CDEBFA", bg2: "#92CFF0", dot: "rgba(0,0,0,0.07)", accent: "#2D9CDB" },
paars: { bg1: "#EAD8FF", bg2: "#C8A6F0", dot: "rgba(0,0,0,0.07)", accent: "#8E44D1" },
roze: { bg1: "#FFE0EC", bg2: "#FFB6CC", dot: "rgba(0,0,0,0.07)", accent: "#E64980" },
krijt: { bg1: "#1F4030", bg2: "#0E2418", dot: "rgba(255,255,255,0.08)", accent: "#FFD23F" },
};
function gameShellStyle(isMobile, theme = "groen") {
const t = SHELL_THEMES[theme] || SHELL_THEMES.groen;
return {
background: `radial-gradient(circle at 20% 0%, ${t.bg2} 0%, ${t.bg1} 55%)`,
backgroundImage: [
`radial-gradient(circle, ${t.dot} 1.4px, transparent 1.6px)`,
`radial-gradient(circle at 20% 0%, ${t.bg2} 0%, ${t.bg1} 55%)`,
].join(", "),
backgroundSize: "14px 14px, 100% 100%",
border: isMobile ? "none" : "5px solid #1A1A1A",
boxShadow: isMobile ? "none" : "8px 8px 0 #1A1A1A",
padding: isMobile ? "20px 14px 28px" : "32px 36px",
width: isMobile ? "100%" : "min(680px, 94vw)",
maxWidth: "100%",
minHeight: isMobile ? "100vh" : "auto",
position: "relative",
overflow: "hidden",
fontFamily: "'Patrick Hand', cursive",
color: theme === "krijt" ? "#F0FAE6" : "#1A1A1A",
};
}
function CloseBtn({ onClose, isMobile }) {
if (!onClose) return null;
return (
✕
);
}
function GameTitle({ icon, kleur, children, sub }) {
return (
{/* gele burst-shape achter de titel */}
{icon && {icon} }
{children}
{sub &&
{sub}
}
⚡ {score}{total != null ? ` / ${total}` : ""}
);
}
function StreakBadge({ streak }) {
if (streak < 2) return null;
return (
🔥 {streak}× COMBO!
);
}
function BigButton({ onClick, color = "#FFD23F", children, disabled, style = {} }) {
return (
!disabled && (e.currentTarget.style.transform = "translate(3px,3px) rotate(-1deg)", e.currentTarget.style.boxShadow = "1px 1px 0 #1A1A1A")}
onMouseUp={e => !disabled && (e.currentTarget.style.transform = "", e.currentTarget.style.boxShadow = "4px 4px 0 #1A1A1A")}
onMouseLeave={e => !disabled && (e.currentTarget.style.transform = "", e.currentTarget.style.boxShadow = "4px 4px 0 #1A1A1A")}>
{children}
);
}
function tint(hex, amt) {
// licht-/donkermaken van een hex-kleur, simpel
if (!hex || hex[0] !== "#" || hex.length !== 7) return hex;
const r = Math.max(0, Math.min(255, parseInt(hex.slice(1, 3), 16) + amt));
const g = Math.max(0, Math.min(255, parseInt(hex.slice(3, 5), 16) + amt));
const b = Math.max(0, Math.min(255, parseInt(hex.slice(5, 7), 16) + amt));
return `#${r.toString(16).padStart(2,"0")}${g.toString(16).padStart(2,"0")}${b.toString(16).padStart(2,"0")}`;
}
// Confetti, kort en speels, gestart via prop `trigger`. Renders 36 stukjes
// die naar beneden vallen en draaien. Verdwijnen vanzelf na ongeveer 2.5s.
function Confetti({ trigger }) {
const [bursts, setBursts] = React.useState([]);
React.useEffect(() => {
if (!trigger) return;
const id = Date.now() + Math.random();
const colors = ["#E63946", "#FFD23F", "#3FA34D", "#2D9CDB", "#FF8C1A", "#8E44D1", "#FF80AF"];
const pieces = Array.from({ length: 38 }).map((_, i) => ({
id: id + "_" + i,
left: Math.random() * 100,
delay: Math.random() * 0.3,
dur: 1.4 + Math.random() * 1.2,
color: colors[i % colors.length],
rot: Math.random() * 360,
shape: i % 3,
}));
setBursts(b => [...b, { id, pieces }]);
const t = setTimeout(() => {
setBursts(b => b.filter(x => x.id !== id));
}, 3000);
return () => clearTimeout(t);
}, [trigger]);
return (
{bursts.map(burst => burst.pieces.map(p => (
)))}
{list.map(f => (
{f.text}
))}
{emoji}
);
}
// Hoek-stickers, rendert in achtergrond van de shell voor extra fleur.
function ShellDecor({ theme = "groen" }) {
const t = SHELL_THEMES[theme] || SHELL_THEMES.groen;
return (
{/* schuine streep linksboven */}
{/* sticker rechtsboven */}
⭐
{/* sticker rechtsonder */}
🌶️
{/* sticker linksonder */}
✨
{perfect ? "🏆" : "🎉"}
{perfect ? (perfectMessage || "PERFECT!") : "GOED GEDAAN!"}
{message || `Je had ${score}${total != null ? ` van de ${total}` : ""} goed!`}
↻ NOG EENS
{onChangeDifficulty && 🌶️ PIT VERANDEREN }
{onClose && SLUITEN }
);
}
// QuestionCard, gedeelde omkadering voor de vraag in elk spel met een
// schud-animatie bij fout antwoord en een kleine glow bij goed.
function QuestionCard({ children, status, theme = "paper" }) {
const bg = theme === "chalk" ? "#1F4030" : "#F0FAE6";
const fg = theme === "chalk" ? "#FFF8EC" : "#1A1A1A";
return (
{children}
);
}
// ─── Moeilijkheidskiezer ──────────────────────────────────────────────
// Gedeelde helpers voor alle educatieve spelletjes. Toont een keuzescherm
// (mild, pittig, vlammend) en onthoudt de keuze in localStorage per spel.
const DIFFICULTY_LEVELS = [
{ id: "mild", label: "MILD", icon: "🌶️", sub: "Voor beginners", color: "#5BB85B" },
{ id: "pittig", label: "PITTIG", icon: "🌶️🌶️", sub: "Standaard", color: "#FF8C1A" },
{ id: "vlammend", label: "VLAMMEND", icon: "🌶️🌶️🌶️", sub: "Voor de straffe", color: "#E63946" },
];
function useDifficulty(gameId, defaultLevel = "pittig") {
const key = `hp_diff_${gameId}`;
const [level, setLevel] = React.useState(() => {
try {
const saved = window.localStorage.getItem(key);
if (saved && DIFFICULTY_LEVELS.some(d => d.id === saved)) return saved;
} catch (e) {}
return defaultLevel;
});
const [chosen, setChosen] = React.useState(false);
function choose(id) {
setLevel(id);
setChosen(true);
try { window.localStorage.setItem(key, id); } catch (e) {}
}
function reopen() { setChosen(false); }
return { level, chosen, choose, reopen };
}
function DifficultyPicker({ onChoose, currentLevel, sub = "Hoe pittig wil je het?" }) {
return (
KIES JE PIT
{sub}
{DIFFICULTY_LEVELS.map(d => (
onChoose(d.id)}
style={{
background: `linear-gradient(180deg, ${tint(d.color, 14)} 0%, ${d.color} 60%, ${tint(d.color, -14)} 100%)`,
border: currentLevel === d.id ? "5px solid #1A1A1A" : "4px solid #1A1A1A",
boxShadow: currentLevel === d.id ? "2px 2px 0 #1A1A1A" : "4px 4px 0 #1A1A1A",
padding: "12px 16px", cursor: "pointer",
display: "flex", alignItems: "center", justifyContent: "flex-start",
gap: 12, fontFamily: "'Bangers', sans-serif",
fontSize: 24, letterSpacing: "0.04em",
color: "#FFF", WebkitTextStroke: "0.6px #1A1A1A",
textShadow: "2px 2px 0 #1A1A1A",
transition: "transform 0.1s, box-shadow 0.1s",
}}>
{d.icon}
{d.label}
{d.sub}
))}
);
}
function DifficultyBadge({ level }) {
const d = DIFFICULTY_LEVELS.find(x => x.id === level) || DIFFICULTY_LEVELS[1];
return (
{d.icon} {d.label}
);
}
// ─── 1. Tafels van Peper ─────────────────────────────────────────────
const TAFELS_DIFF = {
mild: { tafelMax: 2, factorMax: 5 },
pittig: { tafelMax: 5, factorMax: 10 },
vlammend: { tafelMax: 10, factorMax: 10 },
};
function TafelsSpel({ onClose }) {
const isMobile = useIsMobile();
const diff = useDifficulty("tafels-peper", "pittig");
const TOTAL = 10;
const [score, setScore] = React.useState(0);
const [round, setRound] = React.useState(0);
const [q, setQ] = React.useState(null);
const [feedback, setFeedback] = React.useState(null);
const [done, setDone] = React.useState(false);
const newQ = React.useCallback(() => {
const cfg = TAFELS_DIFF[diff.level];
const tafel = Math.floor(Math.random() * cfg.tafelMax) + 1;
const factor = Math.floor(Math.random() * cfg.factorMax) + 1;
const correct = tafel * factor;
const opts = new Set([correct]);
while (opts.size < 4) {
const range = Math.max(5, Math.floor(correct / 2));
const w = correct + (Math.floor(Math.random() * (range * 2 + 1)) - range);
if (w !== correct && w > 0) opts.add(w);
}
setQ({ tafel, factor, correct, opts: Array.from(opts).sort(() => Math.random() - 0.5) });
setFeedback(null);
}, [diff.level]);
React.useEffect(newQ, [newQ]);
function pick(v) {
if (feedback) return;
const correct = v === q.correct;
setFeedback({ correct, choice: v });
if (correct) setScore(s => s + 1);
setTimeout(() => {
const next = round + 1;
if (next >= TOTAL) setDone(true);
else { setRound(next); newQ(); }
}, 1300);
}
function reset() { setScore(0); setRound(0); setDone(false); newQ(); }
if (!diff.chosen) {
return (
TAFELS VAN PEPER
{ diff.choose(id); setScore(0); setRound(0); setDone(false); }}
currentLevel={diff.level}
sub="Mild = tafels van 1 en 2. Vlammend = tot tafel 10."
/>
);
}
if (!q) return null;
return (
TAFELS VAN PEPER
{done ? (
{ diff.reopen(); }} />
) : (
<>
{q.tafel} × {q.factor} = ?
{q.opts.map(o => {
const isCorrect = feedback && o === q.correct;
const isUserWrong = feedback && feedback.choice === o && !feedback.correct;
return (
pick(o)}
color={isCorrect ? "#5BB85B" : isUserWrong ? "#E63946" : "#FFD23F"}
style={{
fontFamily: '"Trebuchet MS", Verdana, Tahoma, sans-serif',
fontWeight: 900,
fontSize: 32, padding: "16px",
fontVariantNumeric: "tabular-nums",
color: (isCorrect || isUserWrong) ? "#FFF" : "#1A1A1A",
border: isUserWrong ? "5px solid #1A1A1A" : "4px solid #1A1A1A",
}}>
{o}
);
})}
{feedback && feedback.correct && (
🎉 JUIST! {q.tafel} × {q.factor} = {q.correct}
)}
{feedback && !feedback.correct && (
OEPS! Jij koos {feedback.choice}, het was {q.correct}
)}
)}
);
}
// ─── 2. Tel de Pepers ─────────────────────────────────────────────────
const TEL_DIFF = {
mild: { min: 1, max: 8, optRange: 3 },
pittig: { min: 2, max: 15, optRange: 3 },
vlammend: { min: 8, max: 25, optRange: 5 },
};
function TelPepers({ onClose }) {
const isMobile = useIsMobile();
const diff = useDifficulty("tel-pepers", "pittig");
const TOTAL = 10;
const [score, setScore] = React.useState(0);
const [round, setRound] = React.useState(0);
const [q, setQ] = React.useState(null);
const [feedback, setFeedback] = React.useState(null);
const [done, setDone] = React.useState(false);
const newQ = React.useCallback(() => {
const cfg = TEL_DIFF[diff.level];
const n = Math.floor(Math.random() * (cfg.max - cfg.min + 1)) + cfg.min;
const opts = new Set([n]);
while (opts.size < 4) {
const w = n + (Math.floor(Math.random() * (cfg.optRange * 2 + 1)) - cfg.optRange);
if (w > 0 && w <= cfg.max + 5) opts.add(w);
}
setQ({ n, opts: Array.from(opts).sort(() => Math.random() - 0.5) });
setFeedback(null);
}, [diff.level]);
React.useEffect(newQ, [newQ]);
function pick(v) {
if (feedback) return;
const correct = v === q.n;
setFeedback({ correct, choice: v });
if (correct) setScore(s => s + 1);
setTimeout(() => {
const next = round + 1;
if (next >= TOTAL) setDone(true);
else { setRound(next); newQ(); }
}, 1300);
}
function reset() { setScore(0); setRound(0); setDone(false); newQ(); }
if (!diff.chosen) {
return (
TEL DE PEPERS
{ diff.choose(id); setScore(0); setRound(0); setDone(false); }}
currentLevel={diff.level}
sub="Mild = 1 tot 8 pepers. Vlammend = tot 25 pepers."
/>
);
}
if (!q) return null;
const pepperSize = q.n > 18 ? 26 : q.n > 12 ? 32 : 38;
return (
TEL DE PEPERS
{done ? (
{ diff.reopen(); }} />
) : (
<>
{Array.from({ length: q.n }).map((_, i) => (
🌶️
))}
{q.opts.map(o => {
const isCorrect = feedback && o === q.n;
const isUserWrong = feedback && feedback.choice === o && !feedback.correct;
return (
pick(o)}
color={isCorrect ? "#5BB85B" : isUserWrong ? "#E63946" : "#FFD23F"}
style={{
fontFamily: '"Trebuchet MS", Verdana, Tahoma, sans-serif',
fontWeight: 900,
fontSize: 36,
fontVariantNumeric: "tabular-nums",
color: (isCorrect || isUserWrong) ? "#FFF" : "#1A1A1A",
border: isUserWrong ? "5px solid #1A1A1A" : "4px solid #1A1A1A",
}}>
{o}
);
})}
{feedback && feedback.correct && (
🎉 JUIST! Het waren er {q.n}
)}
{feedback && !feedback.correct && (
OEPS! Jij koos {feedback.choice}, het waren er {q.n}
)}
)}
);
}
// ─── 3. Peper Memory ──────────────────────────────────────────────────
const MEMORY_DIFF = {
mild: { pairs: 6, cols: 4 },
pittig: { pairs: 10, cols: 5 },
vlammend: { pairs: 15, cols: 6 },
};
const MEMORY_SYMBOLS = [
"🌶️", "🧠", "🔥", "⭐", "🦸", "🧥", "🥶", "💥",
"🍕", "👻", "🍄", "🐝", "🦄", "🌈", "⚡", "🎩", "🚀", "🍩",
];
function PeperMemory({ onClose }) {
const isMobile = useIsMobile();
const diff = useDifficulty("peper-memory", "pittig");
const [cards, setCards] = React.useState([]);
const [flipped, setFlipped] = React.useState([]);
const [matched, setMatched] = React.useState(new Set());
const [moves, setMoves] = React.useState(0);
const [done, setDone] = React.useState(false);
const reset = React.useCallback(() => {
const cfg = MEMORY_DIFF[diff.level];
const symbols = MEMORY_SYMBOLS.slice(0, cfg.pairs);
const deck = symbols.flatMap(s => [s, s]).sort(() => Math.random() - 0.5);
setCards(deck);
setFlipped([]); setMatched(new Set()); setMoves(0); setDone(false);
}, [diff.level]);
React.useEffect(reset, [reset]);
function flip(i) {
if (flipped.includes(i) || matched.has(i)) return;
if (flipped.length === 2) return;
const next = [...flipped, i];
setFlipped(next);
if (next.length === 2) {
setMoves(m => m + 1);
const [a, b] = next;
if (cards[a] === cards[b]) {
setTimeout(() => {
setMatched(prev => {
const s = new Set(prev); s.add(a); s.add(b);
if (s.size === cards.length) setDone(true);
return s;
});
setFlipped([]);
}, 500);
} else {
setTimeout(() => setFlipped([]), 800);
}
}
}
if (!diff.chosen) {
return (
PEPER MEMORY
{ diff.choose(id); }}
currentLevel={diff.level}
sub="Mild = 6 paren. Pittig = 10 paren. Vlammend = 15 paren."
/>
);
}
const cols = MEMORY_DIFF[diff.level].cols;
return (
PEPER MEMORY
beurten
{done ? (
{
const pairs = MEMORY_DIFF[diff.level].pairs;
const fast = Math.ceil(pairs * 1.5);
const ok = Math.ceil(pairs * 2.5);
const verdict = moves <= fast ? "Wow, supersnel!" : moves <= ok ? "Lekker bezig!" : "Goed volgehouden!";
return `Klaar in ${moves} beurten! ${verdict}`;
})()}
onReplay={reset}
onClose={onClose}
onChangeDifficulty={() => { diff.reopen(); }}
/>
) : (
{cards.map((c, i) => {
const open = flipped.includes(i) || matched.has(i);
return (
flip(i)}
aria-label={open ? c : "Verborgen kaart"}
style={{
aspectRatio: "1",
background: open ? "#FFF8EC" : "#E63946",
border: "4px solid #1A1A1A",
boxShadow: "3px 3px 0 #1A1A1A",
fontSize: isMobile ? 30 : 40,
cursor: open ? "default" : "pointer",
opacity: matched.has(i) ? 0.55 : 1,
transition: "background 0.15s, opacity 0.2s",
}}>
{open ? c : ""}
);
})}
)}
);
}
// ─── 4. Welke Letter Mist? ────────────────────────────────────────────
const LETTER_WORDS = {
mild: [
["KAT", 1], ["BAL", 1], ["PET", 1], ["KIP", 1], ["ZON", 1],
["BOM", 1], ["KOE", 1], ["AAP", 1], ["AUTO", 1], ["JAS", 1],
],
pittig: [
["PEPER", 1], ["VUUR", 2], ["HELD", 0], ["KAT", 1], ["BAL", 1],
["PET", 1], ["BOOM", 1], ["MAAN", 1], ["HOND", 0], ["KIP", 1],
],
vlammend: [
["KASTEEL", 3], ["VOGELTJE", 4], ["SCHOOL", 2], ["PAARDJE", 3], ["BLOEMEN", 2],
["TANDPASTA", 4], ["PINGUIN", 3], ["DRAKEN", 2], ["KAARSEN", 3], ["RIDDER", 1],
],
};
function LetterMist({ onClose }) {
const isMobile = useIsMobile();
const diff = useDifficulty("letter-mist", "pittig");
const WORDS = LETTER_WORDS[diff.level];
const TOTAL = WORDS.length;
const [order, setOrder] = React.useState([]);
const [opts, setOpts] = React.useState([]);
const [round, setRound] = React.useState(0);
const [score, setScore] = React.useState(0);
const [feedback, setFeedback] = React.useState(null); // null | { correct, choice }
const [done, setDone] = React.useState(false);
function buildOpts(missing) {
const set = new Set([missing]);
const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
while (set.size < 4) set.add(alphabet[Math.floor(Math.random() * alphabet.length)]);
return Array.from(set).sort(() => Math.random() - 0.5);
}
const reset = React.useCallback(() => {
const idxs = WORDS.map((_, i) => i).sort(() => Math.random() - 0.5);
const [w0, mi0] = WORDS[idxs[0]];
setOrder(idxs);
setOpts(buildOpts(w0[mi0]));
setRound(0); setScore(0); setFeedback(null); setDone(false);
}, [diff.level]);
React.useEffect(reset, [reset]);
if (!diff.chosen) {
return (
WELKE LETTER MIST?
{ diff.choose(id); }}
currentLevel={diff.level}
sub="Mild = korte woordjes (3 letters). Vlammend = lange woorden."
/>
);
}
if (!order.length) return null;
const [word, missingIdx] = WORDS[order[round]];
const missing = word[missingIdx];
function pick(letter) {
if (feedback) return;
const correct = letter === missing;
setFeedback({ correct, choice: letter });
if (correct) setScore(s => s + 1);
setTimeout(() => {
const next = round + 1;
if (next >= TOTAL) setDone(true);
else {
const [wn, min] = WORDS[order[next]];
setOpts(buildOpts(wn[min]));
setRound(next);
setFeedback(null);
}
}, 1300);
}
const wordFontSize = word.length > 6 ? (isMobile ? 32 : 48) : (isMobile ? 44 : 64);
return (
WELKE LETTER MIST?
{done ? (
{ diff.reopen(); }} />
) : (
<>
6 ? "0.10em" : "0.15em", color: "#1A1A1A",
}}>
{word.split("").map((l, i) => {
const isSlot = i === missingIdx;
const slotBg = !feedback ? "#FFD23F"
: feedback.correct ? "#5BB85B" : "#E63946";
return (
{isSlot ? (feedback ? l : "_") : l}
);
})}
{opts.map(l => {
const isCorrect = feedback && l === missing;
const isUserWrong = feedback && feedback.choice === l && !feedback.correct;
return (
pick(l)}
color={isCorrect ? "#5BB85B" : isUserWrong ? "#E63946" : "#FFD23F"}
style={{
fontSize: 32,
color: (isCorrect || isUserWrong) ? "#FFF" : "#1A1A1A",
border: isUserWrong ? "5px solid #1A1A1A" : "4px solid #1A1A1A",
}}>{l}
);
})}
{feedback && feedback.correct && (
🎉 JUIST! De letter was {missing}.
)}
{feedback && !feedback.correct && (
OEPS! Jij koos {feedback.choice}, maar de letter was {missing}.
)}
)}
);
}
// ─── 5. Rijm met Peper ────────────────────────────────────────────────
const RIJM_ROUNDS_BASE = [
{ word: "PET", correct: "NET", wrong: ["KAT", "BAL", "POT"] },
{ word: "KAT", correct: "MAT", wrong: ["BOOT", "HOND", "KIP"] },
{ word: "BAL", correct: "VAL", wrong: ["AUTO", "BOOM", "BIL"] },
{ word: "BOOM", correct: "ROOM", wrong: ["VIS", "PET", "BIK"] },
{ word: "MAAN", correct: "BAAN", wrong: ["KAT", "BIL", "MAAR"] },
{ word: "PEER", correct: "BEER", wrong: ["AUTO", "HUIS", "TROL"] },
{ word: "VUUR", correct: "MUUR", wrong: ["KIP", "BAL", "VEER"] },
{ word: "MUIS", correct: "HUIS", wrong: ["VIS", "AAP", "MOS"] },
];
const RIJM_ROUNDS_HARD = [
{ word: "DEUR", correct: "KLEUR", wrong: ["BLAD", "PIANO", "DOEL"] },
{ word: "PAD", correct: "BLAD", wrong: ["BIJL", "BLAUW", "BOEK"] },
{ word: "LICHT", correct: "ZICHT", wrong: ["WOLK", "SCHAAR", "LIED"] },
{ word: "BOEK", correct: "DOEK", wrong: ["VOET", "MAAND", "BAK"] },
];
const RIJM_DIFF = {
mild: { rounds: RIJM_ROUNDS_BASE, wrongs: 1 },
pittig: { rounds: RIJM_ROUNDS_BASE, wrongs: 2 },
vlammend: { rounds: [...RIJM_ROUNDS_BASE, ...RIJM_ROUNDS_HARD], wrongs: 3 },
};
function RijmSpel({ onClose }) {
const isMobile = useIsMobile();
const diff = useDifficulty("rijm-spel", "pittig");
const cfg = RIJM_DIFF[diff.level];
const ROUNDS = cfg.rounds;
const TOTAL = ROUNDS.length;
const [order, setOrder] = React.useState([]);
const [opts, setOpts] = React.useState([]);
const [round, setRound] = React.useState(0);
const [score, setScore] = React.useState(0);
const [feedback, setFeedback] = React.useState(null);
const [done, setDone] = React.useState(false);
function buildOpts(r) {
const wrongs = r.wrong.slice(0, cfg.wrongs);
return [r.correct, ...wrongs].sort(() => Math.random() - 0.5);
}
const reset = React.useCallback(() => {
const idx = ROUNDS.map((_, i) => i).sort(() => Math.random() - 0.5);
setOrder(idx);
setOpts(buildOpts(ROUNDS[idx[0]]));
setRound(0); setScore(0); setFeedback(null); setDone(false);
}, [diff.level]);
React.useEffect(reset, [reset]);
if (!diff.chosen) {
return (
RIJM MET PEPER
{ diff.choose(id); }}
currentLevel={diff.level}
sub="Mild = 2 keuzes. Vlammend = 4 keuzes en moeilijke woorden."
/>
);
}
if (!order.length) return null;
const r = ROUNDS[order[round]];
function pick(v) {
if (feedback) return;
const correct = v === r.correct;
setFeedback({ choice: v, correct });
if (correct) setScore(s => s + 1);
setTimeout(() => {
const next = round + 1;
if (next >= TOTAL) setDone(true);
else {
setOpts(buildOpts(ROUNDS[order[next]]));
setRound(next);
setFeedback(null);
}
}, 1400);
}
return (
RIJM MET PEPER
{done ? (
{ diff.reopen(); }} />
) : (
<>
Welk woord rijmt op:
{r.word}
{opts.map(o => {
const isCorrect = feedback && o === r.correct;
const isUserWrong = feedback && feedback.choice === o && !feedback.correct;
return (
pick(o)}
color={isCorrect ? "#5BB85B" : isUserWrong ? "#E63946" : "#FFD23F"}
style={{
fontSize: 22,
color: (isCorrect || isUserWrong) ? "#FFF" : "#1A1A1A",
border: isUserWrong ? "5px solid #1A1A1A" : "4px solid #1A1A1A",
}}>
{o}
);
})}
{feedback && feedback.correct && (
🎉 JUIST! {r.correct} rijmt op {r.word}.
)}
{feedback && !feedback.correct && (
OEPS! Jij koos {feedback.choice}, het juiste woord was {r.correct}.
)}
)}
);
}
// ─── 6. Pittigheidsmeter Quiz ─────────────────────────────────────────
const PIT_QUIZ_BASE = [
{ v: "Hete Peper draagt een groene pet.", a: true },
{ v: "Hete Peper houdt van ijs en sneeuw.", a: false },
{ v: "De grootste vijand van Hete Peper is een wasknijper.", a: true },
{ v: "Hete Peper kan vuur spuwen.", a: true },
{ v: "Hete Peper woont onder water.", a: false },
{ v: "Oliver is de grootste fan van Hete Peper.", a: true },
{ v: "Hete Peper is bang van het donker.", a: false },
{ v: "Een peper bestaat echt en kan pittig zijn.", a: true },
];
const PIT_QUIZ_HARD = [
{ v: "Een ijsheks kan zelf vuur spuwen.", a: false },
{ v: "Hete Peper wordt sterker als hij een slijmpje opeet.", a: false },
{ v: "Pepperoni City heeft een eigen burgemeester.", a: true },
{ v: "Hete Peper kan zwemmen, al doet hij het niet graag.", a: true },
];
const PIT_QUIZ_DIFF = {
mild: PIT_QUIZ_BASE.slice(0, 5),
pittig: PIT_QUIZ_BASE,
vlammend: [...PIT_QUIZ_BASE, ...PIT_QUIZ_HARD],
};
function PitQuiz({ onClose }) {
const isMobile = useIsMobile();
const diff = useDifficulty("pit-quiz", "pittig");
const QUESTIONS = PIT_QUIZ_DIFF[diff.level];
const TOTAL = QUESTIONS.length;
const [order, setOrder] = React.useState([]);
const [round, setRound] = React.useState(0);
const [score, setScore] = React.useState(0);
const [feedback, setFeedback] = React.useState(null);
const [done, setDone] = React.useState(false);
const reset = React.useCallback(() => {
const idx = QUESTIONS.map((_, i) => i).sort(() => Math.random() - 0.5);
setOrder(idx); setRound(0); setScore(0); setFeedback(null); setDone(false);
}, [diff.level]);
React.useEffect(reset, [reset]);
if (!diff.chosen) {
return (
PITTIGHEIDSMETER
{ diff.choose(id); }}
currentLevel={diff.level}
sub="Mild = 5 vragen. Vlammend = 12 vragen, ook strikvragen."
/>
);
}
if (!order.length) return null;
const q = QUESTIONS[order[round]];
function pick(v) {
if (feedback) return;
const correct = v === q.a;
setFeedback({ correct, choice: v });
if (correct) setScore(s => s + 1);
setTimeout(() => {
const next = round + 1;
if (next >= TOTAL) setDone(true);
else { setRound(next); setFeedback(null); }
}, 1400);
}
function userPickedThis(val) {
return feedback && feedback.choice === val;
}
return (
PITTIGHEIDSMETER
{done ? (
{ diff.reopen(); }} />
) : (
<>
pick(true)}
color={feedback ? (q.a === true ? "#5BB85B" : (userPickedThis(true) ? "#E63946" : "#FFD23F")) : "#5BB85B"}
style={{
color: feedback ? ((q.a === true || userPickedThis(true)) ? "#FFF" : "#1A1A1A") : "#FFF",
border: userPickedThis(true) && !feedback.correct ? "5px solid #1A1A1A" : "4px solid #1A1A1A",
}}>✓ WAAR
pick(false)}
color={feedback ? (q.a === false ? "#5BB85B" : (userPickedThis(false) ? "#E63946" : "#FFD23F")) : "#E63946"}
style={{
color: feedback ? ((q.a === false || userPickedThis(false)) ? "#FFF" : "#1A1A1A") : "#FFF",
border: userPickedThis(false) && !feedback.correct ? "5px solid #1A1A1A" : "4px solid #1A1A1A",
}}>✗ NIET WAAR
{feedback && feedback.correct && (
🎉 JUIST! Het was {q.a ? "waar" : "niet waar"}.
)}
{feedback && !feedback.correct && (
OEPS! Jij koos {feedback.choice ? '"waar"' : '"niet waar"'}, maar het was {q.a ? "waar" : "niet waar"}.
)}
)}
);
}
// ─── 7. Peper Doolhof ─────────────────────────────────────────────────
// 0=open, 1=muur, 2=uitgang
const DOOLHOF_DIFF = {
mild: [
[
[0,0,0,1,0],
[1,1,0,1,0],
[0,0,0,1,0],
[0,1,1,1,0],
[0,0,0,0,2],
],
],
pittig: [
[
[0,1,0,0,0],
[0,1,0,1,0],
[0,0,0,1,0],
[1,1,0,1,0],
[0,0,0,0,2],
],
[
[0,0,1,0,0,0],
[1,0,1,0,1,0],
[1,0,0,0,1,0],
[0,0,1,1,0,0],
[0,1,1,0,0,1],
[0,0,0,0,1,2],
],
],
vlammend: [
[
[0,1,0,0,0,1,0],
[0,1,0,1,0,1,0],
[0,0,0,1,0,0,0],
[1,1,0,1,1,1,0],
[0,0,0,0,0,1,0],
[0,1,1,1,0,1,0],
[0,0,0,0,0,0,2],
],
[
[0,0,0,1,0,0,0,0],
[1,1,0,1,0,1,1,0],
[0,0,0,1,0,1,0,0],
[0,1,1,1,0,1,0,1],
[0,0,0,0,0,0,0,0],
[1,1,1,1,1,1,1,0],
[0,0,0,0,0,0,0,0],
[0,1,1,1,1,1,1,2],
],
],
};
function Doolhof({ onClose }) {
const isMobile = useIsMobile();
const diff = useDifficulty("doolhof", "pittig");
const LEVELS = DOOLHOF_DIFF[diff.level];
const [level, setLevel] = React.useState(0);
const [pos, setPos] = React.useState([0, 0]);
const [moves, setMoves] = React.useState(0);
const [done, setDone] = React.useState(false);
const grid = LEVELS[level];
const N = grid.length;
const reset = React.useCallback(() => {
setPos([0, 0]); setMoves(0); setDone(false);
}, []);
function move(dr, dc) {
if (done) return;
setPos(([r, c]) => {
const nr = r + dr, nc = c + dc;
if (nr < 0 || nr >= N || nc < 0 || nc >= grid[0].length) return [r, c];
if (grid[nr][nc] === 1) return [r, c];
setMoves(m => m + 1);
if (grid[nr][nc] === 2) setTimeout(() => setDone(true), 100);
return [nr, nc];
});
}
React.useEffect(() => {
function onKey(e) {
if (e.key === "ArrowUp") { e.preventDefault(); move(-1, 0); }
if (e.key === "ArrowDown") { e.preventDefault(); move(1, 0); }
if (e.key === "ArrowLeft") { e.preventDefault(); move(0, -1); }
if (e.key === "ArrowRight") { e.preventDefault(); move(0, 1); }
}
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [done, level]);
function nextLevel() {
if (level + 1 < LEVELS.length) {
setLevel(level + 1); reset();
}
}
const cellSize = isMobile
? Math.min(50, Math.floor(280 / grid[0].length))
: Math.min(50, Math.floor(420 / grid[0].length));
if (!diff.chosen) {
return (
PEPER DOOLHOF
{ diff.choose(id); setLevel(0); setPos([0,0]); setMoves(0); setDone(false); }}
currentLevel={diff.level}
sub="Mild = klein doolhof. Vlammend = groot doolhof, twee levels."
/>
);
}
return (
PEPER DOOLHOF
{grid.flatMap((row, r) => row.map((cell, c) => {
const isPeper = pos[0] === r && pos[1] === c;
const isExit = cell === 2;
const isWall = cell === 1;
return (
{isPeper ? "🌶️" : isExit ? "🏁" : ""}
);
}))}
{done ? (
🎉 GEHAALD IN {moves} STAPPEN!
{level + 1 < LEVELS.length
? VOLGEND LEVEL →
: { setLevel(0); reset(); }} color="#5BB85B" style={{ color: "#FFF" }}>↻ NOG EENS }
↻ OPNIEUW
{ diff.reopen(); }} color="#FFD23F">🌶️ PIT VERANDEREN
) : (
move(-1, 0)}>↑
move(0, -1)}>←
move(0, 1)}>→
move(1, 0)}>↓
)}
);
}
// ─── 8. Vang de Pepers ────────────────────────────────────────────────
function VangPepers({ onClose }) {
const isMobile = useIsMobile();
const DURATION = 30;
const [running, setRunning] = React.useState(false);
const [tijd, setTijd] = React.useState(DURATION);
const [score, setScore] = React.useState(0);
const [items, setItems] = React.useState([]);
const [done, setDone] = React.useState(false);
const idRef = React.useRef(0);
const fieldRef = React.useRef(null);
React.useEffect(() => {
if (!running) return;
const tick = setInterval(() => {
setTijd(t => {
if (t <= 1) { clearInterval(tick); setRunning(false); setDone(true); return 0; }
return t - 1;
});
}, 1000);
return () => clearInterval(tick);
}, [running]);
React.useEffect(() => {
if (!running) return;
const spawn = setInterval(() => {
const isPeper = Math.random() > 0.3;
const id = ++idRef.current;
const left = Math.random() * 80 + 5;
const dur = 2200 + Math.random() * 1300;
setItems(arr => [...arr, { id, isPeper, left, dur, startedAt: Date.now() }]);
setTimeout(() => {
setItems(arr => arr.filter(x => x.id !== id));
}, dur);
}, 700);
return () => clearInterval(spawn);
}, [running]);
function tap(item) {
if (item.isPeper) setScore(s => s + 1);
else setScore(s => Math.max(0, s - 2));
setItems(arr => arr.filter(x => x.id !== item.id));
}
function start() {
setScore(0); setTijd(DURATION); setItems([]); setDone(false); setRunning(true);
}
return (
VANG DE PEPERS
{!running && !done && (
🌶️
Tik op de pepers (🌶️) en vermijd de wasknijpers (🪣).30 seconden om zo veel mogelijk te vangen!
▶ START
)}
{done && (
{score >= 15 ? "🏆" : score >= 5 ? "🎉" : "🌶️"}
JE VING {score} PEPERS!
↻ NOG EENS
)}
{running && items.map(it => (
tap(it)}
aria-label={it.isPeper ? "Peper" : "Wasknijper"}
style={{
position: "absolute", left: `${it.left}%`,
top: -50,
width: 48, height: 48, fontSize: 36, lineHeight: 1,
background: "transparent", border: "none", cursor: "pointer",
animation: `vang-fall ${it.dur}ms linear`,
padding: 0,
}}>
{it.isPeper ? "🌶️" : "🪣"}
))}
);
}
// ─── 9. Kleurplaat ────────────────────────────────────────────────────
function Kleurplaat({ onClose }) {
const isMobile = useIsMobile();
const COLORS = ["#E63946", "#3FA34D", "#FFD23F", "#FF8C1A", "#2D9CDB", "#8E44D1", "#1A1A1A", "#FFF8EC"];
const PARTS = ["body", "pet", "klep", "knop", "achtergrond"];
const [color, setColor] = React.useState(COLORS[0]);
const [fills, setFills] = React.useState({
body: "#FFF8EC", pet: "#FFF8EC", klep: "#FFF8EC",
knop: "#FFF8EC", achtergrond: "#FFF8EC",
});
function paint(part) {
setFills(f => ({ ...f, [part]: color }));
}
function reset() {
setFills({ body: "#FFF8EC", pet: "#FFF8EC", klep: "#FFF8EC", knop: "#FFF8EC", achtergrond: "#FFF8EC" });
}
return (
KLEUR JE PEPER
paint("achtergrond")} style={{ cursor: "pointer" }} />
paint("pet")} style={{ cursor: "pointer" }} />
paint("klep")} style={{ cursor: "pointer" }} />
paint("knop")} style={{ cursor: "pointer" }} />
paint("body")} style={{ cursor: "pointer" }} />
{COLORS.map(c => (
setColor(c)}
aria-label={`Kleur ${c}`}
style={{
width: 44, height: 44, borderRadius: "50%",
background: c,
border: c === color ? "4px solid #1A1A1A" : "3px solid #1A1A1A",
boxShadow: c === color ? "0 0 0 3px #FFD23F, 3px 3px 0 #1A1A1A" : "3px 3px 0 #1A1A1A",
cursor: "pointer",
}} />
))}
↻ OPNIEUW BEGINNEN
);
}
// ─── Registratie ──────────────────────────────────────────────────────
Object.assign(window, {
TafelsSpel, TelPepers, PeperMemory, LetterMist, RijmSpel,
PitQuiz, Doolhof, VangPepers, Kleurplaat,
});