Implement HTML-based lobby system with player list management, host controls, and real-time updates. Add JavaScript-WASM communication for lobby state changes and game start triggers.

cmd/client/web/game.js

@@ -91,10 +91,17 @@ function startSoloGame() {
     localStorage.setItem('escape_game_mode', 'solo');
     localStorage.setItem('escape_room_id', '');
 
-    // Hide menu and show canvas
+    // Hide ALL screens including main menu
     hideAllScreens();
+    document.getElementById('menu').style.display = 'none';
     gameStarted = true;
 
+    // Canvas sichtbar machen
+    const canvas = document.querySelector('canvas');
+    if (canvas) {
+        canvas.classList.add('game-active');
+    }
+
     // Trigger WASM game start
     if (window.startGame) {
         window.startGame('solo', playerName, '');
@@ -120,17 +127,17 @@ function createRoom() {
     localStorage.setItem('escape_team_name', teamName);
     localStorage.setItem('escape_is_host', 'true');
 
-    // Hide menu and show canvas (Lobby wird vom WASM gezeichnet)
+    // Verstecke ALLE Screens inkl. Hauptmenü
     hideAllScreens();
-    gameStarted = true;
+    document.getElementById('menu').style.display = 'none';
 
-    // Canvas sichtbar machen für Lobby
-    const canvas = document.querySelector('canvas');
-    if (canvas) {
-        canvas.classList.add('game-active');
-    }
+    // Zeige HTML Lobby Screen
+    document.getElementById('lobbyScreen').classList.remove('hidden');
+    document.getElementById('lobbyRoomCode').textContent = roomID;
+    document.getElementById('lobbyHostControls').classList.remove('hidden');
+    document.getElementById('lobbyStatus').textContent = 'Du bist Host - starte wenn bereit!';
 
-    // Trigger WASM game start
+    // Trigger WASM game start (im Hintergrund)
     if (window.startGame) {
         window.startGame('coop', playerName, roomID, teamName, true);
     }
@@ -160,17 +167,17 @@ function joinRoom() {
     localStorage.setItem('escape_team_name', teamName);
     localStorage.setItem('escape_is_host', 'false');
 
-    // Hide menu and show canvas
+    // Verstecke ALLE Screens inkl. Hauptmenü
     hideAllScreens();
-    gameStarted = true;
+    document.getElementById('menu').style.display = 'none';
 
-    // Canvas sichtbar machen für Lobby
-    const canvas = document.querySelector('canvas');
-    if (canvas) {
-        canvas.classList.add('game-active');
-    }
+    // Zeige HTML Lobby Screen
+    document.getElementById('lobbyScreen').classList.remove('hidden');
+    document.getElementById('lobbyRoomCode').textContent = roomID;
+    document.getElementById('lobbyHostControls').classList.add('hidden');
+    document.getElementById('lobbyStatus').textContent = 'Warte auf Host...';
 
-    // Trigger WASM game start
+    // Trigger WASM game start (im Hintergrund)
     if (window.startGame) {
         window.startGame('coop', playerName, roomID, teamName, false);
     }
@@ -178,6 +185,47 @@ function joinRoom() {
     console.log('🎮 Joining room:', roomID);
 }
 
+// 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');
+    }
+
+    // Signal an WASM senden dass Spiel starten soll
+    if (window.startGameFromLobby_WASM) {
+        window.startGameFromLobby_WASM();
+    }
+
+    console.log('🎮 Host started game from lobby');
+}
+
+function leaveLobby() {
+    location.reload();
+}
+
+// Update Lobby Player List (called by WASM)
+function updateLobbyPlayers(players) {
+    const list = document.getElementById('lobbyPlayerList');
+    if (!players || players.length === 0) {
+        list.innerHTML = '<div style="color: #888;">Warte auf Spieler...</div>';
+        return;
+    }
+
+    list.innerHTML = players.map((player, index) => {
+        const hostBadge = player.is_host ? ' <span style="color:#ffcc00;">[HOST]</span>' : '';
+        return `<div style="padding:5px 0; color:#fff;">• ${player.name}${hostBadge}</div>`;
+    }).join('');
+
+    console.log('👥 Lobby players updated:', players.length);
+}
+
 function loadLeaderboard() {
     const list = document.getElementById('leaderboardList');
     list.innerHTML = '<div style="text-align:center; padding:20px;">Lädt Leaderboard...</div>';
@@ -197,16 +245,16 @@ function loadLeaderboard() {
 
 // Called by WASM to update leaderboard
 function updateLeaderboard(entries) {
-    // Update main leaderboard page
+    // Update ALL leaderboard displays
     const list = document.getElementById('leaderboardList');
-
-    // Update start screen leaderboard
     const startList = document.getElementById('startLeaderboardList');
+    const gameOverList = document.getElementById('gameOverLeaderboardList');
 
     if (!entries || entries.length === 0) {
         const emptyMsg = '<div style="text-align:center; padding:20px; color:#888;">Noch keine Einträge</div>';
         if (list) list.innerHTML = emptyMsg;
         if (startList) startList.innerHTML = emptyMsg;
+        if (gameOverList) gameOverList.innerHTML = emptyMsg;
         return;
     }
 
@@ -223,6 +271,7 @@ function updateLeaderboard(entries) {
 
     if (list) list.innerHTML = html;
     if (startList) startList.innerHTML = html;
+    if (gameOverList) gameOverList.innerHTML = html;
 
     console.log('📊 Leaderboard updated with', entries.length, 'entries');
 }