// peper-zegt.jsx, Simon-spel voor het geheugen. Vier knoppen (peper, pet, // vuur, wasknijper) lichten op in een steeds langere volgorde, speel ze na. // Werkt met touch, toetsenbord (pijltjes of 1 t/m 4) en gamepad (D-pad via // de keyboard-bridge in gamepad.jsx). Elke knop heeft een eigen toon. // // Pit: // mild = traag tempo, kleuren zichtbaar // pittig = normaal tempo, kleuren zichtbaar // vlammend = snel tempo en de knoppen zijn grijs: alleen icoon + toon helpen const ZEGT_PADS = [ { id: 0, naam: "Peper", emoji: "🌢️", kleur: "#E63946", toets: "ArrowUp", pijl: "↑", freq: 392 }, { id: 1, naam: "Pet", emoji: "🧒", kleur: "#3FA34D", toets: "ArrowRight", pijl: "β†’", freq: 494 }, { id: 2, naam: "Knijper", emoji: "🧷", kleur: "#2D9CDB", toets: "ArrowLeft", pijl: "←", freq: 330 }, { id: 3, naam: "Vuur", emoji: "πŸ”₯", kleur: "#FF8C1A", toets: "ArrowDown", pijl: "↓", freq: 587 }, ]; const ZEGT_DIFF = { mild: { aan: 650, uit: 300, minAan: 420, start: 1, grijs: false }, pittig: { aan: 480, uit: 210, minAan: 270, start: 1, grijs: false }, vlammend: { aan: 380, uit: 160, minAan: 200, start: 2, grijs: true }, }; const ZEGT_MIJLPALEN = { 5: "STRAF! πŸ”₯", 10: "SUPER! ⚑", 15: "VLAMMEND! 🌢️", 20: "LEGENDE! πŸ†" }; function zegtBestKey(level) { return `hp_best_peper-zegt_${level}`; } function zegtLoadBest(level) { try { return Number(window.localStorage.getItem(zegtBestKey(level)) || 0) || 0; } catch { return 0; } } function zegtSaveBest(level, n) { try { window.localStorage.setItem(zegtBestKey(level), String(n)); } catch {} } // Korte tonen via WebAudio. Context wordt pas aangemaakt bij de eerste // gebruikersactie (autoplay-regels). Faalt stil als audio niet kan. function useZegtBeep() { const ctxRef = React.useRef(null); return React.useCallback((freq, ms = 180, type = "triangle") => { try { if (!ctxRef.current) { const AC = window.AudioContext || window.webkitAudioContext; if (!AC) return; ctxRef.current = new AC(); } const ctx = ctxRef.current; if (ctx.state === "suspended") ctx.resume().catch(() => {}); const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.type = type; osc.frequency.value = freq; gain.gain.setValueAtTime(0.0001, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.25, ctx.currentTime + 0.02); gain.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + ms / 1000); osc.connect(gain).connect(ctx.destination); osc.start(); osc.stop(ctx.currentTime + ms / 1000 + 0.05); } catch {} }, []); } function PeperZegt({ onClose }) { const isMobile = useIsMobile(); const diff = useDifficulty("peper-zegt", "pittig"); const cfg = ZEGT_DIFF[diff.level] || ZEGT_DIFF.pittig; // fase: idle (startscherm) β†’ kijk (volgorde wordt getoond) β†’ jij (invoer) β†’ over const [fase, setFase] = React.useState("idle"); const [reeks, setReeks] = React.useState([]); const [stap, setStap] = React.useState(0); const [lit, setLit] = React.useState(null); const [fout, setFout] = React.useState(null); const [score, setScore] = React.useState(0); const [best, setBest] = React.useState(() => zegtLoadBest(diff.level)); const [nieuwRecord, setNieuwRecord] = React.useState(false); const [confetti, setConfetti] = React.useState(0); const floaters = useFloaters(); const beep = useZegtBeep(); const timers = React.useRef([]); const later = React.useCallback((fn, ms) => { const t = setTimeout(fn, ms); timers.current.push(t); return t; }, []); const stopTimers = React.useCallback(() => { timers.current.forEach(clearTimeout); timers.current = []; }, []); React.useEffect(() => stopTimers, [stopTimers]); React.useEffect(() => { setBest(zegtLoadBest(diff.level)); }, [diff.level]); const start = React.useCallback(() => { stopTimers(); const eerste = Array.from({ length: cfg.start }, () => Math.floor(Math.random() * 4)); setReeks(eerste); setStap(0); setLit(null); setFout(null); setScore(0); setNieuwRecord(false); setFase("kijk"); }, [cfg.start, stopTimers]); // Volgorde afspelen. Tempo loopt op met de lengte van de reeks. React.useEffect(() => { if (fase !== "kijk") return; stopTimers(); const aan = Math.max(cfg.minAan, cfg.aan - reeks.length * 22); const uit = Math.max(120, cfg.uit - reeks.length * 8); let t = 600; reeks.forEach((padId) => { later(() => { setLit(padId); beep(ZEGT_PADS[padId].freq, aan * 0.9); }, t); later(() => setLit(null), t + aan); t += aan + uit; }); later(() => { setStap(0); setFase("jij"); }, t + 100); }, [fase, reeks, cfg, later, stopTimers, beep]); const druk = React.useCallback((padId) => { if (fase !== "jij") return; const pad = ZEGT_PADS[padId]; setLit(padId); later(() => setLit(null), 220); if (padId === reeks[stap]) { beep(pad.freq, 200); if (stap + 1 >= reeks.length) { const nieuw = score + 1; setScore(nieuw); setFase("wacht"); const mijlpaal = ZEGT_MIJLPALEN[nieuw]; if (mijlpaal) { floaters.pop(mijlpaal, { y: 30, color: "#FFD23F" }); setConfetti(c => c + 1); } else floaters.pop("+1", { y: 30, color: "#5BB85B" }); if (nieuw > best) { setBest(nieuw); setNieuwRecord(true); zegtSaveBest(diff.level, nieuw); } later(() => { setReeks(r => [...r, Math.floor(Math.random() * 4)]); setFase("kijk"); }, 800); } else { setStap(s => s + 1); } } else { beep(110, 500, "sawtooth"); setFout({ gedrukt: padId, juist: reeks[stap] }); setFase("over"); } }, [fase, reeks, stap, score, best, diff.level, later, beep, floaters]); // Toetsenbord + gamepad (bridge stuurt pijltjes/Enter/spatie als KeyboardEvent). React.useEffect(() => { if (!diff.chosen) return; function onKey(e) { const idx = ZEGT_PADS.findIndex(p => p.toets === e.key); const num = ["1", "2", "3", "4"].indexOf(e.key); if (idx >= 0 || num >= 0) { e.preventDefault(); druk(idx >= 0 ? idx : num); return; } if ((e.key === "Enter" || e.key === " ") && (fase === "idle" || fase === "over")) { e.preventDefault(); start(); } } window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [diff.chosen, druk, start, fase]); if (!diff.chosen) { return (
PEPER ZEGT diff.choose(id)} currentLevel={diff.level} sub="Mild = traag. Pittig = normaal tempo. Vlammend = snel Γ©n de knoppen zijn grijs, alleen icoon en toon helpen." />
); } const status = fase === "kijk" ? "πŸ‘€ KIJK EN LUISTER…" : fase === "jij" ? `πŸ‘‰ JOUW BEURT! (${stap} / ${reeks.length})` : fase === "wacht" ? "βœ… JUIST!" : fase === "over" ? "πŸ’₯ OEPS!" : "Druk op START"; const padSize = isMobile ? "min(38vw, 150px)" : 150; return (
{floaters.node} PEPER ZEGT
πŸ† RECORD {best}{nieuwRecord ? " ✨" : ""}
{status}
{ZEGT_PADS.map(p => { const isLit = lit === p.id; const isFout = fout && fout.gedrukt === p.id; const isJuist = fout && fout.juist === p.id; const grijs = cfg.grijs && !isLit && !isJuist; const kleur = grijs ? "#9A9A9A" : p.kleur; return ( ); })}
{(fase === "idle") && (
β–Ά START
)} {fase === "over" && ( { stopTimers(); setFase("idle"); diff.reopen(); }} message={ score === 0 ? "Nog geen reeks gehaald. Kijk goed en probeer nog eens!" : `Je haalde ${score} ${score === 1 ? "reeks" : "reeksen"} op rij${nieuwRecord ? ", een nieuw record!" : `. Je record is ${best}.`}` } /> )}
Tik op de knoppen, of gebruik de pijltjes / 1 2 3 4 op je toetsenbord of controller.
); } Object.assign(window, { PeperZegt });