import { useState, useEffect, useRef } from “react”; const HOLE_COUNT = 9; // ─── AUDIO ─────────────────────────────────────────────── function playFunkyMusic(ctx) { const t0 = ctx.currentTime + 0.05; const s16 = 0.175; // seconds per 16th note const bar = s16 * 16; const comp = ctx.createDynamicsCompressor(); comp.threshold.value = -16; comp.ratio.value = 4; comp.attack.value = 0.003; comp.release.value = 0.12; comp.connect(ctx.destination); const note = (freq, start, dur, type, vol) => { if (!freq) return; const o = ctx.createOscillator(); o.type = type; o.frequency.setValueAtTime(freq, start); const g = ctx.createGain(); g.gain.setValueAtTime(0, start); g.gain.linearRampToValueAtTime(vol, start + 0.008); g.gain.exponentialRampToValueAtTime(0.001, start + Math.max(dur, 0.02)); o.connect(g); g.connect(comp); o.start(start); o.stop(start + dur + 0.01); }; const drum = (type, start) => { const sr = ctx.sampleRate; const len = type === “kick” ? sr*0.25 : type === “snare” ? sr*0.18 : sr*0.07; const buf = ctx.createBuffer(1, len, sr); const d = buf.getChannelData(0); if (type === “kick”) { for (let i=0;i note(f, r+i*s16, s16*1.6, “sawtooth”, 0.38)); mel.forEach((f,i) => note(f, r+i*s16, s16*0.6, “square”, 0.10)); stab.forEach((on,i) => { if (!on) return; [220,277.2,329.6,415.3].forEach(cf => note(cf, r+i*s16, s16*0.25, “triangle”, 0.07)); }); kick.forEach((on,i) => { if(on) drum(“kick”, r+i*s16); }); snare.forEach((on,i) => { if(on) drum(“snare”, r+i*s16); }); hihat.forEach((on,i) => { if(on) drum(“hihat”, r+i*s16); }); openHH.forEach((on,i) => { if(on) drum(“open”, r+i*s16); }); } return comp; } function playWhack(ctx) { const o = ctx.createOscillator(); o.type = “sine”; o.frequency.setValueAtTime(320, ctx.currentTime); o.frequency.exponentialRampToValueAtTime(70, ctx.currentTime + 0.1); const g = ctx.createGain(); g.gain.setValueAtTime(0.5, ctx.currentTime); g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.12); o.connect(g); g.connect(ctx.destination); o.start(); o.stop(ctx.currentTime + 0.13); } // ─── FUGGLER FACE ───────────────────────────────────────── function FugglerFace({ whacked }) { return ( ); } function Hole({ active, whacked, onWhack }) { return (

); } // ─── MAIN GAME ──────────────────────────────────────────── export default function App() { const [active, setActive] = useState(Array(HOLE_COUNT).fill(false)); const [whacked, setWhacked] = useState(Array(HOLE_COUNT).fill(false)); const [score, setScore] = useState(0); const [misses, setMisses] = useState(0); const [timeLeft, setTimeLeft] = useState(30); const [playing, setPlaying] = useState(false); const [best, setBest] = useState(0); const timers = useRef([]); const gameTimer = useRef(null); const spawnRef = useRef(null); const tRef = useRef(30); const sRef = useRef(0); const audioCtx = useRef(null); const clearAll = () => { timers.current.forEach(clearTimeout); timers.current = []; clearInterval(gameTimer.current); clearTimeout(spawnRef.current); }; const startGame = () => { // Resume/create audio synchronously inside user gesture (iOS requirement) if (!audioCtx.current) { audioCtx.current = new (window.AudioContext || window.webkitAudioContext)(); } else if (audioCtx.current.state === “suspended”) { audioCtx.current.resume(); } playFunkyMusic(audioCtx.current); ``` clearAll(); setActive(Array(HOLE_COUNT).fill(false)); setWhacked(Array(HOLE_COUNT).fill(false)); setScore(0); setMisses(0); setTimeLeft(30); setPlaying(true); tRef.current = 30; sRef.current = 0; gameTimer.current = setInterval(() => { tRef.current--; setTimeLeft(tRef.current); if (tRef.current <= 0) { clearAll(); setPlaying(false); setActive(Array(HOLE_COUNT).fill(false)); setBest(b => Math.max(b, sRef.current)); } }, 1000); const spawn = () => { spawnRef.current = setTimeout(() => { if (tRef.current <= 0) return; setActive(prev => { const avail = prev.map((a,i) => a ? -1 : i).filter(i => i >= 0); if (!avail.length) { spawn(); return prev; } const idx = avail[Math.floor(Math.random() * avail.length)]; const next = [...prev]; next[idx] = true; const stay = 750 + Math.random() * 750; const t = setTimeout(() => { setActive(a => { if(a[idx]){ setMisses(m=>m+1); const n=[...a];n[idx]=false;return n; } return a; }); }, stay); timers.current.push(t); return next; }); spawn(); }, 320 + Math.random() * 480); }; spawn(); ``` }; const handleWhack = idx => { setActive(a => { if(!a[idx]) return a; const n=[…a];n[idx]=false;return n; }); setWhacked(w => { const n=[…w];n[idx]=true;return n; }); setScore(s => { sRef.current=s+1; return s+1; }); if (audioCtx.current) playWhack(audioCtx.current); const t = setTimeout(() => setWhacked(w=>{const n=[…w];n[idx]=false;return n;}), 480); timers.current.push(t); }; useEffect(() => () => clearAll(), []); const pct = (timeLeft/30)*100; const tc = timeLeft>15?”#7ec850”:timeLeft>8?”#f5a623”:”#e8413a”; return (

```

🪲 WHACK-A-FUGGLER 🪲

THEY MUST BE STOPPED

{[["WHACKED",score,"#b4c828"],["ESCAPED",misses,"#e8413a"],["BEST",best,"#60a5fa"]].map(([l,v,c])=>(

{v}

{l}

))}

{playing &&

{timeLeft}s

}

{Array.from({length:HOLE_COUNT}).map((_,i)=>(

handleWhack(i)}/>

))}

{!playing && (

{timeLeft===0 && (

=15?"#b4c828":score>=8?"#f5a623":"#e8413a",fontSize:17,fontWeight:900,textShadow:"0 0 15px currentColor"}}> {score>=15?"🏆 FUGGLER SLAYER":score>=8?"💪 DECENT WHACKER":"😈 THEY ESCAPED"}

Final score: {score}

)}

``` ); }

What game do you want to create?