From f04b57667cd0676ae9d7a02797657b2e70e91510 Mon Sep 17 00:00:00 2001
From: SimolZimol <70102430+SimolZimol@users.noreply.github.com>
Date: Fri, 6 Jun 2025 22:30:21 +0200
Subject: [PATCH] 	modified:   templates/quiz_multiplayer.html 
 modified:   templates/quiz_single.html

---
 templates/quiz_multiplayer.html | 231 +++++++++++++++++++++++++++++++-
 templates/quiz_single.html      | 193 +++++++++++++++++++++++++-
 2 files changed, 421 insertions(+), 3 deletions(-)

diff --git a/templates/quiz_multiplayer.html b/templates/quiz_multiplayer.html
index 3b26949..e858088 100644
--- a/templates/quiz_multiplayer.html
+++ b/templates/quiz_multiplayer.html
@@ -92,6 +92,233 @@ function startMultiplayer(e) {
 }
 </script>
 {% endif %}
-{% endraw %}
-<!-- Hier dein gesamtes Multiplayer-JS aus quiz.html -->
+<script>
+let allTracks = {{ all_tracks|tojson }};
+let currentGameMode = "{{ game_mode }}";
+let correctAnswer = "";
+const i18n = {{ translations|tojson }};
+
+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;
+    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(() => { player.pause(); }, playDuration * 1000);
+    }
+    setCorrectAnswer();
+  });
+
+  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();
+
+  // Prüfe, ob MultiplayerPopup existiert und sichtbar ist
+  const mpPopup = document.getElementById('multiplayerPopup');
+  if (!mpPopup || mpPopup.style.display === 'none') {
+    quizifyReady();
+  }
+};
+
+function quizifyReady() {
+  // 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);
+  }
+}
+
+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
diff --git a/templates/quiz_single.html b/templates/quiz_single.html
index 1a1200e..c4eee79 100644
--- a/templates/quiz_single.html
+++ b/templates/quiz_single.html
@@ -57,5 +57,196 @@
   </div>
 {% endblock %}
 {% block extra_body %}
-<!-- Hier dein gesamtes JS aus quiz.html, aber OHNE Multiplayer-Logik -->
+<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;
+    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(() => { player.pause(); }, playDuration * 1000);
+    }
+    setCorrectAnswer();
+  });
+
+  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 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>
+    `;
+    document.getElementById('nextQuestionBtn').style.display = 'inline-block';
+  });
+}
+
+function switchGameMode(mode) {
+  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');
+  if (window.onSpotifyWebPlaybackSDKReady) window.onSpotifyWebPlaybackSDKReady();
+};
+
+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>
+<!-- Multiplayer-Daten im Singleplayer immer löschen -->
+<script>
+localStorage.removeItem('quizify_multiplayer_names');
+localStorage.removeItem('quizify_multiplayer_scores');
+localStorage.removeItem('quizify_multiplayer_current');
+</script>
 {% endblock %}
\ No newline at end of file