Update app.py

app.py

@@ -1,23 +1,21 @@
 import json
 import asyncio
 import os
+import time
 from typing import Dict, List
 from fastapi import FastAPI, WebSocket, WebSocketDisconnect
 from fastapi.responses import HTMLResponse
 
 app = FastAPI()
 
-# --- SERVER STATE & CONFIG ---
-DATA_FILE = "/data/leaderboard.json" # Use /data for persistence in some Docker envs, or local
-if not os.path.exists("/data"):
-    DATA_FILE = "leaderboard.json"
-
-# Fixed seed so everyone sees the same level
-LEVEL_SEED = 12345 
+# --- SERVER CONFIG ---
+# Use /data for persistence in Docker, fallback to local
+DATA_FILE = "/data/leaderboard.json" if os.path.exists("/data") else "leaderboard.json"
+LEVEL_SEED = 9999  # Everyone plays the same procedural level
 
 class ConnectionManager:
     def __init__(self):
-        # active_connections: {socket: player_data}
+        # {websocket: {data}}
         self.active_connections: Dict[WebSocket, dict] = {}
         self.leaderboard: List[dict] = self.load_leaderboard()
 
@@ -31,26 +29,27 @@ class ConnectionManager:
         return []
 
     def save_leaderboard(self):
-        # Sort by score desc, keep top 3
+        # Sort desc by score, keep top 5
         self.leaderboard.sort(key=lambda x: x['score'], reverse=True)
-        self.leaderboard = self.leaderboard[:3]
+        self.leaderboard = self.leaderboard[:5]
         try:
             with open(DATA_FILE, "w") as f:
                 json.dump(self.leaderboard, f)
         except Exception as e:
-            print(f"Error saving leaderboard: {e}")
+            print(f"Save error: {e}")
 
     async def connect(self, websocket: WebSocket):
         await websocket.accept()
-        # Initialize with placeholder
         self.active_connections[websocket] = {
-            "username": "Anonymous", 
-            "x": 0, "y": 0, "vx": 0, "vy": 0, 
-            "score": 0, 
+            "username": "Loading...",
+            "x": 0, "y": 0,
+            "vx": 0, "vy": 0,
+            "score": 0,
             "faceRight": True,
-            "dead": False
+            "dead": False,
+            "skin": 0 # Future proofing
         }
-        # Send initial config to the new client
+        # Send Init Packet
         await websocket.send_json({
             "type": "init",
             "seed": LEVEL_SEED,
@@ -59,13 +58,12 @@ class ConnectionManager:
 
     def disconnect(self, websocket: WebSocket):
         if websocket in self.active_connections:
-            # Check if their final score qualifies for leaderboard
-            player_data = self.active_connections[websocket]
-            self.update_leaderboard(player_data['username'], player_data['score'])
+            data = self.active_connections[websocket]
+            self.update_leaderboard(data['username'], data['score'])
             del self.active_connections[websocket]
 
     def update_leaderboard(self, username, score):
-        # Check if user already in leaderboard, update if score is higher
+        if score < 10: return # Ignore junk scores
         found = False
         for entry in self.leaderboard:
             if entry['username'] == username:
@@ -73,74 +71,80 @@ class ConnectionManager:
                     entry['score'] = score
                 found = True
                 break
-        
         if not found:
             self.leaderboard.append({"username": username, "score": score})
-        
         self.save_leaderboard()
 
     async def handle_message(self, websocket: WebSocket, data: dict):
+        if websocket not in self.active_connections: return
+
+        p = self.active_connections[websocket]
+
         if data['type'] == 'update':
-            # Update server state for this player
-            if websocket in self.active_connections:
-                p = self.active_connections[websocket]
-                p['username'] = data.get('username', p['username'])
-                p['x'] = data.get('x', 0)
-                p['y'] = data.get('y', 0)
-                p['vx'] = data.get('vx', 0)
-                p['vy'] = data.get('vy', 0)
-                p['faceRight'] = data.get('faceRight', True)
-                p['dead'] = data.get('dead', False)
-                
-                # Only update score if not dead (prevent hacking usually, but simple here)
-                if not p['dead']:
-                    p['score'] = max(p['score'], data.get('score', 0))
+            # Trust client physics, but store absolute coordinates
+            p['username'] = data.get('username', 'Unknown')
+            p['x'] = data.get('x', 0)
+            p['y'] = data.get('y', 0) # World Y (Up is positive)
+            p['vx'] = data.get('vx', 0)
+            p['vy'] = data.get('vy', 0)
+            p['faceRight'] = data.get('faceRight', True)
+            p['score'] = max(p['score'], data.get('score', 0))
+            p['dead'] = False
 
         elif data['type'] == 'gameover':
-            if websocket in self.active_connections:
-                p = self.active_connections[websocket]
-                p['dead'] = True
-                self.update_leaderboard(p['username'], data.get('score', 0))
+            p['dead'] = True
+            self.update_leaderboard(p['username'], data.get('score', 0))
 
     async def broadcast_gamestate(self):
-        """Sends the state of all players to all players"""
-        if not self.active_connections:
-            return
+        if not self.active_connections: return
 
-        # Compile list of other players
+        # Pack data efficiently
         players_list = []
         for ws, p in self.active_connections.items():
             if not p['dead']:
-                players_list.append(p)
-
-        message = {
-            "type": "gamestate",
-            "players": players_list,
-            "leaderboard": self.leaderboard
+                players_list.append({
+                    "u": p['username'],
+                    "x": int(p['x']),
+                    "y": int(p['y']),
+                    "vx": round(p['vx'], 2),
+                    "vy": round(p['vy'], 2),
+                    "f": p['faceRight'],
+                    "s": p['score']
+                })
+
+        msg = {
+            "type": "state",
+            "ts": time.time(), # Timestamp for interpolation
+            "p": players_list,
+            "l": self.leaderboard
         }
 
         # Broadcast
-        disconnected = []
-        for connection in self.active_connections:
+        to_remove = []
+        for ws in self.active_connections:
             try:
-                await connection.send_json(message)
+                await ws.send_json(msg)
             except:
-                disconnected.append(connection)
+                to_remove.append(ws)
         
-        for d in disconnected:
-            self.disconnect(d)
+        for ws in to_remove:
+            self.disconnect(ws)
 
 manager = ConnectionManager()
 
-# Background task to push updates at 20 FPS
+# --- HIGH PERFORMANCE LOOP (60hz) ---
 @app.on_event("startup")
-async def start_broadcast_loop():
+async def start_loop():
     asyncio.create_task(broadcast_loop())
 
 async def broadcast_loop():
+    # 60 FPS = ~0.016s
     while True:
+        start_time = time.time()
         await manager.broadcast_gamestate()
-        await asyncio.sleep(0.05) # 20 updates per second
+        elapsed = time.time() - start_time
+        sleep_time = max(0, 0.016 - elapsed)
+        await asyncio.sleep(sleep_time)
 
 @app.websocket("/ws")
 async def websocket_endpoint(websocket: WebSocket):
@@ -151,12 +155,10 @@ async def websocket_endpoint(websocket: WebSocket):
             await manager.handle_message(websocket, data)
     except WebSocketDisconnect:
         manager.disconnect(websocket)
-    except Exception as e:
-        print(f"Error: {e}")
+    except:
         manager.disconnect(websocket)
 
-# --- FRONTEND HTML ---
-
+# --- FRONTEND ---
 @app.get("/", response_class=HTMLResponse)
 async def get():
     return """
@@ -165,23 +167,23 @@ async def get():
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Jungle Jump Multiplayer</title>
+    <title>Jungle Jump Live</title>
     <style>
-        body { margin: 0; padding: 0; background-color: #222; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif; touch-action: none; user-select: none; -webkit-user-select: none; }
-        #gameContainer { position: relative; width: 100%; height: 100%; max-width: 50vh; aspect-ratio: 9/16; background: #659d33; box-shadow: 0 0 20px rgba(0,0,0,0.5); overflow: hidden; }
+        body { margin: 0; padding: 0; background-color: #1a1a1a; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; font-family: 'Segoe UI', sans-serif; touch-action: none; }
+        #gameContainer { position: relative; width: 100%; height: 100%; max-width: 50vh; aspect-ratio: 9/16; background: #659d33; box-shadow: 0 0 30px rgba(0,0,0,0.5); overflow: hidden; }
         canvas { display: block; width: 100%; height: 100%; }
         #ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
-        #score { position: absolute; top: 20px; right: 20px; font-size: 28px; font-weight: bold; color: #000; text-shadow: 1px 1px 0px rgba(255,255,255,0.5); z-index: 5;}
-        #leaderboard { position: absolute; top: 20px; left: 20px; font-size: 14px; color: #fff; background: rgba(0,0,0,0.5); padding: 10px; border-radius: 8px; z-index: 5; text-align: left; }
-        #leaderboard h3 { margin: 0 0 5px 0; color: #d8c222; font-size: 16px; }
-        #gameOverScreen, #loginScreen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; z-index: 10; }
-        #gameOverScreen { display: none; }
-        h1 { font-size: 40px; margin: 0 0 10px 0; text-shadow: 2px 2px #000; color: #d8c222; }
-        button { padding: 15px 40px; font-size: 24px; background: #d8c222; border: 4px solid #000; border-radius: 15px; cursor: pointer; font-family: inherit; font-weight: bold; pointer-events: auto; color: #000; transition: transform 0.1s; margin-top: 20px; }
+        #score { position: absolute; top: 20px; right: 20px; font-size: 32px; font-weight: 900; color: #fff; text-shadow: 2px 2px 0 #000; z-index: 5; font-family: monospace;}
+        #leaderboard { position: absolute; top: 10px; left: 10px; font-size: 12px; color: #fff; background: rgba(0,0,0,0.6); padding: 8px; border-radius: 6px; z-index: 5; pointer-events: none; }
+        #leaderboard h3 { margin: 0 0 5px 0; color: #ffd700; font-size: 14px; text-transform: uppercase; }
+        .screen-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; z-index: 10; transition: opacity 0.3s; }
+        .hidden { opacity: 0; pointer-events: none; }
+        h1 { font-size: 40px; margin-bottom: 10px; color: #ffd700; text-transform: uppercase; letter-spacing: 2px; }
+        button { padding: 15px 40px; font-size: 20px; background: #ffd700; border: none; border-radius: 30px; cursor: pointer; font-weight: bold; color: #000; transition: transform 0.1s; margin-top: 20px; text-transform: uppercase; }
         button:active { transform: scale(0.95); }
-        input { padding: 10px; font-size: 20px; border-radius: 8px; border: 2px solid #5c6b1f; text-align: center; margin-bottom: 10px; font-family: inherit; }
-        .tutorial-text { position: absolute; bottom: 120px; width: 100%; text-align: center; color: rgba(0,0,0,0.4); font-size: 14px; font-weight: bold; transition: opacity 1s ease-out; }
-        #connectionStatus { position: absolute; bottom: 5px; right: 5px; color: rgba(255,255,255,0.5); font-size: 10px; }
+        input { padding: 12px; font-size: 18px; border-radius: 8px; border: 2px solid #555; text-align: center; margin-bottom: 10px; background: #333; color: white; width: 200px; outline: none; }
+        input:focus { border-color: #ffd700; }
+        .status { position: absolute; bottom: 5px; right: 5px; font-size: 10px; color: rgba(255,255,255,0.3); }
     </style>
 </head>
 <body>
@@ -191,730 +193,475 @@ async def get():
     
     <div id="ui-layer">
         <div id="score">0</div>
-        <div id="leaderboard">
-            <h3>Top 3</h3>
-            <div id="lb-content">Loading...</div>
-        </div>
-        <div class="tutorial-text">Tap Sides to Move • Tap Center to Shoot</div>
-        <div id="connectionStatus">Disconnected</div>
+        <div id="leaderboard"><h3>Top Players</h3><div id="lb-content"></div></div>
+        <div class="status" id="ping">Ping: 0ms</div>
     </div>
 
-    <!-- Login Screen -->
-    <div id="loginScreen">
-        <h1>JUNGLE JUMP</h1>
-        <p style="margin-bottom: 20px">Multiplayer Edition</p>
-        <input type="text" id="usernameInput" placeholder="Enter Username" maxlength="10">
-        <button id="startBtn">START GAME</button>
+    <!-- Login -->
+    <div id="loginScreen" class="screen-overlay">
+        <h1>Jungle Jump</h1>
+        <p>MMO Edition</p>
+        <input type="text" id="usernameInput" placeholder="Nickname" maxlength="12">
+        <button id="startBtn">Join Game</button>
     </div>
 
-    <div id="gameOverScreen">
-        <h1>GAME OVER</h1>
-        <p id="finalScore" style="font-size: 24px; margin-bottom: 30px;">Score: 0</p>
-        <button id="restartBtn">Play Again</button>
+    <!-- Game Over -->
+    <div id="gameOverScreen" class="screen-overlay hidden">
+        <h1 style="color: #ff4444">FALLEN!</h1>
+        <p id="finalScore" style="font-size: 24px;">Score: 0</p>
+        <button id="restartBtn">Respawn</button>
     </div>
 </div>
 
 <script>
-/**
- * JUNGLE JUMP - MULTIPLAYER
- */
-
-// --- UTILS: COOKIES & RNG ---
-
-function setCookie(cname, cvalue, exdays) {
-    const d = new Date();
-    d.setTime(d.getTime() + (exdays*24*60*60*1000));
-    let expires = "expires="+ d.toUTCString();
-    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+// --- CORE ENGINE ---
+
+// Cookie Helpers
+function setCookie(name, value, days) {
+    let expires = "";
+    if (days) {
+        let date = new Date();
+        date.setTime(date.getTime() + (days*24*60*60*1000));
+        expires = "; expires=" + date.toUTCString();
+    }
+    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
 }
-
-function getCookie(cname) {
-    let name = cname + "=";
-    let decodedCookie = decodeURIComponent(document.cookie);
-    let ca = decodedCookie.split(';');
-    for(let i = 0; i <ca.length; i++) {
+function getCookie(name) {
+    let nameEQ = name + "=";
+    let ca = document.cookie.split(';');
+    for(let i=0;i < ca.length;i++) {
         let c = ca[i];
-        while (c.charAt(0) == ' ') c = c.substring(1);
-        if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
+        while (c.charAt(0)==' ') c = c.substring(1,c.length);
+        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
     }
-    return "";
+    return null;
 }
 
-// Linear Congruential Generator for synced levels
+// Deterministic RNG for Shared Level Generation
 class SeededRNG {
-    constructor(seed) {
-        this.seed = seed;
-    }
+    constructor(seed) { this.seed = seed; }
     next() {
         this.seed = (this.seed * 9301 + 49297) % 233280;
         return this.seed / 233280;
     }
 }
-let rng = new SeededRNG(12345); // Will be updated by server
 
-// --- GAME SETUP ---
+// Config
+const GAME_W = 375;
+const GAME_H = 812; // Viewport height
+const GRAVITY = 0.45;
+const JUMP_FORCE = -13;
+const MOVE_SPEED = 7;
 
+// DOM
 const canvas = document.getElementById('gameCanvas');
 const ctx = canvas.getContext('2d', { alpha: false });
-const scoreEl = document.getElementById('score');
-const lbContent = document.getElementById('lb-content');
-const gameOverScreen = document.getElementById('gameOverScreen');
 const loginScreen = document.getElementById('loginScreen');
-const usernameInput = document.getElementById('usernameInput');
-const finalScoreEl = document.getElementById('finalScore');
-const restartBtn = document.getElementById('restartBtn');
-const startBtn = document.getElementById('startBtn');
-const tutorialText = document.querySelector('.tutorial-text');
-const connStatus = document.getElementById('connectionStatus');
+const gameOverScreen = document.getElementById('gameOverScreen');
+const scoreEl = document.getElementById('score');
+const pingEl = document.getElementById('ping');
 
-const GAME_W = 375;
-const GAME_H = 812;
+// Game State
+let gameState = 'LOGIN'; // LOGIN, PLAYING, DEAD
+let username = "Player";
+let score = 0;
+let worldSeed = 12345;
+let rng;
 
-// Physics
-const GRAVITY = 0.4;
-const JUMP_FORCE = -11.5;
-const SPRING_FORCE = -22;
-const MOVEMENT_SPEED = 6.5;
+// Camera
+let cameraY = 0; // World Y at bottom of screen (increases as we go up)
+// In this engine: Y=0 is ground. Y increases upwards.
 
-// State
-let gameState = 'LOGIN'; // LOGIN, PLAYING, GAMEOVER
-let score = 0;
-let cameraY = 0;
-let username = "Player";
-let globalSeed = 12345;
+// Entities
+let player = { x: 0, y: 0, vx: 0, vy: 0, w: 40, h: 40, faceRight: true, dead: false };
+let platforms = []; 
+let otherPlayers = {}; // Map { username: {x, y, targetX, targetY, t} }
 
-// Networking
+// Inputs
+let keys = { left: false, right: false };
 let socket;
-let otherPlayers = []; // {username, x, y, vx, vy, faceRight}
-let lastUpdateSent = 0;
+let lastTime = 0;
 
-// Entities
-let platforms = [];
-let monsters = [];
-let bullets = [];
-let powerups = [];
-let particles = [];
-
-const player = {
-    x: GAME_W / 2 - 20,
-    y: GAME_H - 200,
-    w: 40,
-    h: 40,
-    vx: 0,
-    vy: 0,
-    faceRight: true,
-    hasPropeller: false,
-    propellerTimer: 0
-};
-
-const keys = { left: false, right: false, shoot: false };
-
-// --- NETWORKING ---
-
-function initNetwork() {
-    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    socket = new WebSocket(`${protocol}//${window.location.host}/ws`);
+// --- NETWORK ---
 
-    socket.onopen = () => {
-        connStatus.innerText = "Connected";
-        connStatus.style.color = "#0f0";
-    };
+function connect() {
+    const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    socket = new WebSocket(`${proto}//${window.location.host}/ws`);
 
-    socket.onclose = () => {
-        connStatus.innerText = "Disconnected";
-        connStatus.style.color = "#f00";
+    socket.onopen = () => {
+        pingEl.style.color = '#0f0';
+        // If we have a username and we're just reconnecting?
+        if(gameState === 'PLAYING') {
+            // Re-auth logic if needed
+        }
     };
 
-    socket.onmessage = (event) => {
-        const data = JSON.parse(event.data);
+    socket.onmessage = (e) => {
+        const data = JSON.parse(e.data);
         
         if (data.type === 'init') {
-            globalSeed = data.seed;
-            updateLeaderboardUI(data.leaderboard);
-        }
-        else if (data.type === 'gamestate') {
-            // Filter out self
-            otherPlayers = data.players.filter(p => p.username !== username);
-            updateLeaderboardUI(data.leaderboard);
+            worldSeed = data.seed;
+            updateLeaderboard(data.leaderboard);
+            // If auto-login, start game
+            if(gameState === 'LOGIN' && username !== "Player") {
+                startGameLogic();
+            }
+        } 
+        else if (data.type === 'state') {
+            handleStateUpdate(data);
         }
     };
+    
+    socket.onclose = () => {
+        pingEl.style.color = 'red';
+        setTimeout(connect, 1000); // Auto reconnect
+    };
 }
 
-function sendUpdate() {
-    if (socket && socket.readyState === WebSocket.OPEN) {
-        const now = Date.now();
-        if (now - lastUpdateSent > 50) { // Throttle client updates (20fps limit)
-            socket.send(JSON.stringify({
-                type: 'update',
-                username: username,
-                x: Math.round(player.x),
-                y: Math.round(player.y), // Send absolute Y
-                vx: player.vx,
-                vy: player.vy,
-                faceRight: player.faceRight,
-                score: score,
-                dead: gameState === 'GAMEOVER'
-            }));
-            lastUpdateSent = now;
+function handleStateUpdate(data) {
+    // Leaderboard
+    if(data.l) updateLeaderboard(data.l);
+
+    // Players
+    const now = performance.now();
+    data.p.forEach(pData => {
+        if(pData.u === username) return; // Ignore self
+
+        if(!otherPlayers[pData.u]) {
+            otherPlayers[pData.u] = { 
+                x: pData.x, y: pData.y, 
+                currX: pData.x, currY: pData.y,
+                faceRight: pData.f 
+            };
         }
+        
+        // Interpolation Targets
+        const op = otherPlayers[pData.u];
+        op.targetX = pData.x;
+        op.targetY = pData.y;
+        op.faceRight = pData.f;
+        op.lastUpdate = now;
+    });
+
+    // Clean up old players
+    for(let u in otherPlayers) {
+        if(now - otherPlayers[u].lastUpdate > 2000) delete otherPlayers[u];
     }
 }
 
-function sendGameOver() {
-    if (socket && socket.readyState === WebSocket.OPEN) {
+function sendUpdate() {
+    if(socket && socket.readyState === 1 && gameState === 'PLAYING') {
         socket.send(JSON.stringify({
-            type: 'gameover',
-            score: score
+            type: 'update',
+            username: username,
+            x: Math.round(player.x),
+            y: Math.round(player.y),
+            vx: player.vx,
+            vy: player.vy,
+            faceRight: player.faceRight,
+            score: Math.floor(score)
         }));
     }
 }
 
-function updateLeaderboardUI(lbData) {
-    if (!lbData || lbData.length === 0) {
-        lbContent.innerHTML = "None yet";
-        return;
-    }
-    let html = "";
-    lbData.forEach((entry, idx) => {
-        html += `<div>${idx+1}. ${entry.username}: ${entry.score}</div>`;
-    });
-    lbContent.innerHTML = html;
+function updateLeaderboard(list) {
+    const el = document.getElementById('lb-content');
+    el.innerHTML = list.map((e,i) => `<div>${i+1}. ${e.username} <span style="color:#ffd700">${e.score}</span></div>`).join('');
 }
 
-// --- DRAWING FUNCTIONS ---
-
-function drawDoodler(x, y, w, h, facingRight, isSelf = true, name = "") {
-    ctx.save();
-    
-    // Camera adjustment for self is automatic, but for others we must adjust relative to cameraY
-    let drawY = y;
-    if (!isSelf) {
-        drawY = y + cameraY; 
-        
-        // Optim: Don't draw if off screen
-        if (drawY < -50 || drawY > GAME_H + 50) {
-            ctx.restore();
-            return;
-        }
-        ctx.globalAlpha = 0.5; // Ghost effect for others
-    }
-
-    ctx.translate(x + w/2, drawY + h/2);
-    
-    let tilt = isSelf ? player.vx * 0.05 : 0;
-    ctx.rotate(tilt);
-    
-    if (!facingRight) ctx.scale(-1, 1);
-
-    // Legs
-    ctx.strokeStyle = '#000';
-    ctx.lineWidth = 3;
-    ctx.lineCap = 'round';
-    
-    ctx.beginPath();
-    ctx.moveTo(-10, 15); ctx.lineTo(-12, 22);
-    ctx.moveTo(0, 15); ctx.lineTo(0, 22);
-    ctx.moveTo(10, 15); ctx.lineTo(12, 22);
-    ctx.stroke();
-
-    // Body
-    ctx.fillStyle = isSelf ? '#d8c222' : '#88d8b0'; 
-    ctx.beginPath();
-    ctx.moveTo(-15, -10);
-    ctx.lineTo(-15, 15);
-    ctx.quadraticCurveTo(0, 20, 15, 15);
-    ctx.lineTo(15, -10);
-    ctx.quadraticCurveTo(0, -20, -15, -10);
-    ctx.fill();
-    ctx.stroke();
-    
-    // Snout
-    ctx.beginPath();
-    ctx.rect(12, -8, 12, 12); 
-    ctx.fill();
-    ctx.stroke();
-
-    // Eye
-    ctx.fillStyle = '#fff';
-    ctx.beginPath();
-    ctx.arc(8, -5, 6, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.stroke();
-    
-    ctx.fillStyle = '#000';
-    ctx.beginPath();
-    ctx.arc(10, -5, 2, 0, Math.PI * 2);
-    ctx.fill();
+// --- GAME LOGIC ---
 
-    // Backpack
-    ctx.strokeStyle = '#5c6b1f';
-    ctx.lineWidth = 2;
-    ctx.beginPath();
-    ctx.moveTo(-14, 5); ctx.lineTo(14, 5);
-    ctx.moveTo(-14, 10); ctx.lineTo(14, 10);
-    ctx.stroke();
-
-    // Propeller (Simplified for others)
-    if (isSelf && player.hasPropeller) {
-        ctx.strokeStyle = '#000';
-        ctx.fillStyle = 'orange';
-        ctx.beginPath(); ctx.arc(0, -18, 10, Math.PI, 0); ctx.fill(); ctx.stroke();
-        ctx.beginPath(); ctx.moveTo(0, -18); ctx.lineTo(0, -28); ctx.stroke();
+function checkAutoLogin() {
+    const saved = getCookie("username");
+    if(saved) {
+        username = saved;
+        document.getElementById('usernameInput').value = saved;
+        loginScreen.classList.add('hidden');
+        startGameLogic();
     }
+}
 
-    ctx.restore();
-
-    // Draw Name Tag
-    if (!isSelf && name) {
-        ctx.save();
-        ctx.fillStyle = "white";
-        ctx.font = "10px sans-serif";
-        ctx.textAlign = "center";
-        ctx.fillText(name, x + w/2, drawY - 15);
-        ctx.restore();
-    }
+function startGameBtn() {
+    const input = document.getElementById('usernameInput');
+    const name = input.value.trim().slice(0, 12) || "Guest";
+    username = name;
+    setCookie("username", name, 7);
+    loginScreen.classList.add('hidden');
+    startGameLogic();
 }
 
-function drawPlatform(p) {
-    // Check bounds optimization
-    let drawY = p.y; 
-    // In this game logic, p.y is relative to the world top (0), not screen.
-    // Wait, in the original logic `p.y` was screen coordinate initially, then adjusted.
-    // To support multiplayer, p.y must be ABSOLUTE WORLD COORDINATE.
-    // However, keeping the original logic: p.y stays in screen space, and we perform a "shift" on everything when player goes up.
-    // Actually, to sync with server, it's easier to keep the visual illusion logic:
-    // p.y is stored locally relative to the 'current view' bottom.
-    // Since we are syncing the SEED, every client generates the platform at the same logic interval.
+function startGameLogic() {
+    // Reset Physics
+    gameState = 'PLAYING';
+    player.x = GAME_W/2;
+    player.y = 100; // Start slightly above ground
+    player.vx = 0;
+    player.vy = 0;
+    player.dead = false;
+    cameraY = 0;
+    score = 0;
+    scoreEl.innerText = "0";
+    gameOverScreen.classList.add('hidden');
     
-    // Actually, simplest approach for this port:
-    // Keep local coordinates. Since everyone runs the same RNG seed, 
-    // "Platform at height 5000" exists on everyone's client at height 5000 relative to game start.
-    // The visual p.y changes as we scroll.
+    // Reset Level
+    rng = new SeededRNG(worldSeed);
+    platforms = [];
     
-    if (p.y > GAME_H) return; 
+    // Generate initial chunk
+    generatePlatforms(0, 2000);
+}
 
-    let color = '#76c442';
-    let detailColor = '#9fe060';
+function generatePlatforms(minY, maxY) {
+    // Use the seeded RNG to deterministically place platforms based on height
+    // We step through height in chunks
+    let y = minY;
+    // Align y to a grid roughly to avoid overlapping calls
+    y = Math.floor(y / 100) * 100;
     
-    if (p.vx !== 0) {
-        color = '#4287c4';
-        detailColor = '#60a9e0';
+    while(y < maxY) {
+        // Deterministic check: hash the height
+        // Simple hash of Y coordinate to see if platform exists
+        // (We re-seed RNG to Y to make it stateless effectively)
+        let r = Math.sin(y * 12.9898 + worldSeed) * 43758.5453;
+        let randVal = r - Math.floor(r); // 0.0 - 1.0 deterministic
+        
+        if (randVal > 0.2 || y < 300) { // 80% chance of platform, guaranteed at start
+            let r2 = Math.sin(y * 78.233 + worldSeed) * 43758.5453; 
+            let xVal = (r2 - Math.floor(r2)) * (GAME_W - 60);
+            
+            // Check if already exists (naive)
+            if(!platforms.some(p => Math.abs(p.y - y) < 1)) {
+                 platforms.push({ x: xVal, y: y, w: 60, h: 15, type: 0 });
+            }
+        }
+        y += 60 + (randVal * 60); // Randomish spacing
     }
-
-    ctx.save();
-    ctx.fillStyle = color;
-    ctx.strokeStyle = '#000';
-    ctx.lineWidth = 2;
-    
-    ctx.beginPath();
-    ctx.roundRect(p.x, p.y, p.w, p.h, 6);
-    ctx.fill();
-    ctx.stroke();
-
-    ctx.fillStyle = detailColor;
-    ctx.beginPath();
-    ctx.roundRect(p.x + 3, p.y + 2, p.w - 6, p.h/2 - 2, 3);
-    ctx.fill();
     
-    ctx.restore();
+    // Cleanup old platforms
+    platforms = platforms.filter(p => p.y > cameraY - 100);
 }
 
-// ... (Monster and foliage drawing reused but simplified for brevity) ...
-function drawBackground() {
-    ctx.fillStyle = '#659d33';
-    ctx.fillRect(0, 0, GAME_W, GAME_H);
-    ctx.strokeStyle = 'rgba(0, 30, 0, 0.05)';
-    ctx.lineWidth = 2;
-    const gridSize = 40;
-    const offset = Math.floor(cameraY) % gridSize;
-    ctx.beginPath();
-    for(let x = 0; x <= GAME_W; x += gridSize) { ctx.moveTo(x, 0); ctx.lineTo(x, GAME_H); }
-    for(let y = offset; y <= GAME_H; y += gridSize) { ctx.moveTo(0, y); ctx.lineTo(GAME_W, y); }
-    ctx.stroke();
-    // (Foliage simplified: just simple circles for perf)
-    const spacing = 100;
-    const startIdx = Math.floor(cameraY / spacing);
-    const endIdx = startIdx + Math.ceil(GAME_H / spacing) + 1;
-    for(let i = startIdx; i < endIdx; i++) {
-        let yPos = GAME_H - (i * spacing - cameraY);
-        let xOff = (Math.sin(i) * 20);
-        ctx.fillStyle = "rgba(0,0,0,0.1)";
-        ctx.beginPath(); ctx.arc(20 + xOff, yPos, 20, 0, Math.PI*2); ctx.fill();
-        ctx.beginPath(); ctx.arc(GAME_W - 20 - xOff, yPos, 20, 0, Math.PI*2); ctx.fill();
-    }
-}
-
-// --- LOGIC ---
+function updatePhysics() {
+    if(gameState !== 'PLAYING') return;
 
-function startGame() {
-    username = usernameInput.value.trim() || "Player";
-    setCookie("username", username, 30);
-    loginScreen.style.display = 'none';
-    initGame();
-}
+    // Horizontal
+    if(keys.left) player.vx = -MOVE_SPEED;
+    else if(keys.right) player.vx = MOVE_SPEED;
+    else player.vx *= 0.8;
 
-function initGame() {
-    platforms = [];
-    monsters = [];
-    bullets = [];
-    powerups = [];
-    particles = [];
-    score = 0;
-    cameraY = 0;
+    player.x += player.vx;
     
-    // Reset Player
-    player.x = GAME_W / 2 - 20;
-    player.y = GAME_H - 250; 
-    player.vx = 0;
-    player.vy = 0;
-    player.hasPropeller = false;
-    player.faceRight = true;
+    // Wrap
+    if(player.x < -player.w/2) player.x = GAME_W - player.w/2;
+    if(player.x > GAME_W - player.w/2) player.x = -player.w/2;
 
-    // Initialize RNG with Global Seed
-    rng = new SeededRNG(globalSeed);
+    player.faceRight = player.vx > 0;
 
-    // Generate initial platforms
-    // Start Platform
-    platforms.push({x: GAME_W/2 - 30, y: GAME_H - 150, w: 60, h: 15, vx: 0, broken: false});
+    // Vertical (Gravity is down, so vy decreases)
+    // Wait, coordinate system: Up is Positive Y.
+    // So Gravity decreases Y velocity.
+    player.vy -= GRAVITY; 
+    player.y += player.vy;
 
-    let y = GAME_H - 250;
-    while(y > -200) {
-        generatePlatformAt(y);
-        y -= 80 + rng.next() * 40;
+    // Bounce
+    if(player.vy < 0) { // Only bounce if falling
+        for(let p of platforms) {
+            // Simple AABB
+            if(player.x + player.w/2 > p.x && player.x + player.w/2 < p.x + p.w &&
+               player.y >= p.y && player.y + player.vy <= p.y + 10) { // Detection window
+                player.vy = -JUMP_FORCE; // Jump force is positive in this system
+                player.y = p.y;
+                break;
+            }
+        }
     }
-    
-    gameState = 'PLAYING';
-    gameOverScreen.style.display = 'none';
-    scoreEl.innerText = '0';
-    
-    tutorialText.style.opacity = '1';
-    setTimeout(() => { tutorialText.style.opacity = '0'; }, 3000);
-    
-    requestAnimationFrame(gameLoop);
-}
 
-function generatePlatformAt(y) {
-    let vx = 0;
-    
-    // Difficulty curve based on absolute height roughly
-    // Since cameraY resets visually, we can't use score directly for generation easily
-    // unless we track total generated height. 
-    // For simplicity: Just use random probabilities provided by seeded RNG.
-
-    let moveChance = 0.2; 
-    if (rng.next() < moveChance) {
-        vx = (rng.next() > 0.5 ? 2 : -2);
+    // Camera follow (Soft lock)
+    let targetCamY = player.y - GAME_H * 0.4;
+    if(targetCamY > cameraY) {
+        cameraY = targetCamY;
+        score = Math.max(score, cameraY);
+        scoreEl.innerText = Math.floor(score);
+        generatePlatforms(cameraY + GAME_H, cameraY + GAME_H + 500);
     }
 
-    const p = {
-        x: rng.next() * (GAME_W - 60),
-        y: y,
-        w: 60,
-        h: 15,
-        vx: vx,
-        broken: false
-    };
-    platforms.push(p);
-
-    if (rng.next() < 0.05) {
-        monsters.push({
-            x: rng.next() * (GAME_W - 60),
-            y: y - 60,
-            w: 50,
-            h: 50,
-            vx: rng.next() < 0.5 ? 1 : -1
-        });
-    }
-    else if (rng.next() < 0.08) {
-        powerups.push({ x: p.x + 15, y: p.y, type: 'spring', active: false });
-    }
-    else if (rng.next() < 0.02) {
-        powerups.push({ x: p.x + 15, y: p.y - 20, type: 'propeller' });
+    // Death (Fall below camera)
+    if(player.y < cameraY - 100) {
+        die();
     }
 }
 
-function generateLevel() {
-    let highestY = GAME_H;
-    platforms.forEach(p => { if(p.y < highestY) highestY = p.y; });
-    // Generate ahead
-    if (highestY > -100) {
-        generatePlatformAt(highestY - (80 + rng.next() * 50));
-    }
-}
-
-function shoot() {
-    if (gameState !== 'PLAYING') return;
-    bullets.push({ x: player.x + player.w / 2, y: player.y, vy: -15 });
+function die() {
+    gameState = 'DEAD';
+    player.dead = true;
+    socket.send(JSON.stringify({ type: 'gameover', score: Math.floor(score) }));
+    document.getElementById('finalScore').innerText = "Score: " + Math.floor(score);
+    gameOverScreen.classList.remove('hidden');
 }
 
-function update() {
-    if (gameState !== 'PLAYING') return;
-
-    // Movement
-    if (keys.left) player.vx = -MOVEMENT_SPEED;
-    else if (keys.right) player.vx = MOVEMENT_SPEED;
-    else player.vx *= 0.8;
-
-    player.x += player.vx;
+// --- RENDERING ---
 
-    if (player.x + player.w < 0) player.x = GAME_W;
-    if (player.x > GAME_W) player.x = -player.w;
-
-    if (player.vx > 0.5) player.faceRight = true;
-    if (player.vx < -0.5) player.faceRight = false;
-
-    // Gravity
-    if (player.hasPropeller) {
-        player.vy = -8;
-        player.propellerTimer--;
-        if (player.propellerTimer <= 0) player.hasPropeller = false;
-    } else {
-        player.vy += GRAVITY;
+function draw() {
+    // Clear
+    ctx.fillStyle = '#659d33';
+    ctx.fillRect(0, 0, GAME_W, GAME_H);
+    
+    // Grid
+    ctx.strokeStyle = 'rgba(0,0,0,0.1)';
+    ctx.beginPath();
+    let gridOffset = cameraY % 100;
+    for(let i=0; i<GAME_H; i+=100) {
+        let y = GAME_H - (i - gridOffset); // Convert World Y to Screen Y
+        ctx.moveTo(0, y); ctx.lineTo(GAME_W, y);
     }
-    player.y += player.vy;
+    ctx.stroke();
 
-    // Camera / Scrolling
-    // Important: In Multiplayer, we need to track absolute Y for server syncing, 
-    // but the original game moves objects down.
-    // To keep it compatible: We send `player.y - cameraY_accumulated`. 
-    // But simplest for this prompt: Just send the visual player.y. 
-    // Since everyone plays same level, relative positions match roughly.
+    // Platforms
+    ctx.fillStyle = '#76c442';
+    ctx.strokeStyle = '#2e5c10';
+    ctx.lineWidth = 2;
     
-    const threshold = GAME_H * 0.45;
-    if (player.y < threshold) {
-        let diff = threshold - player.y;
-        player.y = threshold;
-        cameraY += diff;
-        score += Math.floor(diff / 2);
-        scoreEl.innerText = score;
-
-        platforms.forEach(p => p.y += diff);
-        monsters.forEach(m => m.y += diff);
-        powerups.forEach(p => p.y += diff);
-        bullets.forEach(b => b.y += diff);
-        particles.forEach(p => p.y += diff);
+    for(let p of platforms) {
+        // Convert World Y to Screen Y
+        // ScreenY = GAME_H - (ObjectY - CameraY)
+        let screenY = GAME_H - (p.y - cameraY);
         
-        // Adjust other players visually based on scroll
-        // This is tricky: other players have their OWN cameraY.
-        // The server receives their VISUAL Y (which is always around 0-800).
-        // This is a common issue in porting Doodle Jump to MP.
-        // FIX: The server needs ABSOLUTE Y.
-        // We will send Absolute Y to server.
-        // AbsY = (TotalScrolled + VisualY).
-        // But for this quick prototype, we will just send visual Y and render ghosts relative to screen.
-        // Note: This means if Player A is 10000ft up, and Player B is 0ft up, 
-        // Player B will see Player A flying above them? No.
-        // We need to sync coordinates. 
-        // Let's change the packet to send Absolute Height.
-        // abs_y = score * 2 (roughly) + (GAME_H - player.y).
-        // For simplicity in this constrained prompt: We just display others if they are within screen bounds relative to YOU.
-        // Send: `score`.
-        // Render: If (other.score ~= my.score), draw them.
-        // This is a heuristic approximation suitable for a game jam style.
-    }
-
-    // Cleanup
-    platforms = platforms.filter(p => p.y < GAME_H + 100);
-    monsters = monsters.filter(m => m.y < GAME_H + 100);
-    powerups = powerups.filter(p => p.y < GAME_H + 100);
-    bullets = bullets.filter(b => b.y > -50);
-
-    // Collisions
-    powerups.forEach(p => {
-        if (p.type === 'spring') {
-            if (player.vy > 0 && 
-                player.x + player.w > p.x - 5 && player.x < p.x + 20 &&
-                player.y + player.h > p.y && player.y + player.h < p.y + 20) {
-                    player.vy = SPRING_FORCE;
-                    p.active = true;
-                    setTimeout(() => p.active = false, 200);
-            }
-        } else if (p.type === 'propeller') {
-            if (player.x < p.x + 20 && player.x + player.w > p.x &&
-                player.y < p.y + 20 && player.y + player.h > p.y) {
-                    player.hasPropeller = true;
-                    player.propellerTimer = 300;
-                    p.y = GAME_H + 200;
-            }
+        if(screenY > -50 && screenY < GAME_H + 50) {
+            ctx.beginPath();
+            ctx.roundRect(p.x, screenY, p.w, p.h, 5);
+            ctx.fill();
+            ctx.stroke();
+            
+            // Detail
+            ctx.fillStyle = '#9fe060';
+            ctx.beginPath();
+            ctx.roundRect(p.x+3, screenY+3, p.w-6, 5, 2);
+            ctx.fill();
+            ctx.fillStyle = '#76c442'; // Reset
         }
-    });
-
-    if (player.vy > 0 && !player.hasPropeller) {
-        platforms.forEach(p => {
-            if (player.x + player.w > p.x + 5 && 
-                player.x < p.x + p.w - 5 &&
-                player.y + player.h > p.y &&
-                player.y + player.h < p.y + p.h + 10) {
-                    player.vy = JUMP_FORCE;
-            }
-        });
     }
 
-    platforms.forEach(p => {
-        if (p.vx !== 0) {
-            p.x += p.vx;
-            if (p.x < 0 || p.x + p.w > GAME_W) p.vx *= -1;
-        }
-    });
-
-    monsters.forEach(m => {
-        m.x += (m.vx || 0);
-        if (m.x < 0 || m.x + m.w > GAME_W) m.vx *= -1;
-
-        if (player.x < m.x + m.w && player.x + player.w > m.x &&
-            player.y < m.y + m.h && player.y + player.h > m.y) {
-                
-            if (player.hasPropeller || (player.vy > 0 && player.y + player.h < m.y + m.h/2)) {
-                m.y = GAME_H + 200;
-                player.vy = JUMP_FORCE;
-            } else {
-                gameOver();
-            }
+    // Other Players (Interpolated)
+    for(let u in otherPlayers) {
+        let op = otherPlayers[u];
+        
+        // Linear Interpolation (Smooth movement)
+        op.currX += (op.targetX - op.currX) * 0.2; // 20% closer per frame
+        op.currY += (op.targetY - op.currY) * 0.2;
+        
+        let screenY = GAME_H - (op.currY - cameraY);
+        
+        // Visibility Check
+        if(screenY > -100 && screenY < GAME_H + 100) {
+            drawDoodler(op.currX, screenY, op.faceRight, false, u);
         }
-    });
-
-    // Death
-    if (player.y > GAME_H) {
-        gameOver();
     }
 
-    generateLevel();
-    sendUpdate();
-}
+    // Self
+    if(gameState === 'PLAYING') {
+        let screenY = GAME_H - (player.y - cameraY);
+        drawDoodler(player.x, screenY, player.faceRight, true, username);
+    }
 
-function gameOver() {
-    gameState = 'GAMEOVER';
-    finalScoreEl.innerText = "Score: " + score;
-    gameOverScreen.style.display = 'flex';
-    sendGameOver();
+    requestAnimationFrame(loop);
 }
 
-function draw() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    drawBackground();
-    platforms.forEach(drawPlatform);
+function drawDoodler(x, y, faceRight, isSelf, name) {
+    ctx.save();
+    ctx.translate(x + 20, y - 40); // Pivot at feet roughly
+    if(!faceRight) ctx.scale(-1, 1);
     
-    // Draw Powerups
-    powerups.forEach(p => {
-        if(p.type === 'spring') {
-            ctx.fillStyle = '#ccc'; ctx.strokeStyle = '#000'; ctx.lineWidth = 2;
-            ctx.beginPath(); ctx.rect(p.x, p.y - 5, 15, 5); ctx.fill(); ctx.stroke();
-            // Simple spring coil
-            ctx.beginPath(); ctx.moveTo(p.x, p.y-5); ctx.lineTo(p.x+15, p.y-10); ctx.stroke();
-        } else if(p.type === 'propeller') {
-             ctx.fillStyle = 'orange'; ctx.beginPath(); ctx.arc(p.x, p.y, 10, 0, Math.PI*2); ctx.fill(); 
-        }
-    });
-
-    // Monsters
-    monsters.forEach(m => {
-        ctx.save();
-        ctx.translate(m.x + m.w/2, m.y + m.h/2);
-        ctx.fillStyle = '#5c4b8a'; ctx.strokeStyle = '#000'; ctx.lineWidth = 2;
-        ctx.beginPath(); ctx.ellipse(0, 0, m.w/2, m.h/2 - 5, 0, 0, Math.PI*2); ctx.fill(); ctx.stroke();
-        // Eyes
-        ctx.fillStyle = 'white'; 
-        ctx.beginPath(); ctx.arc(-10, -5, 5, 0, Math.PI*2); ctx.fill();
-        ctx.beginPath(); ctx.arc(10, -5, 5, 0, Math.PI*2); ctx.fill();
-        ctx.restore();
-    });
-
-    // Bullets
+    // Body
+    ctx.fillStyle = isSelf ? '#ffd700' : '#a0e0a0';
+    ctx.strokeStyle = '#000';
+    ctx.lineWidth = 2;
+    
+    // Simple Doodle Shape
+    ctx.beginPath();
+    ctx.moveTo(-15, 0); ctx.lineTo(-15, -30);
+    ctx.bezierCurveTo(-15, -45, 15, -45, 15, -30);
+    ctx.lineTo(15, 0);
+    ctx.bezierCurveTo(0, 10, 0, 10, -15, 0);
+    ctx.fill(); ctx.stroke();
+    
+    // Backpack
+    ctx.fillStyle = '#555';
+    ctx.fillRect(-18, -25, 4, 15);
+    
+    // Snout
+    ctx.fillStyle = isSelf ? '#ffd700' : '#a0e0a0';
+    ctx.beginPath(); ctx.rect(10, -28, 10, 10); ctx.fill(); ctx.stroke();
+    
+    // Eye
+    ctx.fillStyle = 'white';
+    ctx.beginPath(); ctx.arc(5, -22, 5, 0, Math.PI*2); ctx.fill(); ctx.stroke();
     ctx.fillStyle = 'black';
-    bullets.forEach(b => {
-        ctx.beginPath(); ctx.arc(b.x, b.y, 5, 0, Math.PI * 2); ctx.fill();
-    });
-
-    // Draw Other Players
-    otherPlayers.forEach(op => {
-        // Simple visual approximation based on score difference to estimate Y relative to screen
-        // In a real robust engine we'd use absolute coordinates. 
-        // Here: difference in score ~ pixels.
-        // If op.score is 1000 and my score is 1000, they are at the same height.
-        // If op.score is 1200, they are 200px * 2 (roughly) above me.
-        
-        let scoreDiff = op.score - score;
-        let estimatedY = player.y - (scoreDiff * 2); // Heuristic scale factor
-        
-        // Interpolate X (Smoothing) - simplified for this code
-        drawDoodler(op.x, estimatedY, 40, 40, op.faceRight, false, op.username);
-    });
-
-    if (gameState !== 'GAMEOVER') {
-        drawDoodler(player.x, player.y, player.w, player.h, player.faceRight);
+    ctx.beginPath(); ctx.arc(7, -22, 2, 0, Math.PI*2); ctx.fill();
+    
+    ctx.restore();
+    
+    // Name Tag
+    if(name) {
+        ctx.fillStyle = "rgba(0,0,0,0.5)";
+        ctx.font = "bold 10px sans-serif";
+        ctx.textAlign = "center";
+        ctx.fillText(name, x + 20, y - 50);
     }
 }
 
-function gameLoop() {
-    update();
+function loop() {
+    updatePhysics();
     draw();
-    if (gameState !== 'GAMEOVER') {
-        requestAnimationFrame(gameLoop);
+    
+    // Throttle network updates to 20hz to save bandwidth, rendering is 60hz
+    const now = Date.now();
+    if(now - lastTime > 50) {
+        sendUpdate();
+        lastTime = now;
     }
 }
 
-function resize() {
+// --- INPUTS ---
+
+window.addEventListener('resize', () => {
     canvas.width = GAME_W;
     canvas.height = GAME_H;
-}
+});
+window.dispatchEvent(new Event('resize'));
 
-// Input
 window.addEventListener('keydown', e => {
-    if (e.code === 'ArrowLeft') keys.left = true;
-    if (e.code === 'ArrowRight') keys.right = true;
-    if (e.code === 'Space' || e.code === 'ArrowUp') shoot();
+    if(e.key === "ArrowLeft") keys.left = true;
+    if(e.key === "ArrowRight") keys.right = true;
 });
 window.addEventListener('keyup', e => {
-    if (e.code === 'ArrowLeft') keys.left = false;
-    if (e.code === 'ArrowRight') keys.right = false;
+    if(e.key === "ArrowLeft") keys.left = false;
+    if(e.key === "ArrowRight") keys.right = false;
 });
 
-function handleTouch(x, y) {
-    if (gameState === 'LOGIN' || gameState === 'GAMEOVER') return;
-    if (y > GAME_H - 100) return;
-    const isCentral = x > GAME_W * 0.35 && x < GAME_W * 0.65;
-    if (isCentral) shoot();
-    else {
-        if (x < GAME_W / 2) { keys.left = true; keys.right = false; }
-        else { keys.right = true; keys.left = false; }
-    }
-}
-
+// Touch
 canvas.addEventListener('touchstart', e => {
     e.preventDefault();
-    for (let i = 0; i < e.touches.length; i++) {
-        const t = e.touches[i];
-        const rect = canvas.getBoundingClientRect();
-        const scaleX = canvas.width / rect.width;
-        const scaleY = canvas.height / rect.height;
-        handleTouch((t.clientX - rect.left) * scaleX, (t.clientY - rect.top) * scaleY);
-    }
-}, {passive: false});
-
+    let x = (e.touches[0].clientX - canvas.getBoundingClientRect().left) * (GAME_W / canvas.offsetWidth);
+    if(x < GAME_W/2) { keys.left = true; keys.right = false; }
+    else { keys.right = true; keys.left = false; }
+});
 canvas.addEventListener('touchend', e => {
     e.preventDefault();
-    if (e.touches.length === 0) { keys.left = false; keys.right = false; }
+    keys.left = false; keys.right = false;
 });
 
-// UI Handlers
-restartBtn.addEventListener('click', initGame);
-startBtn.addEventListener('click', startGame);
-
-// Initialization
-resize();
-window.addEventListener('resize', resize);
-initNetwork();
+document.getElementById('startBtn').addEventListener('click', startGameBtn);
+document.getElementById('restartBtn').addEventListener('click', startGameLogic);
 
-// Check for cookie
-const savedUser = getCookie("username");
-if (savedUser) {
-    usernameInput.value = savedUser;
-}
+// Init
+connect();
+checkAutoLogin(); // Will skip UI if cookie exists
+requestAnimationFrame(loop);
 
 </script>
 </body>
 </html>
-    """
+"""
 
 if __name__ == "__main__":
     import uvicorn