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');
 }

cmd/client/web/index.html

@@ -5,6 +5,19 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
     <title>Escape From Teacher</title>
     <link rel="stylesheet" href="style.css">
+    <style>
+        /* DEBUG: Force menu visibility */
+        #menu {
+            position: fixed !important;
+            top: 0 !important;
+            left: 0 !important;
+            width: 100% !important;
+            height: 100% !important;
+            background: rgba(0, 0, 0, 0.95) !important;
+            z-index: 10000 !important;
+            display: flex !important;
+        }
+    </style>
 </head>
 <body>
 
@@ -115,6 +128,35 @@
         </div>
     </div>
 
+    <!-- LOBBY SCREEN (CO-OP WAITING ROOM) -->
+    <div id="lobbyScreen" class="overlay-screen hidden">
+        <div class="center-box">
+            <h1>LOBBY</h1>
+
+            <div style="margin: 20px 0;">
+                <p style="font-size: 14px; color: #aaa;">Raum-Code:</p>
+                <div style="background: rgba(0,0,0,0.6); border: 4px solid #ffcc00; padding: 20px; font-size: 32px; color: #ffcc00; letter-spacing: 4px;">
+                    <span id="lobbyRoomCode">XXXXX</span>
+                </div>
+            </div>
+
+            <div style="margin: 20px 0; width: 100%; max-width: 400px;">
+                <p style="font-size: 14px; color: #aaa; margin-bottom: 10px;">Spieler im Raum:</p>
+                <div id="lobbyPlayerList" style="background: rgba(0,0,0,0.5); border: 2px solid #666; padding: 15px; min-height: 100px; font-family: sans-serif; font-size: 14px;">
+                    <div style="color: #888;">Warte auf Spieler...</div>
+                </div>
+            </div>
+
+            <div id="lobbyHostControls" class="hidden" style="margin: 20px 0;">
+                <button class="big-btn" onclick="startGameFromLobby()" style="background: #00cc00;">SPIEL STARTEN</button>
+            </div>
+
+            <p id="lobbyStatus" style="font-size: 12px; color: #ffcc00; margin: 20px 0;">Warte auf Host...</p>
+
+            <button class="back-btn" onclick="leaveLobby()">← LOBBY VERLASSEN</button>
+        </div>
+    </div>
+
     <!-- GAME OVER SCREEN -->
     <div id="gameOverScreen" class="overlay-screen hidden">
         <div class="center-box">
@@ -124,7 +166,7 @@
                 Dein Score: <span id="finalScore" style="color:yellow; font-size: 24px;">0</span>
             </p>
 
-            <div id="leaderboardList" class="leaderboard-box" style="margin: 20px 0;">
+            <div id="gameOverLeaderboardList" class="leaderboard-box" style="margin: 20px 0;">
                 Lade Leaderboard...
             </div>