feat: update playerId handling and improve room rendering logic

public/js/render.js

@@ -7,7 +7,6 @@ import {
   $guesser,
   $lobby,
   $mediaControls,
-  $nameDisplay,
   $nextArea,
   $np,
   $placeArea,
@@ -37,9 +36,18 @@ export function renderRoom(room) {
   $roomId.textContent = room.id;
   $status.textContent = room.state.status;
   $guesser.textContent = shortName(room.state.currentGuesser);
+  // If our local playerId doesn't match any player in the snapshot, but there's
+  // exactly one player, we must be that player (since only room members get updates).
+  if (state.playerId && !room.players.some((p) => p.id === state.playerId)) {
+    if (room.players.length === 1) {
+      const sole = room.players[0];
+      state.playerId = sole.id;
+      try {
+        localStorage.setItem('playerId', sole.id);
+      } catch {}
+    }
+  }
   const me = room.players.find((p) => p.id === state.playerId);
-  if ($nameDisplay)
-    $nameDisplay.textContent = me?.name || localStorage.getItem('playerName') || '-';
   if ($dashboardList) {
     $dashboardList.innerHTML = room.players
       .map((p) => {
@@ -96,16 +104,32 @@ export function renderRoom(room) {
     }
     $readyChk.parentElement.classList.toggle('hidden', room.state.status !== 'lobby');
   }
+
+  console.log('room host id:', room.hostId, 'my id:', state.playerId);
   const isHost = state.playerId === room.hostId;
   const activePlayers = room.players.filter((p) => !p.spectator && p.connected);
   const allReady = activePlayers.length > 0 && activePlayers.every((p) => p.ready);
+
+  console.log('room state status:', room.state.status, 'host:', isHost, 'allReady:', allReady);
   const canStart = room.state.status === 'lobby' && isHost && allReady;
+
+  console.log(
+    `Rendering room ${room.id}, players: ${room.players.length}, active: ${activePlayers.length}, ready: ${allReady}, isHost: ${isHost}`
+  );
+  console.log('Me:', me);
+  console.log('Pending ready:', state.pendingReady);
+  console.log('Room state:', room.state);
+  console.log('My timeline:', myTl);
+  console.log('CanStart:', canStart);
+
   if ($startGame) $startGame.classList.toggle('hidden', !canStart);
+
   const isMyTurn =
     room.state.status === 'playing' &&
     room.state.phase === 'guess' &&
     room.state.currentGuesser === state.playerId &&
     room.state.currentTrack;
+
   const canGuess = isMyTurn;
   // Media controls (play/pause) only for current guesser while guessing and a track is active
   if ($mediaControls) $mediaControls.classList.toggle('hidden', !isMyTurn);