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

60
templates/quiz_multiplayer.html
View File

@@ -57,26 +57,28 @@
{% endblock %} {% endblock %}
{% block extra_body %} {% block extra_body %}
<script> <script>
// Multiplayer-Daten IMMER beim Laden löschen, damit Popup immer erscheint // 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_names');
localStorage.removeItem('quizify_multiplayer_scores'); localStorage.removeItem('quizify_multiplayer_scores');
localStorage.removeItem('quizify_multiplayer_current'); localStorage.removeItem('quizify_multiplayer_current');
</script> // Popup anzeigen
{% if local_multiplayer %} if (document.getElementById('multiplayerPopup')) {
<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;"> document.getElementById('multiplayerPopup').style.display = 'flex';
<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> } else {
<p>Gib bis zu 4 Spielernamen ein:</p> // Popup ausblenden, falls schon Spieler gesetzt
<form id="multiplayerForm" onsubmit="startMultiplayer(event)"> if (document.getElementById('multiplayerPopup')) {
<input type="text" id="player1" placeholder="Spieler 1" required style="margin:5px;width:80%"><br> document.getElementById('multiplayerPopup').style.display = 'none';
<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> updateMultiplayerUI();
<input type="text" id="player4" placeholder="Spieler 4" style="margin:5px;width:80%"><br> quizifyReady();
<button class="btn" type="submit" style="margin-top:10px;">Starten</button> }
</form> }
</div>
</div>
<script>
function startMultiplayer(e) { function startMultiplayer(e) {
e.preventDefault(); e.preventDefault();
const names = []; const names = [];
@@ -91,11 +93,27 @@ 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(); // Musik und Quiz jetzt starten! 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 }};
@@ -269,10 +287,8 @@ window.onload = function() {
document.getElementById('startPosition').value = getOption('startPosition', 'start'); document.getElementById('startPosition').value = getOption('startPosition', 'start');
updateMultiplayerUI(); updateMultiplayerUI();
// Popup immer anzeigen, weil LocalStorage oben geleert wurde // Popup anzeigen, wenn nötig
if (document.getElementById('multiplayerPopup')) { showMultiplayerPopupIfNeeded();
document.getElementById('multiplayerPopup').style.display = 'flex';
}
}; };
// Musikstart und Quiz erst nach Namensbestätigung! // Musikstart und Quiz erst nach Namensbestätigung!