{/* Game Area */}

{/* Flash overlay for crash */} {flash &&

} {/* Background Scenery (Clouds/City) */}

☁️

{/* Ghosts */} {(physics.current.ghosts || []).map(ghost => (

{ghost.name} {ghost.avatar ?

: 🐦 }

))} {/* Pipes */} {(physics.current.pipes || []).map((pipe, i) => ( {/* Top Pipe */}

{/* Bottom Pipe */}

))} {/* Ground */}

{/* The Bird */}

🐦

{/* UI Overlay - Score while playing */} {status === 'playing' && (

{score}

)} {/* UI Overlay - Idle */} {status === 'idle' && (

FLAPPY
SQUAD

👆 TAP TO FLY

{/* CSS Animation injected via style tag for simplicity */}

)} {/* Game Over Screen */} {status === 'over' && (

{/* Confetti if new best */} {isNewBest && Array.from({ length: 30 }).map((_, i) => (

))}

GAME OVER

SCORE

{score}

BEST

{bestScore}

{isNewBest &&

✨ NEW HIGH SCORE! ✨

}

)}

{/* Social / Leaderboard Section (Bottom Area) */}

🏆 LEADERBOARD

{(leaderboard || []).length === 0 ? (

No scores yet. Be the first to fly! 🐦

) : (

{(leaderboard || []).map((entry, idx) => (

{idx === 0 ? '👑' : `#${idx + 1}`}

entry._user?.handle && openProfile(entry._user.handle)} style={{ width: 32, height: 32, borderRadius: '50%', background: entry._user?.profileImageUrl ? `url(${entry._user.profileImageUrl}) center/cover` : '#95A5A6', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: entry._user?.handle ? 'pointer' : 'default', flexShrink: 0 }} > {!entry._user?.profileImageUrl && '👤'}

{entry._user?.displayName || 'Anonymous Player'}

{entry.score}

))}

)}

); }

FLAPPYSQUAD

GAME OVER

🏆 LEADERBOARD

FLAPPY
SQUAD