Spaces:

OrbitMC
/

yt

Runtime error

App Files Files Community

OrbitMC commited on Jan 24

Commit

cc67353

verified ·

1 Parent(s): 14796db

Update public/index.html

Browse files

Files changed (1) hide show

public/index.html +365 -687

public/index.html CHANGED Viewed

@@ -2,732 +2,410 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
-    <title>Ascent: Multiplayer</title>
     <style>
-        /* RESET & LAYOUT */
-        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
-        body { background-color: #000; overflow: hidden; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
-        /* GAME CONTAINER */
-        #game-container { position: relative; width: 100%; height: 100%; max-width: 50vh; max-height: 100vh; background: linear-gradient(180deg, #2d2347 0%, #5d426e 100%); overflow: hidden; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
-        canvas { display: block; width: 100%; height: 100%; }
-        /* UI OVERLAY */
-        #ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
-        #score-container { position: absolute; top: 60px; right: 20px; text-align: right; }
-        #score { color: rgba(255, 255, 255, 0.9); font-size: 32px; font-weight: 900; text-shadow: 2px 2px 0px rgba(0,0,0,0.3); line-height: 1; }
-        #score-label { font-size: 14px; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }
-        #star-count { margin-top: 5px; font-size: 16px; color: #ffd700; font-weight: bold; text-shadow: 1px 1px 0 rgba(0,0,0,0.5); }
-        /* Powerups */
-        #powerups { position: absolute; top: 130px; right: 20px; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
-        .powerup-badge { background: rgba(0,0,0,0.5); padding: 5px 10px; border-radius: 15px; color: #fff; font-size: 12px; font-weight: bold; display: none; }
-        #tutorial { position: absolute; top: 40%; width: 100%; text-align: center; color: rgba(255,255,255,0.6); font-size: 18px; font-weight: 600; animation: pulse 2s infinite; }
-        /* MENUS */
-        .overlay-menu { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(18, 14, 30, 0.95); flex-direction: column; justify-content: center; align-items: center; pointer-events: auto; z-index: 50; }
-        .overlay-menu h1 { color: #fff; font-size: 40px; margin-bottom: 20px; text-transform: uppercase; font-style: italic; }
-        .overlay-menu p { color: #ccc; margin-bottom: 30px; }
-        .btn { background: #fff; color: #2d2347; padding: 15px 40px; font-size: 20px; font-weight: bold; border-radius: 30px; border: none; cursor: pointer; text-transform: uppercase; box-shadow: 0 5px 15px rgba(0,0,0,0.3); transition: transform 0.1s; margin-top: 10px; }
-        .btn:active { transform: scale(0.95); }
-        /* LOGIN SCREEN */
-        #login-screen { display: flex; z-index: 100; }
-        #username-input { padding: 15px; font-size: 18px; border-radius: 10px; border: none; margin-bottom: 20px; text-align: center; width: 80%; max-width: 300px; font-family: inherit; }
-        /* LEADERBOARD - Compact Top Left */
-        #leaderboard {
-            position: absolute; top: 15px; left: 15px;
-            background: rgba(0,0,0,0.4);
-            padding: 8px 10px; border-radius: 8px;
-            color: white; font-size: 11px; width: 120px;
-            pointer-events: none; backdrop-filter: blur(2px);
         }
-        .lb-title { color:#aaa; font-size:9px; margin-bottom:4px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: bold;}
-        .lb-row { display: flex; justify-content: space-between; margin-bottom: 3px; align-items: center; }
-        .lb-rank { color: #ffd700; font-weight: bold; margin-right: 4px; width: 12px; }
-        .lb-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55px; }
-        @keyframes pulse { 0% { opacity: 0.4; transform: translateY(0); } 50% { opacity: 0.8; transform: translateY(-5px); } 100% { opacity: 0.4; transform: translateY(0); } }
-    </style>
-</head>
-<body>
-    <div id="game-container">
-        <canvas id="gameCanvas"></canvas>
-        <div id="ui-layer">
-            <div id="leaderboard">
-                <div class="lb-title">Top Altitude</div>
-                <div id="lb-content">Connecting...</div>
-            </div>
-            <div id="score-container">
-                <div id="score-label">Height</div>
-                <div id="score"><span id="score-value">0</span>m</div>
-                <div id="star-count">★ <span id="stars-value">0</span></div>
-            </div>
-            <div id="powerups">
-                <div id="badge-shield" class="powerup-badge" style="color:#00ffff">🛡️ SAFE</div>
-                <div id="badge-rocket" class="powerup-badge" style="color:#ff4444">🚀 BOOST</div>
-                <div id="badge-slow" class="powerup-badge" style="color:#ffff00">⏳ SLOW</div>
-            </div>
-            <div id="tutorial">DRAG TO JUMP</div>
-            <!-- LOGIN SCREEN -->
-            <div id="login-screen" class="overlay-menu">
-                <h1>Ascent MP</h1>
-                <input type="text" id="username-input" placeholder="Enter Username" maxlength="12">
-                <button class="btn" id="start-btn">PLAY</button>
-            </div>
-            <!-- GAME OVER MENU -->
-            <div id="game-over" class="overlay-menu">
-                <h1>Fell Down!</h1>
-                <p>Best Height: <span id="final-score">0</span>m</p>
-                <button class="btn" id="retry-btn">Try Again</button>
-            </div>
-        </div>
-    </div>
-<script src="/socket.io/socket.io.js"></script>
-<script>
-// --- SOCKET & NETWORK ---
-const socket = io();
-let myId = null;
-let serverSeed = 0;
-let otherPlayers = {}; // Map of id -> Ghost Object
-let leaderboardData = [];
-// Setup Login
-const loginScreen = document.getElementById('login-screen');
-const usernameInput = document.getElementById('username-input');
-const startBtn = document.getElementById('start-btn');
-const lbContent = document.getElementById('lb-content');
-let myName = localStorage.getItem('ascent_name') || `Jumper${Math.floor(Math.random()*100)}`;
-usernameInput.value = myName;
-startBtn.onclick = () => {
-    const name = usernameInput.value.trim() || "Anon";
-    localStorage.setItem('ascent_name', name);
-    myName = name;
-    loginScreen.style.display = 'none';
-    // Join Server
-    socket.emit('join', { name: myName, skin: state.currentSkin });
-    initLevel(); // Now safe to init level as player is "logged in"
-    state.isPlaying = true;
-    gameLoop();
-};
-socket.on('connect', () => { myId = socket.id; });
-socket.on('config', (data) => { serverSeed = data.seed; });
-// World Update (Optimized 'w' event)
-socket.on('w', (data) => {
-    // Sync Ghosts
-    const currentIds = [];
-    data.p.forEach(pData => {
-        // [id, x, y, skin, isDead, name]
-        const pid = pData[0];
-        currentIds.push(pid);
-        if (pid !== socket.id) {
-            if (!otherPlayers[pid]) {
-                otherPlayers[pid] = {
-                    x: pData[1], y: pData[2],
-                    tx: pData[1], ty: pData[2],
-                    skin: pData[3], isDead: pData[4], name: pData[5]
-                };
-            } else {
-                const op = otherPlayers[pid];
-                op.tx = pData[1];
-                op.ty = pData[2];
-                op.skin = pData[3];
-                op.isDead = pData[4];
-                op.name = pData[5];
-            }
         }
-    });
-    // Cleanup disconnected
-    for (let id in otherPlayers) {
-        if (!currentIds.includes(id)) delete otherPlayers[id];
-    }
-    // Leaderboard
-    leaderboardData = data.l;
-    updateLeaderboardUI();
-});
-function updateLeaderboardUI() {
-    let html = '';
-    leaderboardData.forEach((p, i) => {
-        html += `<div class="lb-row">
-                    <div><span class="lb-rank">#${i+1}</span><span class="lb-name">${p.name}</span></div>
-                    <span>${p.score}m</span>
-                 </div>`;
-    });
-    lbContent.innerHTML = html;
-}
-// Network Loop: 20 TPS (50ms) is enough for client upload. Prevents network flooding.
-setInterval(() => {
-    if (state.isPlaying || state.gameOver) {
-        // Send Array [x, y, vx, vy, score, isDead]
-        socket.emit('update', [
-            Math.round(player.x),
-            Math.round(player.y),
-            parseFloat(player.vx.toFixed(2)),
-            parseFloat(player.vy.toFixed(2)),
-            state.highScore,
-            state.gameOver ? 1 : 0
-        ]);
-    }
-}, 50);
-// --- DETERMINISTIC RNG (FIXED LEVEL CONSISTENCY) ---
-// We use 'state.platformCount' instead of 'y' to seed the random.
-// This guarantees the sequence of platforms is identical every time.
-function getSeededRandom(offset) {
-    const seed = serverSeed + (state.platformCount * 1337) + offset;
-    const x = Math.sin(seed) * 10000;
-    return x - Math.floor(x);
-}
-// --- AUDIO SYSTEM ---
-const AudioSys = {
-    ctx: null,
-    init: function() {
-        window.AudioContext = window.AudioContext || window.webkitAudioContext;
-        this.ctx = new AudioContext();
-    },
-    playTone: function(freq, type, duration, vol = 0.1) {
-        if (!this.ctx) return;
-        const osc = this.ctx.createOscillator();
-        const gain = this.ctx.createGain();
-        osc.type = type;
-        osc.frequency.setValueAtTime(freq, this.ctx.currentTime);
-        gain.gain.setValueAtTime(vol, this.ctx.currentTime);
-        gain.gain.exponentialRampToValueAtTime(0.01, this.ctx.currentTime + duration);
-        osc.connect(gain);
-        gain.connect(this.ctx.destination);
-        osc.start();
-        osc.stop(this.ctx.currentTime + duration);
-    },
-    sfx: {
-        jump: () => AudioSys.playTone(400, 'sine', 0.1, 0.1),
-        land: () => AudioSys.playTone(150, 'triangle', 0.1, 0.2),
-        coin: () => { AudioSys.playTone(1200, 'sine', 0.1, 0.05); setTimeout(() => AudioSys.playTone(1600, 'sine', 0.2, 0.05), 50); },
-        crumble: () => AudioSys.playTone(100, 'sawtooth', 0.3, 0.1),
-        die: () => AudioSys.playTone(100, 'sawtooth', 1.0, 0.3),
-        powerup: () => AudioSys.playTone(600, 'square', 0.4, 0.1)
-    }
-};
-// --- CONSTANTS ---
-const LOGICAL_WIDTH = 375;
-const LOGICAL_HEIGHT = 812;
-const GRAVITY = 0.5;
-const FRICTION_AIR = 0.93;
-const FRICTION_GROUND = 0.80;
-const FRICTION_ICE = 0.995;
-const DRAG_STRENGTH = 0.18;
-const MAX_POWER = 22;
-const MIN_POWER = 3;
-const CAMERA_SMOOTHING = 0.1;
-const PALETTES = [
-    { h: 0, top: '#2d2347', bot: '#7a5a8a' },
-    { h: 1000, top: '#001a33', bot: '#006699' },
-    { h: 3000, top: '#000000', bot: '#2c003e' }
-];
-const COLORS = { platform: '#1a1a2e', platformHighlight: '#262642', vine: '#25203b', tree: '#2d4a66', treeLight: '#3a5d7c', spike: '#666', saw: '#ff4444', wind: 'rgba(100, 200, 255, 0.3)' };
-// --- GAME STATE ---
-const canvas = document.getElementById('gameCanvas');
-const ctx = canvas.getContext('2d');
-const uiScore = document.getElementById('score-value');
-const uiStars = document.getElementById('stars-value');
-const uiFinalScore = document.getElementById('final-score');
-const uiGameOver = document.getElementById('game-over');
-const uiTutorial = document.getElementById('tutorial');
-const uiBadgeShield = document.getElementById('badge-shield');
-const uiBadgeRocket = document.getElementById('badge-rocket');
-const uiBadgeSlow = document.getElementById('badge-slow');
-let state = {
-    width: LOGICAL_WIDTH, height: LOGICAL_HEIGHT, scale: 1, cameraY: 0,
-    score: 0, starsCollected: parseInt(localStorage.getItem('ascent_stars')) || 0,
-    currentSkin: localStorage.getItem('ascent_current_skin') || 'square',
-    highScore: 0, isPlaying: false, isPaused: false, gameOver: false,
-    lastPlatformY: 0, platformCount: 0, // CRITICAL: Used for RNG seed
-    timeScale: 1.0,
-    hasShield: false, rocketActive: false, rocketTimer: 0, slowMoTimer: 0,
-    isDragging: false, dragStartX: 0, dragStartY: 0, dragCurrX: 0, dragCurrY: 0,
-    bgTop: PALETTES[0].top, bgBot: PALETTES[0].bot
-};
-const SKINS = [
-    { id: 'square', color: '#fff' },
-    { id: 'circle', color: '#00ff88' },
-    { id: 'triangle', color: '#ff00ff' },
-    { id: 'gold', color: '#ffd700' }
-];
-// --- ENTITIES ---
-class Player {
-    constructor() { this.w = 24; this.h = 24; this.reset(); }
-    reset() {
-        this.x = LOGICAL_WIDTH / 2 - this.w / 2;
-        this.y = LOGICAL_HEIGHT - 250;
-        this.vx = 0; this.vy = 0;
-        this.grounded = false; this.landedPlatform = null;
-        this.stretchX = 1; this.stretchY = 1; this.rotation = 0;
-        state.rocketActive = false; state.hasShield = false;
-    }
-    update() {
-        if (state.rocketActive) {
-            this.vy = -25; this.vx = 0;
-            state.rocketTimer--;
-            if (state.rocketTimer <= 0) {
-                state.rocketActive = false; this.vy = -10;
-                uiBadgeRocket.style.display = 'none';
-            }
-            this.y += this.vy;
-            this.x += (LOGICAL_WIDTH/2 - this.w/2 - this.x) * 0.1;
-            return;
         }
-        this.vy += GRAVITY * state.timeScale;
-        let friction = FRICTION_AIR;
-        if (this.grounded) {
-             if (this.landedPlatform && this.landedPlatform.type === 'ice') friction = FRICTION_ICE;
-             else friction = FRICTION_GROUND;
         }
-        this.vx *= Math.pow(friction, state.timeScale);
-        this.x += this.vx * state.timeScale;
-        this.y += this.vy * state.timeScale;
-        if (this.grounded && this.landedPlatform && this.landedPlatform.type === 'moving') {
-            this.x += this.landedPlatform.vx * state.timeScale;
         }
-        if (this.x < 0) { this.x = 0; this.vx *= -0.5; }
-        else if (this.x + this.w > LOGICAL_WIDTH) { this.x = LOGICAL_WIDTH - this.w; this.vx *= -0.5; }
-        this.stretchX += (1 - this.stretchX) * 0.1;
-        this.stretchY += (1 - this.stretchY) * 0.1;
-        this.rotation = (this.vx * 0.1);
-        this.grounded = false;
-    }
-    draw(ctx, isLocal = true, customSkin = null, customX = null, customY = null) {
-        ctx.save();
-        const dX = customX !== null ? customX : this.x;
-        const dY = customY !== null ? customY : this.y;
-        ctx.translate(dX + this.w/2, dY + this.h/2);
-        if (!isLocal) ctx.globalAlpha = 0.6;
-        if (state.rocketActive && isLocal) {
-            ctx.fillStyle = '#ff4444';
-            ctx.beginPath(); ctx.moveTo(0, -20); ctx.lineTo(10, 10); ctx.lineTo(-10, 10); ctx.fill();
-            ctx.restore(); return;
         }
-        if (isLocal) { ctx.rotate(this.rotation); ctx.scale(this.stretchX, this.stretchY); }
-        const skinId = customSkin || state.currentSkin;
-        const skinData = SKINS.find(s => s.id === skinId) || SKINS[0];
-        ctx.fillStyle = skinData.color;
-        if(isLocal) { ctx.shadowBlur = 10; ctx.shadowColor = skinData.color; }
-        if (skinId === 'circle') { ctx.beginPath(); ctx.arc(0, 0, this.w/2, 0, Math.PI*2); ctx.fill(); }
-        else if (skinId === 'triangle') { ctx.beginPath(); ctx.moveTo(0, -this.h/2); ctx.lineTo(this.w/2, this.h/2); ctx.lineTo(-this.w/2, this.h/2); ctx.fill(); }
-        else { ctx.beginPath(); ctx.roundRect(-this.w/2, -this.h/2, this.w, this.h, 4); ctx.fill(); }
-        ctx.fillStyle = "#000";
-        if (isLocal) {
-             if (Math.abs(this.vx) > 1) { const dir = Math.sign(this.vx); ctx.fillRect(dir * 4 - 2, -4, 4, 8); }
-             else { ctx.fillRect(-5, -2, 3, 3); ctx.fillRect(3, -2, 3, 3); }
-        } else { ctx.fillRect(-5, -2, 3, 3); ctx.fillRect(3, -2, 3, 3); }
-        if (state.hasShield && isLocal) { ctx.strokeStyle = "#00ffff"; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(0, 0, this.w, 0, Math.PI*2); ctx.stroke(); }
-        ctx.globalAlpha = 1.0;
-        ctx.restore();
-    }
-    jump(vx, vy) {
-        this.vx = vx; this.vy = vy; this.grounded = false; this.landedPlatform = null;
-        this.stretchX = 0.6; this.stretchY = 1.4;
-        uiTutorial.style.display = 'none';
-        AudioSys.sfx.jump();
-    }
-}
-class Platform {
-    constructor(x, y, w, h, type = 'normal') {
-        this.x = x; this.y = y; this.w = w; this.h = h;
-        this.type = type;
-        this.crumbleTimer = 60; this.isCrumbling = false; this.isDestroyed = false; this.hasBounced = false;
-        const r1 = getSeededRandom(1);
-        this.vx = (type === 'moving') ? (r1 > 0.5 ? 1 : -1) * (1 + r1 * 1.5) : 0;
-        const r2 = getSeededRandom(2);
-        this.hasSpikes = (r2 < 0.2 && type !== 'crumble' && type !== 'bouncy');
-        this.spikeX = getSeededRandom(3) * (this.w - 20);
-        this.decorations = [];
-        this.generateDecorations();
-    }
-    triggerCrumble() {
-        if (this.type === 'crumble' && !this.isCrumbling) { this.isCrumbling = true; AudioSys.sfx.crumble(); }
-    }
-    update() {
-        if (this.type === 'moving') {
-            this.x += this.vx * state.timeScale;
-            if (this.x <= 0 || this.x + this.w >= LOGICAL_WIDTH) this.vx *= -1;
-        }
-        else if (this.type === 'crumble' && this.isCrumbling) {
-            this.crumbleTimer -= 1 * state.timeScale;
-            if (this.crumbleTimer <= 0) { this.isDestroyed = true; createDust(this.x + this.w/2, this.y + this.h/2, 10); }
         }
-    }
-    generateDecorations() {
-        if (this.type === 'crumble' || this.type === 'ice' || this.type === 'bouncy') return;
-        if (getSeededRandom(4) > 0.5) this.decorations.push({ type: 'vine', x: getSeededRandom(5)*(this.w-10), len: 20+getSeededRandom(6)*40 });
-        if (getSeededRandom(7) > 0.7 && !this.hasSpikes) this.decorations.push({ type: 'tree', x: getSeededRandom(8)*(this.w-20), h: 20+getSeededRandom(9)*30 });
-    }
-    draw(ctx) {
-        if (this.isDestroyed) return;
-        let dx = this.x, dy = this.y;
-        if (this.isCrumbling) { dx += (Math.random() - 0.5) * 4; dy += (Math.random() - 0.5) * 4; }
-        ctx.strokeStyle = COLORS.vine; ctx.lineWidth = 3;
-        this.decorations.forEach(d => {
-            if (d.type === 'vine') {
-                ctx.beginPath(); ctx.moveTo(dx+d.x, dy+this.h);
-                ctx.quadraticCurveTo(dx+d.x+Math.sin(Date.now()/1000)*5, dy+this.h+d.len/2, dx+d.x, dy+this.h+d.len);
-                ctx.stroke();
             }
-        });
-        ctx.fillStyle = COLORS.platform;
-        ctx.beginPath(); ctx.roundRect(dx, dy, this.w, this.h, 8); ctx.fill();
-        if (this.type === 'bouncy') {
-            ctx.fillStyle = !this.hasBounced ? '#ff66cc' : '#554466'; ctx.fillRect(dx+5, !this.hasBounced?dy:dy+4, this.w-10, !this.hasBounced?6:2);
-        } else if (this.type === 'ice') { ctx.fillStyle = '#00ffff'; ctx.fillRect(dx, dy, this.w, 8); }
-        else { ctx.fillStyle = COLORS.platformHighlight; ctx.beginPath(); ctx.roundRect(dx+4, dy+4, this.w-8, this.h-8, 4); ctx.fill(); }
-        if (this.hasSpikes) { ctx.fillStyle = COLORS.spike; ctx.beginPath(); ctx.moveTo(dx + this.spikeX, dy); ctx.lineTo(dx + this.spikeX + 10, dy - 15); ctx.lineTo(dx + this.spikeX + 20, dy); ctx.fill(); }
-    }
-}
-class Enemy {
-    constructor(y) { this.y = y; this.x = getSeededRandom(10) * LOGICAL_WIDTH; this.r = 15; this.vx = 2; this.angle = 0; }
-    update() { this.x += this.vx * state.timeScale; if (this.x < 15 || this.x > LOGICAL_WIDTH-15) this.vx *= -1; this.angle += 0.2 * state.timeScale; }
-    draw(ctx) {
-        ctx.save(); ctx.translate(this.x, this.y); ctx.rotate(this.angle);
-        ctx.fillStyle = COLORS.saw; ctx.beginPath();
-        for(let i=0; i<8; i++) { ctx.rotate(Math.PI/4); ctx.lineTo(0, -this.r); ctx.lineTo(5, -this.r+5); ctx.lineTo(-5, -this.r+5); }
-        ctx.fill(); ctx.fillStyle = "#333"; ctx.beginPath(); ctx.arc(0,0,5,0,Math.PI*2); ctx.fill(); ctx.restore();
-    }
-}
-class Collectible {
-    constructor(x, y, type) { this.x = x; this.y = y; this.type = type; this.collected = false; this.bob = Math.random() * Math.PI; }
-    draw(ctx) {
-        if(this.collected) return;
-        const by = this.y + Math.sin(Date.now()/300 + this.bob)*3;
-        ctx.save(); ctx.translate(this.x, by);
-        if (this.type === 'star') {
-            ctx.fillStyle = '#ffd700'; ctx.shadowBlur=10; ctx.shadowColor='#ffd700'; ctx.beginPath(); ctx.arc(0,0,8,0,Math.PI*2); ctx.fill();
-            ctx.fillStyle = '#fff'; ctx.font='10px Arial'; ctx.textAlign='center'; ctx.fillText('★',0,4);
-        } else {
-            ctx.fillStyle = 'rgba(255,255,255,0.2)'; ctx.beginPath(); ctx.arc(0,0,14,0,Math.PI*2); ctx.fill(); ctx.strokeStyle = '#fff'; ctx.stroke();
-            ctx.font = '16px Arial'; ctx.textAlign='center';
-            if (this.type === 'rocket') ctx.fillText('🚀',0,5); if (this.type === 'shield') ctx.fillText('🛡️',0,5); if (this.type === 'slow') ctx.fillText('⏳',0,5);
         }
-        ctx.restore();
-    }
-}
-class WindZone {
-    constructor(y) {
-        this.y = y; this.h = 100;
-        this.dir = getSeededRandom(11) > 0.5 ? 1 : -1;
-        this.particles = [];
-        for(let i=0; i<10; i++) this.particles.push({x:Math.random()*LOGICAL_WIDTH, y:Math.random()*this.h, s:Math.random()*3+2});
-    }
-    update() {
-        this.particles.forEach(p => { p.x += this.dir * 4 * state.timeScale; if(p.x > LOGICAL_WIDTH) p.x = 0; if(p.x < 0) p.x = LOGICAL_WIDTH; });
-        if (player.y > this.y && player.y < this.y + this.h) player.vx += this.dir * 0.5 * state.timeScale;
-    }
-    draw(ctx) { ctx.fillStyle = COLORS.wind; this.particles.forEach(p => { ctx.fillRect(p.x, this.y + p.y, p.s*2, 2); }); }
-}
-const player = new Player();
-let platforms = [], enemies = [], winds = [], collectibles = [], particles = [];
-function initLevel() {
-    platforms = []; enemies = []; winds = []; collectibles = []; particles = [];
-    state.lastPlatformY = LOGICAL_HEIGHT - 100;
-    state.platformCount = 0; // RESET COUNT ON INIT
-    // Initial Platform
-    platforms.push(new Platform(0, LOGICAL_HEIGHT - 100, LOGICAL_WIDTH, 150));
-    generateChunk(LOGICAL_HEIGHT - 250);
-}
-function generateChunk(targetY) {
-    let y = state.lastPlatformY;
-    let loops = 0;
-    while (y > targetY && loops < 500) {
-        loops++;
-        state.platformCount++; // Increment count for RNG consistency
-        const heightMeters = Math.abs(y - (LOGICAL_HEIGHT - 100)) / 10;
-        const diff = Math.min(1, heightMeters / 1500);
-        const rGap = getSeededRandom(12);
-        const minGap = 80 + (diff * 40);
-        const maxGap = 160 + (diff * 60);
-        y -= (minGap + rGap * (maxGap - minGap));
-        let w = (60 + getSeededRandom(13) * 100) * (1 - diff * 0.4);
-        w = Math.max(40, w);
-        let x = Math.max(10, Math.min(getSeededRandom(14)*(LOGICAL_WIDTH-w), LOGICAL_WIDTH-w-10));
-        let type = 'normal';
-        const rand = getSeededRandom(15);
-        if (heightMeters > 50 && rand < 0.2 + diff*0.3) type = 'moving';
-        else if (heightMeters > 20 && rand < 0.35) type = 'crumble';
-        else if (heightMeters > 100 && rand < 0.45) type = 'bouncy';
-        else if (heightMeters > 150 && rand < 0.55) type = 'ice';
-        platforms.push(new Platform(x, y, w, 30 + getSeededRandom(16) * 100, type));
-        if (getSeededRandom(17) < 0.05) {
-            const pArr = ['rocket','shield','slow'];
-            const pType = pArr[Math.floor(getSeededRandom(18)*3)];
-            collectibles.push(new Collectible(x+w/2, y-30, pType));
-        } else if (getSeededRandom(19) < 0.25) {
-            collectibles.push(new Collectible(x+w/2, y-30-Math.random()*30, 'star'));
         }
-        if (heightMeters > 200 && getSeededRandom(20) < 0.1 + diff*0.3) enemies.push(new Enemy(y - 50));
-        if (heightMeters > 300 && getSeededRandom(21) < 0.1) winds.push(new WindZone(y - 100));
-    }
-    state.lastPlatformY = y;
-}
-function checkCollisions() {
-    if (state.rocketActive) return;
-    for (let p of platforms) {
-        if (p.isDestroyed) continue;
-        if (p.hasSpikes) {
-            if (player.x + player.w > p.x + p.spikeX && player.x < p.x + p.spikeX + 20 &&
-                player.y + player.h > p.y - 10 && player.y + player.h < p.y + 10) { killPlayer(); return; }
         }
-        if (player.vy >= 0 && player.y + player.h <= p.y + player.vy + 3 &&
-            player.y + player.h >= p.y - 5 && player.x + player.w > p.x + 5 && player.x < p.x + p.w - 5) {
-            if (p.type === 'bouncy' && !p.hasBounced) {
-                player.y = p.y - player.h; player.vy = -15; p.hasBounced = true;
-                createDust(player.x+player.w/2, player.y+player.h, 5); AudioSys.sfx.jump();
-            } else {
-                const impactVelocity = player.vy;
-                player.y = p.y - player.h; player.vy = 0; player.grounded = true; player.landedPlatform = p;
-                if (p.type === 'crumble') p.triggerCrumble();
-                if (impactVelocity > 2.0) { AudioSys.sfx.land(); createDust(player.x+player.w/2, player.y+player.h, 3); }
             }
         }
-    }
-    for (let e of enemies) { if (Math.hypot((player.x+player.w/2)-e.x, (player.y+player.h/2)-e.y) < player.w/2 + e.r) killPlayer(); }
-    collectibles.forEach(c => {
-        if (c.collected) return;
-        if (Math.hypot((player.x+player.w/2)-c.x, (player.y+player.h/2)-c.y) < 20) {
-            c.collected = true;
-            if (c.type === 'star') {
-                state.score += 10; state.starsCollected++; uiStars.innerText = state.starsCollected;
-                localStorage.setItem('ascent_stars', state.starsCollected); AudioSys.sfx.coin();
-            } else activatePowerup(c.type);
-        }
-    });
-    if (player.y > state.cameraY + LOGICAL_HEIGHT + 100) {
-        if (state.hasShield) { player.vy = -25; state.hasShield = false; uiBadgeShield.style.display = 'none'; AudioSys.sfx.powerup(); }
-        else killPlayer();
-    }
-}
-function activatePowerup(type) {
-    AudioSys.sfx.powerup();
-    if (type === 'shield') { state.hasShield = true; uiBadgeShield.style.display = 'block'; }
-    else if (type === 'rocket') { state.rocketActive = true; state.rocketTimer = 100; uiBadgeRocket.style.display = 'block'; }
-    else if (type === 'slow') { state.slowMoTimer = 300; uiBadgeSlow.style.display = 'block'; }
-}
-function killPlayer() {
-    if (state.gameOver) return;
-    state.gameOver = true; state.isPlaying = false; AudioSys.sfx.die(); if(navigator.vibrate) navigator.vibrate(200);
-    uiFinalScore.innerText = Math.floor(state.highScore); uiGameOver.style.display = 'flex';
-}
-function createDust(x, y, count) {
-    for(let i=0; i<count; i++) particles.push({ x: x, y: y, vx: (Math.random()-0.5)*4, vy: Math.random()*-2, life: 1.0, size: Math.random()*4+2 });
-}
-function updateEnvironment() {
-    const h = state.highScore;
-    for(let i=0; i<PALETTES.length-1; i++) {
-        if (h >= PALETTES[i].h && h <= PALETTES[i+1].h) {
-            const t = (h - PALETTES[i].h) / (PALETTES[i+1].h - PALETTES[i].h);
-            state.bgTop = lerpColor(PALETTES[i].top, PALETTES[i+1].top, t);
-            state.bgBot = lerpColor(PALETTES[i].bot, PALETTES[i+1].bot, t);
-            break;
         }
-    }
-}
-function lerpColor(a, b, amount) {
-    const ah = parseInt(a.replace(/#/g, ''), 16), ar = ah >> 16, ag = ah >> 8 & 0xff, ab = ah & 0xff,
-          bh = parseInt(b.replace(/#/g, ''), 16), br = bh >> 16, bg = bh >> 8 & 0xff, bb = bh & 0xff,
-          rr = ar + amount * (br - ar), rg = ag + amount * (bg - ag), rb = ab + amount * (bb - ab);
-    return '#' + ((1 << 24) + (rr << 16) + (rg << 8) + (rb | 0)).toString(16).slice(1);
-}
-function updateCamera() {
-    let targetY = player.y - LOGICAL_HEIGHT * 0.6;
-    if (state.rocketActive) targetY = player.y - LOGICAL_HEIGHT * 0.5;
-    state.cameraY += (targetY - state.cameraY) * CAMERA_SMOOTHING;
-    const currentHeight = Math.floor((-player.y + (LOGICAL_HEIGHT - 100)) / 10);
-    if (currentHeight > state.highScore) { state.highScore = currentHeight; uiScore.innerText = state.highScore; }
-    if (state.cameraY < state.lastPlatformY + LOGICAL_HEIGHT) generateChunk(state.cameraY - LOGICAL_HEIGHT);
-    if (platforms.length > 20) platforms.shift();
-    if (collectibles.length > 20) collectibles.shift();
-    if (enemies.length > 10) enemies.shift();
-    if (winds.length > 10) winds.shift();
-}
-function gameLoop() {
-    if (state.isPlaying && !state.isPaused) {
-        if (state.slowMoTimer > 0) { state.timeScale = 0.3; state.slowMoTimer--; if (state.slowMoTimer <= 0) { state.timeScale = 1.0; uiBadgeSlow.style.display = 'none'; } }
-        else if (!state.rocketActive) state.timeScale = 1.0;
-        player.update();
-        platforms.forEach(p => p.update());
-        enemies.forEach(e => e.update());
-        winds.forEach(w => w.update());
-        checkCollisions();
-        updateCamera();
-        updateEnvironment();
-        for (let i = particles.length - 1; i >= 0; i--) { let p = particles[i]; p.x += p.vx * state.timeScale; p.y += p.vy * state.timeScale; p.life -= 0.05 * state.timeScale; if (p.life <= 0) particles.splice(i, 1); }
-    }
-    // Render
-    const gradient = ctx.createLinearGradient(0, 0, 0, LOGICAL_HEIGHT);
-    gradient.addColorStop(0, state.bgTop); gradient.addColorStop(1, state.bgBot);
-    ctx.fillStyle = gradient; ctx.fillRect(0, 0, LOGICAL_WIDTH, LOGICAL_HEIGHT);
-    ctx.save();
-    ctx.translate(0, -state.cameraY);
-    winds.forEach(w => { if(isVisible(w.y, 200)) w.draw(ctx); });
-    platforms.forEach(p => { if(isVisible(p.y, p.h)) p.draw(ctx); });
-    collectibles.forEach(c => { if(isVisible(c.y, 20)) c.draw(ctx); });
-    enemies.forEach(e => { if(isVisible(e.y, 50)) e.draw(ctx); });
-    // Draw Other Players with Smooth Interpolation
-    for (let id in otherPlayers) {
-        const op = otherPlayers[id];
-        if (!op.isDead && isVisible(op.y, 50)) {
-            // LERP: Move 20% towards target every frame
-            op.x += (op.tx - op.x) * 0.2;
-            op.y += (op.ty - op.y) * 0.2;
-            player.draw(ctx, false, op.skin, op.x, op.y);
-            ctx.fillStyle = "rgba(255,255,255,0.7)";
-            ctx.font = "10px Arial"; ctx.textAlign = "center";
-            ctx.fillText(op.name, op.x + 12, op.y - 10);
         }
-    }
-    ctx.fillStyle = "rgba(255, 255, 255, 0.6)";
-    particles.forEach(p => { ctx.globalAlpha = p.life; ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI*2); ctx.fill(); });
-    ctx.globalAlpha = 1.0;
-    if (state.isPlaying && !state.gameOver) player.draw(ctx, true);
-    drawTrajectory(ctx);
-    ctx.restore();
-    requestAnimationFrame(gameLoop);
-}
-function isVisible(y, h) { return y + h > state.cameraY && y < state.cameraY + LOGICAL_HEIGHT; }
-function restartGame() {
-    state.gameOver = false; state.isPlaying = true; state.cameraY = 0; state.score = 0; state.highScore = 0;
-    state.rocketActive = false; state.hasShield = false; state.slowMoTimer = 0;
-    document.querySelectorAll('.powerup-badge').forEach(el => el.style.display = 'none');
-    uiScore.innerText = "0"; uiGameOver.style.display = 'none';
-    // Reset Player and Level (Will generate same level because platformCount resets)
-    player.reset();
-    initLevel();
-    uiTutorial.style.display = 'block';
-    // Notify Server
-    socket.emit('update', [Math.round(player.x), Math.round(player.y), 0, 0, 0, 0]);
-}
-function getPointerPos(e) {
-    const rect = canvas.getBoundingClientRect();
-    const scaleX = LOGICAL_WIDTH / rect.width; const scaleY = LOGICAL_HEIGHT / rect.height;
-    let cx = e.touches ? e.touches[0].clientX : e.clientX; let cy = e.touches ? e.touches[0].clientY : e.clientY;
-    return { x: (cx - rect.left) * scaleX, y: (cy - rect.top) * scaleY };
-}
-const startDrag = (e) => {
-    if (!state.isPlaying || state.isPaused || (!player.grounded && !state.slowMoTimer>0)) return;
-    if(e.target === canvas) e.preventDefault();
-    AudioSys.init(); state.isDragging = true;
-    const pos = getPointerPos(e); state.dragStartX = pos.x; state.dragStartY = pos.y; state.dragCurrX = pos.x; state.dragCurrY = pos.y;
-};
-const moveDrag = (e) => {
-    if (!state.isDragging) return;
-    if(e.target === canvas) e.preventDefault();
-    const pos = getPointerPos(e); state.dragCurrX = pos.x; state.dragCurrY = pos.y;
-};
-const endDrag = (e) => {
-    if (!state.isDragging) return;
-    state.isDragging = false;
-    let dx = state.dragStartX - state.dragCurrX; let dy = state.dragStartY - state.dragCurrY;
-    let power = Math.sqrt(dx*dx + dy*dy) * DRAG_STRENGTH;
-    if (power > MAX_POWER) { const a = Math.atan2(dy, dx); dx = Math.cos(a)*(MAX_POWER/DRAG_STRENGTH); dy = Math.sin(a)*(MAX_POWER/DRAG_STRENGTH); }
-    if (Math.sqrt(dx*dx+dy*dy)*DRAG_STRENGTH >= MIN_POWER) player.jump(dx*DRAG_STRENGTH, dy*DRAG_STRENGTH);
-};
-window.addEventListener('mousedown', startDrag); window.addEventListener('mousemove', moveDrag); window.addEventListener('mouseup', endDrag);
-window.addEventListener('touchstart', startDrag, {passive:false}); window.addEventListener('touchmove', moveDrag, {passive:false}); window.addEventListener('touchend', endDrag);
-document.getElementById('retry-btn').onclick = (e) => { e.stopPropagation(); restartGame(); };
-function drawTrajectory(ctx) {
-    if (!state.isDragging || !player.grounded) return;
-    let dx = state.dragStartX - state.dragCurrX; let dy = state.dragStartY - state.dragCurrY;
-    let dist = Math.sqrt(dx*dx + dy*dy);
-    if (dist * DRAG_STRENGTH > MAX_POWER) { const a = Math.atan2(dy, dx); dx = Math.cos(a)*(MAX_POWER/DRAG_STRENGTH); dy = Math.sin(a)*(MAX_POWER/DRAG_STRENGTH); }
-    let vx = dx * DRAG_STRENGTH; let vy = dy * DRAG_STRENGTH;
-    let sx = player.x + player.w/2, sy = player.y + player.h/2;
-    ctx.fillStyle = '#fff';
-    for (let i = 0; i < 15; i++) { sx += vx; sy += vy; vy += GRAVITY; if (i%2===0) { ctx.beginPath(); ctx.arc(sx, sy, 3, 0, Math.PI*2); ctx.fill(); } }
-}
-function resize() { canvas.width = LOGICAL_WIDTH; canvas.height = LOGICAL_HEIGHT; }
-window.addEventListener('resize', resize);
-resize();
-uiStars.innerText = state.starsCollected;
-</script>
 </body>
 </html>

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+    <title>Bridge Builder MP</title>
     <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; user-select: none; -webkit-user-select: none; touch-action: none; font-family: 'Segoe UI', sans-serif; }
+        html, body { width: 100%; height: 100%; overflow: hidden; position: fixed; background: #000; }
+        #game-container {
+            width: 100%; height: 100%; padding-top: 70px; padding-bottom: 80px;
+            background: linear-gradient(to bottom, #ff7e5f, #feb47b, #ffcf91);
+            position: relative; overflow: hidden; transform: translate3d(0, 0, 0);
+        }
+        #game-area { width: 100%; height: 100%; position: relative; overflow: hidden; }
+        #world {
+            position: absolute; height: 100%; transition: transform 0.5s ease-out;
+            transform: translate3d(0, 0, 0); will-change: transform;
         }
+        /* Map Elements */
+        .platform {
+            position: absolute; bottom: 0; background: #1a1a2e;
+            border-radius: 4px 4px 0 0; z-index: 1;
         }
+        /* Player & Entities */
+        .player-wrapper {
+            position: absolute; z-index: 5; transition: left 0.5s linear, bottom 0.5s ease-in, opacity 0.5s;
+            will-change: left, bottom;
+        }
+        .player-body {
+            width: 20px; height: 20px; background: #1a1a2e; border-radius: 3px;
         }
+        .player-name {
+            position: absolute; top: -25px; left: 50%; transform: translateX(-50%);
+            font-size: 12px; color: #1a1a2e; font-weight: bold; white-space: nowrap;
         }
+        .stick {
+            position: absolute; width: 4px; background: #5c3d2e;
+            transform-origin: bottom center; border-radius: 2px;
+            bottom: 100px; z-index: 4; will-change: height, transform;
         }
+        /* UI */
+        #ui-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 20; }
+        #score {
+            position: absolute; top: 80px; left: 50%; transform: translateX(-50%);
+            font-size: 48px; font-weight: bold; color: rgba(26, 26, 46, 0.3);
         }
+        #leaderboard {
+            position: absolute; top: 20px; right: 20px;
+            background: rgba(255,255,255,0.8); padding: 10px;
+            border-radius: 8px; font-size: 12px; min-width: 120px;
+        }
+        .lb-row { display: flex; justify-content: space-between; margin-bottom: 2px; }
+        .lb-name { font-weight: bold; margin-right: 10px; }
+        #login-screen {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background: rgba(0,0,0,0.8); z-index: 100;
+            display: flex; flex-direction: column; justify-content: center; align-items: center;
+            pointer-events: auto;
+        }
+        input { padding: 15px; font-size: 18px; border-radius: 5px; border: none; margin-bottom: 15px; text-align: center; }
+        button { padding: 15px 30px; font-size: 18px; background: #ff7e5f; border: none; border-radius: 5px; color: white; cursor: pointer; }
+        .sun { position: absolute; top: 20px; right: 15%; width: 60px; height: 60px; background: rgba(255,255,255,0.8); border-radius: 50%; box-shadow: 0 0 40px rgba(255,255,255,0.5); }
+        .cloud { position: absolute; background: rgba(255,255,255,0.3); border-radius: 50px; }
+        #instruction { position: absolute; bottom: 100px; width: 100%; text-align: center; color: white; transition: opacity 0.3s; }
+    </style>
+</head>
+<body>
+    <div id="login-screen">
+        <h1 style="color:white; margin-bottom:20px;">Bridge Builder MP</h1>
+        <input type="text" id="username" placeholder="Enter Username" maxlength="12">
+        <button onclick="startGame()">PLAY</button>
+    </div>
+    <div id="game-container">
+        <div class="sun"></div>
+        <div class="cloud" style="top: 40px; left: 10%; width: 80px; height: 25px;"></div>
+        <div class="cloud" style="top: 80px; left: 60%; width: 100px; height: 30px;"></div>
+        <div id="game-area">
+            <div id="world">
+                <!-- Platforms and Players injected here -->
+            </div>
+        </div>
+        <div id="ui-layer">
+            <div id="score">0</div>
+            <div id="instruction">Hold to grow stick</div>
+            <div id="leaderboard">Loading...</div>
+        </div>
+    </div>
+    <script src="/socket.io/socket.io.js"></script>
+    <script>
+        // --- CONFIG ---
+        const PLAYER_SIZE = 20;
+        const PLATFORM_HEIGHT = 100;
+        const STICK_WIDTH = 4;
+        // --- STATE ---
+        let socket;
+        let myId = null;
+        let gameState = 'login'; // login, playing
+        let platforms = [];
+        let players = {}; // Local cache of all players
+        let worldOffset = 0;
+        let audioCtx;
+        const world = document.getElementById('world');
+        const scoreDisplay = document.getElementById('score');
+        const lbDisplay = document.getElementById('leaderboard');
+        const instruction = document.getElementById('instruction');
+        // --- AUDIO ---
+        function initAudio() {
+            if (!audioCtx) audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+            if (audioCtx.state === 'suspended') audioCtx.resume();
         }
+        function playSound(type) {
+            if (!audioCtx) return;
+            const osc = audioCtx.createOscillator();
+            const gain = audioCtx.createGain();
+            osc.connect(gain);
+            gain.connect(audioCtx.destination);
+            const now = audioCtx.currentTime;
+            if (type === 'grow') {
+                osc.frequency.setValueAtTime(200, now);
+                gain.gain.setValueAtTime(0.05, now);
+                osc.start(now); osc.stop(now + 0.05);
+            } else if (type === 'hit') {
+                osc.type = 'square'; osc.frequency.setValueAtTime(150, now);
+                gain.gain.setValueAtTime(0.1, now);
+                osc.start(now); osc.stop(now + 0.05);
+            } else if (type === 'score') {
+                osc.frequency.setValueAtTime(600, now); gain.gain.setValueAtTime(0.1, now);
+                osc.start(now); osc.stop(now + 0.1);
+            } else if (type === 'die') {
+                osc.type = 'sawtooth'; osc.frequency.setValueAtTime(200, now);
+                osc.frequency.exponentialRampToValueAtTime(50, now+0.3);
+                gain.gain.setValueAtTime(0.2, now);
+                osc.start(now); osc.stop(now + 0.3);
             }
         }
+        // --- GAME START ---
+        function startGame() {
+            const name = document.getElementById('username').value.trim() || "Guest";
+            document.getElementById('login-screen').style.display = 'none';
+            initAudio();
+            socket = io();
+            socket.on('connect', () => {
+                myId = socket.id;
+                socket.emit('join', name);
+            });
+            // 1. Initial State
+            socket.on('init', (data) => {
+                // Clear world
+                world.innerHTML = '';
+                platforms = data.platforms;
+                players = data.players;
+                // Render everything
+                platforms.forEach(renderPlatform);
+                Object.values(players).forEach(renderPlayer);
+                updateCamera();
+                updateLeaderboard();
+            });
+            // 2. New Player Joined
+            socket.on('player_update', (p) => {
+                players[p.id] = p;
+                renderPlayer(p);
+                updateLeaderboard();
+            });
+            // 3. Player Left
+            socket.on('player_leave', (id) => {
+                if (players[id] && players[id].el) players[id].el.remove();
+                if (players[id] && players[id].stickEl) players[id].stickEl.remove();
+                delete players[id];
+                updateLeaderboard();
+            });
+            // 4. New Platform Generated
+            socket.on('new_platform', (plat) => {
+                platforms.push(plat);
+                renderPlatform(plat);
+            });
+            // 5. Player Actions (Visuals)
+            socket.on('player_action', (data) => {
+                const p = players[data.id];
+                if (!p) return;
+                if (data.type === 'grow_start') {
+                    if (data.id === myId) playSound('grow'); // Client prediction handled in input
+                    p.isGrowing = true;
+                    visualizeGrowth(p); // Start visual loop for this player
+                }
+                else if (data.type === 'grow_stop') {
+                    p.isGrowing = false; // Stop visual loop
+                    p.stickHeight = data.height;
+                    // Update stick visual to match server exact height
+                    if (p.stickEl) {
+                        p.stickEl.style.height = data.height + 'px';
+                        p.stickEl.style.transition = 'transform 0.3s ease-in';
+                        p.stickEl.style.transform = 'rotate(90deg)';
+                    }
+                    if (data.id === myId) playSound('hit');
+                }
+            });
+            // 6. Result (Move or Die)
+            socket.on('player_result', (data) => {
+                const p = players[data.id];
+                if (!p) return;
+                p.score = data.score;
+                if (data.id === myId) scoreDisplay.textContent = p.score;
+                if (data.success) {
+                    // Animate Walk
+                    if (p.el) {
+                        p.el.style.left = data.x + 'px';
+                    }
+                    if (data.id === myId) {
+                        playSound('score');
+                        setTimeout(updateCamera, 500);
+                        // Reset stick after walk
+                        setTimeout(() => resetStick(p), 600);
+                    } else {
+                        setTimeout(() => resetStick(p), 600);
+                    }
+                } else {
+                    // Animate Fall
+                    const walkDist = p.stickHeight; // Walk to end of stick
+                    // Simple visual approximation of walking to death
+                    if (p.el) {
+                        // 1. Walk out
+                        p.el.style.transition = 'left 0.3s linear';
+                        p.el.style.left = (parseFloat(p.el.style.left) + Math.min(walkDist, 100)) + 'px'; // Don't walk too far visual
+                        // 2. Fall
+                        setTimeout(() => {
+                            if (data.id === myId) playSound('die');
+                            p.el.style.transition = 'bottom 0.5s ease-in, opacity 0.5s';
+                            p.el.style.bottom = '-50px';
+                            p.el.style.opacity = '0';
+                            if (p.stickEl) {
+                                p.stickEl.style.transition = 'transform 0.5s ease-in';
+                                p.stickEl.style.transform = 'rotate(180deg)';
+                            }
+                            // 3. Respawn
+                            setTimeout(() => {
+                                respawnPlayer(p, data.x);
+                            }, 1000);
+                        }, 300);
+                    }
+                }
+                updateLeaderboard();
+            });
+            setupInputs();
+        }
+        // --- RENDERERS ---
+        function renderPlatform(plat) {
+            const div = document.createElement('div');
+            div.className = 'platform';
+            div.style.left = plat.x + 'px';
+            div.style.width = plat.w + 'px';
+            div.style.height = PLATFORM_HEIGHT + 'px';
+            world.appendChild(div);
+        }
+        function renderPlayer(p) {
+            // Player Body
+            if (!p.el) {
+                const wrap = document.createElement('div');
+                wrap.className = 'player-wrapper';
+                const name = document.createElement('div');
+                name.className = 'player-name';
+                name.innerText = p.name;
+                // Highlight me
+                if (p.id === myId) name.style.color = '#ff4757';
+                const body = document.createElement('div');
+                body.className = 'player-body';
+                if (p.id !== myId) body.style.opacity = '0.6'; // Ghost effect
+                wrap.appendChild(name);
+                wrap.appendChild(body);
+                world.appendChild(wrap);
+                p.el = wrap;
+            }
+            // Player Stick
+            if (!p.stickEl) {
+                const st = document.createElement('div');
+                st.className = 'stick';
+                if (p.id !== myId) st.style.opacity = '0.6';
+                world.appendChild(st);
+                p.stickEl = st;
+            }
+            // Position
+            p.el.style.left = p.x + 'px';
+            p.el.style.bottom = PLATFORM_HEIGHT + 'px';
+            p.el.style.opacity = '1';
+            // Stick Position (Always attached to right of current platform usually,
+            // but simplified: attached to right of player spawn point)
+            resetStick(p);
         }
+        function resetStick(p) {
+            if (!p.stickEl) return;
+            p.stickHeight = 0;
+            p.stickEl.style.transition = 'none';
+            p.stickEl.style.height = '0px';
+            p.stickEl.style.transform = 'rotate(0deg)';
+            // Stick starts at player pos + width
+            p.stickEl.style.left = (parseFloat(p.el.style.left) + PLAYER_SIZE - STICK_WIDTH/2) + 'px';
+            p.stickEl.style.bottom = PLATFORM_HEIGHT + 'px';
+        }
+        function respawnPlayer(p, x) {
+            p.el.style.transition = 'none';
+            p.el.style.opacity = '1';
+            p.el.style.bottom = PLATFORM_HEIGHT + 'px';
+            p.el.style.left = x + 'px';
+            resetStick(p);
         }
+        function visualizeGrowth(p) {
+            if (!p.isGrowing) return;
+            // If local player, we might have slightly different timing, but visualization keeps it smooth
+            // We approximate 3px per frame to match server config
+            if (p.stickEl) {
+                let h = parseFloat(p.stickEl.style.height || 0);
+                h += 3;
+                p.stickEl.style.height = h + 'px';
+                if (p.id === myId && h % 20 === 0) playSound('grow'); // Audio feedback
             }
+            requestAnimationFrame(() => visualizeGrowth(p));
         }
+        function updateCamera() {
+            if (!players[myId] || !players[myId].el) return;
+            const myX = parseFloat(players[myId].el.style.left);
+            // Center player on screen (screen width / 2)
+            // But offset world to the left
+            const offset = myX - 50;
+            world.style.transform = `translate3d(${-offset}px, 0, 0)`;
         }
+        function updateLeaderboard() {
+            const sorted = Object.values(players).sort((a,b) => b.score - a.score).slice(0, 5);
+            lbDisplay.innerHTML = sorted.map((p, i) =>
+                `<div class="lb-row" style="${p.id===myId?'color:#ff4757':''}">
+                    <span class="lb-name">#${i+1} ${p.name}</span>
+                    <span>${p.score}</span>
+                 </div>`
+            ).join('');
+        }
+        // --- INPUTS (Hack Proofing: Only send signals) ---
+        function setupInputs() {
+            const container = document.getElementById('game-container');
+            const start = (e) => {
+                if(e.cancelable) e.preventDefault();
+                if (instruction.style.opacity !== '0') instruction.style.opacity = '0';
+                socket.emit('start_grow');
+            };
+            const end = (e) => {
+                if(e.cancelable) e.preventDefault();
+                socket.emit('stop_grow');
+            };
+            container.addEventListener('mousedown', start);
+            container.addEventListener('mouseup', end);
+            container.addEventListener('touchstart', start, {passive: false});
+            container.addEventListener('touchend', end, {passive: false});
         }
+    </script>
 </body>
 </html>