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

---
 templates/quiz_multiplayer.html | 49 +++++++++++++++++++--------------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/templates/quiz_multiplayer.html b/templates/quiz_multiplayer.html
index accd9f0..6d43b07 100644
--- a/templates/quiz_multiplayer.html
+++ b/templates/quiz_multiplayer.html
@@ -56,12 +56,6 @@
   </div>
 {% endblock %}
 {% block extra_body %}
-<script>
-// Multiplayer-Daten IMMER 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;">
@@ -77,6 +71,13 @@ localStorage.removeItem('quizify_multiplayer_current');
   </div>
 </div>
 <script>
+function fillPlayerFields() {
+  // Namen aus LocalStorage vorbefüllen
+  const names = JSON.parse(localStorage.getItem('quizify_multiplayer_names') || "[]");
+  for(let i=1;i<=4;i++) {
+    document.getElementById('player'+i).value = names[i-1] || "";
+  }
+}
 function startMultiplayer(e) {
   e.preventDefault();
   const names = [];
@@ -95,6 +96,7 @@ function startMultiplayer(e) {
   updateMultiplayerUI();
   quizifyReady();
 }
+window.addEventListener('DOMContentLoaded', fillPlayerFields);
 </script>
 {% endif %}
 <script>
@@ -113,18 +115,7 @@ window.onSpotifyWebPlaybackSDKReady = () => {
 
   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();
+    // Musikstart wird erst durch quizifyReady() ausgelöst!
   });
 
   player.connect();
@@ -275,16 +266,32 @@ window.onload = function() {
     label.style.display = '';
   }
   document.getElementById('startPosition').value = getOption('startPosition', 'start');
+  updateMultiplayerUI();
 
-  // Popup immer anzeigen, weil LocalStorage oben geleert wurde
+  // Popup immer anzeigen, falls vorhanden
   if (document.getElementById('multiplayerPopup')) {
     document.getElementById('multiplayerPopup').style.display = 'flex';
   }
 };
 
+// Musikstart und Quiz erst nach Namensbestätigung!
 function quizifyReady() {
-  // Hier alles, was nach dem Schließen des Popups passieren soll
-  if (window.onSpotifyWebPlaybackSDKReady) {
+  // Musik abspielen
+  if (window.spotifyPlayer && window.spotifyPlayer._options && window.spotifyPlayer._options.getOAuthToken) {
+    // Player ist schon initialisiert
+    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();