modified: templates/quiz_buzzer.html

templates/quiz_buzzer.html

@@ -220,6 +220,7 @@
     let gracePeriod = {{ grace_period | default(5) }}; // Sekunden
     let decayRate = {{ decay_rate | default(50) }}; // Punkte pro Sekunde nach Grace Period
     let hasBuzzed = false;
+    let gameStarted = false;
 
     window.onSpotifyWebPlaybackSDKReady = () => {
       const token = '{{ access_token }}';
@@ -237,20 +238,10 @@
       player.addListener('ready', ({ device_id }) => {
         console.log('Ready with Device ID', device_id);
         document.getElementById('device_id').value = device_id;
+        window.deviceId = device_id;
         
-        const startPosition = getOption('startPosition', 'start');
+        // Musik wird NICHT automatisch gestartet
-        let position_ms = 0;
-        if (startPosition === 'random') {
-          const duration = {{ track.duration_ms if track.duration_ms else 180000 }};
-          position_ms = Math.floor(Math.random() * (duration - 30000));
-        }
-        
-        fetch(`/play_track?device_id=${device_id}&track_uri={{ track.uri }}&position_ms=${position_ms}`, { method: 'POST' })
-          .then(response => response.json())
-          .catch(error => console.error('Error starting playback:', error));
-
         setCorrectAnswer();
-        startBuzzerTimer();
       });
 
       player.addListener('not_ready', ({ device_id }) => {
@@ -306,6 +297,32 @@
     }
 
     function buzz() {
+      if (!gameStarted) {
+        // Erster Klick: Starte Spiel
+        gameStarted = true;
+        document.getElementById('buzzerButton').innerHTML = '🔴<br>BUZZ!';
+        
+        // Starte Musik
+        const device_id = window.deviceId;
+        const startPosition = getOption('startPosition', 'start');
+        let position_ms = 0;
+        if (startPosition === 'random') {
+          const duration = {{ track.duration_ms if track.duration_ms else 180000 }};
+          position_ms = Math.floor(Math.random() * (duration - 30000));
+        }
+        
+        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();
+          })
+          .catch(error => console.error('Error starting playback:', error));
+        
+        return;
+      }
+      
+      // Ab hier: normaler Buzzer-Klick
       if (hasBuzzed) return;
       
       hasBuzzed = true;
@@ -503,7 +520,7 @@
     
     <!-- Buzzer Button -->
     <button class="buzzer-button" id="buzzerButton" onclick="buzz()">
-      🔴<br>BUZZ!
+      ▶️<br>START
     </button>
     
     <!-- Answer Section (hidden until buzzed) -->