feat: update playerId handling and improve room rendering logic

public/js/main.js

@@ -44,7 +44,11 @@ function showToast(msg) {
 }
 
 function handleConnected(msg) {
+  console.debug('handleConnected', msg);
   state.playerId = msg.playerId;
+  try {
+    if (msg.playerId) localStorage.setItem('playerId', msg.playerId);
+  } catch {}
   if (msg.sessionId) {
     // Don't clobber an existing session on reconnect; only set if none exists yet.
     const existing = localStorage.getItem('sessionId');
@@ -66,11 +70,42 @@ function handleConnected(msg) {
   if (last && !localStorage.getItem('sessionId')) {
     sendMsg({ type: 'join_room', code: last });
   }
+  // If we already have a room snapshot, re-render now that we know our playerId
+  // to correctly compute host/permissions (e.g., Start button visibility).
+  if (state.room) {
+    try {
+      // If we somehow have a room snapshot already but our playerId doesn't match any player,
+      // and there's only one player, assume it's us (helps when resuming locally without resume).
+      const r = state.room;
+      if (r?.players?.length === 1) {
+        const only = r.players[0];
+        if (only && only.id && only.id !== state.playerId) {
+          state.playerId = only.id;
+          try {
+            localStorage.setItem('playerId', only.id);
+          } catch {}
+        }
+      }
+      renderRoom(state.room);
+    } catch {}
+  }
 }
 
 function handleRoomUpdate(msg) {
   if (msg?.room?.id) cacheLastRoomId(msg.room.id);
-  renderRoom(msg.room);
+  const r = msg.room;
+  try {
+    if (r?.players?.length === 1) {
+      const only = r.players[0];
+      if (only && only.id && only.id !== state.playerId) {
+        state.playerId = only.id;
+        try {
+          localStorage.setItem('playerId', only.id);
+        } catch {}
+      }
+    }
+  } catch {}
+  renderRoom(r);
 }
 
 function handlePlayTrack(msg) {
@@ -192,9 +227,21 @@ function onMessage(ev) {
   switch (msg.type) {
     case 'resume_result':
       if (msg.ok) {
-        if (msg.playerId) state.playerId = msg.playerId;
+        console.debug('handleResumeResult', msg);
+        if (msg.playerId) {
+          state.playerId = msg.playerId;
+          try {
+            localStorage.setItem('playerId', msg.playerId);
+          } catch {}
+        }
         const code = msg.roomId || state.room?.id || localStorage.getItem('lastRoomId');
         if (code) sendMsg({ type: 'join_room', code });
+        // Re-render with the now-known playerId so host UI updates immediately.
+        if (state.room) {
+          try {
+            renderRoom(state.room);
+          } catch {}
+        }
       } else {
         const code = state.room?.id || localStorage.getItem('lastRoomId');
         if (code) sendMsg({ type: 'join_room', code });
@@ -368,6 +415,34 @@ function wireUi() {
       sendMsg({ type: 'submit_answer', guess: { title, artist } });
     });
   }
+  // Dashboard one-time hint
+  const dashboard = document.getElementById('dashboard');
+  const dashboardHint = document.getElementById('dashboardHint');
+  if (dashboard && dashboardHint) {
+    try {
+      const seen = localStorage.getItem('dashboardHintSeen');
+      if (!seen) {
+        dashboardHint.classList.remove('hidden');
+        const hide = () => {
+          dashboardHint.classList.add('hidden');
+          try {
+            localStorage.setItem('dashboardHintSeen', '1');
+          } catch {}
+          dashboard.removeEventListener('toggle', hide);
+          dashboard.removeEventListener('click', hide);
+        };
+        dashboard.addEventListener('toggle', hide);
+        // Also hide on explicit click to cover browsers not firing 'toggle' on details
+        dashboard.addEventListener('click', hide, { once: true });
+        // Auto-hide after 6 seconds if no interaction
+        setTimeout(() => {
+          if (!localStorage.getItem('dashboardHintSeen')) {
+            hide();
+          }
+        }, 6000);
+      }
+    } catch {}
+  }
 }
 
 // boot
@@ -376,13 +451,17 @@ connectWS(onMessage);
 
 // restore name immediately if present
 (() => {
+  // Bootstrap playerId early if we have it from a prior session to avoid null during first render
+  try {
+    const savedPid = localStorage.getItem('playerId');
+    if (savedPid && !state.playerId) {
+      state.playerId = savedPid;
+    }
+  } catch {}
   const saved = localStorage.getItem('playerName');
   if (saved) {
     if ($nameLobby && $nameLobby.value !== saved) {
       $nameLobby.value = saved;
     }
-    if ($nameDisplay) {
-      $nameDisplay.textContent = saved;
-    }
   }
 })();