ZB-Server/EscapeFromTeacher
Private
Public Access
1
0
Fork 0
Code Activity

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.

Browse Source
This commit is contained in:
Sebastian Unterschütz
2026-01-04 01:56:31 +01:00
parent 3232ee7c2f
commit 41d15c60d3
7 changed files with 209 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
cmd/client/web/index.html
View File

@@ -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>