function App({ data, setData, user, isMultiplayer, sharedData, setSharedData }) { const appData = isMultiplayer ? sharedData : data; const saveData = isMultiplayer ? setSharedData : setData; const settings = appData?.settings || {}; const CHARACTER_EMOJI = settings.characterEmoji || '🐦'; const HAZARD_EMOJI = settings.hazardEmoji || '💣'; const PRIMARY_COLOR = settings.primaryColor || '#E85D04'; const SKY_BOTTOM = settings.backgroundColor || '#E0F7FA'; const GAME_OVER_SUBTITLE = settings.gameOverSubtitle || 'Better luck next time!'; const CHEER_MESSAGES = settings.cheerMessages || ['GREAT! 🎉', 'AWESOME! 🌟', 'NICE! 👊', 'GO GO! 🚀', 'YEAH! 🤩', 'SUPER! ⭐', 'WOW! 🔥', 'EPIC! 💥']; const SKY_TOP = '#87CEEB'; const OBSTACLE_COLOR = '#D4D4C8'; const ACCENT_GREEN = '#4B9C4B'; const GRAVITY = 0.6; const JUMP_STRENGTH = -9; const PIPE_SPEED = 3.5; const PIPE_SPAWN_RATE = 100; const HAZARD_SPEED = 5.5; const HAZARD_SPAWN_RATE = 140; const CHARACTER_OPTIONS = ['🐦', '🦅', '🦋', '🐝', '🚀', '🐉', '👻', '🎈', '🦄', '🐸', '🐧', '🌟']; const HAZARD_OPTIONS = ['💣', '🔥', '⚡', '🌵', '💀', '🦇', '🌪️', '☄️', '🕷️', '👾', '🎃', '❄️']; const COLOR_OPTIONS = ['#E85D04', '#FF1493', '#7B2FF7', '#00C853', '#2196F3', '#FF5722', '#E91E63', '#9C27B0']; const SKY_OPTIONS = ['#E0F7FA', '#FFF3E0', '#F3E5F5', '#E8F5E9', '#FCE4EC', '#1a1a2e', '#2d1b69', '#0d1b2a']; const [gameState, setGameState] = useState('IDLE'); const [score, setScore] = useState(0); const [highScore, setHighScore] = useState(appData?.highScore || 0); const [flash, setFlash] = useState(false); const [showSettings, setShowSettings] = useState(false); const [isNewRecord, setIsNewRecord] = useState(false); const [confettiPieces, setConfettiPieces] = useState([]); const [tempSettings, setTempSettings] = useState({ characterEmoji: CHARACTER_EMOJI, hazardEmoji: HAZARD_EMOJI, primaryColor: PRIMARY_COLOR, backgroundColor: SKY_BOTTOM, gameOverSubtitle: GAME_OVER_SUBTITLE, cheerMessages: CHEER_MESSAGES, }); const canvasRef = 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 activeCheersRef = useRef([]); const scoreRef = useRef(0); const gameStateRef = useRef('IDLE'); const pipeCounterRef = useRef(0); const characterEmojiRef = useRef(CHARACTER_EMOJI); const hazardEmojiRef = useRef(HAZARD_EMOJI); const primaryColorRef = useRef(PRIMARY_COLOR); const skyBottomRef = useRef(SKY_BOTTOM); const cheerMessagesRef = useRef(CHEER_MESSAGES); const highScoreRef = useRef(appData?.highScore || 0); const confettiRef = useRef([]); const audioCtxRef = useRef(null); useEffect(() => { characterEmojiRef.current = CHARACTER_EMOJI; }, [CHARACTER_EMOJI]); useEffect(() => { hazardEmojiRef.current = HAZARD_EMOJI; }, [HAZARD_EMOJI]); useEffect(() => { primaryColorRef.current = PRIMARY_COLOR; }, [PRIMARY_COLOR]); useEffect(() => { skyBottomRef.current = SKY_BOTTOM; }, [SKY_BOTTOM]); useEffect(() => { cheerMessagesRef.current = CHEER_MESSAGES; }, [CHEER_MESSAGES]); useEffect(() => { highScoreRef.current = highScore; }, [highScore]); useEffect(() => { gameStateRef.current = gameState; }, [gameState]); useEffect(() => { if (appData?.highScore != null && appData.highScore > highScore) { setHighScore(appData.highScore); } }, [appData?.highScore]); 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 playDing = () => { const ctx = audioCtxRef.current; if (!ctx) return; try { const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.connect(gain); gain.connect(ctx.destination); osc.type = 'sine'; osc.frequency.setValueAtTime(880, ctx.currentTime); osc.frequency.exponentialRampToValueAtTime(1320, ctx.currentTime + 0.08); gain.gain.setValueAtTime(0.3, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.2); osc.start(ctx.currentTime); osc.stop(ctx.currentTime + 0.2); } catch (e) {} }; const playGameOver = () => { const ctx = audioCtxRef.current; if (!ctx) return; try { const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.connect(gain); gain.connect(ctx.destination); osc.type = 'square'; osc.frequency.setValueAtTime(440, ctx.currentTime); osc.frequency.exponentialRampToValueAtTime(110, ctx.currentTime + 0.4); gain.gain.setValueAtTime(0.2, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.5); osc.start(ctx.currentTime); osc.stop(ctx.currentTime + 0.5); } catch (e) {} }; const playNewRecord = () => { const ctx = audioCtxRef.current; if (!ctx) return; try { const notes = [523, 659, 784, 1047]; (notes || []).forEach((freq, i) => { const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.connect(gain); gain.connect(ctx.destination); osc.type = 'sine'; osc.frequency.setValueAtTime(freq, ctx.currentTime + i * 0.12); gain.gain.setValueAtTime(0.25, ctx.currentTime + i * 0.12); gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + i * 0.12 + 0.3); osc.start(ctx.currentTime + i * 0.12); osc.stop(ctx.currentTime + i * 0.12 + 0.3); }); } catch (e) {} }; const spawnPipe = (canvasWidth, canvasHeight) => { const GAP_SIZE = Math.min(260, canvasHeight * 0.35); const minPipeHeight = 80; const availableSpace = canvasHeight - GAP_SIZE - minPipeHeight - 80; const safeMax = Math.max(minPipeHeight + 20, availableSpace); const randomHeight = Math.floor(Math.random() * (safeMax - minPipeHeight + 1) + minPipeHeight); pipeCounterRef.current += 1; pipesRef.current.push({ x: canvasWidth, topHeight: randomHeight, gap: GAP_SIZE, passed: false, id: Date.now(), pipeNumber: pipeCounterRef.current }); }; const spawnHazard = (width, height) => { const randomY = Math.random() * (height - 200) + 100; hazardsRef.current.push({ x: width, y: randomY, vx: -HAZARD_SPEED, id: Date.now() + Math.random() }); }; const createExplosion = (x, y) => { const emoji = characterEmojiRef.current; for (let i = 0; i < 12; i++) { particlesRef.current.push({ x, y, vx: (Math.random() - 0.5) * 14, vy: (Math.random() - 0.5) * 14, life: 1.0, isEmoji: i < 4, emoji: emoji, color: [primaryColorRef.current, '#FFFFFF', '#FFD700', '#FF69B4'][Math.floor(Math.random() * 4)] }); } }; const triggerCheer = (width, height) => { const msgs = cheerMessagesRef.current; const text = (msgs && (msgs || []).length > 0) ? msgs[Math.floor(Math.random() * (msgs || []).length)] : 'NICE!'; activeCheersRef.current.push({ text, x: width / 2, y: height / 3, scale: 0.1, life: 1.0, rotation: (Math.random() - 0.5) * 0.4, color: primaryColorRef.current }); }; const spawnConfetti = () => { const pieces = []; const colors = ['#FF1493', '#FFD700', '#00FF00', '#00BFFF', '#FF4500', '#9400D3', primaryColorRef.current]; for (let i = 0; i < 80; i++) { pieces.push({ x: Math.random() * 500, y: -Math.random() * 400 - 50, vx: (Math.random() - 0.5) * 6, vy: Math.random() * 4 + 2, rotation: Math.random() * 360, rotSpeed: (Math.random() - 0.5) * 10, color: colors[Math.floor(Math.random() * (colors || []).length)], size: Math.random() * 8 + 4, life: 1.0, }); } confettiRef.current = pieces; }; const saveHighScore = (finalScore) => { if (finalScore <= highScoreRef.current) return false; setHighScore(finalScore); saveData({ ...appData, highScore: finalScore, settings: appData?.settings || settings }); return true; }; const gameOver = () => { if (gameStateRef.current === 'GAMEOVER') return; setGameState('GAMEOVER'); gameStateRef.current = 'GAMEOVER'; setFlash(true); setTimeout(() => setFlash(false), 150); const finalScore = scoreRef.current; playGameOver(); const isNew = saveHighScore(finalScore); if (isNew) { setIsNewRecord(true); spawnConfetti(); setTimeout(() => playNewRecord(), 300); } else { setIsNewRecord(false); } }; 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 = []; activeCheersRef.current = []; confettiRef.current = []; scoreRef.current = 0; setScore(0); frameCountRef.current = 0; pipeCounterRef.current = 0; setIsNewRecord(false); setGameState('PLAYING'); gameStateRef.current = 'PLAYING'; }; const flap = (e) => { if (e) e.preventDefault(); if (showSettings) return; if (gameStateRef.current === 'GAMEOVER') return; ensureAudioCtx(); if (gameStateRef.current === 'IDLE') { resetGame(); birdRef.current.vy = JUMP_STRENGTH; return; } birdRef.current.vy = JUMP_STRENGTH; }; const openSettings = (e) => { e.stopPropagation(); setTempSettings({ characterEmoji: CHARACTER_EMOJI, hazardEmoji: HAZARD_EMOJI, primaryColor: PRIMARY_COLOR, backgroundColor: SKY_BOTTOM, gameOverSubtitle: GAME_OVER_SUBTITLE, cheerMessages: CHEER_MESSAGES, }); setShowSettings(true); }; const applySettings = (e) => { e.stopPropagation(); const newSettings = { ...tempSettings }; saveData({ ...appData, highScore: highScore, settings: newSettings }); setShowSettings(false); }; useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); let animationFrameId; const resize = () => { const parent = canvas.parentElement; if (parent) { canvas.width = parent.clientWidth; canvas.height = parent.clientHeight; if (gameStateRef.current === 'IDLE') { birdRef.current.x = canvas.width / 4; birdRef.current.y = canvas.height / 2; } } }; window.addEventListener('resize', resize); resize(); const loop = () => { if (!ctx || !canvas) return; const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height); gradient.addColorStop(0, SKY_TOP); gradient.addColorStop(1, skyBottomRef.current); ctx.fillStyle = gradient; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'; ctx.beginPath(); const starX = canvas.width - 80; const starY = 80; const spikes = 5; const outerRadius = 40; const innerRadius = 20; for (let i = 0; i < spikes * 2; i++) { const r = (i % 2 === 0) ? outerRadius : innerRadius; const a = (Math.PI / spikes) * i - Math.PI / 2; ctx.lineTo(starX + Math.cos(a) * r, starY + Math.sin(a) * r); } ctx.closePath(); ctx.fill(); const gs = gameStateRef.current; if (gs === '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.1))); if (frameCountRef.current % PIPE_SPAWN_RATE === 0) spawnPipe(canvas.width, canvas.height); if (frameCountRef.current % HAZARD_SPAWN_RATE === 60) spawnHazard(canvas.width, canvas.height); (pipesRef.current || []).forEach((pipe) => { pipe.x -= PIPE_SPEED; if (!pipe.passed && pipe.x + 80 < birdRef.current.x) { pipe.passed = true; scoreRef.current += 1; setScore(scoreRef.current); createExplosion(birdRef.current.x, birdRef.current.y); triggerCheer(canvas.width, canvas.height); playDing(); } const bx = birdRef.current.x - 28; const by = birdRef.current.y - 28; const bw = 56; const bh = 56; const pipeW = 80; if (bx < pipe.x + pipeW && bx + bw > pipe.x && (by < pipe.topHeight || by + bh > pipe.topHeight + pipe.gap)) gameOver(); }); (hazardsRef.current || []).forEach((fb) => { fb.x -= HAZARD_SPEED; fb.y += Math.sin(frameCountRef.current * 0.1) * 2; const dist = Math.hypot(birdRef.current.x - fb.x, birdRef.current.y - fb.y); if (dist < 45) gameOver(); }); pipesRef.current = (pipesRef.current || []).filter(p => p.x > -100); hazardsRef.current = (hazardsRef.current || []).filter(fb => fb.x > -100); if (birdRef.current.y > canvas.height - 25 || birdRef.current.y < 0) gameOver(); } else if (gs === 'IDLE') { birdRef.current.y = canvas.height / 2 + Math.sin(Date.now() / 300) * 15; birdRef.current.rotation = 0; } (pipesRef.current || []).forEach(pipe => { const w = 80; const lowerY = pipe.topHeight + pipe.gap; const pc = primaryColorRef.current; ctx.fillStyle = OBSTACLE_COLOR; ctx.fillRect(pipe.x, 0, w, pipe.topHeight); ctx.fillStyle = 'rgba(0,0,0,0.1)'; ctx.fillRect(pipe.x + w - 10, 0, 10, pipe.topHeight); ctx.fillStyle = pc; ctx.fillRect(pipe.x - 5, pipe.topHeight - 60, w + 10, 60); ctx.fillStyle = '#FFF'; ctx.beginPath(); ctx.arc(pipe.x + w / 2, pipe.topHeight - 30, 15, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = OBSTACLE_COLOR; ctx.fillRect(pipe.x, lowerY, w, canvas.height - lowerY); ctx.fillStyle = 'rgba(0,0,0,0.1)'; ctx.fillRect(pipe.x + w - 10, lowerY, 10, canvas.height - lowerY); ctx.fillStyle = pc; ctx.fillRect(pipe.x - 5, lowerY, w + 10, 60); ctx.fillStyle = '#FFF'; ctx.beginPath(); ctx.arc(pipe.x + w / 2, lowerY + 30, 15, 0, Math.PI * 2); ctx.fill(); }); (hazardsRef.current || []).forEach(fb => { ctx.save(); ctx.translate(fb.x, fb.y); ctx.rotate(-frameCountRef.current * 0.2); ctx.font = '36px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(hazardEmojiRef.current, 0, 0); ctx.restore(); }); (particlesRef.current || []).forEach((p) => { p.x += p.vx; p.y += p.vy; p.vy += 0.2; p.life -= 0.04; ctx.globalAlpha = Math.max(0, p.life); if (p.isEmoji) { ctx.font = '20px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(p.emoji, p.x, p.y); } else { ctx.fillStyle = p.color; ctx.beginPath(); ctx.arc(p.x, p.y, 4, 0, Math.PI * 2); ctx.fill(); } ctx.globalAlpha = 1; }); particlesRef.current = (particlesRef.current || []).filter(p => p.life > 0); (activeCheersRef.current || []).forEach((cheer) => { cheer.life -= 0.015; cheer.y -= 0.5; cheer.scale += (1.5 - cheer.scale) * 0.1; ctx.save(); ctx.translate(cheer.x, cheer.y); ctx.rotate(cheer.rotation); ctx.scale(cheer.scale, cheer.scale); ctx.font = '900 42px Arial Black, Arial, sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.lineWidth = 8; ctx.strokeStyle = '#FFFFFF'; ctx.lineJoin = 'round'; ctx.globalAlpha = Math.max(0, cheer.life); ctx.strokeText(cheer.text, 0, 0); ctx.fillStyle = cheer.color; ctx.fillText(cheer.text, 0, 0); ctx.restore(); ctx.globalAlpha = 1; }); activeCheersRef.current = (activeCheersRef.current || []).filter(c => c.life > 0); (confettiRef.current || []).forEach((c) => { c.x += c.vx; c.y += c.vy; c.vy += 0.05; c.rotation += c.rotSpeed; c.life -= 0.005; if (c.life > 0) { ctx.save(); ctx.globalAlpha = Math.max(0, c.life); ctx.translate(c.x, c.y); ctx.rotate((c.rotation * Math.PI) / 180); ctx.fillStyle = c.color; ctx.fillRect(-c.size / 2, -c.size / 4, c.size, c.size / 2); ctx.restore(); ctx.globalAlpha = 1; } }); confettiRef.current = (confettiRef.current || []).filter(c => c.life > 0); ctx.save(); ctx.translate(birdRef.current.x, birdRef.current.y); ctx.rotate(birdRef.current.rotation); ctx.scale(-1, 1); ctx.font = '64px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(characterEmojiRef.current, 0, 0); ctx.restore(); const groundY = canvas.height - 20; ctx.fillStyle = ACCENT_GREEN; ctx.fillRect(0, groundY, canvas.width, 20); ctx.fillStyle = '#FFF'; const timeOffset = (Date.now() / 10) % 100; for (let i = -timeOffset; i < canvas.width; i += 100) { ctx.fillRect(i, groundY, 4, 20); } animationFrameId = requestAnimationFrame(loop); }; loop(); return () => { window.removeEventListener('resize', resize); cancelAnimationFrame(animationFrameId); }; }, [gameState, highScore]); const containerStyle = { position: 'relative', width: '100%', height: '100dvh', overflow: 'hidden', backgroundColor: '#333', fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif", touchAction: 'none', }; const [cheerInput, setCheerInput] = useState(''); return (

{flash && (

)}