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:02:14 +02:00
parent a86e4a1e0d
commit 7fc4c51f36
1 changed files with 42 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
templates/quiz_multiplayer.html
View File

@@ -57,26 +57,28 @@
{% 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;">
<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>
<script>
// Popup und Multiplayer-Daten nur anzeigen/löschen, wenn noch keine Namen gesetzt sind
function showMultiplayerPopupIfNeeded() {
const names = JSON.parse(localStorage.getItem('quizify_multiplayer_names') || "[]");
if (!names || names.length < 2) {
// Daten löschen, falls unvollständig
localStorage.removeItem('quizify_multiplayer_names');
localStorage.removeItem('quizify_multiplayer_scores');
localStorage.removeItem('quizify_multiplayer_current');
// Popup anzeigen
if (document.getElementById('multiplayerPopup')) {
document.getElementById('multiplayerPopup').style.display = 'flex';
}
} else {
// Popup ausblenden, falls schon Spieler gesetzt
if (document.getElementById('multiplayerPopup')) {
document.getElementById('multiplayerPopup').style.display = 'none';
}
updateMultiplayerUI();
quizifyReady();
}
}
function startMultiplayer(e) {
e.preventDefault();
const names = [];
@@ -91,11 +93,27 @@ function startMultiplayer(e) {
localStorage.setItem('quizify_multiplayer_names', JSON.stringify(names));
localStorage.setItem('quizify_multiplayer_scores', JSON.stringify(Array(names.length).fill(0)));
localStorage.setItem('quizify_multiplayer_current', 0);
document.getElementById('multiplayerPopup').style.display = 'none';
if (document.getElementById('multiplayerPopup')) {
document.getElementById('multiplayerPopup').style.display = 'none';
}
updateMultiplayerUI();
quizifyReady(); // Musik und Quiz jetzt starten!
quizifyReady();
}
</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 %}
<script>
let allTracks = {{ all_tracks|tojson }};
@@ -269,10 +287,8 @@ window.onload = function() {
document.getElementById('startPosition').value = getOption('startPosition', 'start');
updateMultiplayerUI();
// Popup immer anzeigen, weil LocalStorage oben geleert wurde
if (document.getElementById('multiplayerPopup')) {
document.getElementById('multiplayerPopup').style.display = 'flex';
}
// Popup anzeigen, wenn nötig
showMultiplayerPopupIfNeeded();
};
// Musikstart und Quiz erst nach Namensbestätigung!