modified: templates/quiz_buzzer_multiplayer.html

templates/quiz_buzzer_multiplayer.html

@@ -97,26 +97,30 @@
       color: #f44336;
     }
     .buzzer-grid {
-      display: grid;
+      display: flex;
-      grid-template-columns: repeat(2, 1fr);
+      justify-content: center;
       gap: 20px;
-      margin: 30px 0;
+      margin: 20px 0;
+      flex-wrap: wrap;
     }
     .player-buzzer {
-      height: 150px;
+      width: 180px;
-      border-radius: 20px;
+      height: 180px;
-      background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
+      font-size: 1.4em;
-      border: 5px solid rgba(244, 67, 54, 0.3);
-      font-size: 1.5em;
       font-weight: bold;
+      text-transform: uppercase;
+      letter-spacing: 2px;
+      background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
       color: white;
+      border: 3px solid rgba(244, 67, 54, 0.5);
+      border-radius: 50%;
       cursor: pointer;
-      transition: all 0.2s ease;
+      transition: all 0.3s ease;
       box-shadow: 0 10px 40px rgba(244, 67, 54, 0.5);
       display: flex;
-      flex-direction: column;
       align-items: center;
       justify-content: center;
+      text-align: center;
     }
     .player-buzzer:hover:not(.disabled) {
       transform: scale(1.05);
@@ -132,7 +136,8 @@
       opacity: 0.5;
     }
     .player-buzzer.start {
-      grid-column: 1 / -1;
+      width: 200px;
+      height: 200px;
       background: linear-gradient(135deg, #1DB954 0%, #1ed760 100%);
       border-color: rgba(29, 185, 84, 0.3);
       box-shadow: 0 10px 40px rgba(29, 185, 84, 0.5);
@@ -312,16 +317,20 @@
       // Update Spieler-Namen und verstecke inaktive Spieler
       for (let i = 1; i <= 4; i++) {
         const card = document.getElementById(`player${i}`);
-        const buzzer = document.getElementById(`buzzer${i}`);
+        const selectBtn = document.getElementById(`selectPlayer${i}`);
         
         if (i <= teamCount) {
           card.querySelector('.player-name').textContent = players[i - 1].name;
           card.style.display = 'block';
-          buzzer.style.display = 'flex';
+          if (selectBtn) {
-          buzzer.innerHTML = `🔴<br>${players[i - 1].name}`;
+            selectBtn.textContent = players[i - 1].name;
+            selectBtn.style.display = 'block';
+          }
         } else {
           card.style.display = 'none';
-          buzzer.style.display = 'none';
+          if (selectBtn) {
+            selectBtn.style.display = 'none';
+          }
         }
       }
     }
@@ -412,8 +421,16 @@
       buzzTime = Date.now();
       const elapsed = (buzzTime - startTime) / 1000;
       
+      // Stoppe Timer-Updates
       cancelAnimationFrame(buzzTimer);
       
+      // Friere Timer-Anzeige ein
+      const timerDisplay = document.getElementById('buzzerTimer');
+      const pointsDisplay = document.getElementById('pointsDisplay');
+      timerDisplay.textContent = elapsed.toFixed(2) + 's';
+      const points = calculatePoints(elapsed);
+      pointsDisplay.textContent = points + ' Punkte';
+      
       if (window.spotifyPlayer) {
         window.spotifyPlayer.pause();
       }
@@ -421,7 +438,7 @@
       // Zeige Spielerauswahl
       document.getElementById('playerSelection').style.display = 'block';
       document.getElementById('currentPlayer').textContent = 'Wer hat gebuzzert?';
-      pendingPoints = calculatePoints(elapsed);
+      pendingPoints = points;
     }
 
     function selectPlayer(playerId) {
@@ -601,7 +618,8 @@
         window.spotifyPlayer.resume();
       }
       
-      // Timer weiterlaufen lassen
+      // Timer weiterlaufen lassen (von der aktuellen Zeit)
+      // Keine Anpassung der startTime nötig, da die Zeit einfach weiterläuft
       buzzTimer = requestAnimationFrame(updateTimer);
     }
 
@@ -682,24 +700,16 @@
     <div id="playerSelection" style="display:none; text-align:center; margin:30px 0;">
       <h3 style="margin-bottom:20px; color:#1DB954;">Wer hat gebuzzert?</h3>
       <div class="buzzer-grid">
-        <button class="player-buzzer" id="selectPlayer1" onclick="selectPlayer(1)">
+        <button class="player-buzzer" id="selectPlayer1" onclick="selectPlayer(1)">Spieler 1</button>
-          Spieler 1
+        <button class="player-buzzer" id="selectPlayer2" onclick="selectPlayer(2)">Spieler 2</button>
-        </button>
+        <button class="player-buzzer" id="selectPlayer3" onclick="selectPlayer(3)">Spieler 3</button>
-        <button class="player-buzzer" id="selectPlayer2" onclick="selectPlayer(2)">
+        <button class="player-buzzer" id="selectPlayer4" onclick="selectPlayer(4)">Spieler 4</button>
-          Spieler 2
-        </button>
-        <button class="player-buzzer" id="selectPlayer3" onclick="selectPlayer(3)">
-          Spieler 3
-        </button>
-        <button class="player-buzzer" id="selectPlayer4" onclick="selectPlayer(4)">
-          Spieler 4
-        </button>
       </div>
     </div>
     
     <!-- START Button -->
     <div style="text-align:center; margin:30px 0;">
-      <button class="player-buzzer start" id="startButton" onclick="startGame()" style="width:300px; height:200px; font-size:2em;">
+      <button class="player-buzzer start" id="startButton" onclick="startGame()">
         ▶️<br>START
       </button>
     </div>