modified: templates/quiz_buzzer.html

templates/quiz_buzzer.html

@@ -244,6 +244,16 @@
         setCorrectAnswer();
       });
 
+      player.addListener('player_state_changed', state => {
+        if (!state) return;
+        
+        // Wenn Musik anfängt zu spielen und Timer noch nicht gestartet wurde
+        if (!state.paused && gameStarted && !startTime) {
+          console.log('Music started playing, starting timer now');
+          startBuzzerTimer();
+        }
+      });
+
       player.addListener('not_ready', ({ device_id }) => {
         console.log('Device ID has gone offline', device_id);
       });
@@ -301,8 +311,10 @@
         // Erster Klick: Starte Spiel
         gameStarted = true;
         document.getElementById('buzzerButton').innerHTML = '🔴<br>BUZZ!';
+        document.getElementById('buzzerButton').style.background = 'linear-gradient(135deg, #666 0%, #444 100%)';
+        document.getElementById('buzzerButton').style.cursor = 'wait';
         
-        // Starte Musik
+        // Starte Musik - Timer startet automatisch wenn Musik wirklich abgespielt wird
         const device_id = window.deviceId;
         const startPosition = getOption('startPosition', 'start');
         let position_ms = 0;
@@ -314,8 +326,9 @@
         fetch(`/play_track?device_id=${device_id}&track_uri={{ track.uri }}&position_ms=${position_ms}`, { method: 'POST' })
           .then(response => response.json())
           .then(() => {
-            // Starte Timer gleichzeitig mit Musik
-            startBuzzerTimer();
+            console.log('Play command sent');
+            document.getElementById('buzzerButton').style.background = 'linear-gradient(135deg, #f44336 0%, #d32f2f 100%)';
+            document.getElementById('buzzerButton').style.cursor = 'pointer';
           })
           .catch(error => console.error('Error starting playback:', error));