feat: enforce playlist selection before starting the game and update playlist handling

public/js/render.js

@@ -107,8 +107,9 @@ export function renderRoom(room) {
   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);
+  const hasPlaylist = !!room.state.playlist;
 
-  const canStart = room.state.status === 'lobby' && isHost && allReady;
+  const canStart = room.state.status === 'lobby' && isHost && allReady && hasPlaylist;
 
   if ($startGame) $startGame.classList.toggle('hidden', !canStart);
 
@@ -121,18 +122,52 @@ export function renderRoom(room) {
     $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') {
+    // Populate playlist dropdown if not already populated with actual playlists
+    const needsPopulation =
+      $playlistSelect.options.length === 0 ||
+      ($playlistSelect.options.length === 1 && $playlistSelect.options[0].value === 'default');
+
+    if (needsPopulation) {
       $playlistSelect.innerHTML = '';
+      // Add a placeholder option
+      const placeholderOption = document.createElement('option');
+      placeholderOption.value = '';
+      placeholderOption.textContent = '-- Bitte Playlist auswählen --';
+      placeholderOption.disabled = true;
+      placeholderOption.selected = true; // Make it selected by default
+      $playlistSelect.appendChild(placeholderOption);
+
       state.playlists.forEach((playlist) => {
         const option = document.createElement('option');
         option.value = playlist.id;
         option.textContent = `${playlist.name} (${playlist.trackCount} Tracks)`;
         $playlistSelect.appendChild(option);
       });
+
+      // Mark that we've populated the dropdown
+      state.playlistsPopulated = true;
+
+      // Auto-select first playlist if host and in lobby (only on first population)
+      if (
+        !room.state.playlist &&
+        isHost &&
+        room.state.status === 'lobby' &&
+        state.playlists.length > 0
+      ) {
+        // Use setTimeout to ensure the change event is properly triggered after render
+        setTimeout(() => {
+          const firstPlaylistId = state.playlists[0].id;
+          $playlistSelect.value = firstPlaylistId;
+          // Trigger the change event to send to server
+          $playlistSelect.dispatchEvent(new Event('change'));
+        }, 100);
+      }
+    }
+
+    // Set selected playlist based on room state
+    if (room.state.playlist) {
+      $playlistSelect.value = room.state.playlist;
     }
-    // Set selected playlist
-    $playlistSelect.value = room.state.playlist || 'default';
   }
   if ($currentPlaylist) {
     $currentPlaylist.textContent = room.state.playlist || 'default';

public/js/ui.js

@@ -121,7 +121,14 @@ export function wireUi() {
     $room.classList.add('hidden');
   });
 
-  wire($startGame, 'click', () => sendMsg({ type: 'start_game' }));
+  wire($startGame, 'click', () => {
+    // Validate playlist selection before starting
+    if (!state.room?.state?.playlist) {
+      showToast('⚠️ Bitte wähle zuerst eine Playlist aus!');
+      return;
+    }
+    sendMsg({ type: 'start_game' });
+  });
 
   wire($readyChk, 'change', (e) => {
     const val = !!e.target.checked;