// screen-hexsweep.jsx — Interlude between P02 and P03. // Resource hex tiles drop in a 3-tile stack. Player rotates the active // stack so its bottom face matches the highlighted need slot, then locks. const { useState: useStHx, useEffect: useEfHx, useRef: useRfHx, useMemo: useMmHx } = React; function HexSweepScreen({ run, difficulty, onComplete }) { const tMul = window.__sylExtendedTime ? 1.5 : 1; const cfg = difficulty === 'recruit' ? { rounds: 6, dropTime: 6 * tMul } : difficulty === 'ghost' ? { rounds: 9, dropTime: 3 * tMul } : { rounds: 7, dropTime: 4.5 * tMul }; // Build the round queue: each round = (need, stack of 3 hexes, one of which matches) const queue = useMmHx(() => { const rounds = []; for (let i = 0; i < cfg.rounds; i++) { const need = HEX_NEEDS[Math.floor(Math.random() * HEX_NEEDS.length)]; // Always include at least one matching resource const matches = HEX_RESOURCES.filter((r) => r.face === need.id); const others = HEX_RESOURCES.filter((r) => r.face !== need.id); const correct = matches[Math.floor(Math.random() * matches.length)]; const distract = [...others].sort(() => Math.random() - 0.5).slice(0, 2); const stack = [correct, ...distract].sort(() => Math.random() - 0.5); rounds.push({ need, stack }); } return rounds; // eslint-disable-next-line }, [difficulty]); const [round, setRound] = useStHx(0); const [activeIdx, setActiveIdx] = useStHx(0); // 0..2 — which face of the stack is "down" const [time, setTime] = useStHx(cfg.dropTime); const [feedback, setFeedback] = useStHx(null); // {correct, locked, need} const [results, setResults] = useStHx([]); const [done, setDone] = useStHx(false); const tickRef = useRfHx(null); const paused = window.useSylPaused ? window.useSylPaused() : false; const cur = queue[round]; // Per-round timer useEfHx(() => { if (done || feedback || paused) return; if (time === cfg.dropTime) setActiveIdx(0); tickRef.current = setInterval(() => { setTime((t) => { if (t <= 0.1) { clearInterval(tickRef.current); // Auto-lock with whatever's currently selected autoLock(); return 0; } return +(t - 0.1).toFixed(1); }); }, 100); return () => clearInterval(tickRef.current); // eslint-disable-next-line }, [round, done, paused]); // Reset timer on new round useEfHx(() => { if (done || feedback) return; setTime(cfg.dropTime); setActiveIdx(0); // eslint-disable-next-line }, [round]); function rotate(dir) { if (feedback || done) return; setActiveIdx((i) => (i + dir + 3) % 3); } function lock() { if (feedback || done) return; clearInterval(tickRef.current); const locked = cur.stack[activeIdx]; const correct = locked.face === cur.need.id; setResults((r) => [...r, { round, correct, lockedId: locked.id, needId: cur.need.id }]); setFeedback({ correct, locked, need: cur.need }); window.sylAnnounce && window.sylAnnounce( correct ? `Aligned. ${locked.name} matches ${cur.need.label}. Plus 140 XP.` : `Misaligned. ${locked.name} does not serve ${cur.need.label}.`, true ); setTimeout(() => { setFeedback(null); const next = round + 1; if (next >= queue.length) finalize(); else setRound(next); }, 1300); } function autoLock() { if (feedback || done) return; lock(); } function finalize() { if (done) return; setDone(true); const finalResults = results.length === queue.length ? results : [...results, ...(feedback ? [{ correct: feedback.correct }] : [])]; const correct = finalResults.filter((r) => r.correct).length; const total = queue.length; const accuracy = correct / total; const score = correct * 140 + (accuracy >= 0.75 ? 250 : 0); setTimeout(() => onComplete({ protocol: 'hexsweep', score, correct, total, integrity: Math.round(accuracy * 100), badge: accuracy === 1 ? 'PERFECT SWEEP' : null, }), 800); } // Keyboard: ←/→ rotate, Space/Enter lock useEfHx(() => { const fn = (e) => { if (feedback || done) return; if (e.key === 'ArrowLeft') { e.preventDefault(); rotate(-1); } if (e.key === 'ArrowRight') { e.preventDefault(); rotate(1); } if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); lock(); } }; window.addEventListener('keydown', fn); return () => window.removeEventListener('keydown', fn); // eslint-disable-next-line }, [feedback, done, activeIdx]); const correctSoFar = results.filter((r) => r.correct).length; return (
{/* Header */}
◢ INTERLUDE / HEX_SWEEP
ALIGN THE RESOURCE GRID
A need is broadcasting from the slot below. Rotate the dropping hex stack so the matching face locks into place. ← / → to rotate · SPACE to lock.
ROUND
{Math.min(round + 1, queue.length)}/{queue.length}
HITS · {correctSoFar}
{/* Timer bar */}
{/* Play area */} {cur && (
{/* Left: stack preview */}
// STACK
{cur.stack.map((tile, i) => { const need = HEX_NEEDS.find((n) => n.id === tile.face); const active = i === activeIdx; return (
{need.glyph}
{tile.name}
{active && (
◀▶
)}
); })}
← ROTATE → · SPACE LOCK
{/* Center: active hex floating above slot */}
{(() => { const tile = cur.stack[activeIdx]; const need = HEX_NEEDS.find((n) => n.id === tile.face); const isMatch = tile.face === cur.need.id; const lockedColor = feedback ? (feedback.correct ? 'var(--neon-lime)' : 'var(--neon-magenta)') : need.accent; return ( <> {/* Drop trail */}
); })()}
{/* Right: rotate buttons + lock */}
// SLOT BROADCAST
{cur.need.glyph} {cur.need.label}
)} {/* Feedback */} {feedback && (
{feedback.correct ? `✓ ALIGNED → ${feedback.locked.name} matches ${feedback.need.label}` : `✗ MISALIGNED. ${feedback.locked.name} does not serve ${feedback.need.label}.`} {feedback.correct ? '+ 140 XP' : '+ 0 XP'}
)}
); } // ── Hex shape ──────────────────────────────────────────────────────────── function Hex({ glyph, label, accent, isSlot, pulse, dropping, matched }) { const size = isSlot ? 110 : 90; return (
{isSlot && ( )}
{glyph}
{label}
); } window.HexSweepScreen = HexSweepScreen;