From f4cf2012ad2258551159485554718230927751b0 Mon Sep 17 00:00:00 2001
From: SimolZimol <70102430+SimolZimol@users.noreply.github.com>
Date: Sat, 7 Jun 2025 02:55:15 +0200
Subject: [PATCH] 	modified:   templates/quiz_multiplayer.html

---
 templates/quiz_multiplayer.html | 753 +++++++++++++++++++++-----------
 1 file changed, 491 insertions(+), 262 deletions(-)

diff --git a/templates/quiz_multiplayer.html b/templates/quiz_multiplayer.html
index 525e1a1..dea5693 100644
--- a/templates/quiz_multiplayer.html
+++ b/templates/quiz_multiplayer.html
@@ -1,189 +1,373 @@
-{% extends "quiz_base.html" %}
-{% block quiz_content %}
-  <div id="multiplayerBar" style="display:none;margin-bottom:15px;text-align:center;">
-    <span id="multiplayerPlayers"></span>
-  </div>
-  <div style="text-align:center; margin-bottom: 10px;">
-    <span id="progressInfo">{{ translations['songs_in_playlist'] }} {{ total_questions }}</span>
-  </div>
-  <div style="text-align:center; margin-bottom: 20px;">
-    <a href="/reset_quiz/{{ playlist_id }}?local_multiplayer=1" class="btn btn-danger" style="margin-top:10px;">{{ translations['end_quiz'] }}</a>
-  </div>
-  <h2 id="question-text" style="color:#fff;">{{ translations['question_artist'] }}</h2>
-  <input type="hidden" id="device_id" value="">
-  <div class="game-modes" style="margin-bottom:20px;">
-    <button class="btn {{ 'btn-success' if game_mode == 'artist' else 'btn-secondary' }}" onclick="switchGameMode('artist')">{{ translations['guess_artist'] }}</button>
-    <button class="btn {{ 'btn-success' if game_mode == 'title' else 'btn-secondary' }}" onclick="switchGameMode('title')">{{ translations['guess_title'] }}</button>
-    <button class="btn {{ 'btn-success' if game_mode == 'year' else 'btn-secondary' }}" onclick="switchGameMode('year')">{{ translations['guess_year'] }}</button>
-  </div>
-  <div class="game-options" style="margin-bottom:20px;">
-    <label>{{ translations['play_duration'] }}:
-      <select id="playDuration" onchange="onPlayDurationChange()">
-        <option value="10">10s</option>
-        <option value="15">15s</option>
-        <option value="30">30s</option>
-        <option value="0" selected>{{ translations['unlimited'] }}</option>
-        <option value="custom">{{ translations['custom'] }}</option>
-      </select>
-      <input type="number" id="customDuration" min="1" max="600" style="width:60px;display:none;" placeholder="Sek." onchange="setOption('playDuration', this.value)">
-      <span id="customDurationLabel" style="display:none;">s</span>
-    </label>
-    <label style="margin-left:20px;">{{ translations['start_position'] }}:
-      <select id="startPosition" onchange="setOption('startPosition', this.value)">
-        <option value="start" selected>{{ translations['start'] }}</option>
-        <option value="random">{{ translations['random'] }}</option>
-      </select>
-    </label>
-  </div>
-  <div class="controls" style="text-align: center; margin-bottom:20px;">
-    <button id="replayBtn" class="btn" onclick="replayDuration()">{{ translations['play_duration'] }} +</button>
-  </div>
-  <div style="text-align: center; margin-top: 10px;">
-    <input type="text" id="answerInput" placeholder="{{ translations['input_artist'] }}" oninput="searchTracks()" style="background:#222; color:#fff;">
-    <button class="btn" onclick="checkAnswer()">{{ translations['answer_button'] }}</button>
-    <div id="searchResults" class="search-results"></div>
-    <div id="resultContainer" class="result-container" style="background:#222; color:#fff; border:1px solid #444;"></div>
-    <a id="nextQuestionBtn" href="/quiz/{{ playlist_id }}?mode={{ game_mode }}&local_multiplayer=1" class="btn" style="display: none;">{{ translations['next_question'] }}</a>
-  </div>
-  <div class="hint-container" style="color:#bdbdbd;">
-    {% if game_mode == 'artist' %}
-      <p>{{ translations['tip_artist'] }}</p>
-    {% elif game_mode == 'title' %}
-      <p>{{ translations['tip_title'] }}</p>
-    {% elif game_mode == 'year' %}
-      <p>{{ translations['tip_year'] }}</p>
-    {% endif %}
-  </div>
-{% endblock %}
-{% block extra_body %}
-<script>
-// Prüfe beim Laden, ob Namen gesetzt sind, und zeige das Popup ggf. an
-function showMultiplayerPopupIfNeeded() {
-  const names = JSON.parse(localStorage.getItem('quizify_multiplayer_names') || "[]");
-  if (!names || names.length < 2) {
-    // Popup anzeigen
-    if (document.getElementById('multiplayerPopup')) {
-      document.getElementById('multiplayerPopup').style.display = 'flex';
+<!DOCTYPE html>
+<html>
+<head>
+  <title>{{ translations['quiz_title'] }}</title>
+  <!-- Spotify Web Playback SDK -->
+  <script src="https://sdk.scdn.co/spotify-player.js"></script>
+  <style>
+    body {
+      background: linear-gradient(135deg, #191414 0%, #1DB954 100%);
+      color: #fff;
+      font-family: Arial, sans-serif;
+      min-height: 100vh;
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
     }
+    .controls {
+      margin: 20px 0;
+    }
+    .btn {
+      padding: 10px 15px;
+      margin: 5px;
+      background-color: #1DB954;
+      color: white;
+      border: none;
+      border-radius: 20px;
+      cursor: pointer;
+    }
+    .btn:hover {
+      background-color: #1ed760;
+    }
+    .btn-secondary {
+      background-color: #535353;
+    }
+    .btn-secondary:hover {
+      background-color: #7b7b7b;
+    }
+    .btn-success {
+      background-color: #4CAF50;
+    }
+    .btn-danger {
+      background-color: #f44336;
+    }
+    .game-modes {
+      margin: 20px 0;
+      display: flex;
+      justify-content: center;
+    }
+    .search-results {
+      margin-top: 15px;
+      max-height: 200px;
+      overflow-y: auto;
+      border: 1px solid #ddd;
+      border-radius: 5px;
+      display: none;
+    }
+    .search-item {
+      padding: 8px 10px;
+      border-bottom: 1px solid #eee;
+      cursor: pointer;
+    }
+    .search-item:hover {
+      background-color: #f5f5f5;
+    }
+    .result-container {
+      margin: 20px 0;
+      padding: 15px;
+      border-radius: 5px;
+      text-align: center;
+      display: none;
+    }
+    .correct {
+      background-color: #e8f5e9;
+      border: 1px solid #4CAF50;
+    }
+    .incorrect {
+      background-color: #ffebee;
+      border: 1px solid #f44336;
+    }
+    input[type="text"], input[type="number"] {
+      padding: 10px;
+      width: 300px;
+      border: 1px solid #ddd;
+      border-radius: 20px;
+      font-size: 16px;
+    }
+    h2 {
+      color: #333;
+      text-align: center;
+    }
+    .hint-container {
+      margin: 15px 0;
+      font-style: italic;
+      color: #666;
+    }
+    .game-options {
+      text-align: center;
+      margin-bottom: 20px;
+    }
+    .game-options label {
+      margin-right: 20px;
+    }
+  </style>
+  <script>
+    // Speichern aller Tracks für die Suche
+    let allTracks = {{ all_tracks|tojson }};
+    let currentGameMode = "{{ game_mode }}";
+    let correctAnswer = "";
+    
+    // translations für JS verfügbar machen
+    const i18n = {{ translations|tojson }};
+
+    // Wird aufgerufen, wenn Spotify Web Playback SDK geladen ist
+    window.onSpotifyWebPlaybackSDKReady = () => {
+      const token = '{{ access_token }}';
+      const player = new Spotify.Player({
+        name: 'Musik Quiz Player',
+        getOAuthToken: cb => { cb(token); },
+        volume: 0.5
+      });
+
+      // Error handling
+      player.addListener('initialization_error', ({ message }) => { console.error(message); });
+      player.addListener('authentication_error', ({ message }) => { console.error(message); });
+      player.addListener('account_error', ({ message }) => { console.error(message); });
+      player.addListener('playback_error', ({ message }) => { console.error(message); });
+
+      // Ready
+      player.addListener('ready', ({ device_id }) => {
+        console.log('Ready with Device ID', device_id);
+        document.getElementById('device_id').value = device_id;
+        
+        const playDuration = getPlayDuration();
+        const startPosition = getOption('startPosition', 'start');
+        let position_ms = 0;
+        if (startPosition === 'random') {
+          // Schätze Songlänge (du kannst {{ track.duration_ms }} als Variable mitgeben!)
+          const duration = {{ track.duration_ms if track.duration_ms else 180000 }};
+          position_ms = Math.floor(Math.random() * (duration - 30000)); // max 30s vor Ende
+        }
+        // Starte Wiedergabe an gewünschter Stelle
+        fetch(`/play_track?device_id=${device_id}&track_uri={{ track.uri }}&position_ms=${position_ms}`, { method: 'POST' })
+          .then(response => {
+            if (!response.ok) {
+              throw new Error('Network response was not ok');
+            }
+            return response.json();
+          })
+          .catch(error => {
+            console.error('Error starting playback:', error);
+          });
+
+        // Stoppe nach playDuration Sekunden (wenn nicht unendlich)
+        if (playDuration > 0) {
+          window.quizifyTimeout = setTimeout(() => {
+            player.pause();
+          }, playDuration * 1000);
+        }
+        setCorrectAnswer();
+      });
+
+      // Not Ready
+      player.addListener('not_ready', ({ device_id }) => {
+        console.log('Device ID has gone offline', device_id);
+      });
+
+      // Connect to the player!
+      player.connect();
+      
+      // Globale Referenz zum Player für andere Funktionen
+      window.spotifyPlayer = player;
+    };
+    
+    function setCorrectAnswer() {
+      if (currentGameMode === 'artist') {
+        correctAnswer = "{{ track.artists[0].name }}";
+        document.getElementById('question-text').innerText = i18n.question_artist;
+        document.getElementById('answerInput').placeholder = i18n.input_artist;
+      } else if (currentGameMode === 'title' ) {
+        correctAnswer = "{{ track.name }}";
+        document.getElementById('question-text').innerText = i18n.question_title;
+        document.getElementById('answerInput').placeholder = i18n.input_title;
+      } else if (currentGameMode === 'year' ) {
+        correctAnswer = "{{ track.album.release_date[:4] }}";
+        document.getElementById('question-text').innerText = i18n.question_year;
+        document.getElementById('answerInput').placeholder = i18n.input_year;
+        document.getElementById('answerInput').type = "number";
+      }
+    }
+    
+    function togglePlay() {
+      const deviceId = document.getElementById('device_id').value;
+      
+      fetch('/toggle_playback', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ device_id: deviceId })
+      })
+      .then(response => response.json())
+      .catch(error => {
+        console.error('Error toggling playback:', error);
+      });
+    }
+    
+    function searchTracks() {
+      const query = document.getElementById('answerInput').value;
+      if (query.length < 2) {
+        document.getElementById('searchResults').style.display = 'none';
+        return;
+      }
+      
+      fetch('/search_track', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ 
+          query: query,
+          all_tracks: allTracks
+        })
+      })
+      .then(response => response.json())
+      .then(data => {
+        const resultsContainer = document.getElementById('searchResults');
+        resultsContainer.innerHTML = '';
+        
+        if (data.results.length === 0) {
+          resultsContainer.style.display = 'none';
+          return;
+        }
+        
+        data.results.forEach(result => {
+          const item = document.createElement('div');
+          item.className = 'search-item';
+          item.innerHTML = `<strong>${result.name}</strong> - ${result.artist}`;
+          item.onclick = function() {
+            document.getElementById('answerInput').value = 
+              currentGameMode === 'artist' ? result.artist : result.name;
+            resultsContainer.style.display = 'none';
+          };
+          resultsContainer.appendChild(item);
+        });
+        
+        resultsContainer.style.display = 'block';
+      })
+      .catch(error => {
+        console.error('Error searching tracks:', error);
+      });
+    }
+    
+    function checkAnswer() {
+      const guess = document.getElementById('answerInput').value;
+      if (!guess) return;
+      
+      fetch('/check_answer', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          guess: guess,
+          correct_answer: correctAnswer,
+          game_mode: currentGameMode,
+          playlist_id: "{{ playlist_id }}"
+        })
+      })
+      .then(response => response.json())
+      .then(data => {
+        const resultContainer = document.getElementById('resultContainer');
+        resultContainer.style.display = 'block';
+
+        if (data.correct) {
+          resultContainer.className = 'result-container correct';
+          resultContainer.innerHTML = `<h3>${i18n.correct}</h3>`;
+        } else {
+          resultContainer.className = 'result-container incorrect';
+          resultContainer.innerHTML = `<h3>${i18n.wrong}</h3>
+            <p>${i18n.right_answer} <strong>${data.correct_answer}</strong></p>`;
+        }
+
+        // Song-Infos ergänzen
+        resultContainer.innerHTML += `
+          <div style="margin-top:10px;">
+            <img src="{{ track.album.images[0].url }}" alt="Cover" style="width:80px;border-radius:8px;"><br>
+            <strong>${i18n.song}:</strong> {{ track.name }}<br>
+            <strong>${i18n.artist}:</strong> {{ track.artists[0].name }}<br>
+            <strong>${i18n.album}:</strong> {{ track.album.name }}<br>
+            <strong>${i18n.year}:</strong> {{ track.album.release_date[:4] }}<br>
+            <a href="{{ track.external_urls.spotify }}" target="_blank" style="color:#1DB954;">${i18n.open_on_spotify}</a>
+          </div>
+        `;
+
+        // Zeige den "Nächste Frage" Button
+        document.getElementById('nextQuestionBtn').style.display = 'inline-block';
+      })
+      .catch(error => {
+        console.error('Error checking answer:', error);
+      });
+    }
+    
+    function switchGameMode(mode) {
+      // Beim Moduswechsel Multiplayer-Daten löschen
+      localStorage.removeItem('quizify_multiplayer_names');
+      localStorage.removeItem('quizify_multiplayer_scores');
+      localStorage.removeItem('quizify_multiplayer_current');
+      window.location.href = `/reset_quiz/{{ playlist_id }}?next_mode=${mode}`;
+    }
+    
+    function setOption(key, value) {
+  localStorage.setItem(key, value);
+}
+function getOption(key, defaultValue) {
+  return localStorage.getItem(key) || defaultValue;
+}
+window.onload = function() {
+  const playDuration = getOption('playDuration', '0');
+  const sel = document.getElementById('playDuration');
+  const custom = document.getElementById('customDuration');
+  const label = document.getElementById('customDurationLabel');
+  if (['10','15','30','0'].includes(playDuration)) {
+    sel.value = playDuration;
+    custom.style.display = 'none';
+    label.style.display = 'none';
   } else {
-    // Popup ausblenden, falls schon Spieler gesetzt
-    if (document.getElementById('multiplayerPopup')) {
-      document.getElementById('multiplayerPopup').style.display = 'none';
-    }
-    updateMultiplayerUI();
+    sel.value = 'custom';
+    custom.value = playDuration;
+    custom.style.display = '';
+    label.style.display = '';
+  }
+  document.getElementById('startPosition').value = getOption('startPosition', 'start');
+  updateMultiplayerUI();
+
+  // Prüfe, ob MultiplayerPopup existiert und sichtbar ist
+  const mpPopup = document.getElementById('multiplayerPopup');
+  if (!mpPopup || mpPopup.style.display === 'none') {
     quizifyReady();
   }
-}
-
-function startMultiplayer(e) {
-  e.preventDefault();
-  const names = [];
-  for(let i=1;i<=4;i++) {
-    const val = document.getElementById('player'+i).value.trim();
-    if(val) names.push(val);
-  }
-  if(names.length < 2) {
-    alert("Bitte mindestens 2 Namen eingeben!");
-    return;
-  }
-  localStorage.setItem('quizify_multiplayer_names', JSON.stringify(names));
-  localStorage.setItem('quizify_multiplayer_scores', JSON.stringify(Array(names.length).fill(0)));
-  localStorage.setItem('quizify_multiplayer_current', 0);
-  if (document.getElementById('multiplayerPopup')) {
-    document.getElementById('multiplayerPopup').style.display = 'none';
-  }
-  updateMultiplayerUI();
-  quizifyReady();
-}
-</script>
-{% if local_multiplayer %}
-<div id="multiplayerPopup" style="position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:2000;">
-  <div style="background:#191414;padding:30px 40px;border-radius:18px;box-shadow:0 8px 32px 0 rgba(0,0,0,0.37);min-width:320px;text-align:center;">
-    <h3>Lokaler Multiplayer</h3>
-    <p>Gib bis zu 4 Spielernamen ein:</p>
-    <form id="multiplayerForm" onsubmit="startMultiplayer(event)">
-      <input type="text" id="player1" placeholder="Spieler 1" required style="margin:5px;width:80%"><br>
-      <input type="text" id="player2" placeholder="Spieler 2" style="margin:5px;width:80%"><br>
-      <input type="text" id="player3" placeholder="Spieler 3" style="margin:5px;width:80%"><br>
-      <input type="text" id="player4" placeholder="Spieler 4" style="margin:5px;width:80%"><br>
-      <button class="btn" type="submit" style="margin-top:10px;">Starten</button>
-    </form>
-  </div>
-</div>
-{% endif %}
-<script>
-let allTracks = {{ all_tracks|tojson }};
-let currentGameMode = "{{ game_mode }}";
-let correctAnswer = "";
-const i18n = {{ translations|tojson }};
-
-// Spotify Web Playback SDK
-window.onSpotifyWebPlaybackSDKReady = () => {
-  const token = '{{ access_token }}';
-  const player = new Spotify.Player({
-    name: 'Musik Quiz Player',
-    getOAuthToken: cb => { cb(token); },
-    volume: 0.5
-  });
-
-  player.addListener('ready', ({ device_id }) => {
-    document.getElementById('device_id').value = device_id;
-    // Musikstart wird erst durch quizifyReady() ausgelöst!
-  });
-
-  player.connect();
-  window.spotifyPlayer = player;
 };
 
-function setCorrectAnswer() {
-  if (currentGameMode === 'artist') {
-    correctAnswer = "{{ track.artists[0].name }}";
-    document.getElementById('question-text').innerText = i18n.question_artist;
-    document.getElementById('answerInput').placeholder = i18n.input_artist;
-  } else if (currentGameMode === 'title' ) {
-    correctAnswer = "{{ track.name }}";
-    document.getElementById('question-text').innerText = i18n.question_title;
-    document.getElementById('answerInput').placeholder = i18n.input_title;
-  } else if (currentGameMode === 'year' ) {
-    correctAnswer = "{{ track.album.release_date[:4] }}";
-    document.getElementById('question-text').innerText = i18n.question_year;
-    document.getElementById('answerInput').placeholder = i18n.input_year;
-    document.getElementById('answerInput').type = "number";
+function onPlayDurationChange() {
+  const sel = document.getElementById('playDuration');
+  const custom = document.getElementById('customDuration');
+  const label = document.getElementById('customDurationLabel');
+  if (sel.value === 'custom') {
+    custom.style.display = '';
+    label.style.display = '';
+    setOption('playDuration', custom.value || '10');
+  } else {
+    custom.style.display = 'none';
+    label.style.display = 'none';
+    setOption('playDuration', sel.value);
   }
 }
 
-function searchTracks() {
-  const query = document.getElementById('answerInput').value;
-  if (query.length < 2) {
-    document.getElementById('searchResults').style.display = 'none';
-    return;
+function getPlayDuration() {
+  const sel = document.getElementById('playDuration');
+  if (sel.value === 'custom') {
+    return parseInt(document.getElementById('customDuration').value) || 10;
+  }
+  return parseInt(sel.value);
+}
+
+// "Nochmal X Sekunden"-Button Funktion
+function replayDuration() {
+  const playDuration = getPlayDuration();
+  if (window.spotifyPlayer) {
+    window.spotifyPlayer.resume();
+    if (window.quizifyTimeout) clearTimeout(window.quizifyTimeout);
+    window.quizifyTimeout = setTimeout(() => {
+      window.spotifyPlayer.pause();
+    }, playDuration * 1000);
   }
-  fetch('/search_track', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ query: query, all_tracks: allTracks })
-  })
-  .then(response => response.json())
-  .then(data => {
-    const resultsContainer = document.getElementById('searchResults');
-    resultsContainer.innerHTML = '';
-    if (data.results.length === 0) {
-      resultsContainer.style.display = 'none';
-      return;
-    }
-    data.results.forEach(result => {
-      const item = document.createElement('div');
-      item.className = 'search-item';
-      item.innerHTML = `<strong>${result.name}</strong> - ${result.artist}`;
-      item.onclick = function() {
-        document.getElementById('answerInput').value = 
-          currentGameMode === 'artist' ? result.artist : result.name;
-        resultsContainer.style.display = 'none';
-      };
-      resultsContainer.appendChild(item);
-    });
-    resultsContainer.style.display = 'block';
-  });
 }
 
 function updateMultiplayerUI() {
@@ -202,7 +386,9 @@ function updateMultiplayerUI() {
   }
 }
 
-function checkAnswer() {
+// Multiplayer: Nach jeder Antwort Punkte & Spieler wechseln
+const origCheckAnswer = checkAnswer;
+checkAnswer = function() {
   const names = JSON.parse(localStorage.getItem('quizify_multiplayer_names') || "[]");
   const scores = JSON.parse(localStorage.getItem('quizify_multiplayer_scores') || "[]");
   const current = parseInt(localStorage.getItem('quizify_multiplayer_current') || "0");
@@ -233,109 +419,152 @@ function checkAnswer() {
       resultContainer.innerHTML = `<h3>${i18n.wrong}</h3>
         <p>${i18n.right_answer} <strong>${data.correct_answer}</strong></p>`;
     }
-    // Song-Infos ergänzen
-    resultContainer.innerHTML += `
-      <div style="margin-top:10px;">
-        <img src="{{ track.album.images[0].url }}" alt="Cover" style="width:80px;border-radius:8px;"><br>
-        <strong>${i18n.song}:</strong> {{ track.name }}<br>
-        <strong>${i18n.artist}:</strong> {{ track.artists[0].name }}<br>
-        <strong>${i18n.album}:</strong> {{ track.album.name }}<br>
-        <strong>${i18n.year}:</strong> {{ track.album.release_date[:4] }}<br>
-        <a href="{{ track.external_urls.spotify }}" target="_blank" style="color:#1DB954;">${i18n.open_on_spotify}</a>
-      </div>
-    `;
+    // Song-Infos ergänzen (wie gehabt)
+    // ...
     // Nächster Spieler
     let next = (current + 1) % names.length;
     localStorage.setItem('quizify_multiplayer_current', next);
     updateMultiplayerUI();
     document.getElementById('nextQuestionBtn').style.display = 'inline-block';
+  })
+  .catch(error => {
+    console.error('Error checking answer:', error);
   });
 }
 
-function switchGameMode(mode) {
-  // Beim Moduswechsel Multiplayer-Daten löschen
-  localStorage.removeItem('quizify_multiplayer_names');
-  localStorage.removeItem('quizify_multiplayer_scores');
-  localStorage.removeItem('quizify_multiplayer_current');
-  window.location.href = `/reset_quiz/{{ playlist_id }}?next_mode=${mode}&local_multiplayer=1`;
+// Beim Laden Multiplayer-UI anzeigen, falls aktiv
+window.onload = function() {
+  // ...dein bisheriger onload code...
+  updateMultiplayerUI();
+  // Starte Quiz nur, wenn KEIN Multiplayer-Popup offen ist
+  if (!document.getElementById('multiplayerPopup') || document.getElementById('multiplayerPopup').style.display === 'none') {
+    quizifyReady();
+  }
 }
 
-function setOption(key, value) { localStorage.setItem(key, value); }
-function getOption(key, defaultValue) { return localStorage.getItem(key) || defaultValue; }
-
-window.onload = function() {
-  const playDuration = getOption('playDuration', '0');
-  const sel = document.getElementById('playDuration');
-  const custom = document.getElementById('customDuration');
-  const label = document.getElementById('customDurationLabel');
-  if (['10','15','30','0'].includes(playDuration)) {
-    sel.value = playDuration;
-    custom.style.display = 'none';
-    label.style.display = 'none';
-  } else {
-    sel.value = 'custom';
-    custom.value = playDuration;
-    custom.style.display = '';
-    label.style.display = '';
-  }
-  document.getElementById('startPosition').value = getOption('startPosition', 'start');
-  updateMultiplayerUI();
-  showMultiplayerPopupIfNeeded();
-};
-
-// Musikstart und Quiz erst nach Namensbestätigung!
 function quizifyReady() {
-  if (window.spotifyPlayer && window.spotifyPlayer._options && window.spotifyPlayer._options.getOAuthToken) {
-    const device_id = document.getElementById('device_id').value;
-    const playDuration = getPlayDuration();
-    const startPosition = getOption('startPosition', 'start');
-    let position_ms = 0;
-    if (startPosition === 'random') {
-      const duration = {{ track.duration_ms if track.duration_ms else 180000 }};
-      position_ms = Math.floor(Math.random() * (duration - 30000));
-    }
-    fetch(`/play_track?device_id=${device_id}&track_uri={{ track.uri }}&position_ms=${position_ms}`, { method: 'POST' });
-    if (playDuration > 0) {
-      window.quizifyTimeout = setTimeout(() => { window.spotifyPlayer.pause(); }, playDuration * 1000);
-    }
-  } else if (window.onSpotifyWebPlaybackSDKReady) {
+  // Hier alles, was nach dem Schließen des Popups passieren soll
+  if (window.onSpotifyWebPlaybackSDKReady) {
     window.onSpotifyWebPlaybackSDKReady();
   }
   setCorrectAnswer();
 }
 
-function onPlayDurationChange() {
-  const sel = document.getElementById('playDuration');
-  const custom = document.getElementById('customDuration');
-  const label = document.getElementById('customDurationLabel');
-  if (sel.value === 'custom') {
-    custom.style.display = '';
-    label.style.display = '';
-    setOption('playDuration', custom.value || '10');
-  } else {
-    custom.style.display = 'none';
-    label.style.display = 'none';
-    setOption('playDuration', sel.value);
-  }
+// Entferne Multiplayer-Daten, wenn NICHT im lokalen Multiplayer
+if (!window.location.search.includes('local_multiplayer=1')) {
+  localStorage.removeItem('quizify_multiplayer_names');
+  localStorage.removeItem('quizify_multiplayer_scores');
+  localStorage.removeItem('quizify_multiplayer_current');
 }
-
-function getPlayDuration() {
-  const sel = document.getElementById('playDuration');
-  if (sel.value === 'custom') {
-    return parseInt(document.getElementById('customDuration').value) || 10;
+  </script>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body style="background: linear-gradient(135deg, #191414 0%, #1DB954 100%); min-height:100vh; margin:0; display:flex; align-items:center; justify-content:center;">
+  <div class="quiz-container" style="
+    background: rgba(25, 20, 20, 0.92);
+    padding: 40px 30px 30px 30px;
+    border-radius: 22px;
+    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37);
+    max-width: 500px;
+    width: 100%;
+    color: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    ">
+    <div style="text-align:center; margin-bottom: 10px;">
+      <span id="progressInfo">{{ translations['songs_in_playlist'] }} {{ total_questions }}</span>
+      <span id="scoreInfo" style="margin-left:20px;">
+        {{ translations['score'] }}: {{ score }} / {{ answered if answered > 0 else 1 }}
+        ({{ ((score / (answered if answered > 0 else 1)) * 100) | round(0) if answered > 0 else 0 }}{{ translations['percent'] }})
+      </span>
+    </div>
+    <div style="text-align:center; margin-bottom: 20px;">
+      <a href="/reset_quiz/{{ playlist_id }}" class="btn btn-danger" style="margin-top:10px;">{{ translations['end_quiz'] }}</a>
+    </div>
+    <h2 id="question-text" style="color:#fff;">{{ translations['question_artist'] }}</h2>
+    <input type="hidden" id="device_id" value="">
+    <div class="game-modes" style="margin-bottom:20px;">
+      <button class="btn {{ 'btn-success' if game_mode == 'artist' else 'btn-secondary' }}" onclick="switchGameMode('artist')">{{ translations['guess_artist'] }}</button>
+      <button class="btn {{ 'btn-success' if game_mode == 'title' else 'btn-secondary' }}" onclick="switchGameMode('title')">{{ translations['guess_title'] }}</button>
+      <button class="btn {{ 'btn-success' if game_mode == 'year' else 'btn-secondary' }}" onclick="switchGameMode('year')">{{ translations['guess_year'] }}</button>
+    </div>
+    <div class="game-options" style="margin-bottom:20px;">
+      <label>{{ translations['play_duration'] }}:
+        <select id="playDuration" onchange="onPlayDurationChange()">
+          <option value="10">10s</option>
+          <option value="15">15s</option>
+          <option value="30">30s</option>
+          <option value="0" selected>{{ translations['unlimited'] }}</option>
+          <option value="custom">{{ translations['custom'] }}</option>
+        </select>
+        <input type="number" id="customDuration" min="1" max="600" style="width:60px;display:none;" placeholder="Sek." onchange="setOption('playDuration', this.value)">
+        <span id="customDurationLabel" style="display:none;">s</span>
+      </label>
+      <label style="margin-left:20px;">{{ translations['start_position'] }}:
+        <select id="startPosition" onchange="setOption('startPosition', this.value)">
+          <option value="start" selected>{{ translations['start'] }}</option>
+          <option value="random">{{ translations['random'] }}</option>
+        </select>
+      </label>
+    </div>
+    <div class="controls" style="text-align: center; margin-bottom:20px;">
+      <button id="replayBtn" class="btn" onclick="replayDuration()">{{ translations['play_duration'] }} +</button>
+    </div>
+    <div style="text-align: center; margin-top: 10px;">
+      <input type="text" id="answerInput" placeholder="{{ translations['input_artist'] }}" oninput="searchTracks()" style="background:#222; color:#fff;">
+      <button class="btn" onclick="checkAnswer()">{{ translations['answer_button'] }}</button>
+      <div id="searchResults" class="search-results"></div>
+      <div id="resultContainer" class="result-container" style="background:#222; color:#fff; border:1px solid #444;"></div>
+      <a id="nextQuestionBtn" href="/quiz/{{ playlist_id }}?mode={{ game_mode }}" class="btn" style="display: none;">{{ translations['next_question'] }}</a>
+    </div>
+    <div class="hint-container" style="color:#bdbdbd;">
+      {% if game_mode == 'artist' %}
+        <p>{{ translations['tip_artist'] }}</p>
+      {% elif game_mode == 'title' %}
+        <p>{{ translations['tip_title'] }}</p>
+      {% elif game_mode == 'year' %}
+        <p>{{ translations['tip_year'] }}</p>
+      {% endif %}
+    </div>
+    <div id="multiplayerBar" style="display:none;margin-bottom:15px;text-align:center;">
+      <span id="multiplayerPlayers"></span>
+    </div>
+  </div>
+  {% if request.args.get('local_multiplayer') %}
+<div id="multiplayerPopup" style="position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:2000;">
+  <div style="background:#191414;padding:30px 40px;border-radius:18px;box-shadow:0 8px 32px 0 rgba(0,0,0,0.37);min-width:320px;text-align:center;">
+    <h3>Lokaler Multiplayer</h3>
+    <p>Gib bis zu 4 Spielernamen ein:</p>
+    <form id="multiplayerForm" onsubmit="startMultiplayer(event)">
+      <input type="text" id="player1" placeholder="Spieler 1" required style="margin:5px;width:80%"><br>
+      <input type="text" id="player2" placeholder="Spieler 2" style="margin:5px;width:80%"><br>
+      <input type="text" id="player3" placeholder="Spieler 3" style="margin:5px;width:80%"><br>
+      <input type="text" id="player4" placeholder="Spieler 4" style="margin:5px;width:80%"><br>
+      <button class="btn" type="submit" style="margin-top:10px;">Starten</button>
+    </form>
+  </div>
+</div>
+<script>
+function startMultiplayer(e) {
+  e.preventDefault();
+  const names = [];
+  for(let i=1;i<=4;i++) {
+    const val = document.getElementById('player'+i).value.trim();
+    if(val) names.push(val);
   }
-  return parseInt(sel.value);
-}
-
-function replayDuration() {
-  const playDuration = getPlayDuration();
-  if (window.spotifyPlayer) {
-    window.spotifyPlayer.resume();
-    if (window.quizifyTimeout) clearTimeout(window.quizifyTimeout);
-    window.quizifyTimeout = setTimeout(() => {
-      window.spotifyPlayer.pause();
-    }, playDuration * 1000);
+  if(names.length < 2) {
+    alert("Bitte mindestens 2 Namen eingeben!");
+    return;
   }
+  localStorage.setItem('quizify_multiplayer_names', JSON.stringify(names));
+  localStorage.setItem('quizify_multiplayer_scores', JSON.stringify(Array(names.length).fill(0)));
+  localStorage.setItem('quizify_multiplayer_current', 0);
+  document.getElementById('multiplayerPopup').style.display = 'none';
+  updateMultiplayerUI();
+  quizifyReady(); // <-- Musik und Quiz jetzt starten!
 }
 </script>
-{% endblock %}
\ No newline at end of file
+{% endif %}
+</body>
+</html>