diff --git a/templates/quiz_buzzer_multiplayer.html b/templates/quiz_buzzer_multiplayer.html
index 9bab077..1b266fe 100644
--- a/templates/quiz_buzzer_multiplayer.html
+++ b/templates/quiz_buzzer_multiplayer.html
@@ -97,26 +97,30 @@
color: #f44336;
}
.buzzer-grid {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
+ display: flex;
+ justify-content: center;
gap: 20px;
- margin: 30px 0;
+ margin: 20px 0;
+ flex-wrap: wrap;
}
.player-buzzer {
- height: 150px;
- border-radius: 20px;
- background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
- border: 5px solid rgba(244, 67, 54, 0.3);
- font-size: 1.5em;
+ width: 180px;
+ height: 180px;
+ font-size: 1.4em;
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';
- buzzer.innerHTML = `🔴
${players[i - 1].name}`;
+ if (selectBtn) {
+ 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 @@