Integrate direct WebSocket-based leaderboard functionality for real-time updates and requests. Refactor related client-side logic to utilize this new connection.

cmd/client/web/game.js

@@ -3,6 +3,83 @@ let wasmReady = false;
 let gameStarted = false;
 let audioMuted = false;
 
+// WebSocket for Leaderboard (direct JS connection)
+let leaderboardWS = null;
+let leaderboardSessionID = 'lb_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+
+function connectLeaderboardWebSocket() {
+    if (leaderboardWS && leaderboardWS.readyState === WebSocket.OPEN) {
+        return; // Already connected
+    }
+
+    const wsURL = 'ws://localhost:8080/ws';
+    leaderboardWS = new WebSocket(wsURL);
+
+    leaderboardWS.onopen = () => {
+        console.log('📡 Leaderboard WebSocket connected with session:', leaderboardSessionID);
+
+        // Send JOIN message to register session
+        const joinMsg = JSON.stringify({
+            type: 'join',
+            payload: {
+                name: leaderboardSessionID,
+                room_id: 'leaderboard_viewer',
+                game_mode: 'solo',
+                is_host: false,
+                team_name: ''
+            }
+        });
+        leaderboardWS.send(joinMsg);
+        console.log('📝 Registered leaderboard session:', leaderboardSessionID);
+    };
+
+    leaderboardWS.onmessage = (event) => {
+        try {
+            const msg = JSON.parse(event.data);
+
+            if (msg.type === 'leaderboard_response') {
+                console.log('📊 Received leaderboard:', msg.payload?.entries?.length || 0, 'entries');
+                updateLeaderboard(msg.payload?.entries || []);
+            }
+        } catch (e) {
+            console.error('Failed to parse WebSocket message:', e);
+        }
+    };
+
+    leaderboardWS.onerror = (error) => {
+        console.error('❌ Leaderboard WebSocket error:', error);
+    };
+
+    leaderboardWS.onclose = () => {
+        console.log('📡 Leaderboard WebSocket closed');
+        leaderboardWS = null;
+    };
+}
+
+function requestLeaderboardDirect() {
+    connectLeaderboardWebSocket();
+
+    // Wait for connection then request
+    const checkAndRequest = setInterval(() => {
+        if (leaderboardWS && leaderboardWS.readyState === WebSocket.OPEN) {
+            clearInterval(checkAndRequest);
+
+            const msg = JSON.stringify({
+                type: 'leaderboard_request',
+                payload: {
+                    mode: 'solo',
+                    limit: 10
+                }
+            });
+            leaderboardWS.send(msg);
+            console.log('📤 Requesting leaderboard via WebSocket (session:', leaderboardSessionID + ')');
+        }
+    }, 100);
+
+    // Timeout after 3 seconds
+    setTimeout(() => clearInterval(checkAndRequest), 3000);
+}
+
 // Initialize WASM
 async function initWASM() {
     const go = new Go();
@@ -17,11 +94,9 @@ async function initWASM() {
 
         console.log('✅ WASM loaded successfully');
 
-        // Load initial leaderboard
+        // Load initial leaderboard via direct WebSocket
         setTimeout(() => {
-            if (window.requestLeaderboard) {
-                window.requestLeaderboard();
-            }
+            requestLeaderboardDirect();
         }, 500);
     } catch (err) {
         console.error('❌ Failed to load WASM:', err);
@@ -187,23 +262,13 @@ function joinRoom() {
 
 // Lobby Functions
 function startGameFromLobby() {
-    // Host startet das Spiel
-    hideAllScreens();
-    document.getElementById('menu').style.display = 'none';
-    gameStarted = true;
-
-    // Canvas sichtbar machen
-    const canvas = document.querySelector('canvas');
-    if (canvas) {
-        canvas.classList.add('game-active');
-    }
-
+    // Host startet das Spiel - Lobby bleibt sichtbar bis Server COUNTDOWN/RUNNING sendet
     // Signal an WASM senden dass Spiel starten soll
     if (window.startGameFromLobby_WASM) {
         window.startGameFromLobby_WASM();
     }
 
-    console.log('🎮 Host started game from lobby');
+    console.log('🎮 Host requested game start - waiting for server...');
 }
 
 function leaveLobby() {
@@ -230,14 +295,12 @@ function loadLeaderboard() {
     const list = document.getElementById('leaderboardList');
     list.innerHTML = '<div style="text-align:center; padding:20px;">Lädt Leaderboard...</div>';
 
-    // Request leaderboard from WASM
-    if (window.requestLeaderboard) {
-        window.requestLeaderboard();
-    }
+    // Request leaderboard via direct WebSocket
+    requestLeaderboardDirect();
 
     // Fallback timeout
     setTimeout(() => {
-        if (list.innerHTML.includes('Lädt')) {
+        if (list && list.innerHTML.includes('Lädt')) {
             list.innerHTML = '<div style="text-align:center; padding:20px; color:#888;">Keine Daten verfügbar</div>';
         }
     }, 3000);
@@ -370,19 +433,32 @@ function showGameOver(score) {
         localStorage.setItem('escape_local_highscore', score);
     }
 
-    // Request leaderboard
-    if (window.requestLeaderboard) {
-        window.requestLeaderboard();
-    }
+    // Request leaderboard via direct WebSocket
+    requestLeaderboardDirect();
 
     console.log('💀 Game Over! Score:', score);
 }
 
+// Called by WASM when game actually starts
+function onGameStarted() {
+    console.log('🎮 Game Started - Making canvas visible');
+    hideAllScreens();
+    document.getElementById('menu').style.display = 'none';
+    gameStarted = true;
+
+    // Canvas sichtbar machen
+    const canvas = document.querySelector('canvas');
+    if (canvas) {
+        canvas.classList.add('game-active');
+    }
+}
+
 // Export functions for WASM to call
 window.showMenu = showMenu;
 window.hideMenu = hideMenu;
 window.updateLeaderboard = updateLeaderboard;
 window.showGameOver = showGameOver;
+window.onGameStarted = onGameStarted;
 
 // Initialize on load
 initWASM();