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

---
 templates/quiz_multiplayer.html | 830 +++++++++++---------------------
 1 file changed, 294 insertions(+), 536 deletions(-)
diff --git a/templates/quiz_multiplayer.html b/templates/quiz_multiplayer.html
index dea5693..0b3dc08 100644
--- a/templates/quiz_multiplayer.html
+++ b/templates/quiz_multiplayer.html
@@ -1,537 +1,69 @@
-<!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 {
-    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 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 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);
-  }
-}
-
-function updateMultiplayerUI() {
-  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");
-  if(names.length > 1) {
-    document.getElementById('multiplayerBar').style.display = '';
-    let html = '';
-    names.forEach((n,i) => {
-      html += `<span style="margin:0 10px;${i===current?'font-weight:bold;text-decoration:underline;':''}">${n}: ${scores[i]}</span>`;
-    });
-    html += `<br><span style="font-size:0.95em;color:#bdbdbd;">Am Zug: <b>${names[current]}</b></span>`;
-    document.getElementById('multiplayerPlayers').innerHTML = html;
-    document.getElementById('answerInput').placeholder = "Antwort für " + names[current];
-  }
-}
-
-// 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");
-  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>`;
-      scores[current] = (scores[current] || 0) + 1;
-      localStorage.setItem('quizify_multiplayer_scores', JSON.stringify(scores));
-    } 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 (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);
-  });
-}
-
-// 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 quizifyReady() {
-  // Hier alles, was nach dem Schließen des Popups passieren soll
-  if (window.onSpotifyWebPlaybackSDKReady) {
-    window.onSpotifyWebPlaybackSDKReady();
-  }
-  setCorrectAnswer();
-}
-
-// 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');
-}
-  </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>
+{% extends "quiz_base.html" %}
+{% block quiz_content %}
+  <div id="multiplayerBar" style="display:none;margin-bottom:15px;text-align:center;">
+    <span id="multiplayerPlayers"></span>
   </div>
-  {% if request.args.get('local_multiplayer') %}
+  <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>
+// Multiplayer-Daten beim Laden löschen, damit Popup immer erscheint
+localStorage.removeItem('quizify_multiplayer_names');
+localStorage.removeItem('quizify_multiplayer_scores');
+localStorage.removeItem('quizify_multiplayer_current');
+</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>
@@ -562,9 +94,235 @@ function startMultiplayer(e) {
   localStorage.setItem('quizify_multiplayer_current', 0);
   document.getElementById('multiplayerPopup').style.display = 'none';
   updateMultiplayerUI();
-  quizifyReady(); // <-- Musik und Quiz jetzt starten!
+  quizifyReady();
 }
 </script>
 {% endif %}
-</body>
-</html>
+<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 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';
+  });
+}
+
+function updateMultiplayerUI() {
+  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");
+  if(names.length > 1) {
+    document.getElementById('multiplayerBar').style.display = '';
+    let html = '';
+    names.forEach((n,i) => {
+      html += `<span style="margin:0 10px;${i===current?'font-weight:bold;text-decoration:underline;':''}">${n}: ${scores[i]}</span>`;
+    });
+    html += `<br><span style="font-size:0.95em;color:#bdbdbd;">Am Zug: <b>${names[current]}</b></span>`;
+    document.getElementById('multiplayerPlayers').innerHTML = html;
+    document.getElementById('answerInput').placeholder = "Antwort für " + names[current];
+  }
+}
+
+function checkAnswer() {
+  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");
+  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>`;
+      scores[current] = (scores[current] || 0) + 1;
+      localStorage.setItem('quizify_multiplayer_scores', JSON.stringify(scores));
+    } 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>
+    `;
+    // Nächster Spieler
+    let next = (current + 1) % names.length;
+    localStorage.setItem('quizify_multiplayer_current', next);
+    updateMultiplayerUI();
+    document.getElementById('nextQuestionBtn').style.display = 'inline-block';
+  });
+}
+
+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`;
+}
+
+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();
+  // Kein Popup-Handling nötig, da es immer sichtbar ist (außer nach Start)
+};
+
+function quizifyReady() {
+  // Hier alles, was nach dem Schließen des Popups passieren soll
+  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) {
+    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);
+  }
+}
+
+function getPlayDuration() {
+  const sel = document.getElementById('playDuration');
+  if (sel.value === 'custom') {
+    return parseInt(document.getElementById('customDuration').value) || 10;
+  }
+  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);
+  }
+}
+</script>
+{% endblock %}
\ No newline at end of file
