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

modified: app.py

Browse Source 
modified:   templates/playerselect.html
	modified:   templates/quiz_buzzer_multiplayer.html
	modified:   templates/team_setup.html
This commit is contained in:
Simon
2025-11-15 02:18:34 +01:00
parent a8b0efb0ff
commit b30cef5c85
4 changed files with 191 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
templates/quiz_buzzer_multiplayer.html
View File

@@ -98,20 +98,10 @@
}
.buzzer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 15px;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin: 30px 0;
}
@media (min-width: 768px) {
.buzzer-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.buzzer-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.player-buzzer {
height: 150px;
border-radius: 20px;
@@ -142,11 +132,10 @@
opacity: 0.5;
}
.player-buzzer.start {
grid-column: 1 / -1;
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);
width: 100%;
grid-column: 1 / -1;
}
.player-buzzer.start:hover {
box-shadow: 0 15px 50px rgba(29, 185, 84, 0.7);
@@ -255,25 +244,17 @@
let gameStarted = false;
let currentBuzzer = null;
// Initialisierung verschoben nach unten
let teamCount = 0;
let players = [];
let playerScoresData = {{ player_scores|tojson }} || [0, 0, 0, 0, 0, 0];
// Lade Team-Namen und Anzahl
const teamCount = parseInt(localStorage.getItem('team_count')) || 4;
const teamNames = JSON.parse(localStorage.getItem('team_names') || '["Spieler 1", "Spieler 2", "Spieler 3", "Spieler 4"]');
function initializePlayers() {
teamCount = parseInt(localStorage.getItem('team_count')) || 4;
players = [];
for (let i = 1; i <= teamCount; i++) {
const teamName = localStorage.getItem(`team_${i}_name`) || `Team ${i}`;
const scoreIndex = i - 1;
const score = playerScoresData[scoreIndex] || 0;
players.push({ id: i, name: teamName, score: score });
}
console.log('Loaded teams:', players);
console.log('Team count:', teamCount);
}
// Spieler-Daten
let players = [
{ id: 1, name: teamNames[0] || 'Spieler 1', score: {{ player_scores[0] if player_scores else 0 }} },
{ id: 2, name: teamNames[1] || 'Spieler 2', score: {{ player_scores[1] if player_scores else 0 }} },
{ id: 3, name: teamNames[2] || 'Spieler 3', score: {{ player_scores[2] if player_scores else 0 }} },
{ id: 4, name: teamNames[3] || 'Spieler 4', score: {{ player_scores[3] if player_scores else 0 }} }
];
window.onSpotifyWebPlaybackSDKReady = () => {
const token = '{{ access_token }}';
@@ -292,13 +273,9 @@
console.log('Ready with Device ID', device_id);
document.getElementById('device_id').value = device_id;
window.deviceId = device_id;
setCorrectAnswer();
// Aktualisiere Scoreboard falls schon initialisiert
if (players.length > 0) {
updateScoreboard();
}
initializePlayers();
updateScoreboard();
});
player.addListener('player_state_changed', state => {
@@ -320,6 +297,24 @@
window.spotifyPlayer = player;
};
function initializePlayers() {
// 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}`);
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}`;
} else {
card.style.display = 'none';
buzzer.style.display = 'none';
}
}
}
function updateScoreboard() {
players.forEach((player, index) => {
const card = document.getElementById(`player${player.id}`);
@@ -349,10 +344,10 @@
.then(() => {
console.log('Play command sent');
document.getElementById('startButton').style.display = 'none';
// Aktiviere alle Buzzer
players.forEach(player => {
document.getElementById(`buzzer${player.id}`).classList.remove('disabled');
});
// Aktiviere Buzzer
for (let i = 1; i <= 4; i++) {
document.getElementById(`buzzer${i}`).classList.remove('disabled');
}
})
.catch(error => console.error('Error starting playback:', error));
}
@@ -418,9 +413,9 @@
document.getElementById('currentPlayer').textContent = `${players[playerId - 1].name} hat gebuzzert!`;
// Deaktiviere alle Buzzer
players.forEach(player => {
document.getElementById(`buzzer${player.id}`).classList.add('disabled');
});
for (let i = 1; i <= 4; i++) {
document.getElementById(`buzzer${i}`).classList.add('disabled');
}
document.getElementById('answerSection').classList.add('active');
window.earnedPoints = calculatePoints(elapsed);
@@ -556,77 +551,35 @@
}
window.onload = function() {
console.log('Page loaded, initializing...');
document.getElementById('startPosition').value = getOption('startPosition', 'start');
maxPoints = parseInt(localStorage.getItem('buzzer_max_points')) || 1000;
gracePeriod = parseInt(localStorage.getItem('buzzer_grace_period')) || 5;
decayRate = parseInt(localStorage.getItem('buzzer_decay_rate')) || 50;
document.getElementById('pointsDisplay').textContent = maxPoints + ' Punkte';
// Initialisiere Spieler
initializePlayers();
// Dynamisches Scoreboard erstellen
createScoreboard();
// Dynamische Buzzer-Buttons erstellen
createBuzzerButtons();
console.log('Initialization complete');
};
function createScoreboard() {
console.log('Creating scoreboard for', players.length, 'players');
const scoreboard = document.getElementById('scoreboard');
if (!scoreboard) {
console.error('Scoreboard element not found!');
return;
}
scoreboard.innerHTML = '';
players.forEach(player => {
const card = document.createElement('div');
card.className = 'player-card';
card.id = `player${player.id}`;
card.innerHTML = `
<div class="player-name">${player.name}</div>
<div class="player-score">${player.score}</div>
`;
scoreboard.appendChild(card);
});
console.log('Scoreboard created');
}
function createBuzzerButtons() {
console.log('Creating buzzer buttons for', players.length, 'players');
const grid = document.getElementById('buzzerGrid');
if (!grid) {
console.error('Buzzer grid element not found!');
return;
}
grid.innerHTML = `
<button class="player-buzzer start" id="startButton" onclick="startGame()">
▶️<br>START
</button>
`;
players.forEach(player => {
const button = document.createElement('button');
button.className = 'player-buzzer disabled';
button.id = `buzzer${player.id}`;
button.onclick = () => buzz(player.id);
button.innerHTML = `🔴<br>${player.name}`;
grid.appendChild(button);
});
console.log('Buzzer buttons created');
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="quiz-container">
<!-- Scoreboard -->
<div class="scoreboard" id="scoreboard">
<!-- Dynamisch generiert via JavaScript -->
<div class="scoreboard">
<div class="player-card" id="player1">
<div class="player-name">Spieler 1</div>
<div class="player-score">0</div>
</div>
<div class="player-card" id="player2">
<div class="player-name">Spieler 2</div>
<div class="player-score">0</div>
</div>
<div class="player-card" id="player3">
<div class="player-name">Spieler 3</div>
<div class="player-score">0</div>
</div>
<div class="player-card" id="player4">
<div class="player-name">Spieler 4</div>
<div class="player-score">0</div>
</div>
</div>
<input type="hidden" id="device_id" value="">
@@ -640,8 +593,22 @@
<div class="current-player" id="currentPlayer">Drücke START um zu beginnen</div>
<!-- Buzzer Buttons -->
<div class="buzzer-grid" id="buzzerGrid">
<!-- Dynamisch generiert via JavaScript -->
<div class="buzzer-grid">
<button class="player-buzzer start" id="startButton" onclick="startGame()">
▶️<br>START
</button>
<button class="player-buzzer disabled" id="buzzer1" onclick="buzz(1)">
🔴<br>Spieler 1
</button>
<button class="player-buzzer disabled" id="buzzer2" onclick="buzz(2)">
🔴<br>Spieler 2
</button>
<button class="player-buzzer disabled" id="buzzer3" onclick="buzz(3)">
🔴<br>Spieler 3
</button>
<button class="player-buzzer disabled" id="buzzer4" onclick="buzz(4)">
🔴<br>Spieler 4
</button>
</div>
<!-- Answer Section -->