diff --git a/app.py b/app.py index 7e23934..0f6ca05 100644 --- a/app.py +++ b/app.py @@ -196,13 +196,8 @@ def quiz(playlist_id): # Wähle das passende Template if buzzer_mode == '1' and local_multiplayer == '1': template_name = "quiz_buzzer_multiplayer.html" - # Initialisiere Spieler-Scores basierend auf gespeicherter Team-Anzahl - # Default: 6 Teams (Maximum), Frontend lädt nur die konfigurierten - player_scores = session.get(f'player_scores_{playlist_id}', [0, 0, 0, 0, 0, 0]) - # Stelle sicher, dass wir immer 6 Scores haben - while len(player_scores) < 6: - player_scores.append(0) - session[f'player_scores_{playlist_id}'] = player_scores + # Lade Spieler-Scores + player_scores = session.get(f'player_scores_{playlist_id}', [0, 0, 0, 0]) elif buzzer_mode == '1': template_name = "quiz_buzzer.html" player_scores = None @@ -248,7 +243,7 @@ def playerselect(playlist_id): @app.route('/team_setup/') def team_setup(playlist_id): - """Configure team names and count for multiplayer buzzer mode.""" + """Setup team names and count for multiplayer buzzer mode.""" game_mode = request.args.get('mode', 'title') user = session.get('user') return render_template('team_setup.html', diff --git a/templates/playerselect.html b/templates/playerselect.html index acb5874..f40b49c 100644 --- a/templates/playerselect.html +++ b/templates/playerselect.html @@ -69,7 +69,7 @@
-
Spiele mit 2-6 Teams an einem Gerät.
+
Spiele mit bis zu 4 Personen an einem Gerät.
{% else %}
diff --git a/templates/quiz_buzzer_multiplayer.html b/templates/quiz_buzzer_multiplayer.html index 4466ba0..2d4f895 100644 --- a/templates/quiz_buzzer_multiplayer.html +++ b/templates/quiz_buzzer_multiplayer.html @@ -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 = `🔴
${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 = ` -
${player.name}
-
${player.score}
- `; - 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 = ` - - `; - - 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 = `🔴
${player.name}`; - grid.appendChild(button); - }); - console.log('Buzzer buttons created'); - }
-
- +
+
+
Spieler 1
+
0
+
+
+
Spieler 2
+
0
+
+
+
Spieler 3
+
0
+
+
+
Spieler 4
+
0
+
@@ -640,8 +593,22 @@
Drücke START um zu beginnen
-
- +
+ + + + +
diff --git a/templates/team_setup.html b/templates/team_setup.html index add114f..eb7f823 100644 --- a/templates/team_setup.html +++ b/templates/team_setup.html @@ -40,62 +40,53 @@ text-align: center; } .team-count-label { - font-size: 1.3em; + font-size: 1.2em; margin-bottom: 15px; color: #e0e0e0; + } + .team-count-buttons { + display: flex; + justify-content: center; + gap: 15px; + flex-wrap: wrap; + } + .count-btn { + padding: 15px 30px; + border-radius: 15px; + border: 2px solid rgba(29, 185, 84, 0.3); + background: rgba(15, 20, 25, 0.8); + color: #e0e0e0; + font-size: 1.2em; font-weight: 600; - } - .team-count-display { - font-size: 3em; - font-weight: bold; - color: #1DB954; - margin: 20px 0; - } - .team-count-slider { - width: 100%; - height: 8px; - border-radius: 5px; - background: rgba(29, 185, 84, 0.2); - outline: none; - -webkit-appearance: none; - } - .team-count-slider::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 25px; - height: 25px; - border-radius: 50%; - background: #1DB954; cursor: pointer; - box-shadow: 0 0 10px rgba(29, 185, 84, 0.5); + transition: all 0.3s ease; } - .team-count-slider::-moz-range-thumb { - width: 25px; - height: 25px; - border-radius: 50%; - background: #1DB954; - cursor: pointer; - box-shadow: 0 0 10px rgba(29, 185, 84, 0.5); - border: none; + .count-btn:hover { + border-color: #1DB954; + transform: translateY(-2px); } - .teams-list { - margin: 30px 0; + .count-btn.active { + background: linear-gradient(135deg, #1DB954 0%, #1ed760 100%); + border-color: #1DB954; + color: white; + box-shadow: 0 4px 15px rgba(29, 185, 84, 0.5); + } + .teams-section { + margin-bottom: 30px; } .team-input-group { margin-bottom: 20px; - display: flex; - align-items: center; - gap: 15px; } - .team-number { - font-size: 1.5em; - font-weight: bold; + .team-label { + display: block; + font-size: 1.1em; + margin-bottom: 8px; color: #1DB954; - min-width: 100px; + font-weight: 600; } - .team-name-input { - flex: 1; - padding: 12px 20px; + .team-input { + width: 100%; + padding: 15px; border-radius: 12px; border: 2px solid rgba(29, 185, 84, 0.3); background: rgba(15, 20, 25, 0.8); @@ -103,11 +94,15 @@ font-size: 1.1em; transition: all 0.3s ease; } - .team-name-input:focus { + .team-input:focus { outline: none; border-color: #1DB954; box-shadow: 0 0 10px rgba(29, 185, 84, 0.3); } + .team-input.disabled { + opacity: 0.4; + cursor: not-allowed; + } .btn { display: inline-block; padding: 15px 30px; @@ -142,52 +137,59 @@ } @@ -196,29 +198,41 @@

👥 Team Setup

-
Anzahl der Teams
-
4
- +
Wie viele Teams spielen mit?
+
+ + + +
-
-
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +