modified: templates/quiz_multiplayer.html

This commit is contained in:
SimolZimol
2025-06-07 00:25:22 +02:00
parent 6d5a662a07
commit b6583bbb3d

View File

@@ -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();