Add spectator mode for late-joining players

- Server: Late joiners are added as spectators instead of players
- Server: Send forced-spectator event only to joining spectator (not broadcast)
- Server: Track spectators separately and move them to players after game ends
- Client: Handle forced-spectator event to show all player boards
- Client: Spectators see all boards equally without main/spectator highlighting
- Client: Mobile view shows scrollable vertical list of all boards for spectators
- Fix: All cleared lines are sent as garbage to each opponent (not randomized)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-20 18:26:48 +00:00
parent 75cd5b0e44
commit a0ab4ff5cd
7 changed files with 281 additions and 21 deletions
+5 -4
View File
@@ -7,7 +7,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css?v=9">
<link rel="stylesheet" href="css/style.css?v=10">
</head>
<body>
<div id="app">
@@ -25,6 +25,7 @@
<div id="lobby-screen" class="screen">
<h2>GLOBAL LOBBY</h2>
<div id="player-list"></div>
<div id="spectator-list"></div>
<button id="ready-btn">READY</button>
</div>
@@ -61,10 +62,10 @@
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="js/network.js?v=4"></script>
<script src="js/network.js?v=5"></script>
<script src="js/game.js?v=4"></script>
<script src="js/renderer.js?v=5"></script>
<script src="js/ui.js?v=4"></script>
<script src="js/app.js?v=4"></script>
<script src="js/ui.js?v=5"></script>
<script src="js/app.js?v=5"></script>
</body>
</html>