Add unready toggle in lobby

- Server: Handle unready event to set player ready state to false
- Client: Ready button toggles between READY and UNREADY
- Client: Unready sends unready socket event to server

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

public/index.html

@@ -62,10 +62,10 @@
   </div>
 
   <script src="/socket.io/socket.io.js"></script>
-  <script src="js/network.js?v=5"></script>
+  <script src="js/network.js?v=6"></script>
   <script src="js/game.js?v=4"></script>
   <script src="js/renderer.js?v=5"></script>
-  <script src="js/ui.js?v=5"></script>
+  <script src="js/ui.js?v=6"></script>
   <script src="js/app.js?v=5"></script>
 </body>
 </html>

public/js/network.js

@@ -110,6 +110,11 @@ class NetworkManager {
     this.socket.emit('ready');
   }
 
+  unready() {
+    if (!this.socket) return;
+    this.socket.emit('unready');
+  }
+
   sendMove(direction) {
     if (!this.socket || !this.currentPlayerId) return;
     this.socket.emit('player-move', { playerId: this.currentPlayerId, direction });

public/js/ui.js

@@ -62,9 +62,15 @@ class UIManager {
   }
 
   handleReady() {
-    network.ready();
-    this.buttons.ready.textContent = 'READY!';
-    this.buttons.ready.disabled = true;
+    if (this.buttons.ready.textContent === 'READY') {
+      network.ready();
+      this.buttons.ready.textContent = 'UNREADY';
+      this.buttons.ready.disabled = false;
+    } else {
+      network.unready();
+      this.buttons.ready.textContent = 'READY';
+      this.buttons.ready.disabled = false;
+    }
   }
 
   handleLeave() {

server/index.js

@@ -118,6 +118,19 @@ io.on('connection', (socket) => {
     }
   });
 
+  socket.on('unready', () => {
+    const player = lobby.players.get(socket.id);
+    if (!player) return;
+
+    player.ready = false;
+
+    // Broadcast only to players in the lobby room
+    io.to(LOBBY_ROOM).emit('player-joined', {
+      player: { id: player.id, name: player.name, ready: player.ready },
+      players: getPlayersList()
+    });
+  });
+
   socket.on('player-move', ({ playerId, direction }) => {
     if (!lobby.gameStarted) return;
 
@@ -367,14 +380,12 @@ function clearRows(player) {
 }
 
 function sendGarbage(sender, rowsCleared) {
-  const garbageRows = rowsCleared >= 4 ? rowsCleared : Math.max(1, rowsCleared - 1);
+  // Number of garbage rows equals number of lines cleared
   const opponents = Array.from(lobby.players.values()).filter(p => p.id !== sender.id && !p.eliminated);
   if (opponents.length === 0) return;
-  // Send all garbage rows to each opponent
-  for (const opponent of opponents) {
-    for (let i = 0; i < garbageRows; i++) {
-      addGarbageToPlayer(opponent);
-    }
+  for (let i = 0; i < rowsCleared; i++) {
+    const target = opponents[Math.floor(Math.random() * opponents.length)];
+    addGarbageToPlayer(target);
   }
 }