modified: app.py

modified:   templates/playerselect.html
	modified:   templates/quiz_buzzer_multiplayer.html
	modified:   templates/team_setup.html

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
+        # Lade Spieler-Scores
-        # Default: 6 Teams (Maximum), Frontend lädt nur die konfigurierten
+        player_scores = session.get(f'player_scores_{playlist_id}', [0, 0, 0, 0])
-        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
     elif buzzer_mode == '1':
         template_name = "quiz_buzzer.html"
         player_scores = None
@@ -248,7 +243,7 @@ def playerselect(playlist_id):
 
 @app.route('/team_setup/<playlist_id>')
 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', 

templates/playerselect.html

@@ -69,7 +69,7 @@
       <form method="get" action="{{ url_for('team_setup', playlist_id=playlist_id) }}">
         <input type="hidden" name="mode" value="{{ game_mode }}">
         <button class="player-btn" type="submit">{{ translations['local_multiplayer'] }}</button>
-        <div class="player-desc">Spiele mit 2-6 Teams an einem Gerät.</div>
+        <div class="player-desc">Spiele mit bis zu 4 Personen an einem Gerät.</div>
       </form>
     {% else %}
       <form method="get" action="{{ url_for('quiz', playlist_id=playlist_id) }}">

templates/quiz_buzzer_multiplayer.html

@@ -98,20 +98,10 @@
     }
     .buzzer-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+      grid-template-columns: repeat(2, 1fr);
-      gap: 15px;
+      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
+    // Lade Team-Namen und Anzahl
-    let teamCount = 0;
+    const teamCount = parseInt(localStorage.getItem('team_count')) || 4;
-    let players = [];
+    const teamNames = JSON.parse(localStorage.getItem('team_names') || '["Spieler 1", "Spieler 2", "Spieler 3", "Spieler 4"]');
-    let playerScoresData = {{ player_scores|tojson }} || [0, 0, 0, 0, 0, 0];
     
-    function initializePlayers() {
+    // Spieler-Daten
-      teamCount = parseInt(localStorage.getItem('team_count')) || 4;
+    let players = [
-      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 }} },
-      for (let i = 1; i <= teamCount; i++) {
+      { id: 3, name: teamNames[2] || 'Spieler 3', score: {{ player_scores[2] if player_scores else 0 }} },
-        const teamName = localStorage.getItem(`team_${i}_name`) || `Team ${i}`;
+      { id: 4, name: teamNames[3] || 'Spieler 4', score: {{ player_scores[3] if player_scores else 0 }} }
-        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);
-    }
 
     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();
-        
+        initializePlayers();
-        // Aktualisiere Scoreboard falls schon initialisiert
+        updateScoreboard();
-        if (players.length > 0) {
-          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
+          // Aktiviere Buzzer
-          players.forEach(player => {
+          for (let i = 1; i <= 4; i++) {
-            document.getElementById(`buzzer${player.id}`).classList.remove('disabled');
+            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 => {
+      for (let i = 1; i <= 4; i++) {
-        document.getElementById(`buzzer${player.id}`).classList.add('disabled');
+        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">
+    <div class="scoreboard">
-      <!-- Dynamisch generiert via JavaScript -->
+      <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">
+    <div class="buzzer-grid">
-      <!-- Dynamisch generiert via JavaScript -->
+      <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 -->

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 {
+    .count-btn:hover {
-      width: 25px;
+      border-color: #1DB954;
-      height: 25px;
+      transform: translateY(-2px);
-      border-radius: 50%;
-      background: #1DB954;
-      cursor: pointer;
-      box-shadow: 0 0 10px rgba(29, 185, 84, 0.5);
-      border: none;
     }
-    .teams-list {
+    .count-btn.active {
-      margin: 30px 0;
+      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 {
+    .team-label {
-      font-size: 1.5em;
+      display: block;
-      font-weight: bold;
+      font-size: 1.1em;
+      margin-bottom: 8px;
       color: #1DB954;
-      min-width: 100px;
+      font-weight: 600;
     }
-    .team-name-input {
+    .team-input {
-      flex: 1;
+      width: 100%;
-      padding: 12px 20px;
+      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 @@
     }
   </style>
   <script>
-    let teamCount = 4;
+    let teamCount = 2;
 
-    function updateTeamCount() {
+    function setTeamCount(count) {
-      teamCount = parseInt(document.getElementById('teamCountSlider').value);
+      teamCount = count;
-      document.getElementById('teamCountDisplay').textContent = teamCount;
-      updateTeamInputs();
-    }
       
-    function updateTeamInputs() {
+      // Update aktive Button
-      const container = document.getElementById('teamInputs');
+      document.querySelectorAll('.count-btn').forEach(btn => {
-      container.innerHTML = '';
+        btn.classList.remove('active');
+      });
+      document.getElementById(`count${count}`).classList.add('active');
       
-      for (let i = 1; i <= teamCount; i++) {
+      // Enable/Disable Inputs
-        const savedName = localStorage.getItem(`team_${i}_name`) || `Team ${i}`;
+      for (let i = 1; i <= 4; i++) {
-        
+        const input = document.getElementById(`team${i}`);
-        const group = document.createElement('div');
+        if (i <= count) {
-        group.className = 'team-input-group';
+          input.disabled = false;
-        group.innerHTML = `
+          input.classList.remove('disabled');
-          <div class="team-number">Team ${i}:</div>
+        } else {
-          <input type="text" 
+          input.disabled = true;
-                 class="team-name-input" 
+          input.classList.add('disabled');
-                 id="team${i}Name" 
+        }
-                 value="${savedName}" 
-                 placeholder="Team ${i} Name"
-                 maxlength="20">
-        `;
-        container.appendChild(group);
       }
+      
+      // Speichere in localStorage
+      localStorage.setItem('team_count', count);
     }
 
     function saveTeams() {
-      // Speichere Anzahl
+      const teams = [];
-      localStorage.setItem('team_count', teamCount);
-      
-      // Speichere Namen
       for (let i = 1; i <= teamCount; i++) {
-        const name = document.getElementById(`team${i}Name`).value || `Team ${i}`;
+        const name = document.getElementById(`team${i}`).value || `Spieler ${i}`;
-        localStorage.setItem(`team_${i}_name`, name);
+        teams.push(name);
       }
+      
+      // Speichere in localStorage
+      localStorage.setItem('team_names', JSON.stringify(teams));
+      localStorage.setItem('team_count', teamCount);
     }
 
     window.onload = function() {
-      // Lade gespeicherte Anzahl
+      // Lade gespeicherte Werte
-      const savedCount = localStorage.getItem('team_count') || '4';
+      const savedCount = parseInt(localStorage.getItem('team_count')) || 2;
-      document.getElementById('teamCountSlider').value = savedCount;
+      const savedNames = JSON.parse(localStorage.getItem('team_names') || '[]');
-      updateTeamCount();
+      
+      // Setze Team-Anzahl
+      setTeamCount(savedCount);
+      
+      // Setze Team-Namen
+      savedNames.forEach((name, index) => {
+        if (index < 4) {
+          document.getElementById(`team${index + 1}`).value = name;
+        }
+      });
     };
   </script>
 </head>
@@ -196,29 +198,41 @@
     <h2>👥 Team Setup</h2>
     
     <div class="team-count-section">
-      <div class="team-count-label">Anzahl der Teams</div>
+      <div class="team-count-label">Wie viele Teams spielen mit?</div>
-      <div class="team-count-display" id="teamCountDisplay">4</div>
+      <div class="team-count-buttons">
-      <input type="range" 
+        <button class="count-btn active" id="count2" onclick="setTeamCount(2)">2 Teams</button>
-             class="team-count-slider" 
+        <button class="count-btn" id="count3" onclick="setTeamCount(3)">3 Teams</button>
-             id="teamCountSlider" 
+        <button class="count-btn" id="count4" onclick="setTeamCount(4)">4 Teams</button>
-             min="2" 
+      </div>
-             max="6" 
-             value="4" 
-             oninput="updateTeamCount()">
     </div>
     
-    <div class="teams-list">
+    <div class="teams-section">
-      <div id="teamInputs"></div>
+      <div class="team-input-group">
+        <label class="team-label" for="team1">Team 1</label>
+        <input type="text" class="team-input" id="team1" placeholder="Team 1 Name" value="Spieler 1">
+      </div>
+      
+      <div class="team-input-group">
+        <label class="team-label" for="team2">Team 2</label>
+        <input type="text" class="team-input" id="team2" placeholder="Team 2 Name" value="Spieler 2">
+      </div>
+      
+      <div class="team-input-group">
+        <label class="team-label" for="team3">Team 3</label>
+        <input type="text" class="team-input disabled" id="team3" placeholder="Team 3 Name" value="Spieler 3" disabled>
+      </div>
+      
+      <div class="team-input-group">
+        <label class="team-label" for="team4">Team 4</label>
+        <input type="text" class="team-input disabled" id="team4" placeholder="Team 4 Name" value="Spieler 4" disabled>
+      </div>
     </div>
     
     <div class="button-group">
-      <a href="{{ url_for('buzzer_settings', playlist_id=playlist_id) }}?mode={{ game_mode }}&local_multiplayer=1" 
+      <a href="{{ url_for('buzzer_settings', playlist_id=playlist_id, mode=game_mode, local_multiplayer=1) }}" class="btn btn-primary" onclick="saveTeams()">
-         class="btn btn-primary" 
+        ✅ Weiter
-         onclick="saveTeams()">
-        ✅ Weiter zu Einstellungen
       </a>
-      <a href="{{ url_for('playerselect', playlist_id=playlist_id) }}?mode={{ game_mode }}&buzzer=1" 
+      <a href="{{ url_for('playerselect', playlist_id=playlist_id, mode=game_mode, buzzer=1) }}" class="btn btn-secondary">
-         class="btn btn-secondary">
         ⬅️ Zurück
       </a>
     </div>