function App({ data, setData, user, isMultiplayer, sharedData, setSharedData, patchSharedData, pushToSharedArray, myPersonalData, setMyPersonalData, memberActivity, members, openProfile, share, startChat, openAuth, ai }) { const appData = isMultiplayer ? sharedData : data; const writePatch = useCallback((patch) => { if (isMultiplayer && typeof patchSharedData === 'function') { patchSharedData(patch); } else { setData({ ...(data || {}), ...patch }); } }, [isMultiplayer, patchSharedData, setData, data]); // HYPER ARENA COLORS const C = { blue: '#00F0FF', // Mapped to cyan for legacy references red: '#FF2E2E', // Electric Red green: '#B4F000', // Acid Green yellow: '#B4F000', // Acid Green magenta: '#FF2E2E', // Electric Red cyan: '#00F0FF', // Neon Cyan grey: '#1A1A20', // Dark Panel Grey darkGrey: '#0E0E10', // Gunmetal teal: '#0E0E10', // Background white: '#FFFFFF', black: '#000000', purple: '#00F0FF', orange: '#FF2E2E', gunmetal: '#0E0E10', electricRed: '#FF2E2E', acidGreen: '#B4F000', neonCyan: '#00F0FF', lightGrey: '#E0E0E0' }; const PRIMARY = C.neonCyan; const PIPE_COLOR = C.darkGrey; const SKY_TOP = C.gunmetal; const SKY_BOTTOM = '#050508'; const MAX_LEADERBOARD = 10; const GRAVITY = 0.55; const JUMP = -8.5; const PIPE_SPEED = 3; const PIPE_SPAWN = 95; const HAZARD_SPEED = 4.5; const HAZARD_SPAWN = 180; const CHEERS = ['CLUTCH!', 'HEADSHOT!', 'UNSTOPPABLE!', 'ACE!', 'TACTICAL!', 'GODLIKE!', 'DOMINATING!']; const [gameState, setGameState] = useState('START'); const [score, setScore] = useState(0); const [highScore, setHighScore] = useState(0); const [flash, setFlash] = useState(false); const [newHighScore, setNewHighScore] = useState(false); const [blink, setBlink] = useState(true); const [visitorCount] = useState(() => 1337 + Math.floor(Math.random() * 9000)); const canvasRef = useRef(null); const audioCtxRef = useRef(null); const frameCountRef = useRef(0); const birdRef = useRef({ x: 60, y: 300, vy: 0, rotation: 0 }); const pipesRef = useRef([]); const hazardsRef = useRef([]); const particlesRef = useRef([]); const cheersRef = useRef([]); const scoreRef = useRef(0); const sharedDataRef = useRef(sharedData); const dataRef = useRef(data); useEffect(() => { sharedDataRef.current = sharedData; }, [sharedData]); useEffect(() => { dataRef.current = data; }, [data]); // Blink effect useEffect(() => { const interval = setInterval(() => setBlink(b => !b), 500); return () => clearInterval(interval); }, []); const currentUser = useMemo(() => ({ id: user?.id || 'guest', displayName: user?.displayName || user?.name || 'Guest', handle: user?.handle || '', profileImageUrl: user?.avatarUrl || '' }), [user]); const sharedLeaderboard = useMemo(() => { const raw = appData?.leaderboard ?? appData?.scores ?? []; const bestByUser = {}; (Array.isArray(raw) ? raw : []).forEach((entry, i) => { const s = Number(entry?.score); if (!Number.isFinite(s) || s <= 0) return; const ru = entry?._user || {}; const norm = { score: s, _user: { id: ru.id || ru.handle || `p-${i}`, displayName: ru.displayName || 'Anonymous', handle: ru.handle || '', profileImageUrl: ru.profileImageUrl || '' }, _timestamp: Number(entry?._timestamp ?? 0) || 0 }; const key = norm._user.id; const ex = bestByUser[key]; if (!ex || norm.score > ex.score) bestByUser[key] = norm; }); return Object.values(bestByUser || {}).sort((a, b) => b.score - a.score).slice(0, MAX_LEADERBOARD); }, [appData]); const personalHigh = useMemo(() => { const p = isMultiplayer ? Number(myPersonalData?.highScore) : Number(data?.highScore); const lb = (sharedLeaderboard || []).find(e => e?._user?.id === currentUser.id)?.score || 0; return Math.max(Number.isFinite(p) ? p : 0, lb); }, [currentUser.id, data, isMultiplayer, myPersonalData, sharedLeaderboard]); useEffect(() => { setHighScore(personalHigh); }, [personalHigh]); // Audio - retro beeps const ensureAudioCtx = () => { if (!audioCtxRef.current || audioCtxRef.current.state === 'closed') { const AC = window.AudioContext || window.webkitAudioContext; if (!AC) return null; audioCtxRef.current = new AC(); } const ctx = audioCtxRef.current; if (ctx.state !== 'running') { try { ctx.resume(); } catch (e) {} } return ctx; }; const beep = (freq, dur, type = 'square') => { const ctx = audioCtxRef.current; if (!ctx || ctx.state !== 'running') return; try { const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.type = type; osc.frequency.setValueAtTime(freq, ctx.currentTime); gain.gain.setValueAtTime(0.15, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + dur); osc.connect(gain); gain.connect(ctx.destination); osc.start(); osc.stop(ctx.currentTime + dur); } catch (e) {} }; const playFlap = () => beep(440, 0.08, 'square'); const playScore = () => { beep(660, 0.1); setTimeout(() => beep(880, 0.12), 80); }; const playGameOver = () => { beep(220, 0.15, 'sawtooth'); setTimeout(() => beep(165, 0.2, 'sawtooth'), 120); setTimeout(() => beep(110, 0.3, 'sawtooth'), 280); }; const spawnPipe = (w, h) => { const GAP = Math.min(220, h * 0.32); const minH = 60; const maxH = h - GAP - minH - 60; const topH = Math.floor(Math.random() * (maxH - minH) + minH); pipesRef.current.push({ x: w, topHeight: topH, gap: GAP, passed: false, id: Date.now() }); }; const spawnHazard = (w, h) => { const y = Math.random() * (h - 200) + 100; hazardsRef.current.push({ x: w, y, vx: -HAZARD_SPEED, id: Date.now() + Math.random() }); }; const createExplosion = (x, y) => { for (let i = 0; i < 25; i++) { particlesRef.current.push({ x, y, vx: (Math.random() - 0.5) * 14, vy: (Math.random() - 0.5) * 14, life: 1.0, size: Math.floor(Math.random() * 4) + 3, color: [C.red, C.yellow, C.orange, C.white][Math.floor(Math.random() * 4)] }); } }; const triggerCheer = (w, h) => { const text = CHEERS[Math.floor(Math.random() * (CHEERS || []).length)]; cheersRef.current.push({ text, x: w / 2, y: h / 3, scale: 0.1, life: 1.0, rotation: (Math.random() - 0.5) * 0.4, color: [C.red, C.blue, C.magenta][Math.floor(Math.random() * 3)] }); }; const saveHighScore = (finalScore) => { if (finalScore <= 0) return; const isNew = finalScore > personalHigh; if (isNew) setNewHighScore(true); if (isMultiplayer) { if (typeof setMyPersonalData === 'function') setMyPersonalData({ highScore: Math.max(finalScore, personalHigh) }); const latest = sharedDataRef.current || {}; const raw = latest.leaderboard ?? latest.scores ?? []; const filtered = (Array.isArray(raw) ? raw : []).filter(e => e?._user?.id !== currentUser.id); const nextEntry = { score: finalScore, _user: currentUser, _timestamp: Date.now() }; const next = [...filtered, nextEntry].sort((a, b) => (b.score || 0) - (a.score || 0)).slice(0, MAX_LEADERBOARD); writePatch({ leaderboard: next }); } else { if (isNew) writePatch({ highScore: finalScore }); } }; const gameOver = () => { if (gameState === 'GAMEOVER') return; setGameState('GAMEOVER'); setFlash(true); playGameOver(); createExplosion(birdRef.current.x, birdRef.current.y); setTimeout(() => setFlash(false), 200); saveHighScore(scoreRef.current); }; const resetGame = () => { const canvas = canvasRef.current; if (!canvas) return; birdRef.current = { x: canvas.width / 4, y: canvas.height / 2, vy: 0, rotation: 0 }; pipesRef.current = []; hazardsRef.current = []; particlesRef.current = []; cheersRef.current = []; scoreRef.current = 0; setScore(0); setNewHighScore(false); frameCountRef.current = 0; setGameState('PLAYING'); }; const flap = (e) => { if (e) e.preventDefault(); ensureAudioCtx(); if (gameState === 'GAMEOVER') return; if (gameState === 'START') { resetGame(); playFlap(); return; } birdRef.current.vy = JUMP; playFlap(); }; // RENDER LOOP useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); let raf; const resize = () => { const parent = canvas.parentElement; if (parent) { canvas.width = parent.clientWidth; canvas.height = parent.clientHeight; if (gameState === 'START') { birdRef.current.x = canvas.width / 4; birdRef.current.y = canvas.height / 2; } } }; window.addEventListener('resize', resize); resize(); const loop = () => { if (!ctx || !canvas) return; const w = canvas.width; const h = canvas.height; // Sky gradient ctx.fillStyle = C.gunmetal; ctx.fillRect(0, 0, w, h); // Tactical grid background ctx.strokeStyle = 'rgba(0, 240, 255, 0.05)'; ctx.lineWidth = 1; const gridOffset = (Date.now() / 20) % 40; for (let i = -gridOffset; i < w; i += 40) { ctx.beginPath(); ctx.moveTo(i, 0); ctx.lineTo(i, h); ctx.stroke(); } for (let i = 0; i < h; i += 40) { ctx.beginPath(); ctx.moveTo(0, i); ctx.lineTo(w, i); ctx.stroke(); } // Physics if (gameState === 'PLAYING') { frameCountRef.current++; birdRef.current.vy += GRAVITY; birdRef.current.y += birdRef.current.vy; birdRef.current.rotation = Math.min(Math.PI / 4, Math.max(-Math.PI / 4, birdRef.current.vy * 0.08)); if (frameCountRef.current % PIPE_SPAWN === 0) spawnPipe(w, h); if (frameCountRef.current % HAZARD_SPAWN === 60 && frameCountRef.current > 200) spawnHazard(w, h); (pipesRef.current || []).forEach(pipe => { pipe.x -= PIPE_SPEED; if (!pipe.passed && pipe.x + 70 < birdRef.current.x) { pipe.passed = true; scoreRef.current += 1; setScore(scoreRef.current); playScore(); triggerCheer(w, h); } const bx = birdRef.current.x - 15; const by = birdRef.current.y - 15; const bw = 30; const bh = 30; const pw = 70; if (bx < pipe.x + pw && bx + bw > pipe.x && (by < pipe.topHeight || by + bh > pipe.topHeight + pipe.gap)) { gameOver(); } }); (hazardsRef.current || []).forEach(hz => { hz.x -= HAZARD_SPEED; hz.y += Math.sin(frameCountRef.current * 0.1) * 2; const dist = Math.hypot(birdRef.current.x - hz.x, birdRef.current.y - hz.y); if (dist < 30) gameOver(); }); pipesRef.current = (pipesRef.current || []).filter(p => p.x > -100); hazardsRef.current = (hazardsRef.current || []).filter(h => h.x > -100); if (birdRef.current.y > h - 25 || birdRef.current.y < 0) gameOver(); } else if (gameState === 'START') { birdRef.current.y = h / 2 + Math.sin(Date.now() / 250) * 8; birdRef.current.rotation = 0; } // Draw pipes (Laser barriers) (pipesRef.current || []).forEach(pipe => { const pw = 70; const lowerY = pipe.topHeight + pipe.gap; ctx.fillStyle = '#111'; ctx.fillRect(pipe.x, 0, pw, pipe.topHeight); ctx.strokeStyle = C.electricRed; ctx.lineWidth = 2; ctx.strokeRect(pipe.x, 0, pw, pipe.topHeight); ctx.fillRect(pipe.x, lowerY, pw, h - lowerY); ctx.strokeRect(pipe.x, lowerY, pw, h - lowerY); // Emitters ctx.fillStyle = C.electricRed; ctx.shadowColor = C.electricRed; ctx.shadowBlur = 10; ctx.fillRect(pipe.x - 4, pipe.topHeight - 8, pw + 8, 8); ctx.fillRect(pipe.x - 4, lowerY, pw + 8, 8); ctx.shadowBlur = 0; ctx.fillStyle = 'rgba(255, 46, 46, 0.15)'; for(let sy=0; sy < pipe.topHeight; sy+=30) { ctx.beginPath(); ctx.moveTo(pipe.x, sy); ctx.lineTo(pipe.x + pw, sy+20); ctx.lineTo(pipe.x + pw, sy+30); ctx.lineTo(pipe.x, sy+10); ctx.fill(); } for(let sy=lowerY; sy < h; sy+=30) { ctx.beginPath(); ctx.moveTo(pipe.x, sy); ctx.lineTo(pipe.x + pw, sy+20); ctx.lineTo(pipe.x + pw, sy+30); ctx.lineTo(pipe.x, sy+10); ctx.fill(); } }); // Hazards (Proximity mines) (hazardsRef.current || []).forEach(hz => { ctx.save(); ctx.translate(hz.x, hz.y); const spin = frameCountRef.current * 0.05; ctx.rotate(spin); ctx.fillStyle = '#222'; ctx.strokeStyle = C.neonCyan; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(0, 0, 16, 0, Math.PI * 2); ctx.fill(); ctx.stroke(); ctx.shadowColor = C.electricRed; ctx.shadowBlur = 15; ctx.fillStyle = C.electricRed; const pulse = Math.abs(Math.sin(Date.now()/150)) * 6 + 4; ctx.beginPath(); ctx.arc(0, 0, pulse, 0, Math.PI * 2); ctx.fill(); ctx.shadowBlur = 0; ctx.fillStyle = C.neonCyan; for(let i=0; i<4; i++) { ctx.rotate(Math.PI/2); ctx.beginPath(); ctx.moveTo(-4, -16); ctx.lineTo(4, -16); ctx.lineTo(0, -24); ctx.fill(); } ctx.restore(); }); // Particles (Neon sparks) (particlesRef.current || []).forEach(p => { p.x += p.vx; p.y += p.vy; p.vy += 0.3; p.life -= 0.03; ctx.globalAlpha = Math.max(0, p.life); ctx.fillStyle = p.color; ctx.shadowColor = p.color; ctx.shadowBlur = 10; ctx.fillRect(Math.floor(p.x), Math.floor(p.y), p.size, p.size); ctx.shadowBlur = 0; ctx.globalAlpha = 1; }); particlesRef.current = (particlesRef.current || []).filter(p => p.life > 0); // Cheers (Killfeed style) (cheersRef.current || []).forEach(c => { c.life -= 0.015; c.y -= 0.8; ctx.save(); ctx.translate(c.x, c.y); ctx.font = 'italic 900 28px "Arial Narrow", Impact, sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.globalAlpha = Math.max(0, c.life); ctx.fillStyle = C.acidGreen; ctx.shadowColor = C.acidGreen; ctx.shadowBlur = 10; ctx.fillText(c.text.toUpperCase(), 0, 0); ctx.shadowBlur = 0; ctx.restore(); ctx.globalAlpha = 1; }); cheersRef.current = (cheersRef.current || []).filter(c => c.life > 0); // Character (Tactical drone) if (gameState !== 'GAMEOVER' || flash) { ctx.save(); ctx.translate(birdRef.current.x, birdRef.current.y); ctx.rotate(birdRef.current.rotation); ctx.shadowColor = C.neonCyan; ctx.shadowBlur = 8; // Thruster ctx.fillStyle = C.neonCyan; const thrust = Math.random() * 10 + 5; ctx.beginPath(); ctx.moveTo(-15, -4); ctx.lineTo(-15 - thrust, 0); ctx.lineTo(-15, 4); ctx.fill(); // Body ctx.fillStyle = '#222'; ctx.strokeStyle = C.white; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(18, 0); ctx.lineTo(-15, -12); ctx.lineTo(-8, 0); ctx.lineTo(-15, 12); ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.shadowBlur = 0; // Core Eye ctx.fillStyle = C.electricRed; ctx.beginPath(); ctx.moveTo(8, 0); ctx.lineTo(2, -4); ctx.lineTo(0, 0); ctx.lineTo(2, 4); ctx.fill(); ctx.restore(); } // Ground (Tactical grid floor) const groundY = h - 20; ctx.fillStyle = '#050508'; ctx.fillRect(0, groundY, w, 20); ctx.strokeStyle = C.neonCyan; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(0, groundY); ctx.lineTo(w, groundY); ctx.stroke(); const gOffset = (Date.now() / 5) % 40; ctx.strokeStyle = 'rgba(0, 240, 255, 0.4)'; ctx.lineWidth = 2; for (let i = -gOffset; i < w; i += 40) { ctx.beginPath(); ctx.moveTo(i, groundY); ctx.lineTo(i - 20, h); ctx.stroke(); } raf = requestAnimationFrame(loop); }; loop(); return () => { window.removeEventListener('resize', resize); cancelAnimationFrame(raf); }; }, [gameState, flash]); const memberList = (isMultiplayer && members?.length) ? members : [{ id: user?.id, displayName: user?.name || 'You', handle: user?.handle, avatarUrl: user?.avatarUrl, role: 'owner' }]; // STYLES const containerStyle = { position: 'relative', width: '100%', height: '100dvh', overflow: 'hidden', backgroundColor: C.gunmetal, fontFamily: '"Arial Narrow", Impact, "Oswald", sans-serif', touchAction: 'none', color: C.white, textTransform: 'uppercase', }; const hyperCardStyle = { background: 'rgba(14, 14, 16, 0.85)', border: `1px solid rgba(0, 240, 255, 0.3)`, borderRadius: '2px', backdropFilter: 'blur(4px)', boxShadow: `0 0 15px rgba(0, 240, 255, 0.1)`, position: 'relative', overflow: 'hidden', }; const hyperHeaderStyle = { background: `linear-gradient(90deg, ${C.electricRed} 0%, #400 100%)`, color: C.white, padding: '6px 10px', fontSize: 14, fontWeight: 900, display: 'flex', alignItems: 'center', justifyContent: 'space-between', letterSpacing: '0.1em', borderBottom: `2px solid ${C.electricRed}`, }; const buttonStyle = (isAction = false) => ({ background: isAction ? C.acidGreen : 'rgba(255, 255, 255, 0.05)', color: isAction ? C.black : C.white, border: `1px solid ${isAction ? C.acidGreen : 'rgba(255,255,255,0.2)'}`, borderRadius: '2px', fontFamily: 'inherit', fontWeight: 900, cursor: 'pointer', padding: '12px 24px', fontSize: 16, letterSpacing: '0.1em', minHeight: 48, textTransform: 'uppercase', boxShadow: isAction ? `0 0 15px rgba(180, 240, 0, 0.4)` : 'none', transition: 'all 0.1s ease', }); return (