modified: templates/quiz_buzzer_multiplayer.html

templates/quiz_buzzer_multiplayer.html

@@ -233,6 +233,32 @@
       margin: 20px 0;
       font-weight: bold;
     }
+    .answer-timer-container {
+      margin: 15px auto 5px auto;
+      max-width: 400px;
+      text-align: center;
+      display: none;
+    }
+    .answer-timer-label {
+      font-size: 1.3em;
+      font-weight: bold;
+      color: #e0e0e0;
+      margin-bottom: 8px;
+    }
+    .answer-timer-bar-bg {
+      width: 100%;
+      height: 12px;
+      background: rgba(255,255,255,0.1);
+      border-radius: 6px;
+      overflow: hidden;
+    }
+    .answer-timer-bar {
+      height: 100%;
+      width: 0%;
+      background: linear-gradient(90deg, #1DB954, #FFA500, #f44336);
+      border-radius: 6px;
+      transition: background 0.5s;
+    }
   </style>
   <script>
     let allTracks = {{ all_tracks|tojson }};
@@ -248,9 +274,43 @@
     let decayRate = parseInt(localStorage.getItem('buzzer_decay_rate')) || 50;
     let gameStarted = false;
     let currentBuzzer = null;
-    let buzzedPlayers = []; // Liste der Spieler die schon gebuzzert haben
-    let canBuzz = false; // Kann man buzzern?
-    let pendingPoints = 0; // Punkte die noch nicht gezählt wurden
+    let buzzedPlayers = [];
+    let canBuzz = false;
+    let pendingPoints = 0;
+
+    // Antwort-Timer
+    let answerTimerRAF = null;
+    let answerTimerStart = null;
+    const ANSWER_TIME_LIMIT = 30; // Sekunden bis Balken voll ist
+
+    function startAnswerTimer() {
+      answerTimerStart = Date.now();
+      const container = document.getElementById('answerTimerContainer');
+      const display = document.getElementById('answerTimerDisplay');
+      const bar = document.getElementById('answerTimerBar');
+      container.style.display = 'block';
+      display.textContent = '0.0s';
+      bar.style.width = '0%';
+
+      function tick() {
+        const elapsed = (Date.now() - answerTimerStart) / 1000;
+        display.textContent = elapsed.toFixed(1) + 's';
+        const pct = Math.min(100, (elapsed / ANSWER_TIME_LIMIT) * 100);
+        bar.style.width = pct + '%';
+        answerTimerRAF = requestAnimationFrame(tick);
+      }
+      answerTimerRAF = requestAnimationFrame(tick);
+    }
+
+    function stopAnswerTimer() {
+      if (answerTimerRAF) {
+        cancelAnimationFrame(answerTimerRAF);
+        answerTimerRAF = null;
+      }
+      document.getElementById('answerTimerContainer').style.display = 'none';
+      document.getElementById('answerTimerDisplay').textContent = '0.0s';
+      document.getElementById('answerTimerBar').style.width = '0%';
+    }
     
     // Lade Team-Namen und Anzahl
     const teamCount = parseInt(localStorage.getItem('team_count')) || 4;
@@ -530,6 +590,7 @@
       // Zeige Antwortfeld direkt (keine Spielerauswahl)
       document.getElementById('answerSection').classList.add('active');
       window.earnedPoints = pendingPoints;
+      startAnswerTimer();
     }
 
     function selectPlayer(playerId) {
@@ -549,10 +610,7 @@
       document.getElementById('playerSelection').style.display = 'none';
       document.getElementById('answerSection').classList.add('active');
       window.earnedPoints = pendingPoints;
-    }
-
-    function buzz(playerId) {
-      selectPlayer(playerId);
+      startAnswerTimer();
     }
 
     function setCorrectAnswer() {
@@ -623,6 +681,7 @@
       // Disable input während Prüfung
       document.getElementById('answerInput').disabled = true;
       document.querySelector('button[onclick="checkAnswer()"]').disabled = true;
+      stopAnswerTimer();
       
       fetch('/check_answer_buzzer', {
         method: 'POST',
@@ -712,6 +771,7 @@
       
       currentBuzzer = null;
       canBuzz = true;
+      stopAnswerTimer();
       
       // Berechne Pausenzeit und passe startTime an
       const pauseDuration = Date.now() - window.pausedAt;
@@ -731,6 +791,7 @@
       players[currentBuzzer - 1].score += pendingPoints;
       updateScoreboard();
       applyScoreToServer(currentBuzzer, pendingPoints);
+      stopAnswerTimer();
       
       const resultContainer = document.getElementById('resultContainer');
       resultContainer.innerHTML = `
@@ -832,6 +893,14 @@
       <input type="text" id="answerInput" placeholder="{{ translations['input_title'] }}" oninput="searchTracks()">
       <button class="btn" onclick="checkAnswer()">{{ translations['answer_button'] if translations.get('answer_button') else 'Submit' }}</button>
       
+      <!-- Antwort-Timer -->
+      <div class="answer-timer-container" id="answerTimerContainer">
+        <div class="answer-timer-label">⏱️ <span id="answerTimerDisplay">0.0s</span></div>
+        <div class="answer-timer-bar-bg">
+          <div class="answer-timer-bar" id="answerTimerBar"></div>
+        </div>
+      </div>
+
       <div id="searchResults" class="search-results"></div>
       <div id="resultContainer" class="result-container"></div>