import { useCallback, useEffect, useRef, useState } from "react"; import "./styles.css"; type Phase = "idle" | "listen" | "input" | "over"; type Difficulty = "drift" | "pulse" | "surge"; type Pad = { label: string; frequency: number; color: string; x: number; y: number; pan: number }; const PADS: Pad[] = [ { label: "Lumen", frequency: 261.63, color: "#ff7a66", x: 50, y: 8, pan: 0 }, { label: "Vela", frequency: 329.63, color: "#ffcd66", x: 77, y: 25, pan: 0.65 }, { label: "Serein", frequency: 392, color: "#7de1d1", x: 77, y: 60, pan: 0.75 }, { label: "Nadir", frequency: 493.88, color: "#6da7ff", x: 50, y: 77, pan: 0 }, { label: "Morrow", frequency: 587.33, color: "#ae83ff", x: 23, y: 60, pan: -0.75 }, { label: "Ember", frequency: 698.46, color: "#ff75af", x: 23, y: 25, pan: -0.65 }, ]; const SPEEDS: Record = { drift: 700, pulse: 500, surge: 330 }; function pickPad() { return Math.floor(Math.random() * PADS.length); } export default function App() { const [phase, setPhase] = useState("idle"); const [difficulty, setDifficulty] = useState("pulse"); const [sequence, setSequence] = useState([]); const [inputIndex, setInputIndex] = useState(0); const [activePad, setActivePad] = useState(null); const [mistakePad, setMistakePad] = useState(null); const [score, setScore] = useState(0); const [best, setBest] = useState(0); const [sound, setSound] = useState(true); const audioRef = useRef(null); const timersRef = useRef([]); const phaseRef = useRef("idle"); const sequenceRef = useRef([]); const inputIndexRef = useRef(0); useEffect(() => { phaseRef.current = phase; }, [phase]); useEffect(() => { sequenceRef.current = sequence; }, [sequence]); useEffect(() => { inputIndexRef.current = inputIndex; }, [inputIndex]); useEffect(() => { const saved = Number(window.localStorage.getItem("echo-chamber-best") || 0); setBest(Number.isFinite(saved) ? saved : 0); return () => timersRef.current.forEach((timer) => window.clearTimeout(timer)); }, []); const schedule = useCallback((callback: () => void, delay: number) => { const timer = window.setTimeout(callback, delay); timersRef.current.push(timer); return timer; }, []); const clearTimers = useCallback(() => { timersRef.current.forEach((timer) => window.clearTimeout(timer)); timersRef.current = []; }, []); const playTone = useCallback((index: number, duration = 0.28) => { if (!sound) return; if (!audioRef.current) audioRef.current = new AudioContext(); const audio = audioRef.current; if (audio.state === "suspended") void audio.resume(); const oscillator = audio.createOscillator(); const gain = audio.createGain(); const panner = audio.createStereoPanner(); const now = audio.currentTime; oscillator.type = "sine"; oscillator.frequency.setValueAtTime(PADS[index].frequency, now); oscillator.frequency.exponentialRampToValueAtTime(PADS[index].frequency * 1.008, now + duration); gain.gain.setValueAtTime(0.0001, now); gain.gain.exponentialRampToValueAtTime(0.22, now + 0.025); gain.gain.exponentialRampToValueAtTime(0.0001, now + duration); panner.pan.setValueAtTime(PADS[index].pan, now); oscillator.connect(gain); gain.connect(panner); panner.connect(audio.destination); oscillator.start(now); oscillator.stop(now + duration + 0.02); }, [sound]); const flash = useCallback((index: number, duration: number) => { setActivePad(index); playTone(index, Math.max(0.2, duration / 1000 - 0.08)); schedule(() => setActivePad((current) => current === index ? null : current), duration); }, [playTone, schedule]); const performSequence = useCallback((nextSequence: number[]) => { clearTimers(); setPhase("listen"); phaseRef.current = "listen"; setInputIndex(0); inputIndexRef.current = 0; const speed = SPEEDS[difficulty]; nextSequence.forEach((padIndex, index) => { schedule(() => flash(padIndex, speed * 0.56), 500 + index * speed); }); schedule(() => { setActivePad(null); setPhase("input"); phaseRef.current = "input"; }, 500 + nextSequence.length * speed); }, [clearTimers, difficulty, flash, schedule]); const begin = useCallback(() => { if (!audioRef.current) audioRef.current = new AudioContext(); void audioRef.current.resume(); setScore(0); setMistakePad(null); const first = [pickPad()]; setSequence(first); sequenceRef.current = first; performSequence(first); }, [performSequence]); const choosePad = useCallback((index: number) => { if (phaseRef.current !== "input") return; flash(index, 260); const expected = sequenceRef.current[inputIndexRef.current]; if (index !== expected) { setMistakePad(index); setPhase("over"); phaseRef.current = "over"; const nextBest = Math.max(best, score); setBest(nextBest); window.localStorage.setItem("echo-chamber-best", String(nextBest)); return; } const isRoundComplete = inputIndexRef.current === sequenceRef.current.length - 1; if (!isRoundComplete) { const nextInput = inputIndexRef.current + 1; setInputIndex(nextInput); inputIndexRef.current = nextInput; setScore((value) => value + 25); return; } const roundBonus = sequenceRef.current.length * 100; setScore((value) => value + roundBonus); setPhase("listen"); phaseRef.current = "listen"; const nextSequence = [...sequenceRef.current, pickPad()]; setSequence(nextSequence); sequenceRef.current = nextSequence; schedule(() => performSequence(nextSequence), 720); }, [best, flash, performSequence, schedule, score]); useEffect(() => { const onKeyDown = (event: KeyboardEvent) => { const index = Number(event.key) - 1; if (index >= 0 && index < PADS.length) choosePad(index); if (event.key === "Enter" && (phaseRef.current === "idle" || phaseRef.current === "over")) begin(); }; window.addEventListener("keydown", onKeyDown); return () => window.removeEventListener("keydown", onKeyDown); }, [begin, choosePad]); const round = sequence.length; const statusCopy = phase === "idle" ? "Awaiting signal" : phase === "listen" ? "Listen" : phase === "input" ? "Your echo" : "Signal lost"; return (

E/CECHO CHAMBER

Spatial memory instrument № 06

ROUND {String(round).padStart(2, "0")} {statusCopy}

{PADS.map((pad, index) => ( ))}

CADENCE {(["drift", "pulse", "surge"] as Difficulty[]).map((option) => ( ))}

Repeat each spatial tone in order. Use the pads or keys 1—6.

{(phase === "idle" || phase === "over") && (
{phase === "idle" ? "CALIBRATION READY" : "PATTERN DISSOLVED"}
{phase === "idle" ? "How long can you hold an echo?" : "You held " + Math.max(0, round - 1) + " complete patterns."}

{phase === "idle" ? "Listen as the chamber places a tone in space, then return the pattern. One tone is added every round." : "The chamber has recorded your score. Re-enter when your attention is quiet."}

)}

); }