Update public/index.html

public/index.html

@@ -5,270 +5,384 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>Voxel Hopper: Multiplayer</title>
     <style>
-        * { box-sizing: border-box; }
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+        
         body, html {
-            margin: 0;
-            padding: 0;
             width: 100%;
             height: 100%;
-            background-color: #222;
+            background: #1a1a2e;
             overflow: hidden;
-            font-family: 'Courier New', Courier, monospace;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
             touch-action: none;
             user-select: none;
             -webkit-user-select: none;
+            -webkit-touch-callout: none;
         }
 
         #game-container {
             position: relative;
             width: 100%;
             height: 100%;
-            background-color: #87CEEB;
+            background: #87CEEB;
         }
 
-        canvas {
-            display: block;
-            width: 100%;
-            height: 100%;
-            outline: none;
-        }
+        canvas { display: block; width: 100%; height: 100%; }
 
-        /* LOGIN SCREEN */
+        /* ===== LOGIN SCREEN ===== */
         #login-screen {
             position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            inset: 0;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            z-index: 200;
+            z-index: 1000;
+            padding: 20px;
         }
 
-        #login-screen h1 {
-            color: #fff;
-            font-size: 48px;
+        .login-content {
+            text-align: center;
+            max-width: 320px;
+            width: 100%;
+        }
+
+        .game-logo {
+            font-size: 64px;
             margin-bottom: 10px;
-            text-shadow: 3px 3px 0 #000;
+            animation: bounce 2s infinite;
         }
 
-        #login-screen p {
-            color: #aaa;
+        @keyframes bounce {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+        }
+
+        .login-content h1 {
+            color: #fff;
+            font-size: 32px;
+            margin-bottom: 5px;
+            text-shadow: 2px 2px 0 #000;
+        }
+
+        .login-content .subtitle {
+            color: #4CAF50;
+            font-size: 14px;
             margin-bottom: 30px;
+            text-transform: uppercase;
+            letter-spacing: 2px;
         }
 
         #username-input {
-            padding: 15px 25px;
-            font-size: 20px;
-            border: none;
-            border-radius: 10px;
-            width: 280px;
+            width: 100%;
+            padding: 16px 20px;
+            font-size: 18px;
+            border: 3px solid #333;
+            border-radius: 12px;
+            background: #fff;
             text-align: center;
             font-family: inherit;
-            margin-bottom: 20px;
+            outline: none;
+            transition: border-color 0.2s;
+        }
+
+        #username-input:focus {
+            border-color: #4CAF50;
         }
 
         #join-btn {
-            padding: 15px 50px;
-            font-size: 20px;
+            width: 100%;
+            padding: 16px;
+            margin-top: 15px;
+            font-size: 18px;
             font-weight: bold;
-            background: #4CAF50;
+            background: linear-gradient(180deg, #4CAF50 0%, #388E3C 100%);
             color: white;
             border: none;
-            border-radius: 10px;
+            border-radius: 12px;
             cursor: pointer;
-            box-shadow: 0 5px 0 #388E3C;
-            transition: transform 0.1s;
+            box-shadow: 0 4px 0 #2E7D32;
+            transition: all 0.1s;
+            text-transform: uppercase;
+            letter-spacing: 1px;
         }
 
-        #join-btn:active {
-            transform: translateY(3px);
-            box-shadow: 0 2px 0 #388E3C;
+        #join-btn:active:not(:disabled) {
+            transform: translateY(2px);
+            box-shadow: 0 2px 0 #2E7D32;
         }
 
         #join-btn:disabled {
-            background: #666;
-            box-shadow: 0 5px 0 #444;
+            background: linear-gradient(180deg, #666 0%, #444 100%);
+            box-shadow: 0 4px 0 #333;
+            cursor: not-allowed;
         }
 
-        /* CONNECTION STATUS */
-        #connection-status {
-            position: absolute;
-            top: 10px;
-            left: 50%;
-            transform: translateX(-50%);
-            padding: 8px 16px;
-            background: rgba(0,0,0,0.7);
-            color: #fff;
-            border-radius: 20px;
-            font-size: 12px;
-            z-index: 150;
-            display: none;
+        /* Connection Status Indicator */
+        .connection-box {
+            margin-top: 20px;
+            padding: 12px 20px;
+            border-radius: 8px;
+            font-size: 13px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            transition: all 0.3s;
+        }
+
+        .connection-box.connecting {
+            background: rgba(255, 152, 0, 0.2);
+            color: #FFB74D;
+        }
+
+        .connection-box.connected {
+            background: rgba(76, 175, 80, 0.2);
+            color: #81C784;
         }
 
-        #connection-status.connected { background: rgba(76,175,80,0.8); }
-        #connection-status.disconnected { background: rgba(244,67,54,0.8); display: block; }
-        #connection-status.connecting { background: rgba(255,152,0,0.8); display: block; }
+        .connection-box.error {
+            background: rgba(244, 67, 54, 0.2);
+            color: #E57373;
+        }
+
+        .connection-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            animation: pulse-dot 1.5s infinite;
+        }
+
+        .connecting .connection-dot { background: #FF9800; }
+        .connected .connection-dot { background: #4CAF50; animation: none; }
+        .error .connection-dot { background: #f44336; }
 
-        /* UI LAYER */
+        @keyframes pulse-dot {
+            0%, 100% { opacity: 1; transform: scale(1); }
+            50% { opacity: 0.5; transform: scale(0.8); }
+        }
+
+        .retry-info {
+            color: #888;
+            font-size: 11px;
+            margin-top: 8px;
+        }
+
+        /* Loading Spinner */
+        .spinner {
+            width: 20px;
+            height: 20px;
+            border: 2px solid rgba(255,255,255,0.3);
+            border-top-color: #fff;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+
+        @keyframes spin { to { transform: rotate(360deg); } }
+
+        /* ===== GAME UI ===== */
         .ui-layer {
             position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
+            inset: 0;
             pointer-events: none;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
         }
 
-        .top-ui { 
-            padding-top: 60px; 
-            padding-left: 20px; 
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-start;
-        }
-        
         #score {
-            font-size: 80px;
+            position: absolute;
+            top: 50px;
+            left: 20px;
+            font-size: 72px;
             font-weight: 900;
             color: white;
-            text-shadow: 4px 4px 0 rgba(0,0,0,0.2);
-            margin: 0;
+            text-shadow: 3px 3px 0 rgba(0,0,0,0.3);
             line-height: 1;
         }
 
-        /* LEADERBOARD - positioned for Dynamic Island */
+        /* Leaderboard - Safe area for Dynamic Island */
         #leaderboard {
             position: absolute;
-            top: 60px;
-            right: 15px;
-            background: rgba(0,0,0,0.6);
-            padding: 12px 15px;
-            border-radius: 12px;
-            min-width: 140px;
+            top: 55px;
+            right: 10px;
+            background: rgba(0,0,0,0.7);
+            padding: 10px 12px;
+            border-radius: 10px;
+            min-width: 120px;
             backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
         }
 
         #leaderboard h3 {
-            margin: 0 0 8px 0;
             color: #FFD700;
-            font-size: 14px;
+            font-size: 12px;
+            margin-bottom: 6px;
             text-transform: uppercase;
+            letter-spacing: 1px;
         }
 
-        .leaderboard-entry {
+        .lb-entry {
             display: flex;
             justify-content: space-between;
             color: white;
-            font-size: 13px;
-            padding: 3px 0;
+            font-size: 12px;
+            padding: 2px 0;
         }
 
-        .leaderboard-entry.gold { color: #FFD700; }
-        .leaderboard-entry.silver { color: #C0C0C0; }
-        .leaderboard-entry.bronze { color: #CD7F32; }
+        .lb-entry.gold { color: #FFD700; }
+        .lb-entry.silver { color: #C0C0C0; }
+        .lb-entry.bronze { color: #CD7F32; }
 
-        .leaderboard-name {
-            max-width: 90px;
+        .lb-name {
+            max-width: 80px;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
         }
 
-        /* PING DISPLAY */
-        #ping-display {
+        /* Network Stats */
+        #net-stats {
             position: absolute;
-            bottom: 10px;
-            left: 10px;
-            color: rgba(255,255,255,0.6);
-            font-size: 11px;
+            bottom: 8px;
+            left: 8px;
+            display: flex;
+            gap: 10px;
+            font-size: 10px;
+            color: rgba(255,255,255,0.5);
+        }
+
+        .stat { display: flex; align-items: center; gap: 4px; }
+        .stat-dot {
+            width: 6px;
+            height: 6px;
+            border-radius: 50%;
         }
+        .stat-dot.good { background: #4CAF50; }
+        .stat-dot.medium { background: #FF9800; }
+        .stat-dot.poor { background: #f44336; }
 
-        /* PLAYER COUNT */
+        /* Player Count */
         #player-count {
             position: absolute;
-            top: 60px;
+            top: 130px;
             left: 20px;
-            color: rgba(255,255,255,0.7);
+            color: rgba(255,255,255,0.6);
             font-size: 12px;
         }
 
-        .bottom-ui { padding-bottom: 100px; text-align: center; }
-
+        /* Tutorial */
         #tutorial {
+            position: absolute;
+            bottom: 100px;
+            left: 50%;
+            transform: translateX(-50%);
             color: white;
             font-weight: bold;
-            font-size: 24px;
+            font-size: 20px;
             text-transform: uppercase;
             text-shadow: 2px 2px 0 rgba(0,0,0,0.3);
             animation: pulse 1.5s infinite;
         }
 
+        @keyframes pulse {
+            0%, 100% { opacity: 0.7; }
+            50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
+        }
+
+        /* Game Over */
         #game-over {
             position: absolute;
-            top: 0; left: 0; width: 100%; height: 100%;
-            background: rgba(0,0,0,0.6);
+            inset: 0;
+            background: rgba(0,0,0,0.7);
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
             opacity: 0;
             pointer-events: none;
-            transition: opacity 0.2s ease;
+            transition: opacity 0.3s;
             z-index: 100;
         }
 
-        #game-over.visible { opacity: 1; pointer-events: auto; }
+        #game-over.visible {
+            opacity: 1;
+            pointer-events: auto;
+        }
+
+        #game-over h1 {
+            color: white;
+            font-size: 56px;
+            text-shadow: 4px 4px 0 #000;
+            margin-bottom: 10px;
+        }
+
+        #final-score {
+            color: #FFD700;
+            font-size: 24px;
+            margin-bottom: 30px;
+        }
 
         .btn-restart {
             background: #fff;
             color: #333;
             border: none;
-            padding: 20px 50px;
-            font-size: 24px;
+            padding: 18px 50px;
+            font-size: 20px;
             font-weight: 900;
             text-transform: uppercase;
             border-radius: 12px;
-            box-shadow: 0 8px 0 #999;
+            box-shadow: 0 6px 0 #999;
             cursor: pointer;
-            margin-top: 30px;
             transition: transform 0.1s;
-            pointer-events: auto;
         }
-        .btn-restart:active { transform: translateY(4px); box-shadow: 0 4px 0 #999; }
 
-        @keyframes pulse { 
-            0% { opacity: 0.7; } 
-            50% { opacity: 1; transform: scale(1.05); } 
-            100% { opacity: 0.7; } 
+        .btn-restart:active {
+            transform: translateY(3px);
+            box-shadow: 0 3px 0 #999;
+        }
+
+        /* Player Labels */
+        #labels-container {
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            overflow: hidden;
         }
 
-        /* Username labels */
         .player-label {
             position: absolute;
             color: white;
-            font-size: 12px;
+            font-size: 11px;
             font-weight: bold;
-            text-shadow: 1px 1px 2px #000;
-            pointer-events: none;
+            text-shadow: 1px 1px 2px #000, -1px -1px 2px #000;
             white-space: nowrap;
             transform: translateX(-50%);
+            padding: 2px 6px;
+            background: rgba(0,0,0,0.4);
+            border-radius: 4px;
         }
 
-        #labels-container {
+        /* Reconnecting Overlay */
+        #reconnect-overlay {
             position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            pointer-events: none;
-            overflow: hidden;
+            inset: 0;
+            background: rgba(0,0,0,0.8);
+            display: none;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 500;
+            color: white;
+        }
+
+        #reconnect-overlay.visible { display: flex; }
+
+        #reconnect-overlay h2 {
+            margin-top: 20px;
+            font-size: 24px;
+        }
+
+        #reconnect-overlay p {
+            color: #888;
+            margin-top: 10px;
         }
     </style>
 </head>
@@ -276,298 +390,390 @@
 
 <div id="game-container">
     <canvas id="canvas"></canvas>
-
     <div id="labels-container"></div>
 
     <div class="ui-layer">
-        <div class="top-ui">
-            <div id="score">0</div>
-        </div>
-        <div class="bottom-ui">
-            <div id="tutorial">Swipe or Tap</div>
-        </div>
+        <div id="score">0</div>
+        <div id="player-count">Players: 0</div>
+        <div id="tutorial">Swipe or Tap to Move</div>
     </div>
 
     <div id="leaderboard">
         <h3>🏆 Top 3</h3>
-        <div id="leaderboard-entries"></div>
+        <div id="lb-entries"></div>
     </div>
 
-    <div id="player-count">Players: 0</div>
-    <div id="ping-display">Ping: --ms</div>
-
-    <div id="connection-status">Connecting...</div>
+    <div id="net-stats">
+        <div class="stat">
+            <div class="stat-dot good" id="conn-dot"></div>
+            <span id="ping-display">--ms</span>
+        </div>
+        <div class="stat" id="players-online">0 online</div>
+    </div>
 
     <div id="game-over">
-        <h1 style="color:white; font-size:60px; text-shadow:4px 4px 0 #000; margin:0;">SPLAT!</h1>
-        <button class="btn-restart" id="restart-btn">Try Again</button>
+        <h1>💀 SPLAT!</h1>
+        <div id="final-score">Score: 0</div>
+        <button class="btn-restart" id="restart-btn">Play Again</button>
+    </div>
+
+    <div id="reconnect-overlay">
+        <div class="spinner" style="width:40px;height:40px;border-width:4px;"></div>
+        <h2>Reconnecting...</h2>
+        <p id="reconnect-info">Attempting to reconnect</p>
     </div>
 
     <div id="login-screen">
-        <h1>🐧 VOXEL HOPPER</h1>
-        <p>Multiplayer Edition</p>
-        <input type="text" id="username-input" placeholder="Enter your name" maxlength="15" autocomplete="off">
-        <button id="join-btn" disabled>Join Game</button>
+        <div class="login-content">
+            <div class="game-logo">🐧</div>
+            <h1>VOXEL HOPPER</h1>
+            <div class="subtitle">Multiplayer</div>
+            
+            <input type="text" id="username-input" placeholder="Enter your name" maxlength="12" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false">
+            <button id="join-btn" disabled>
+                <span id="join-btn-text">Connecting...</span>
+            </button>
+            
+            <div class="connection-box connecting" id="conn-status">
+                <div class="connection-dot"></div>
+                <span id="conn-text">Connecting to server...</span>
+            </div>
+            <div class="retry-info" id="retry-info"></div>
+        </div>
     </div>
 </div>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-<script src="https://cdn.socket.io/4.6.0/socket.io.min.js"></script>
+<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>
 
 <script>
-    // --- CONFIG ---
-    const TILE_SIZE = 10; 
-    const GRID_WIDTH = 13; 
-    const HOP_DURATION = 120; // ms
-    const INTERPOLATION_DELAY = 100; // ms for smooth other player movement
+(function() {
+    'use strict';
+
+    // ============= CONFIGURATION =============
+    const CONFIG = {
+        TILE_SIZE: 10,
+        GRID_WIDTH: 13,
+        HOP_DURATION: 120,
+        MOVE_COOLDOWN: 90,
+        MAX_QUEUE: 2,
+        INTERP_DELAY: 100,
+        RECONNECT_DELAY: 1000,
+        MAX_RECONNECT_DELAY: 10000,
+        PING_INTERVAL: 3000
+    };
 
-    // --- COLORS ---
     const COLORS = {
-        sky: 0x87CEEB, 
+        sky: 0x87CEEB,
         grass: 0x71AA34, grassLight: 0x86D455,
-        road: 0x222222,
-        roadLine: 0xFFFFFF,
+        road: 0x222222, roadLine: 0xFFFFFF,
         water: 0x00BFFF,
         treeTrunk: 0x8B5A2B, treeLeaves: 0x4CAF50,
-        penguinBody: 0x222222, penguinBelly: 0xFFFFFF, penguinBeak: 0xFFCC00,
+        penguin: 0x222222, belly: 0xFFFFFF, beak: 0xFFCC00,
         carRed: 0xE74C3C, carBlue: 0x3498DB,
         log: 0x5D4037,
         otherPlayer: 0xFF6B6B
     };
 
-    // --- NETWORK ---
-    let socket;
-    let myPlayerId = null;
-    let serverTimeOffset = 0;
+    // ============= STATE =============
+    let socket = null;
+    let myId = null;
+    let serverTimeDiff = 0;
     let ping = 0;
     let lastPingTime = 0;
-    let moveSequence = 0;
-    let pendingMoves = [];
+    let moveSeq = 0;
+    let reconnectAttempts = 0;
+    let isConnected = false;
+    let hasJoined = false;
 
-    // --- GLOBALS ---
     let scene, camera, renderer;
-    let player;
+    let player = null;
     let otherPlayers = new Map();
     let lanes = new Map();
+    
+    let playerGX = 0, playerGZ = 0;
+    let playerWX = 0, playerWZ = 0;
     let score = 0;
+    let maxScore = 0;
     let isGameOver = false;
     let isHopping = false;
-    let canMove = true;
-    let lastMoveTime = 0;
-    const MOVE_COOLDOWN = 100; // Minimum ms between moves (anti-spam)
-    
-    // Physics
-    let playerGridX = 0;
-    let playerGridZ = 0;
-    let currentLaneIndex = 0;
-    let maxLaneIndex = 0;
-
-    let attachedLog = null; 
-    let attachedLogOffset = 0;
-
-    // Animation
     let hopStartTime = 0;
-    let hopStartPos = new THREE.Vector3();
-    let hopTargetPos = new THREE.Vector3();
-    
-    // Input Buffer (limited queue for smoother play)
+    let hopStartPos = { x: 0, z: 0 };
+    let hopTargetPos = { x: 0, z: 0 };
+    let attachedLogId = null;
+    let lastMoveTime = 0;
     let moveQueue = [];
-    const MAX_QUEUE_SIZE = 2;
 
-    // Input State
-    let touchStartX = 0; 
-    let touchStartY = 0;
-
-    // --- INITIALIZATION ---
+    // Touch
+    let touchStartX = 0, touchStartY = 0;
+    let touchStartTime = 0;
+
+    // ============= DOM ELEMENTS =============
+    const $canvas = document.getElementById('canvas');
+    const $login = document.getElementById('login-screen');
+    const $nameInput = document.getElementById('username-input');
+    const $joinBtn = document.getElementById('join-btn');
+    const $joinBtnText = document.getElementById('join-btn-text');
+    const $connStatus = document.getElementById('conn-status');
+    const $connText = document.getElementById('conn-text');
+    const $retryInfo = document.getElementById('retry-info');
+    const $reconnectOverlay = document.getElementById('reconnect-overlay');
+    const $reconnectInfo = document.getElementById('reconnect-info');
+    const $score = document.getElementById('score');
+    const $tutorial = document.getElementById('tutorial');
+    const $gameOver = document.getElementById('game-over');
+    const $finalScore = document.getElementById('final-score');
+    const $restartBtn = document.getElementById('restart-btn');
+    const $lbEntries = document.getElementById('lb-entries');
+    const $pingDisplay = document.getElementById('ping-display');
+    const $connDot = document.getElementById('conn-dot');
+    const $playersOnline = document.getElementById('players-online');
+    const $playerCount = document.getElementById('player-count');
+    const $labelsContainer = document.getElementById('labels-container');
+
+    // ============= INITIALIZATION =============
     function init() {
+        initThree();
+        initSocket();
+        initInputs();
+        animate();
+    }
+
+    function initThree() {
         scene = new THREE.Scene();
         scene.background = new THREE.Color(COLORS.sky);
         scene.fog = new THREE.Fog(COLORS.sky, 160, 280);
 
         const aspect = window.innerWidth / window.innerHeight;
-        const d = 100; 
+        const d = 100;
         camera = new THREE.OrthographicCamera(-d * aspect, d * aspect, d, -d, 1, 1000);
-        camera.position.set(-100, 100, 100); 
+        camera.position.set(-100, 100, 100);
         camera.lookAt(0, 0, 0);
 
-        const canvas = document.getElementById('canvas');
-        renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
+        renderer = new THREE.WebGLRenderer({ canvas: $canvas, antialias: true });
         renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
         renderer.shadowMap.enabled = true;
         renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 
         // Lights
-        const ambientLight = new THREE.AmbientLight(0xffffff, 0.75);
-        scene.add(ambientLight);
+        scene.add(new THREE.AmbientLight(0xffffff, 0.75));
         const dirLight = new THREE.DirectionalLight(0xffffff, 0.6);
         dirLight.position.set(-50, 100, 50);
         dirLight.castShadow = true;
-        dirLight.shadow.mapSize.width = 1024;
-        dirLight.shadow.mapSize.height = 1024;
-        const side = 100;
-        dirLight.shadow.camera.left = -side;
-        dirLight.shadow.camera.right = side;
-        dirLight.shadow.camera.top = side;
-        dirLight.shadow.camera.bottom = -side;
+        dirLight.shadow.mapSize.set(1024, 1024);
+        const s = 100;
+        dirLight.shadow.camera.left = -s;
+        dirLight.shadow.camera.right = s;
+        dirLight.shadow.camera.top = s;
+        dirLight.shadow.camera.bottom = -s;
         scene.add(dirLight);
 
         window.addEventListener('resize', onResize);
-        setupInputs();
-        setupLogin();
-        
-        requestAnimationFrame(animate);
     }
 
-    function setupLogin() {
-        const loginScreen = document.getElementById('login-screen');
-        const usernameInput = document.getElementById('username-input');
-        const joinBtn = document.getElementById('join-btn');
-        const connectionStatus = document.getElementById('connection-status');
+    // ============= SOCKET MANAGEMENT =============
+    function initSocket() {
+        updateConnectionUI('connecting', 'Connecting to server...');
 
-        // Connect to server
-        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        socket = io(window.location.origin, {
+        const socketOptions = {
             transports: ['websocket', 'polling'],
+            upgrade: true,
+            rememberUpgrade: true,
+            timeout: 20000,
             reconnection: true,
-            reconnectionDelay: 1000,
-            reconnectionAttempts: 10
-        });
-
-        socket.on('connect', () => {
-            console.log('Connected to server');
-            connectionStatus.className = 'connected';
-            connectionStatus.textContent = 'Connected';
-            joinBtn.disabled = false;
-            setTimeout(() => { connectionStatus.style.display = 'none'; }, 1000);
-        });
+            reconnectionDelay: CONFIG.RECONNECT_DELAY,
+            reconnectionDelayMax: CONFIG.MAX_RECONNECT_DELAY,
+            reconnectionAttempts: Infinity,
+            forceNew: false
+        };
 
-        socket.on('disconnect', () => {
-            console.log('Disconnected from server');
-            connectionStatus.className = 'disconnected';
-            connectionStatus.textContent = 'Disconnected - Reconnecting...';
-            connectionStatus.style.display = 'block';
-        });
+        socket = io(window.location.origin, socketOptions);
+
+        // Connection events
+        socket.on('connect', onConnect);
+        socket.on('disconnect', onDisconnect);
+        socket.on('connect_error', onConnectError);
+        socket.on('reconnect_attempt', onReconnectAttempt);
+        socket.on('reconnect', onReconnect);
+
+        // Game events
+        socket.on('ack', onAck);
+        socket.on('init', onInit);
+        socket.on('pj', onPlayerJoin);
+        socket.on('pl', onPlayerLeave);
+        socket.on('pm', onPlayerMove);
+        socket.on('pd', onPlayerDie);
+        socket.on('prs', onPlayerRespawn);
+        socket.on('mc', onMoveConfirm);
+        socket.on('mr', onMoveReject);
+        socket.on('gs', onGameState);
+        socket.on('nl', onNewLane);
+        socket.on('lb', onLeaderboard);
+        socket.on('po', onPong);
+        socket.on('rsd', onRespawned);
+        socket.on('err', onError);
+
+        // Heartbeat
+        setInterval(() => {
+            if (socket && socket.connected) {
+                socket.emit('hb');
+            }
+        }, 5000);
 
-        socket.on('connect_error', () => {
-            connectionStatus.className = 'connecting';
-            connectionStatus.textContent = 'Connection error - Retrying...';
-        });
+        // Ping
+        setInterval(() => {
+            if (socket && socket.connected && hasJoined) {
+                lastPingTime = Date.now();
+                socket.emit('p', lastPingTime);
+            }
+        }, CONFIG.PING_INTERVAL);
+    }
 
-        usernameInput.addEventListener('input', () => {
-            joinBtn.disabled = usernameInput.value.trim().length === 0 || !socket.connected;
-        });
+    function onConnect() {
+        console.log('Connected:', socket.id);
+        isConnected = true;
+        reconnectAttempts = 0;
+        
+        if (hasJoined) {
+            $reconnectOverlay.classList.remove('visible');
+            // Re-join with same name
+            const name = $nameInput.value.trim() || 'Anon';
+            socket.emit('join', { name });
+        } else {
+            updateConnectionUI('connected', 'Connected!');
+            $joinBtn.disabled = false;
+            $joinBtnText.textContent = 'Play';
+        }
+    }
 
-        usernameInput.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter' && !joinBtn.disabled) {
-                joinGame();
-            }
-        });
+    function onDisconnect(reason) {
+        console.log('Disconnected:', reason);
+        isConnected = false;
+        
+        if (hasJoined) {
+            $reconnectOverlay.classList.add('visible');
+            $reconnectInfo.textContent = 'Connection lost...';
+        } else {
+            updateConnectionUI('error', 'Disconnected');
+            $joinBtn.disabled = true;
+            $joinBtnText.textContent = 'Reconnecting...';
+        }
+    }
 
-        joinBtn.addEventListener('click', joinGame);
+    function onConnectError(err) {
+        console.log('Connection error:', err.message);
+        reconnectAttempts++;
+        
+        if (!hasJoined) {
+            updateConnectionUI('error', 'Connection failed');
+            $retryInfo.textContent = `Retry ${reconnectAttempts}...`;
+            $joinBtn.disabled = true;
+            $joinBtnText.textContent = 'Reconnecting...';
+        }
+    }
 
-        function joinGame() {
-            const username = usernameInput.value.trim();
-            if (username && socket.connected) {
-                socket.emit('join', username);
-                loginScreen.style.display = 'none';
-            }
+    function onReconnectAttempt(attempt) {
+        console.log('Reconnect attempt:', attempt);
+        reconnectAttempts = attempt;
+        
+        if (hasJoined) {
+            $reconnectInfo.textContent = `Attempt ${attempt}...`;
+        } else {
+            $retryInfo.textContent = `Retry ${attempt}...`;
         }
+    }
 
-        // Socket event handlers
-        socket.on('init', handleInit);
-        socket.on('playerJoined', handlePlayerJoined);
-        socket.on('playerLeft', handlePlayerLeft);
-        socket.on('playerMoved', handlePlayerMoved);
-        socket.on('playerDied', handlePlayerDied);
-        socket.on('playerRespawned', handlePlayerRespawned);
-        socket.on('moveConfirmed', handleMoveConfirmed);
-        socket.on('moveRejected', handleMoveRejected);
-        socket.on('gameState', handleGameState);
-        socket.on('newLane', handleNewLane);
-        socket.on('leaderboard', handleLeaderboard);
-        socket.on('pong', handlePong);
-
-        // Ping loop
-        setInterval(() => {
-            if (socket.connected) {
-                lastPingTime = Date.now();
-                socket.emit('ping', lastPingTime);
-            }
-        }, 2000);
+    function onReconnect() {
+        console.log('Reconnected!');
+        reconnectAttempts = 0;
+        $retryInfo.textContent = '';
     }
 
-    // --- NETWORK HANDLERS ---
-    function handleInit(data) {
-        myPlayerId = data.playerId;
-        serverTimeOffset = Date.now() - data.serverTime;
+    function updateConnectionUI(status, text) {
+        $connStatus.className = 'connection-box ' + status;
+        $connText.textContent = text;
+    }
 
-        // Clear existing lanes
-        lanes.forEach(lane => scene.remove(lane.mesh));
-        lanes.clear();
+    // ============= GAME EVENTS =============
+    function onAck(data) {
+        myId = data.id;
+        serverTimeDiff = Date.now() - data.t;
+        console.log('Ack received, time diff:', serverTimeDiff);
+    }
 
-        // Create lanes from server data
-        Object.values(data.lanes).forEach(laneData => {
-            createLaneFromData(laneData);
+    function onInit(data) {
+        console.log('Init received');
+        hasJoined = true;
+        $login.style.display = 'none';
+
+        // Clear existing
+        lanes.forEach(l => scene.remove(l.mesh));
+        lanes.clear();
+        otherPlayers.forEach(p => {
+            scene.remove(p.mesh);
+            removeLabel(p.id);
         });
+        otherPlayers.clear();
+
+        // Create lanes
+        data.ls.forEach(l => createLane(l));
 
         // Create player
         createPlayer();
-        resetPlayerState(data.player);
+        resetPlayerState(data.p);
 
         // Create other players
-        data.players.forEach(p => {
-            if (p.id !== myPlayerId) {
-                createOtherPlayer(p);
-            }
-        });
+        data.ps.forEach(p => createOtherPlayer(p));
 
+        // Update UI
+        onLeaderboard(data.lb);
         updatePlayerCount();
+        
+        serverTimeDiff = Date.now() - data.t;
     }
 
-    function handlePlayerJoined(playerData) {
-        if (playerData.id !== myPlayerId) {
-            createOtherPlayer(playerData);
+    function onPlayerJoin(data) {
+        if (data.id !== myId) {
+            createOtherPlayer(data);
             updatePlayerCount();
         }
     }
 
-    function handlePlayerLeft(playerId) {
-        const other = otherPlayers.get(playerId);
+    function onPlayerLeave(id) {
+        const other = otherPlayers.get(id);
         if (other) {
             scene.remove(other.mesh);
-            removePlayerLabel(playerId);
-            otherPlayers.delete(playerId);
+            removeLabel(id);
+            otherPlayers.delete(id);
             updatePlayerCount();
         }
     }
 
-    function handlePlayerMoved(data) {
+    function onPlayerMove(data) {
         const other = otherPlayers.get(data.id);
         if (other) {
-            // Store position update for interpolation
-            const serverTime = data.hopStartTime - serverTimeOffset;
-            other.positionBuffer.push({
-                time: serverTime,
-                x: data.worldX,
-                z: data.worldZ,
-                rotation: data.rotation,
-                hopStartX: other.lastKnownX || data.worldX,
-                hopStartZ: other.lastKnownZ || data.worldZ
+            const serverTime = data.t - serverTimeDiff;
+            other.buffer.push({
+                t: serverTime,
+                x: data.wx,
+                z: data.wz,
+                r: data.r,
+                sx: data.hs.x,
+                sz: data.hs.z,
+                tx: data.ht.x,
+                tz: data.ht.z
             });
-            other.lastKnownX = data.worldX;
-            other.lastKnownZ = data.worldZ;
-            other.score = data.score;
-
-            // Keep buffer small
-            while (other.positionBuffer.length > 20) {
-                other.positionBuffer.shift();
+            // Trim buffer
+            while (other.buffer.length > 30) {
+                other.buffer.shift();
             }
         }
     }
 
-    function handlePlayerDied(data) {
-        if (data.id === myPlayerId) {
-            die(data.type === 'water');
+    function onPlayerDie(data) {
+        if (data.id === myId) {
+            gameOver(data.type === 'water');
         } else {
             const other = otherPlayers.get(data.id);
             if (other) {
@@ -581,86 +787,91 @@
         }
     }
 
-    function handlePlayerRespawned(data) {
+    function onPlayerRespawn(data) {
         const other = otherPlayers.get(data.id);
         if (other) {
             other.alive = true;
             other.mesh.position.set(0, 0, 0);
             other.mesh.scale.set(1, 1, 1);
-            other.positionBuffer = [];
-            other.lastKnownX = 0;
-            other.lastKnownZ = 0;
+            other.buffer = [];
         }
     }
 
-    function handleMoveConfirmed(data) {
-        // Remove from pending moves
-        pendingMoves = pendingMoves.filter(m => m.seq !== data.seq);
-        
-        // Update score
-        if (data.score > score) {
-            score = data.score;
-            document.getElementById('score').innerText = score;
+    function onMoveConfirm(data) {
+        if (data.sc > score) {
+            score = data.sc;
+            $score.textContent = score;
         }
+        serverTimeDiff = Date.now() - data.t;
     }
 
-    function handleMoveRejected(data) {
-        // Remove from pending
-        pendingMoves = pendingMoves.filter(m => m.seq !== data.seq);
-        
-        // Could implement rollback here if needed
-        console.log('Move rejected:', data.reason);
+    function onMoveReject(data) {
+        console.log('Move rejected:', data.r);
     }
 
-    function handleGameState(data) {
-        // Update other players with interpolation data
-        data.players.forEach(p => {
-            if (p.id === myPlayerId) {
-                // Could use for reconciliation
-            } else {
+    function onGameState(data) {
+        // Update obstacles
+        Object.entries(data.obs).forEach(([idx, obstacles]) => {
+            const lane = lanes.get(parseInt(idx));
+            if (lane) {
+                updateObstacles(lane, obstacles);
+            }
+        });
+
+        // Update other players
+        data.ps.forEach(p => {
+            if (p.id !== myId) {
                 const other = otherPlayers.get(p.id);
                 if (other) {
                     other.serverState = p;
-                    other.alive = p.alive;
+                    other.alive = p.a === 1;
+                    other.score = p.s;
                 }
             }
         });
 
-        // Update obstacles
-        Object.entries(data.obstacles).forEach(([laneIndex, obstacles]) => {
-            const lane = lanes.get(parseInt(laneIndex));
-            if (lane) {
-                updateLaneObstacles(lane, obstacles);
-            }
-        });
-
-        updatePlayerCount();
+        $playersOnline.textContent = data.ps.length + ' online';
+        serverTimeDiff = Date.now() - data.t;
     }
 
-    function handleNewLane(laneData) {
-        createLaneFromData(laneData);
+    function onNewLane(data) {
+        createLane(data);
     }
 
-    function handleLeaderboard(data) {
-        const container = document.getElementById('leaderboard-entries');
-        container.innerHTML = '';
-        
-        data.forEach((entry, index) => {
+    function onLeaderboard(data) {
+        $lbEntries.innerHTML = '';
+        data.forEach((e, i) => {
             const div = document.createElement('div');
-            const rankClass = index === 0 ? 'gold' : index === 1 ? 'silver' : 'bronze';
-            div.className = `leaderboard-entry ${rankClass}`;
-            div.innerHTML = `
-                <span class="leaderboard-name">${escapeHtml(entry.username)}</span>
-                <span>${entry.score}</span>
-            `;
-            container.appendChild(div);
+            div.className = 'lb-entry ' + ['gold', 'silver', 'bronze'][i];
+            div.innerHTML = `<span class="lb-name">${escapeHtml(e.n)}</span><span>${e.s}</span>`;
+            $lbEntries.appendChild(div);
         });
     }
 
-    function handlePong(data) {
-        ping = Date.now() - data.clientTime;
-        serverTimeOffset = Date.now() - data.serverTime - ping / 2;
-        document.getElementById('ping-display').textContent = `Ping: ${ping}ms`;
+    function onPong(data) {
+        ping = Date.now() - data.c;
+        serverTimeDiff = Date.now() - data.s - ping / 2;
+        
+        $pingDisplay.textContent = ping + 'ms';
+        
+        // Update connection quality indicator
+        if (ping < 100) {
+            $connDot.className = 'stat-dot good';
+        } else if (ping < 250) {
+            $connDot.className = 'stat-dot medium';
+        } else {
+            $connDot.className = 'stat-dot poor';
+        }
+    }
+
+    function onRespawned(data) {
+        resetPlayerState(data);
+        isGameOver = false;
+        $gameOver.classList.remove('visible');
+    }
+
+    function onError(data) {
+        console.error('Server error:', data.m);
     }
 
     function escapeHtml(text) {
@@ -669,311 +880,249 @@
         return div.innerHTML;
     }
 
-    function updatePlayerCount() {
-        const count = otherPlayers.size + 1;
-        document.getElementById('player-count').textContent = `Players: ${count}`;
+    // ============= GAME OBJECTS =============
+    function createVoxel(w, h, d, color, x = 0, y = 0, z = 0) {
+        const geo = new THREE.BoxGeometry(w, h, d);
+        const mat = new THREE.MeshLambertMaterial({ color });
+        const mesh = new THREE.Mesh(geo, mat);
+        mesh.position.set(x, y, z);
+        mesh.castShadow = true;
+        mesh.receiveShadow = true;
+        return mesh;
+    }
+
+    function createPlayerMesh(bodyColor = COLORS.penguin) {
+        const group = new THREE.Group();
+        group.add(createVoxel(7, 9, 7, bodyColor, 0, 4.5, 0));
+        group.add(createVoxel(5, 6, 2, COLORS.belly, 0, 4, 3));
+        group.add(createVoxel(3, 2, 3, COLORS.beak, 0, 7.5, 3));
+        group.add(createVoxel(2.5, 2, 2.5, COLORS.beak, -2, 1, 1));
+        group.add(createVoxel(2.5, 2, 2.5, COLORS.beak, 2, 1, 1));
+        return group;
+    }
+
+    function createPlayer() {
+        if (player) scene.remove(player);
+        player = createPlayerMesh();
+        scene.add(player);
+    }
+
+    function createOtherPlayer(data) {
+        if (otherPlayers.has(data.id)) return;
+        
+        const mesh = createPlayerMesh(COLORS.otherPlayer);
+        mesh.position.set(data.wx, 0, data.wz);
+        scene.add(mesh);
+
+        otherPlayers.set(data.id, {
+            id: data.id,
+            name: data.n,
+            mesh,
+            buffer: [],
+            alive: data.a === 1,
+            score: data.s,
+            lastX: data.wx,
+            lastZ: data.wz
+        });
+
+        createLabel(data.id, data.n);
+    }
+
+    function createLabel(id, name) {
+        const label = document.createElement('div');
+        label.className = 'player-label';
+        label.id = 'label-' + id;
+        label.textContent = name;
+        $labelsContainer.appendChild(label);
     }
 
-    // --- LANE CREATION ---
-    function createLaneFromData(laneData) {
+    function removeLabel(id) {
+        const label = document.getElementById('label-' + id);
+        if (label) label.remove();
+    }
+
+    function createLane(data) {
+        if (lanes.has(data.i)) return;
+
         const lane = {
-            index: laneData.index,
-            type: laneData.type,
-            staticObstacles: laneData.staticObstacles || [],
+            index: data.i,
+            type: data.t,
+            staticObs: data.so || [],
+            speed: data.sp,
+            dir: data.d,
             mesh: new THREE.Group(),
             obstacles: [],
-            obstacleMap: new Map(),
-            zPos: laneData.zPos,
-            speed: laneData.speed,
-            direction: laneData.direction
+            obsMap: new Map()
+        };
+
+        const typeColors = {
+            'g': [data.i % 2 === 0 ? COLORS.grass : COLORS.grassLight, -5],
+            'r': [COLORS.road, -5],
+            'w': [COLORS.water, -13]
         };
 
-        let groundColor;
-        let yPos;
-
-        switch(laneData.type) {
-            case 'grass':
-                groundColor = (laneData.index % 2 === 0 ? COLORS.grass : COLORS.grassLight);
-                yPos = -TILE_SIZE/2;
-                break;
-            case 'road':
-                groundColor = COLORS.road;
-                yPos = -TILE_SIZE/2;
-                break;
-            case 'water':
-                groundColor = COLORS.water;
-                yPos = -TILE_SIZE/2 - 8; 
-                break;
-        }
-
-        const ground = createVoxel(GRID_WIDTH * TILE_SIZE + 200, TILE_SIZE, TILE_SIZE, groundColor, 0, yPos, 0);
+        const [color, yPos] = typeColors[data.t];
+        const ground = createVoxel(CONFIG.GRID_WIDTH * CONFIG.TILE_SIZE + 200, CONFIG.TILE_SIZE, CONFIG.TILE_SIZE, color, 0, yPos, 0);
         lane.mesh.add(ground);
 
-        if (laneData.type === 'road') {
-            const line = createVoxel(GRID_WIDTH * TILE_SIZE, 1, 2, COLORS.roadLine, 0, yPos + 0.6, 0);
-            lane.mesh.add(line);
+        if (data.t === 'r') {
+            lane.mesh.add(createVoxel(CONFIG.GRID_WIDTH * CONFIG.TILE_SIZE, 1, 2, COLORS.roadLine, 0, yPos + 0.6, 0));
         }
 
-        lane.mesh.position.z = lane.zPos;
-
-        // Add trees
-        if (laneData.type === 'grass' && lane.staticObstacles) {
-            lane.staticObstacles.forEach(gx => {
+        // Trees
+        if (data.t === 'g' && lane.staticObs) {
+            lane.staticObs.forEach(gx => {
                 const tree = new THREE.Group();
                 tree.add(createVoxel(3, 5, 3, COLORS.treeTrunk, 0, 2.5, 0));
                 tree.add(createVoxel(9, 9, 9, COLORS.treeLeaves, 0, 7, 0));
-                tree.position.x = gx * TILE_SIZE;
+                tree.position.x = gx * CONFIG.TILE_SIZE;
                 lane.mesh.add(tree);
             });
         }
 
+        lane.mesh.position.z = data.i * CONFIG.TILE_SIZE;
         scene.add(lane.mesh);
-        lanes.set(laneData.index, lane);
+        lanes.set(data.i, lane);
 
-        // Create initial obstacles
-        if (laneData.obstacles) {
-            laneData.obstacles.forEach(obs => {
-                createObstacle(lane, obs);
-            });
+        // Create obstacles
+        if (data.obs) {
+            data.obs.forEach(o => addObstacle(lane, o));
         }
     }
 
-    function createObstacle(lane, obsData) {
-        const obs = {
-            id: obsData.id,
-            mesh: new THREE.Group(),
-            isLog: obsData.isLog,
-            width: obsData.width,
-            x: obsData.x
-        };
-
-        if (obsData.isLog) {
-            obs.mesh.add(createVoxel(obsData.width, 2, 7, COLORS.log, 0, -1, 0));
-        } else {
+    function addObstacle(lane, data) {
+        const mesh = new THREE.Group();
+        
+        if (data.l) { // Log
+            mesh.add(createVoxel(data.w, 2, 7, COLORS.log, 0, -1, 0));
+        } else { // Car
             const color = Math.random() > 0.5 ? COLORS.carRed : COLORS.carBlue;
-            obs.mesh.add(createVoxel(12, 7, 7, color, 0, 3.5, 0));
-            obs.mesh.add(createVoxel(8, 3, 5, 0xFFFFFF, 0, 7, 0));
+            mesh.add(createVoxel(12, 7, 7, color, 0, 3.5, 0));
+            mesh.add(createVoxel(8, 3, 5, 0xFFFFFF, 0, 7, 0));
         }
 
-        obs.mesh.position.set(obsData.x, 0, 0);
-        lane.mesh.add(obs.mesh);
+        mesh.position.x = data.x;
+        lane.mesh.add(mesh);
+
+        const obs = { id: data.id, mesh, isLog: data.l, width: data.w, x: data.x, targetX: data.x };
         lane.obstacles.push(obs);
-        lane.obstacleMap.set(obsData.id, obs);
+        lane.obsMap.set(data.id, obs);
     }
 
-    function updateLaneObstacles(lane, serverObstacles) {
-        const serverIds = new Set(serverObstacles.map(o => o.id));
+    function updateObstacles(lane, serverObs) {
+        const serverIds = new Set(serverObs.map(o => o.id));
 
-        // Remove obstacles that no longer exist
+        // Remove old
         for (let i = lane.obstacles.length - 1; i >= 0; i--) {
             const obs = lane.obstacles[i];
             if (!serverIds.has(obs.id)) {
                 lane.mesh.remove(obs.mesh);
-                lane.obstacleMap.delete(obs.id);
+                lane.obsMap.delete(obs.id);
                 lane.obstacles.splice(i, 1);
             }
         }
 
-        // Update existing and add new obstacles
-        serverObstacles.forEach(serverObs => {
-            let obs = lane.obstacleMap.get(serverObs.id);
+        // Update/add
+        serverObs.forEach(so => {
+            let obs = lane.obsMap.get(so.id);
             if (obs) {
-                // Smooth interpolation to server position
-                obs.targetX = serverObs.x;
+                obs.targetX = so.x;
             } else {
-                // Create new obstacle
-                createObstacle(lane, serverObs);
-            }
-        });
-    }
-
-    // --- PLAYER CREATION ---
-    function createVoxel(w, h, d, color, x, y, z) {
-        const geo = new THREE.BoxGeometry(w, h, d);
-        const mat = new THREE.MeshLambertMaterial({ color: color });
-        const mesh = new THREE.Mesh(geo, mat);
-        mesh.position.set(x, y, z);
-        mesh.castShadow = true;
-        mesh.receiveShadow = true;
-        return mesh;
-    }
-
-    function createPlayerMesh(bodyColor = COLORS.penguinBody) {
-        const group = new THREE.Group();
-        const body = createVoxel(7, 9, 7, bodyColor, 0, 4.5, 0);
-        const belly = createVoxel(5, 6, 2, COLORS.penguinBelly, 0, 4, 3);
-        const beak = createVoxel(3, 2, 3, COLORS.penguinBeak, 0, 7.5, 3);
-        const footL = createVoxel(2.5, 2, 2.5, COLORS.penguinBeak, -2, 1, 1);
-        const footR = createVoxel(2.5, 2, 2.5, COLORS.penguinBeak, 2, 1, 1);
-        group.add(body, belly, beak, footL, footR);
-        return group;
-    }
-
-    function createPlayer() {
-        if (player) {
-            scene.remove(player);
-        }
-        player = createPlayerMesh();
-        scene.add(player);
-    }
-
-    function createOtherPlayer(playerData) {
-        const mesh = createPlayerMesh(COLORS.otherPlayer);
-        mesh.position.set(playerData.worldX, 0, playerData.worldZ);
-        scene.add(mesh);
-
-        otherPlayers.set(playerData.id, {
-            id: playerData.id,
-            username: playerData.username,
-            mesh: mesh,
-            positionBuffer: [],
-            lastKnownX: playerData.worldX,
-            lastKnownZ: playerData.worldZ,
-            alive: playerData.alive,
-            score: playerData.score,
-            serverState: playerData
-        });
-
-        createPlayerLabel(playerData.id, playerData.username);
-    }
-
-    function createPlayerLabel(playerId, username) {
-        const label = document.createElement('div');
-        label.className = 'player-label';
-        label.id = `label-${playerId}`;
-        label.textContent = username;
-        document.getElementById('labels-container').appendChild(label);
-    }
-
-    function removePlayerLabel(playerId) {
-        const label = document.getElementById(`label-${playerId}`);
-        if (label) label.remove();
-    }
-
-    function updatePlayerLabels() {
-        otherPlayers.forEach((other, playerId) => {
-            const label = document.getElementById(`label-${playerId}`);
-            if (label && other.alive) {
-                const pos = other.mesh.position.clone();
-                pos.y += 20;
-                
-                const vector = pos.project(camera);
-                const x = (vector.x * 0.5 + 0.5) * window.innerWidth;
-                const y = (-vector.y * 0.5 + 0.5) * window.innerHeight;
-
-                if (vector.z < 1) {
-                    label.style.left = `${x}px`;
-                    label.style.top = `${y - 20}px`;
-                    label.style.display = 'block';
-                } else {
-                    label.style.display = 'none';
-                }
-            } else if (label) {
-                label.style.display = 'none';
+                // Need full data from a different source
             }
         });
     }
 
-    // --- GAME STATE ---
-    function resetPlayerState(playerData) {
+    // ============= PLAYER STATE =============
+    function resetPlayerState(data) {
+        playerGX = data.gx;
+        playerGZ = data.gz;
+        playerWX = data.wx;
+        playerWZ = data.wz;
+        score = data.s;
+        maxScore = data.s;
         isGameOver = false;
-        score = playerData.score;
-        document.getElementById('score').innerText = score;
-        document.getElementById('game-over').classList.remove('visible');
-        
-        playerGridX = playerData.gridX;
-        playerGridZ = playerData.gridZ;
-        player.position.set(playerData.worldX, 0, playerData.worldZ);
-        player.rotation.y = playerData.rotation || 0;
-        player.scale.set(1, 1, 1);
-        
-        attachedLog = null;
         isHopping = false;
-        canMove = true;
+        attachedLogId = null;
         moveQueue = [];
-        pendingMoves = [];
-        
-        currentLaneIndex = playerGridZ;
-        maxLaneIndex = playerGridZ;
 
-        camera.position.z = player.position.z + 100;
-        camera.position.x = player.position.x - 100;
+        player.position.set(playerWX, 0, playerWZ);
+        player.rotation.y = data.r || 0;
+        player.scale.set(1, 1, 1);
+
+        $score.textContent = score;
+        $tutorial.style.display = 'block';
+        $gameOver.classList.remove('visible');
+
+        camera.position.set(playerWX - 100, 100, playerWZ + 100);
     }
 
-    function resetGame() {
-        if (!socket.connected) return;
-        socket.emit('respawn');
+    function updatePlayerCount() {
+        const count = otherPlayers.size + 1;
+        $playerCount.textContent = 'Players: ' + count;
     }
 
-    // --- MOVEMENT ---
+    // ============= MOVEMENT =============
     function attemptMove(dx, dz) {
-        if (isGameOver) return;
-        if (!canMove) return;
-        
-        // Prevent backward movement
-        if (dz < 0) return;
+        if (isGameOver || !hasJoined) return;
+        if (dz < 0) return; // No backward
 
         const now = Date.now();
 
-        // Anti-spam: enforce minimum time between moves
-        if (now - lastMoveTime < MOVE_COOLDOWN) {
-            // Queue the move if not too many queued
-            if (moveQueue.length < MAX_QUEUE_SIZE) {
-                moveQueue.push({dx, dz});
+        // Rate limit
+        if (now - lastMoveTime < CONFIG.MOVE_COOLDOWN) {
+            if (moveQueue.length < CONFIG.MAX_QUEUE) {
+                moveQueue.push({ dx, dz });
             }
             return;
         }
 
         if (isHopping) {
-            if (moveQueue.length < MAX_QUEUE_SIZE) {
-                moveQueue.push({dx, dz});
+            if (moveQueue.length < CONFIG.MAX_QUEUE) {
+                moveQueue.push({ dx, dz });
             }
             return;
         }
 
-        const targetX = playerGridX + dx;
-        const targetZ = playerGridZ + dz;
+        const tx = playerGX + dx;
+        const tz = playerGZ + dz;
 
         // Bounds check
-        if (Math.abs(targetX) > Math.floor(GRID_WIDTH/2)) return;
+        if (Math.abs(tx) > Math.floor(CONFIG.GRID_WIDTH / 2)) return;
 
-        // Check for tree blocking
-        const targetLane = lanes.get(targetZ);
-        if (targetLane && targetLane.type === 'grass') {
-            if (targetLane.staticObstacles.includes(targetX)) return;
-        }
+        // Tree check
+        const lane = lanes.get(tz);
+        if (lane && lane.type === 'g' && lane.staticObs.includes(tx)) return;
 
-        // Execute move locally (client-side prediction)
+        // Execute locally
         lastMoveTime = now;
         isHopping = true;
         hopStartTime = now;
-        attachedLog = null;
-
-        // Set rotation
+        hopStartPos = { x: playerWX, z: playerWZ };
+        hopTargetPos = { x: tx * CONFIG.TILE_SIZE, z: tz * CONFIG.TILE_SIZE };
+        playerGX = tx;
+        playerGZ = tz;
+        playerWX = tx * CONFIG.TILE_SIZE;
+        playerWZ = tz * CONFIG.TILE_SIZE;
+        attachedLogId = null;
+
+        // Rotation
         if (dx === 1) player.rotation.y = -Math.PI / 2;
         else if (dx === -1) player.rotation.y = Math.PI / 2;
         else if (dz === 1) player.rotation.y = 0;
         else if (dz === -1) player.rotation.y = Math.PI;
 
-        hopStartPos.copy(player.position);
-        hopTargetPos.set(targetX * TILE_SIZE, 0, targetZ * TILE_SIZE);
-        
-        playerGridX = targetX;
-        playerGridZ = targetZ;
-
-        // Update score locally
-        if (targetZ > maxLaneIndex) {
-            maxLaneIndex = targetZ;
-            score = maxLaneIndex;
-            document.getElementById('score').innerText = score;
+        // Score
+        if (tz > maxScore) {
+            maxScore = tz;
+            score = maxScore;
+            $score.textContent = score;
         }
 
         // Send to server
-        const seq = ++moveSequence;
-        pendingMoves.push({ seq, dx, dz, time: now });
-        socket.emit('move', { dx, dz, seq });
+        socket.emit('m', { dx, dz, s: ++moveSeq });
 
-        document.getElementById('tutorial').style.display = 'none';
+        $tutorial.style.display = 'none';
     }
 
     function processHop() {
@@ -981,34 +1130,27 @@
 
         const now = Date.now();
         const elapsed = now - hopStartTime;
-        const progress = Math.min(elapsed / HOP_DURATION, 1);
+        const t = Math.min(elapsed / CONFIG.HOP_DURATION, 1);
 
-        player.position.lerpVectors(hopStartPos, hopTargetPos, progress);
-        player.position.y = Math.sin(progress * Math.PI) * 9;
+        player.position.x = hopStartPos.x + (hopTargetPos.x - hopStartPos.x) * t;
+        player.position.z = hopStartPos.z + (hopTargetPos.z - hopStartPos.z) * t;
+        player.position.y = Math.sin(t * Math.PI) * 9;
 
-        // Squash and stretch
-        if (progress < 1) {
-            player.scale.set(0.9, 1.1, 0.9);
-        }
+        // Squash/stretch
+        player.scale.set(t < 1 ? 0.9 : 1, t < 1 ? 1.1 : 1, t < 1 ? 0.9 : 1);
 
-        // Check collision DURING hop (fix for spam-click bug)
-        checkMidHopCollision(progress);
+        // Mid-hop collision
+        checkMidHopCollision(t);
 
-        if (progress >= 1) {
+        if (t >= 1) {
             isHopping = false;
-            player.position.copy(hopTargetPos);
-            player.position.y = 0;
-            
-            // Landing squash
+            player.position.set(hopTargetPos.x, 0, hopTargetPos.z);
             player.scale.set(1.3, 0.7, 1.3);
-            setTimeout(() => {
-                if (player) player.scale.set(1, 1, 1);
-            }, 60);
+            setTimeout(() => player && player.scale.set(1, 1, 1), 60);
 
-            // Check collision at landing
-            checkCollisions();
+            checkLandingCollision();
 
-            // Process queued move
+            // Process queue
             if (moveQueue.length > 0 && !isGameOver) {
                 const next = moveQueue.shift();
                 setTimeout(() => attemptMove(next.dx, next.dz), 10);
@@ -1016,210 +1158,201 @@
         }
     }
 
-    function checkMidHopCollision(progress) {
+    function checkMidHopCollision(t) {
         if (isGameOver) return;
 
-        // Calculate current position during hop
-        const currentX = hopStartPos.x + (hopTargetPos.x - hopStartPos.x) * progress;
-        const currentZ = hopStartPos.z + (hopTargetPos.z - hopStartPos.z) * progress;
-        const currentGridZ = Math.round(currentZ / TILE_SIZE);
+        const cx = hopStartPos.x + (hopTargetPos.x - hopStartPos.x) * t;
+        const cz = hopStartPos.z + (hopTargetPos.z - hopStartPos.z) * t;
+        const cgz = Math.round(cz / CONFIG.TILE_SIZE);
 
-        const lane = lanes.get(currentGridZ);
-        if (!lane || lane.type !== 'road') return;
+        const lane = lanes.get(cgz);
+        if (!lane || lane.type !== 'r') return;
 
-        // Check car collision
         for (const obs of lane.obstacles) {
             if (obs.isLog) continue;
-            
-            const obsX = obs.mesh.position.x;
-            const halfWidth = obs.width / 2 + 3;
-            
-            if (Math.abs(currentX - obsX) < halfWidth) {
-                die(false);
+            if (Math.abs(cx - obs.mesh.position.x) < (obs.width / 2 + 3)) {
+                gameOver(false);
                 return;
             }
         }
     }
 
-    function checkCollisions() {
+    function checkLandingCollision() {
         if (isGameOver) return;
 
-        const lane = lanes.get(playerGridZ);
-        if (!lane) return;
-
-        if (lane.type === 'grass') return;
+        const lane = lanes.get(playerGZ);
+        if (!lane || lane.type === 'g') return;
 
-        // Bounds check
-        if (Math.abs(player.position.x) > (GRID_WIDTH * TILE_SIZE / 2 + 10)) {
-            die(false);
+        // Bounds
+        if (Math.abs(player.position.x) > (CONFIG.GRID_WIDTH * CONFIG.TILE_SIZE / 2 + 10)) {
+            gameOver(false);
             return;
         }
 
         let onLog = false;
 
         for (const obs of lane.obstacles) {
-            const obsX = obs.mesh.position.x;
+            const ox = obs.mesh.position.x;
             
             if (obs.isLog) {
-                const distX = Math.abs(player.position.x - obsX);
-                const safeDist = (obs.width / 2) + 4;
-
-                if (distX < safeDist) {
+                if (Math.abs(player.position.x - ox) < (obs.width / 2 + 4)) {
                     onLog = true;
-                    if (attachedLog !== obs) {
-                        attachedLog = obs;
-                        attachedLogOffset = player.position.x - obsX;
-                    }
+                    attachedLogId = obs.id;
                 }
             } else {
-                // Car collision
-                const halfWidth = obs.width / 2 + 3;
-                if (Math.abs(player.position.x - obsX) < halfWidth) {
-                    die(false);
+                if (Math.abs(player.position.x - ox) < (obs.width / 2 + 3)) {
+                    gameOver(false);
                     return;
                 }
             }
         }
 
-        if (lane.type === 'water' && !onLog) {
-            die(true);
-        } else if (lane.type !== 'water') {
-            attachedLog = null;
+        if (lane.type === 'w' && !onLog) {
+            gameOver(true);
+        } else if (lane.type !== 'w') {
+            attachedLogId = null;
         }
     }
 
-    function die(drown = false) {
+    function gameOver(drown = false) {
         if (isGameOver) return;
         isGameOver = true;
         isHopping = false;
         moveQueue = [];
-        
-        document.getElementById('game-over').classList.add('visible');
-        
+
         if (drown) {
             player.position.y = -10;
         } else {
             player.scale.set(1.5, 0.1, 1.5);
         }
+
+        $finalScore.textContent = 'Score: ' + score;
+        $gameOver.classList.add('visible');
+    }
+
+    function respawn() {
+        if (!socket || !socket.connected) return;
+        socket.emit('rs');
     }
 
-    // --- OBSTACLE INTERPOLATION ---
-    function updateObstacles() {
+    // ============= UPDATE LOOP =============
+    function updateObstaclePositions() {
         lanes.forEach(lane => {
             lane.obstacles.forEach(obs => {
                 if (obs.targetX !== undefined) {
-                    // Smooth interpolation
                     const diff = obs.targetX - obs.mesh.position.x;
-                    obs.mesh.position.x += diff * 0.3;
+                    obs.mesh.position.x += diff * 0.2;
                     obs.x = obs.mesh.position.x;
                 }
             });
         });
     }
 
-    // --- OTHER PLAYER INTERPOLATION ---
+    function updateLogRiding() {
+        if (isHopping || attachedLogId === null || isGameOver) return;
+
+        const lane = lanes.get(playerGZ);
+        if (!lane) return;
+
+        const log = lane.obstacles.find(o => o.id === attachedLogId);
+        if (log) {
+            player.position.x = log.mesh.position.x;
+            playerWX = player.position.x;
+            playerGX = Math.round(playerWX / CONFIG.TILE_SIZE);
+
+            if (Math.abs(playerWX) > (CONFIG.GRID_WIDTH * CONFIG.TILE_SIZE / 2 + 10)) {
+                gameOver(true);
+            }
+        } else {
+            attachedLogId = null;
+            if (lane.type === 'w') {
+                checkLandingCollision();
+            }
+        }
+    }
+
     function updateOtherPlayers() {
-        const renderTime = Date.now() - INTERPOLATION_DELAY;
+        const renderTime = Date.now() - CONFIG.INTERP_DELAY;
 
-        otherPlayers.forEach((other) => {
+        otherPlayers.forEach(other => {
             if (!other.alive) return;
 
-            const buffer = other.positionBuffer;
-            
+            const buffer = other.buffer;
+
             if (buffer.length >= 2) {
-                // Find the two positions to interpolate between
                 let i = 0;
-                while (i < buffer.length - 1 && buffer[i + 1].time <= renderTime) {
-                    i++;
-                }
+                while (i < buffer.length - 1 && buffer[i + 1].t <= renderTime) i++;
 
                 if (i < buffer.length - 1) {
                     const p1 = buffer[i];
                     const p2 = buffer[i + 1];
-                    const t = (renderTime - p1.time) / (p2.time - p1.time);
-                    const clampedT = Math.max(0, Math.min(1, t));
-
-                    // Interpolate position with hop animation
-                    other.mesh.position.x = p1.x + (p2.x - p1.x) * clampedT;
-                    other.mesh.position.z = p1.z + (p2.z - p1.z) * clampedT;
-                    other.mesh.position.y = Math.sin(clampedT * Math.PI) * 9;
-                    other.mesh.rotation.y = p2.rotation;
-
-                    // Squash and stretch
-                    if (clampedT < 1) {
-                        other.mesh.scale.set(0.9, 1.1, 0.9);
-                    } else {
-                        other.mesh.scale.set(1, 1, 1);
-                    }
+                    const t = Math.max(0, Math.min(1, (renderTime - p1.t) / (p2.t - p1.t)));
+
+                    // Hop interpolation
+                    other.mesh.position.x = p1.x + (p2.x - p1.x) * t;
+                    other.mesh.position.z = p1.z + (p2.z - p1.z) * t;
+                    other.mesh.position.y = Math.sin(t * Math.PI) * 9;
+                    other.mesh.rotation.y = p2.r;
+                    other.mesh.scale.set(t < 1 ? 0.9 : 1, t < 1 ? 1.1 : 1, t < 1 ? 0.9 : 1);
                 } else if (buffer.length > 0) {
-                    // Use latest position
-                    const latest = buffer[buffer.length - 1];
-                    other.mesh.position.x = latest.x;
-                    other.mesh.position.z = latest.z;
-                    other.mesh.position.y = 0;
-                    other.mesh.rotation.y = latest.rotation;
+                    const last = buffer[buffer.length - 1];
+                    other.mesh.position.set(last.x, 0, last.z);
+                    other.mesh.rotation.y = last.r;
                     other.mesh.scale.set(1, 1, 1);
                 }
 
-                // Clean old buffer entries
-                while (buffer.length > 2 && buffer[1].time < renderTime) {
-                    buffer.shift();
-                }
-            } else if (buffer.length === 1) {
-                const pos = buffer[0];
-                other.mesh.position.x = pos.x;
-                other.mesh.position.z = pos.z;
-                other.mesh.position.y = 0;
+                while (buffer.length > 2 && buffer[1].t < renderTime) buffer.shift();
             }
         });
     }
 
-    // --- LOG RIDING ---
-    function updateLogRiding() {
-        if (isHopping || !attachedLog || isGameOver) return;
+    function updateLabels() {
+        otherPlayers.forEach((other, id) => {
+            const label = document.getElementById('label-' + id);
+            if (!label) return;
 
-        const lane = lanes.get(playerGridZ);
-        if (!lane) return;
+            if (!other.alive) {
+                label.style.display = 'none';
+                return;
+            }
 
-        // Find the log in the lane
-        const log = lane.obstacles.find(o => o === attachedLog);
-        if (log) {
-            player.position.x = log.mesh.position.x + attachedLogOffset;
-            playerGridX = Math.round(player.position.x / TILE_SIZE);
+            const pos = other.mesh.position.clone();
+            pos.y += 18;
 
-            // Check if pushed off screen
-            if (Math.abs(player.position.x) > (GRID_WIDTH * TILE_SIZE / 2 + 10)) {
-                die(true);
-            }
-        } else {
-            attachedLog = null;
-            // Check if still on water without log
-            if (lane.type === 'water') {
-                checkCollisions();
+            const vector = pos.project(camera);
+            
+            if (vector.z < 1 && vector.z > -1) {
+                const x = (vector.x * 0.5 + 0.5) * window.innerWidth;
+                const y = (-vector.y * 0.5 + 0.5) * window.innerHeight;
+                label.style.left = x + 'px';
+                label.style.top = (y - 15) + 'px';
+                label.style.display = 'block';
+            } else {
+                label.style.display = 'none';
             }
-        }
+        });
+    }
+
+    function updateCamera() {
+        if (isGameOver || !player) return;
+
+        const tx = player.position.x - 100;
+        const tz = player.position.z + 100;
+        camera.position.x += (tx - camera.position.x) * 0.05;
+        camera.position.z += (tz - camera.position.z) * 0.1;
     }
 
-    // --- ANIMATION LOOP ---
+    // ============= RENDER LOOP =============
     function animate() {
         requestAnimationFrame(animate);
 
         processHop();
-        updateObstacles();
-        updateOtherPlayers();
+        updateObstaclePositions();
         updateLogRiding();
-        
-        if (!isGameOver) {
-            // Camera follow
-            const targetZ = player.position.z + 100;
-            const targetX = player.position.x - 100;
-            camera.position.z += (targetZ - camera.position.z) * 0.1;
-            camera.position.x += (targetX - camera.position.x) * 0.05;
-            
-            currentLaneIndex = Math.max(currentLaneIndex, playerGridZ);
-        }
+        updateOtherPlayers();
+        updateCamera();
+        updateLabels();
 
-        updatePlayerLabels();
         renderer.render(scene, camera);
     }
 
@@ -1234,57 +1367,99 @@
         renderer.setSize(window.innerWidth, window.innerHeight);
     }
 
-    function setupInputs() {
-        const c = document.getElementById('game-container');
-        
-        c.addEventListener('touchmove', e => e.preventDefault(), {passive: false});
+    // ============= INPUT =============
+    function initInputs() {
+        const container = document.getElementById('game-container');
+
+        // Touch
+        container.addEventListener('touchstart', e => {
+            if (e.target.tagName === 'INPUT' || e.target.tagName === 'BUTTON') return;
+            touchStartX = e.touches[0].clientX;
+            touchStartY = e.touches[0].clientY;
+            touchStartTime = Date.now();
+        }, { passive: true });
+
+        container.addEventListener('touchend', e => {
+            if (isGameOver || !hasJoined) return;
+            if (e.target.tagName === 'INPUT' || e.target.tagName === 'BUTTON') return;
+            e.preventDefault();
 
-        c.addEventListener('touchstart', e => { 
-            touchStartX = e.touches[0].clientX; 
-            touchStartY = e.touches[0].clientY; 
-        }, {passive: false});
+            const dx = e.changedTouches[0].clientX - touchStartX;
+            const dy = e.changedTouches[0].clientY - touchStartY;
+            handleSwipe(dx, dy);
+        }, { passive: false });
+
+        container.addEventListener('touchmove', e => {
+            if (e.target.tagName !== 'INPUT') e.preventDefault();
+        }, { passive: false });
+
+        // Mouse
+        let mouseX, mouseY;
+        container.addEventListener('mousedown', e => {
+            if (e.target.tagName === 'INPUT' || e.target.tagName === 'BUTTON') return;
+            mouseX = e.clientX;
+            mouseY = e.clientY;
+        });
 
-        c.addEventListener('touchend', e => {
-            if (isGameOver) return;
-            e.preventDefault();
-            handleSwipe(
-                e.changedTouches[0].clientX - touchStartX, 
-                e.changedTouches[0].clientY - touchStartY
-            );
-        }, {passive: false});
-        
-        let mX, mY;
-        c.addEventListener('mousedown', e => { mX = e.clientX; mY = e.clientY; });
-        c.addEventListener('mouseup', e => { 
-            if (isGameOver) return; 
-            handleSwipe(e.clientX - mX, e.clientY - mY); 
+        container.addEventListener('mouseup', e => {
+            if (isGameOver || !hasJoined) return;
+            if (e.target.tagName === 'INPUT' || e.target.tagName === 'BUTTON') return;
+            handleSwipe(e.clientX - mouseX, e.clientY - mouseY);
         });
 
+        // Keyboard
         document.addEventListener('keydown', e => {
-            if (e.key === 'ArrowUp' || e.key === 'w') attemptMove(0, 1);
-            if (e.key === 'ArrowDown' || e.key === 's') attemptMove(0, -1);
-            if (e.key === 'ArrowLeft' || e.key === 'a') attemptMove(1, 0);
-            if (e.key === 'ArrowRight' || e.key === 'd') attemptMove(-1, 0);
+            if (e.target.tagName === 'INPUT') return;
+            
+            switch(e.key) {
+                case 'ArrowUp': case 'w': case 'W': attemptMove(0, 1); break;
+                case 'ArrowDown': case 's': case 'S': attemptMove(0, -1); break;
+                case 'ArrowLeft': case 'a': case 'A': attemptMove(1, 0); break;
+                case 'ArrowRight': case 'd': case 'D': attemptMove(-1, 0); break;
+            }
         });
 
-        document.getElementById('restart-btn').addEventListener('click', resetGame);
+        // Login
+        $nameInput.addEventListener('input', () => {
+            $joinBtn.disabled = !$nameInput.value.trim() || !isConnected;
+        });
+
+        $nameInput.addEventListener('keypress', e => {
+            if (e.key === 'Enter' && !$joinBtn.disabled) {
+                joinGame();
+            }
+        });
+
+        $joinBtn.addEventListener('click', joinGame);
+        $restartBtn.addEventListener('click', respawn);
     }
 
     function handleSwipe(dx, dy) {
-        if (Math.abs(dx) < 10 && Math.abs(dy) < 10) { 
-            attemptMove(0, 1); 
-            return; 
+        if (Math.abs(dx) < 10 && Math.abs(dy) < 10) {
+            attemptMove(0, 1);
+            return;
         }
+
         if (Math.abs(dx) > Math.abs(dy)) {
-            if (dx > 0) attemptMove(1, 0); 
-            else attemptMove(-1, 0);
+            attemptMove(dx > 0 ? 1 : -1, 0);
         } else {
-            if (dy < 0) attemptMove(0, 1); 
-            else attemptMove(0, -1);
+            attemptMove(0, dy < 0 ? 1 : -1);
         }
     }
 
+    function joinGame() {
+        const name = $nameInput.value.trim();
+        if (!name || !socket || !socket.connected) return;
+
+        $joinBtn.disabled = true;
+        $joinBtnText.innerHTML = '<span class="spinner" style="width:16px;height:16px;display:inline-block;vertical-align:middle;"></span>';
+        
+        socket.emit('join', { name });
+    }
+
+    // Start
     init();
+})();
 </script>
 </body>
 </html>