feat: added playlist option

public/js/render.js

@@ -112,6 +112,35 @@ export function renderRoom(room) {
 
   if ($startGame) $startGame.classList.toggle('hidden', !canStart);
 
+  // Update playlist display
+  const $playlistSection = document.getElementById('playlistSection');
+  const $playlistSelect = document.getElementById('playlistSelect');
+  const $currentPlaylist = document.getElementById('currentPlaylist');
+  const $playlistInfo = document.getElementById('playlistInfo');
+  if ($playlistSection) {
+    $playlistSection.classList.toggle('hidden', room.state.status !== 'lobby' || !isHost);
+  }
+  if ($playlistSelect && state.playlists && state.playlists.length > 0) {
+    // Populate playlist dropdown if not already populated
+    if ($playlistSelect.options.length === 1 && $playlistSelect.options[0].value === 'default') {
+      $playlistSelect.innerHTML = '';
+      state.playlists.forEach((playlist) => {
+        const option = document.createElement('option');
+        option.value = playlist.id;
+        option.textContent = `${playlist.name} (${playlist.trackCount} Tracks)`;
+        $playlistSelect.appendChild(option);
+      });
+    }
+    // Set selected playlist
+    $playlistSelect.value = room.state.playlist || 'default';
+  }
+  if ($currentPlaylist) {
+    $currentPlaylist.textContent = room.state.playlist || 'default';
+  }
+  if ($playlistInfo) {
+    $playlistInfo.classList.toggle('hidden', room.state.status === 'lobby');
+  }
+
   const isMyTurn =
     room.state.status === 'playing' &&
     room.state.phase === 'guess' &&