Simon/quizify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modified: templates/quiz_buzzer_multiplayer.html

Browse Source
This commit is contained in:
Simon
2025-11-15 18:22:41 +01:00
parent c488e5c4bc
commit f6d080a940
1 changed files with 40 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
templates/quiz_buzzer_multiplayer.html
View File

@@ -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 = `🔴<br>${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 @@
<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)">
Spieler 1
</button>
<button class="player-buzzer" id="selectPlayer2" onclick="selectPlayer(2)">
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>
<button class="player-buzzer" id="selectPlayer1" onclick="selectPlayer(1)">Spieler 1</button>
<button class="player-buzzer" id="selectPlayer2" onclick="selectPlayer(2)">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>