{/* gravitational glow halo */}

{/* outer accretion disk — slow rotation */}

{/* inner accretion ring — faster, reversed */}

{/* photon ring — bright thin lensing ring */}

{/* event horizon — deep 3D well */}

{/* shape motif — original SVG overlay, reads bright over the dark well */} {/* lensed hot-spot (Doppler beaming) */}

{sk.googly && <>

}

); } // scatter objects for a world; difficulty-scaled per level function makeObjects(world, level, countOverride, arena) { const props = world.props; const goal = (window.HH.LEVELS.flat().find(l => l[0] === level) || [])[2] || 'sweep'; const D = window.HH.DIFFICULTY(level); const count = countOverride || (arena ? Math.min(64, Math.round(D.count * 1.5)) : D.count); const arr = []; let seed = level * 9301 + 49297; const rnd = () => { seed = (seed * 9301 + 49297) % 233280; return seed / 233280; }; // grid for arena (city blocks); radial-ish for the disc preview const cols = Math.ceil(Math.sqrt(count)); for (let i = 0; i < count; i++) { let t = props[(rnd() * props.length) | 0]; if (rnd() < D.bigBias) { const big = props.filter(p => ((PROP_DEF[p] || {}).tier || 1) >= 2); if (big.length) t = big[(rnd() * big.length) | 0]; } let x, y; if (arena) { const gx = i % cols, gy = (i / cols) | 0; x = 0.06 + (gx + 0.5 + (rnd() - 0.5) * 0.7) / cols * 0.88; y = 0.06 + (gy + 0.5 + (rnd() - 0.5) * 0.7) / cols * 0.88; } else { const ang = rnd() * Math.PI * 2, rad = 0.18 + rnd() * 0.74; x = 0.5 + Math.cos(ang) * rad * 0.46; y = 0.5 + Math.sin(ang) * rad * 0.46; } const gold = goal === 'treasure' && rnd() < 0.5; const avoid = goal === 'avoid' ? rnd() < 0.28 : rnd() < D.hazard; arr.push({ id: 'o' + i, type: t, x, y, tier: (PROP_DEF[t] || {}).tier || 1, gold, avoid, eaten: false, size: 30 + ((PROP_DEF[t] || {}).tier || 1) * 8 + rnd() * 6, rot: (rnd() - 0.5) * 10, }); } return arr; } function Board({ world, level = 1, skin = 'classic', interactive = true, onUpdate, onEmpty, small = false, scoreMult = 1, reachBoost = 0, bombSignal = 0, growSignal = 0 }) { const stageRef = useRefB(null); const planeRef = useRefB(null); const PLANE = small ? 300 : 1120; // world size (px) — large for camera-follow arena const VIEW = small ? 300 : 470; // visible rotated-plane window const arena = !small; const [objects, setObjects] = useStateB(() => makeObjects(world, level, small ? 12 : undefined, arena)); const [hole, setHole] = useStateB({ x: 0.5, y: 0.62, r: small ? 26 : 34, tier: 1 }); const holeRef = useRefB(hole); holeRef.current = hole; const reachRef = useRefB(0); reachRef.current = reachBoost; const multRef = useRefB(1); multRef.current = scoreMult; const objectsRef = useRefB(objects); objectsRef.current = objects; const target = useRefB({ x: 0.5, y: 0.62 }); const seekId = useRefB(null); const [fx, setFx] = useStateB([]); // gulp puffs, rings const [floats, setFloats] = useStateB([]); const [combo, setCombo] = useStateB(0); const comboTimer = useRefB(null); const [score, setScore] = useStateB(0); const eatenCount = useRefB(0); const fxId = useRefB(0); const dragging = useRefB(false); const touched = useRefB(false); // report up useEffectB(() => { onUpdate && onUpdate({ score, combo, eaten: eatenCount.current, total: objects.length, holeTier: hole.tier, remaining: objects.filter(o => !o.eaten).length }); }, [score, combo, hole.tier, objects]); const pushFx = (x, y, kind, color) => { const id = fxId.current++; setFx(f => [...f, { id, x, y, kind, color }]); setTimeout(() => setFx(f => f.filter(p => p.id !== id)), 700); }; const pushFloat = (x, y, text, color) => { const id = fxId.current++; setFloats(f => [...f, { id, x, y, text, color }]); setTimeout(() => setFloats(f => f.filter(p => p.id !== id)), 850); }; // ---- main loop: ease hole to target, detect eats, grow ---- useEffectB(() => { let stop = false; const tick = () => { if (stop) return; const h = holeRef.current; // ---- auto-seek: when not yet touched (or non-interactive), aim at nearest edible object ---- const auto = !interactive || !touched.current; if (auto) { const objs = objectsRef.current; const cur = objs.find(o => o.id === seekId.current && !o.eaten && o.tier <= h.tier); if (!cur) { // pick nearest uneaten object we can eat (fallback: any uneaten) let best = null, bd = Infinity; const edible = objs.filter(o => !o.eaten && o.tier <= h.tier); const pool = edible.length ? edible : objs.filter(o => !o.eaten); pool.forEach(o => { const d = Math.hypot(o.x - h.x, o.y - h.y); if (d < bd) { bd = d; best = o; } }); if (best) { seekId.current = best.id; target.current = { x: best.x, y: best.y }; } } else { target.current = { x: cur.x, y: cur.y }; } } const tg = target.current; // weighty spring ease const nx = h.x + (tg.x - h.x) * 0.16; const ny = h.y + (tg.y - h.y) * 0.16; // eat detection in plane space let ate = false, grew = false; setObjects(prev => { let changed = false; const next = prev.map(o => { if (o.eaten) return o; const dx = (o.x - nx) * PLANE, dy = (o.y - ny) * PLANE; const dist = Math.hypot(dx, dy); const reach = h.r + o.size * 0.18 + reachRef.current; if (dist < reach) { if (o.tier > h.tier) { // too big — resist/wobble if (!o.wobble) { changed = true; return { ...o, wobble: true }; } return o; } changed = true; ate = true; // score & combo (frenzy multiplier) const base = (1 + o.tier * (o.gold ? 4 : 1)) * (multRef.current || 1); eatenCount.current += 1; return { ...o, eaten: true, _val: base }; } if (o.wobble && dist >= reach) { changed = true; return { ...o, wobble: false }; } return o; }); return changed ? next : prev; }); if (nx !== h.x || ny !== h.y) setHole(hh => ({ ...hh, x: nx, y: ny })); }; const iv = setInterval(tick, 33); return () => { stop = true; clearInterval(iv); }; }, [PLANE, interactive]); // handle eaten side-effects (score, fx, combo, grow) — watch objects flagged eaten without _done useEffectB(() => { const fresh = objects.filter(o => o.eaten && !o._done); if (!fresh.length) return; let addScore = 0, anyAvoid = false; fresh.forEach(o => { addScore += o._val * 10; const px = (o.x - 0.5) * PLANE, py = (o.y - 0.5) * PLANE; pushFx(o.x, o.y, 'gulp', world.accent); pushFloat(o.x, o.y, (o.avoid ? '✕' : '+') + (o.avoid ? '' : o._val * 10), o.avoid ? window.HH.C.coral : '#fff'); if (o.avoid) anyAvoid = true; }); setScore(s => s + addScore); // combo setCombo(c => { const nc = c + fresh.length; clearTimeout(comboTimer.current); comboTimer.current = setTimeout(() => setCombo(0), 1600); return nc; }); // grow at thresholds const ec = eatenCount.current; setHole(h => { let r = h.r, tier = h.tier, did = false; const threshold = small ? 4 : 5; const targetTier = Math.min(3, 1 + Math.floor(ec / threshold)); if (targetTier > tier) { tier = targetTier; r = (small ? 26 : 34) + (tier - 1) * (small ? 9 : 13); did = true; } if (did) pushFx(h.x, h.y, 'grow', window.HH.C.mint); return { ...h, r, tier }; }); // mark done setObjects(prev => prev.map(o => o.eaten && !o._done ? { ...o, _done: true } : o)); }, [objects]); // empty board → notify (level sweep complete) useEffectB(() => { if (objects.length && objects.every(o => o.eaten)) { const t = setTimeout(() => onEmpty && onEmpty(score), 700); return () => clearTimeout(t); } }, [objects, score]); // ---- (auto-seek handled inside the main animation loop above) ---- // reset when level/world changes useEffectB(() => { setObjects(makeObjects(world, level, small ? 12 : undefined, arena)); setHole({ x: 0.5, y: 0.62, r: small ? 26 : 34, tier: 1 }); target.current = { x: 0.5, y: 0.62 }; setScore(0); setCombo(0); eatenCount.current = 0; touched.current = false; }, [world.id, level]); // ---- power-up: BLAST — devour everything in a wide ring ---- useEffectB(() => { if (!bombSignal) return; const h = holeRef.current; let banked = 0, n = 0; setObjects(prev => prev.map(o => { if (o.eaten) return o; const d = Math.hypot((o.x - h.x) * PLANE, (o.y - h.y) * PLANE); if (d < 150) { n++; banked += (1 + o.tier) * (multRef.current || 1); eatenCount.current += 1; pushFx(o.x, o.y, 'gulp', world.accent); return { ...o, eaten: true, _val: 0, _done: true }; } return o; })); if (n) { setScore(s => s + banked * 10); pushFx(h.x, h.y, 'grow', window.HH.C.coral); setFx(f => [...f, { id: fxId.current++, x: h.x, y: h.y, kind: 'blast', color: world.accent }]); setTimeout(() => setFx(f => f.filter(p => p.kind !== 'blast')), 600); } }, [bombSignal]); // ---- power-up: MEGA GROW — jump a size ---- useEffectB(() => { if (!growSignal) return; setHole(h => { const tier = Math.min(3, h.tier + 1); const r = (small ? 26 : 34) + (tier - 1) * (small ? 9 : 13); pushFx(h.x, h.y, 'grow', window.HH.C.mint); return { ...h, tier, r }; }); }, [growSignal]); // ---- pointer drag → set target in plane coords ---- const onPointer = useCallbackB((e) => { if (!interactive || !dragging.current) return; const plane = planeRef.current; if (!plane) return; const rect = plane.getBoundingClientRect(); const cx = e.clientX ?? (e.touches && e.touches[0].clientX); const cy = e.clientY ?? (e.touches && e.touches[0].clientY); // map screen → plane: x linear; y compressed by tilt (divide by cos) let px = (cx - rect.left) / rect.width; let yRel = (cy - (rect.top + rect.height / 2)) / rect.height; yRel = yRel / Math.cos(TILT * Math.PI / 180) * 0.62; // perspective compensation let py = 0.5 + yRel; target.current = { x: Math.max(0.08, Math.min(0.92, px)), y: Math.max(0.1, Math.min(0.92, py)) }; }, [interactive]); useEffectB(() => { if (!interactive) return; const down = (e) => { dragging.current = true; touched.current = true; onPointer(e); }; const up = () => { dragging.current = false; }; const stage = stageRef.current; stage.addEventListener('pointerdown', down); window.addEventListener('pointermove', onPointer); window.addEventListener('pointerup', up); return () => { stage.removeEventListener('pointerdown', down); window.removeEventListener('pointermove', onPointer); window.removeEventListener('pointerup', up); }; }, [interactive, onPointer]); // camera ease-back as hole grows const camScale = 1 - (hole.tier - 1) * 0.06; const toPlane = (x, y) => ({ left: x * PLANE, top: y * PLANE }); return (

{/* sun / ambient bloom */}

{/* horizon depth band */}

{/* ambient weather */} {/* vignette */}

{/* tilted board */}

{/* ground disc — layered depth + grass/biome texture */}

{/* biome texture (grass blades / speckle) */}

{/* decorative border ring — beveled */}

{/* sun sheen */}

{/* shadows (on plane) */} {objects.map(o => !o.eaten && (

))} {/* the hole (flat on plane) */}

{/* growth ring fx (on plane) */} {fx.filter(f => f.kind === 'grow').map(f => (

))} {/* blast ring (power-up) */} {fx.filter(f => f.kind === 'blast').map(f => (

))} {/* objects (billboarded upright) */} {objects.map(o => (

))} {/* gulp puffs (billboarded) */} {fx.filter(f => f.kind === 'gulp').map(f => (

{[0,1,2,3,4].map(i => )}

))}

{/* score floats (screen-space, above board) */} {floats.map(f => (

{f.text}

))}

); } Object.assign(window, { Board, HoleVisual, makeObjects });