// paddenstoelen-zoeken.jsx, zoekplaat in het herfstige Peperbos. Tussen de
// blaadjes, stenen en slakken zitten paddenstoelen, een egel, kastanjes en een
// verstopte wasknijper. Tik alles van het lijstje aan, zo snel mogelijk.
// Geen leesvaardigheid nodig: het lijstje bestaat uit plaatjes.
//
// Pit:
// mild = 3 bossen, weinig afleiders, grote plaatjes
// pittig = 3 bossen, meer afleiders, meer soorten om te zoeken
// vlammend = 4 bossen, heel druk en kleine plaatjes
const ZOEK_DOELEN = {
paddenstoel: { emoji: "🍄", naam: "paddenstoel" },
egel: { emoji: "🦔", naam: "egel" },
kastanje: { emoji: "🌰", naam: "kastanje" },
eekhoorn: { emoji: "🐿️", naam: "eekhoorn" },
uil: { emoji: "🦉", naam: "uil" },
peper: { emoji: "🌶️", naam: "peper" },
wasknijper: { emoji: null, naam: "wasknijper" }, // SVG-component uit peper-components
};
const ZOEK_AFLEIDERS = ["🍂", "🍁", "🍃", "🌿", "🪨", "🌾", "🐌", "🐛", "🍂", "🍁", "🍂", "🍁", "🪵", "🌱", "🍂", "🐜"];
const ZOEK_BOMEN = ["🌳", "🌲", "🌳", "🌲"];
const ZOEK_DIFF = {
mild: {
bossen: 3, afleiders: 20, maat: [34, 44], bomen: 5, hintNa: 8,
doelen: [["paddenstoel", 3], ["egel", 1], ["peper", 1]],
},
pittig: {
bossen: 3, afleiders: 38, maat: [26, 36], bomen: 7, hintNa: 12,
doelen: [["paddenstoel", 4], ["egel", 1], ["kastanje", 2], ["wasknijper", 1]],
},
vlammend: {
bossen: 4, afleiders: 58, maat: [20, 28], bomen: 8, hintNa: 18,
doelen: [["paddenstoel", 5], ["egel", 1], ["kastanje", 3], ["wasknijper", 1], ["eekhoorn", 1], ["uil", 1]],
},
};
// Plaatst items op willekeurige plekken met een minimale onderlinge afstand
// zodat niets volledig achter iets anders verdwijnt. Posities in procenten.
function zoekMaakBos(cfg) {
const items = [];
const bezet = [];
function vrij(x, y, min) {
return bezet.every(p => Math.hypot(p.x - x, p.y - y) >= min);
}
function plaats(spec, minAfstand, yMin, yMax) {
for (let poging = 0; poging < 60; poging++) {
const x = 4 + Math.random() * 92;
const y = yMin + Math.random() * (yMax - yMin);
if (vrij(x, y, minAfstand)) {
bezet.push({ x, y });
items.push({ ...spec, x, y, rot: (Math.random() - 0.5) * 40 });
return true;
}
}
// Te druk: zet hem toch neer, liever een overlap dan een ontbrekend doel.
const x = 4 + Math.random() * 92, y = yMin + Math.random() * (yMax - yMin);
bezet.push({ x, y });
items.push({ ...spec, x, y, rot: 0 });
return false;
}
let id = 0;
// Bomen bovenin, groot, puur decor.
for (let i = 0; i < cfg.bomen; i++) {
plaats({ id: id++, soort: "boom", emoji: ZOEK_BOMEN[i % ZOEK_BOMEN.length], maat: 54 + Math.random() * 22 }, 9, 4, 42);
}
// Doelen eerst, zodat ze zeker een plek krijgen.
const doelIds = [];
for (const [soort, aantal] of cfg.doelen) {
for (let i = 0; i < aantal; i++) {
const maat = cfg.maat[0] + Math.random() * (cfg.maat[1] - cfg.maat[0]) * 0.7;
const it = { id: id++, soort, doel: true, gevonden: false, emoji: ZOEK_DOELEN[soort].emoji, maat };
plaats(it, 7, 10, 94);
doelIds.push(it.id);
}
}
for (let i = 0; i < cfg.afleiders; i++) {
const maat = cfg.maat[0] + Math.random() * (cfg.maat[1] - cfg.maat[0]);
plaats({ id: id++, soort: "afleider", emoji: ZOEK_AFLEIDERS[Math.floor(Math.random() * ZOEK_AFLEIDERS.length)], maat }, 5, 8, 96);
}
// Tekenvolgorde: op y sorteren geeft een beetje diepte (lager = meer vooraan).
items.sort((a, b) => (a.soort === "boom" ? -1 : b.soort === "boom" ? 1 : a.y - b.y));
return items;
}
function zoekTijd(sec) {
const m = Math.floor(sec / 60), s = sec % 60;
return m > 0 ? `${m}:${String(s).padStart(2, "0")}` : `${s} sec`;
}
function PaddenstoelenZoeken({ onClose }) {
const isMobile = useIsMobile();
const diff = useDifficulty("paddenstoelen-zoeken", "pittig");
const cfg = ZOEK_DIFF[diff.level] || ZOEK_DIFF.pittig;
const [bosNr, setBosNr] = React.useState(0);
const [items, setItems] = React.useState([]);
const [gevondenTotaal, setGevondenTotaal] = React.useState(0);
const [seconden, setSeconden] = React.useState(0);
const [hints, setHints] = React.useState(0);
const [hintId, setHintId] = React.useState(null);
const [laatsteVondst, setLaatsteVondst] = React.useState(0);
const [misId, setMisId] = React.useState(null);
const [bosKlaar, setBosKlaar] = React.useState(false);
const [klaar, setKlaar] = React.useState(false);
const [confetti, setConfetti] = React.useState(0);
const floaters = useFloaters();
const veldRef = React.useRef(null);
const totaalDoelen = cfg.doelen.reduce((n, [, a]) => n + a, 0) * cfg.bossen;
const nieuwBos = React.useCallback(() => {
setItems(zoekMaakBos(cfg));
setBosKlaar(false); setHintId(null); setMisId(null);
setLaatsteVondst(Date.now());
}, [cfg]);
const reset = React.useCallback(() => {
setBosNr(0); setGevondenTotaal(0); setSeconden(0); setHints(0); setKlaar(false);
nieuwBos();
}, [nieuwBos]);
React.useEffect(() => { if (diff.chosen) reset(); }, [diff.chosen, reset]);
// Timer loopt zolang er gezocht wordt.
React.useEffect(() => {
if (!diff.chosen || klaar || bosKlaar) return;
const t = setInterval(() => setSeconden(s => s + 1), 1000);
return () => clearInterval(t);
}, [diff.chosen, klaar, bosKlaar]);
const hintMogelijk = !bosKlaar && !klaar && (Date.now() - laatsteVondst) / 1000 >= cfg.hintNa;
function tik(item, e) {
if (bosKlaar || klaar) return;
if (!item.doel) {
// Afleider: even wiebelen, geen straf.
setMisId(item.id);
setTimeout(() => setMisId(m => (m === item.id ? null : m)), 400);
return;
}
if (item.gevonden) return;
const rect = veldRef.current && veldRef.current.getBoundingClientRect();
const px = rect ? ((e.clientX - rect.left) / rect.width) * 100 : 50;
const py = rect ? ((e.clientY - rect.top) / rect.height) * 100 : 50;
floaters.pop("+1", { x: px, y: py, color: "#5BB85B" });
setLaatsteVondst(Date.now());
setHintId(null);
setGevondenTotaal(n => n + 1);
const nieuw = items.map(it => it.id === item.id ? { ...it, gevonden: true } : it);
setItems(nieuw);
if (nieuw.every(it => !it.doel || it.gevonden)) {
setBosKlaar(true);
setConfetti(c => c + 1);
}
}
function volgendBos() {
const n = bosNr + 1;
if (n >= cfg.bossen) { setKlaar(true); return; }
setBosNr(n);
nieuwBos();
}
function hint() {
const rest = items.filter(it => it.doel && !it.gevonden);
if (!rest.length) return;
const kies = rest[Math.floor(Math.random() * rest.length)];
setHintId(kies.id);
setHints(h => h + 1);
setLaatsteVondst(Date.now());
setTimeout(() => setHintId(h => (h === kies.id ? null : h)), 2500);
}
if (!diff.chosen) {
return (
PADDENSTOELEN ZOEKEN
diff.choose(id)}
currentLevel={diff.level}
sub="Mild = 3 rustige bossen. Pittig = drukker, met kastanjes en een wasknijper. Vlammend = 4 bossen vol kleine plaatjes."
/>
);
}
// Lijstje bovenaan: per soort hoeveel er nog te vinden zijn in dit bos.
const lijst = cfg.doelen.map(([soort, aantal]) => {
const gevonden = items.filter(it => it.doel && it.soort === soort && it.gevonden).length;
return { soort, aantal, gevonden, af: gevonden >= aantal };
});
return (
PADDENSTOELEN ZOEKEN
⏱ {zoekTijd(seconden)}
{klaar ? (
diff.reopen()}
perfectMessage="SPEURNEUS!"
message={`Je vond alles in ${zoekTijd(seconden)}${hints ? ` met ${hints} ${hints === 1 ? "hint" : "hints"}` : " zonder hints"}!`} />
) : (