// Game State let wasmReady = false; let gameStarted = false; let audioMuted = false; // Initialize WASM async function initWASM() { const go = new Go(); try { const result = await WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject); go.run(result.instance); wasmReady = true; // Hide loading screen document.getElementById('loading').style.display = 'none'; console.log('✅ WASM loaded successfully'); // Load initial leaderboard setTimeout(() => { if (window.requestLeaderboard) { window.requestLeaderboard(); } }, 500); } catch (err) { console.error('❌ Failed to load WASM:', err); document.getElementById('loading').innerHTML = '

Fehler beim Laden: ' + err.message + '

'; } } // Menu Navigation function showMainMenu() { hideAllScreens(); document.getElementById('menu').classList.remove('hidden'); } function showCoopMenu() { hideAllScreens(); document.getElementById('coopMenu').classList.remove('hidden'); } function showSettings() { hideAllScreens(); document.getElementById('settingsMenu').classList.remove('hidden'); } function showLeaderboard() { hideAllScreens(); document.getElementById('leaderboardMenu').classList.remove('hidden'); loadLeaderboard(); } function hideAllScreens() { document.querySelectorAll('.overlay-screen').forEach(screen => { screen.classList.add('hidden'); }); } function hideMenu() { document.getElementById('menu').style.display = 'none'; // Canvas sichtbar machen für Gameplay const canvas = document.querySelector('canvas'); if (canvas) { canvas.classList.add('game-active'); } } function showMenu() { document.getElementById('menu').style.display = 'flex'; document.getElementById('menu').classList.remove('hidden'); showMainMenu(); // Canvas verstecken im Menü const canvas = document.querySelector('canvas'); if (canvas) { canvas.classList.remove('game-active'); } } // Game Functions function startSoloGame() { if (!wasmReady) { alert('Spiel wird noch geladen...'); return; } const playerName = document.getElementById('playerName').value || 'ANON'; // Store in localStorage for WASM to read localStorage.setItem('escape_player_name', playerName); localStorage.setItem('escape_game_mode', 'solo'); localStorage.setItem('escape_room_id', ''); // 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, ''); } console.log('🎮 Solo game started:', playerName); } function createRoom() { if (!wasmReady) { alert('Spiel wird noch geladen...'); return; } const playerName = document.getElementById('playerName').value || 'ANON'; const roomID = 'R' + Math.random().toString(36).substr(2, 5).toUpperCase(); const teamName = 'TEAM'; // Store in localStorage localStorage.setItem('escape_player_name', playerName); localStorage.setItem('escape_game_mode', 'coop'); localStorage.setItem('escape_room_id', roomID); localStorage.setItem('escape_team_name', teamName); localStorage.setItem('escape_is_host', 'true'); // Verstecke ALLE Screens inkl. Hauptmenü hideAllScreens(); document.getElementById('menu').style.display = 'none'; // 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 (im Hintergrund) if (window.startGame) { window.startGame('coop', playerName, roomID, teamName, true); } console.log('🎮 Room created:', roomID); } function joinRoom() { if (!wasmReady) { alert('Spiel wird noch geladen...'); return; } const playerName = document.getElementById('playerName').value || 'ANON'; const roomID = document.getElementById('joinRoomCode').value.toUpperCase(); const teamName = document.getElementById('teamNameJoin').value || 'TEAM'; if (!roomID || roomID.length < 4) { alert('Bitte gib einen gültigen Raum-Code ein!'); return; } // Store in localStorage localStorage.setItem('escape_player_name', playerName); localStorage.setItem('escape_game_mode', 'coop'); localStorage.setItem('escape_room_id', roomID); localStorage.setItem('escape_team_name', teamName); localStorage.setItem('escape_is_host', 'false'); // Verstecke ALLE Screens inkl. Hauptmenü hideAllScreens(); document.getElementById('menu').style.display = 'none'; // 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 (im Hintergrund) if (window.startGame) { window.startGame('coop', playerName, roomID, teamName, false); } 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 = '
Warte auf Spieler...
'; return; } list.innerHTML = players.map((player, index) => { const hostBadge = player.is_host ? ' [HOST]' : ''; return `
• ${player.name}${hostBadge}
`; }).join(''); console.log('👥 Lobby players updated:', players.length); } function loadLeaderboard() { const list = document.getElementById('leaderboardList'); list.innerHTML = '
Lädt Leaderboard...
'; // Request leaderboard from WASM if (window.requestLeaderboard) { window.requestLeaderboard(); } // Fallback timeout setTimeout(() => { if (list.innerHTML.includes('Lädt')) { list.innerHTML = '
Keine Daten verfügbar
'; } }, 3000); } // Called by WASM to update leaderboard function updateLeaderboard(entries) { // Update ALL leaderboard displays const list = document.getElementById('leaderboardList'); const startList = document.getElementById('startLeaderboardList'); const gameOverList = document.getElementById('gameOverLeaderboardList'); if (!entries || entries.length === 0) { const emptyMsg = '
Noch keine Einträge
'; if (list) list.innerHTML = emptyMsg; if (startList) startList.innerHTML = emptyMsg; if (gameOverList) gameOverList.innerHTML = emptyMsg; return; } const html = entries.slice(0, 10).map((entry, index) => { const medal = index === 0 ? '🥇' : index === 1 ? '🥈' : index === 2 ? '🥉' : `${index + 1}.`; return `
${medal}
${entry.player_name}
${entry.score}
`; }).join(''); if (list) list.innerHTML = html; if (startList) startList.innerHTML = html; if (gameOverList) gameOverList.innerHTML = html; console.log('📊 Leaderboard updated with', entries.length, 'entries'); } // Audio Toggle function toggleAudio() { audioMuted = !audioMuted; const btn = document.getElementById('mute-btn'); if (audioMuted) { btn.textContent = '🔇'; if (window.setMusicVolume) window.setMusicVolume(0); if (window.setSFXVolume) window.setSFXVolume(0); } else { btn.textContent = '🔊'; const musicVol = parseInt(localStorage.getItem('escape_music_volume') || 70) / 100; const sfxVol = parseInt(localStorage.getItem('escape_sfx_volume') || 70) / 100; if (window.setMusicVolume) window.setMusicVolume(musicVol); if (window.setSFXVolume) window.setSFXVolume(sfxVol); } } // Settings Volume Sliders document.addEventListener('DOMContentLoaded', () => { const musicSlider = document.getElementById('musicVolume'); const sfxSlider = document.getElementById('sfxVolume'); const musicValue = document.getElementById('musicValue'); const sfxValue = document.getElementById('sfxValue'); if (musicSlider) { musicSlider.addEventListener('input', (e) => { const value = e.target.value; musicValue.textContent = value + '%'; localStorage.setItem('escape_music_volume', value); if (window.setMusicVolume && !audioMuted) { window.setMusicVolume(value / 100); } }); // Load saved value const savedMusic = localStorage.getItem('escape_music_volume') || 70; musicSlider.value = savedMusic; musicValue.textContent = savedMusic + '%'; } if (sfxSlider) { sfxSlider.addEventListener('input', (e) => { const value = e.target.value; sfxValue.textContent = value + '%'; localStorage.setItem('escape_sfx_volume', value); if (window.setSFXVolume && !audioMuted) { window.setSFXVolume(value / 100); } }); // Load saved value const savedSFX = localStorage.getItem('escape_sfx_volume') || 70; sfxSlider.value = savedSFX; sfxValue.textContent = savedSFX + '%'; } // Load saved player name const savedName = localStorage.getItem('escape_player_name'); if (savedName) { document.getElementById('playerName').value = savedName; } // Load local highscore const highscore = localStorage.getItem('escape_local_highscore') || 0; const hsElement = document.getElementById('localHighscore'); if (hsElement) { hsElement.textContent = highscore; } }); // Keyboard shortcuts document.addEventListener('keydown', (e) => { // ESC to show menu (only if game is started) if (e.key === 'Escape' && gameStarted) { showMenu(); gameStarted = false; } }); // Show Game Over Screen (called by WASM) function showGameOver(score) { hideAllScreens(); document.getElementById('gameOverScreen').classList.remove('hidden'); document.getElementById('finalScore').textContent = score; // Update local highscore const currentHS = parseInt(localStorage.getItem('escape_local_highscore') || 0); if (score > currentHS) { localStorage.setItem('escape_local_highscore', score); } // Request leaderboard if (window.requestLeaderboard) { window.requestLeaderboard(); } console.log('💀 Game Over! Score:', score); } // Export functions for WASM to call window.showMenu = showMenu; window.hideMenu = hideMenu; window.updateLeaderboard = updateLeaderboard; window.showGameOver = showGameOver; // Initialize on load initWASM(); console.log('🎮 Game.js loaded - Retro Edition');