Simon/quizify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

modified: templates/quiz_multiplayer.html

Browse Source
This commit is contained in:
SimolZimol
2025-06-07 02:47:15 +02:00
parent 7fc4c51f36
commit 08400c03b9
1 changed files with 23 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
templates/quiz_multiplayer.html
View File

@@ -57,28 +57,26 @@
{% endblock %} {% endblock %}
{% block extra_body %} {% block extra_body %}
<script> <script>
// Popup und Multiplayer-Daten nur anzeigen/löschen, wenn noch keine Namen gesetzt sind // Multiplayer-Daten beim Laden löschen, damit Popup immer erscheint
function showMultiplayerPopupIfNeeded() { localStorage.removeItem('quizify_multiplayer_names');
const names = JSON.parse(localStorage.getItem('quizify_multiplayer_names') || "[]"); localStorage.removeItem('quizify_multiplayer_scores');
if (!names || names.length < 2) { localStorage.removeItem('quizify_multiplayer_current');
// Daten löschen, falls unvollständig </script>
localStorage.removeItem('quizify_multiplayer_names'); {% if local_multiplayer %}
localStorage.removeItem('quizify_multiplayer_scores'); <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;">
localStorage.removeItem('quizify_multiplayer_current'); <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;">
// Popup anzeigen <h3>Lokaler Multiplayer</h3>
if (document.getElementById('multiplayerPopup')) { <p>Gib bis zu 4 Spielernamen ein:</p>
document.getElementById('multiplayerPopup').style.display = 'flex'; <form id="multiplayerForm" onsubmit="startMultiplayer(event)">
} <input type="text" id="player1" placeholder="Spieler 1" required style="margin:5px;width:80%"><br>
} else { <input type="text" id="player2" placeholder="Spieler 2" style="margin:5px;width:80%"><br>
// Popup ausblenden, falls schon Spieler gesetzt <input type="text" id="player3" placeholder="Spieler 3" style="margin:5px;width:80%"><br>
if (document.getElementById('multiplayerPopup')) { <input type="text" id="player4" placeholder="Spieler 4" style="margin:5px;width:80%"><br>
document.getElementById('multiplayerPopup').style.display = 'none'; <button class="btn" type="submit" style="margin-top:10px;">Starten</button>
} </form>
updateMultiplayerUI(); </div>
quizifyReady(); </div>
} <script>
}
function startMultiplayer(e) { function startMultiplayer(e) {
e.preventDefault(); e.preventDefault();
const names = []; const names = [];
@@ -93,27 +91,11 @@ function startMultiplayer(e) {
localStorage.setItem('quizify_multiplayer_names', JSON.stringify(names)); localStorage.setItem('quizify_multiplayer_names', JSON.stringify(names));
localStorage.setItem('quizify_multiplayer_scores', JSON.stringify(Array(names.length).fill(0))); localStorage.setItem('quizify_multiplayer_scores', JSON.stringify(Array(names.length).fill(0)));
localStorage.setItem('quizify_multiplayer_current', 0); localStorage.setItem('quizify_multiplayer_current', 0);
if (document.getElementById('multiplayerPopup')) {
document.getElementById('multiplayerPopup').style.display = 'none'; document.getElementById('multiplayerPopup').style.display = 'none';
}
updateMultiplayerUI(); updateMultiplayerUI();
quizifyReady(); quizifyReady();
} }
</script> </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:none;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 %} {% endif %}
<script> <script>
let allTracks = {{ all_tracks|tojson }}; let allTracks = {{ all_tracks|tojson }};
@@ -267,8 +249,6 @@ function switchGameMode(mode) {
function setOption(key, value) { localStorage.setItem(key, value); } function setOption(key, value) { localStorage.setItem(key, value); }
function getOption(key, defaultValue) { return localStorage.getItem(key) || defaultValue; } function getOption(key, defaultValue) { return localStorage.getItem(key) || defaultValue; }
// KEIN quizifyReady oder Musikstart im window.onload!
// Nur UI initialisieren:
window.onload = function() { window.onload = function() {
const playDuration = getOption('playDuration', '0'); const playDuration = getOption('playDuration', '0');
const sel = document.getElementById('playDuration'); const sel = document.getElementById('playDuration');
@@ -286,13 +266,11 @@ window.onload = function() {
} }
document.getElementById('startPosition').value = getOption('startPosition', 'start'); document.getElementById('startPosition').value = getOption('startPosition', 'start');
updateMultiplayerUI(); updateMultiplayerUI();
// Kein Popup-Handling nötig, da es immer sichtbar ist (außer nach Start)
// Popup anzeigen, wenn nötig
showMultiplayerPopupIfNeeded();
}; };
// Musikstart und Quiz erst nach Namensbestätigung!
function quizifyReady() { function quizifyReady() {
// Hier alles, was nach dem Schließen des Popups passieren soll
if (window.spotifyPlayer && window.spotifyPlayer._options && window.spotifyPlayer._options.getOAuthToken) { if (window.spotifyPlayer && window.spotifyPlayer._options && window.spotifyPlayer._options.getOAuthToken) {
const device_id = document.getElementById('device_id').value; const device_id = document.getElementById('device_id').value;
const playDuration = getPlayDuration(); const playDuration = getPlayDuration();