{/* 🎆 SHAKE WRAPPER */}

{/* 🛣️ WORLD RENDERING */} {Array.from({ length: VIEWPORT_ROWS + 2 }).map((_, i) => { const rowY = Math.floor(gameState.cameraY) - 2 + i; const screenY = getScreenY(rowY); const config = getRowConfig(rowY); // Background color based on type let bg = '#00b894'; // grass if (config.type === 'road') bg = '#2d3436'; if (config.type === 'water') bg = '#0984e3'; if (config.type === 'rail') bg = '#636e72'; // Render dynamic obstacles for this row const renderObstacles = () => { if (config.type === 'grass') return {config.decoration}; // Cars / Trains / Logs // We render a few based on time const items = []; const time = Date.now() / 1000; const offset = (time * config.speed * config.direction); // Simple seamless loop of items for (let j = -4; j < 8; j++) { const pos = ((offset + (j * 4)) % 15 + 15) % 15; // Only render if roughly on screen 0-9 grid if (pos > -2 && pos < 10) { let emoji = '🚗'; if (config.type === 'rail') emoji = '🚄'; if (config.type === 'water') emoji = '🪷'; if (config.type === 'road' && rowY % 3 === 0) emoji = '🚛'; items.push(

{emoji}

); } } return items; }; return (

{/* Row Content */} {renderObstacles()} {/* Debug coordinate */} {/* {rowY} */}

); })} {/* 👻 MULTIPLAYER GHOSTS */} {isMultiplayer && Object.values(appData?.players || {}).map(p => { if (p.id === user.id) return null; // Don't render user as ghost if (p.y < gameState.cameraY - 2 || p.y > gameState.cameraY + VIEWPORT_ROWS) return null; return (

{p.status === 'dead' &&

☠️

}

); })} {/* 🐣 MY PLAYER */} {gameState.status !== 'dead' && (

🐣

)} {/* 💥 DEATH ANIMATION */} {gameState.status === 'dead' && (

💥

)}

{/* 📊 HUD & OVERLAYS */}

SCORE: {gameState.score}

HIGH: {Math.max(gameState.score, (appData?.highScores?.[user.id] || 0))}

{/* 💀 GAME OVER SCREEN */} {gameState.status === 'dead' && (

SPLAT!

Score: {gameState.score}

{/* Leaderboard Teaser */} {isMultiplayer && (

Top Friends

{Object.entries(appData?.highScores || {}) .sort(([,a], [,b]) => b - a) .slice(0, 3) .map(([uid, score], i) => (

{i+1}. {members?.find(m => m.id === uid)?.displayName || 'Player'} {score}

))}

)}

)} {/* 🕹️ VIRTUAL CONTROLS HINT */} {gameState.status === 'playing' && gameState.y === 0 && (

TAP TO HOP 👆

)} {/* Global Styles for Animations */}

); }