modified: templates/playerselect.html

modified:   templates/quiz.html

templates/playerselect.html

@@ -65,8 +65,12 @@
       <button class="player-btn" type="submit">{{ translations['singleplayer'] if translations['singleplayer'] else 'Singleplayer' }}</button>
       <div class="player-desc">{{ translations['singleplayer_desc'] if translations['singleplayer_desc'] else 'Play alone and test your knowledge.' }}</div>
     </form>
-    <button class="player-btn disabled" disabled>{{ translations['local_multiplayer'] if translations['local_multiplayer'] else 'Local Multiplayer' }}</button>
-    <div class="player-desc">Coming soon!</div>
+    <form method="get" action="{{ url_for('quiz', playlist_id=playlist_id) }}">
+      <input type="hidden" name="mode" value="{{ game_mode }}">
+      <input type="hidden" name="local_multiplayer" value="1">
+      <button class="player-btn" type="submit">{{ translations['local_multiplayer'] if translations['local_multiplayer'] else 'Local Multiplayer' }}</button>
+      <div class="player-desc">Spiele mit bis zu 4 Personen an einem Gerät.</div>
+    </form>
     <button class="player-btn disabled" disabled>{{ translations['online_multiplayer'] if translations['online_multiplayer'] else 'Online Multiplayer' }}</button>
     <div class="player-desc">Coming soon!</div>
     <div style="margin-top:30px;">

templates/quiz.html

@@ -322,6 +322,7 @@ window.onload = function() {
     label.style.display = '';
   }
   document.getElementById('startPosition').value = getOption('startPosition', 'start');
+  updateMultiplayerUI();
 };
 
 function onPlayDurationChange() {
@@ -358,6 +359,74 @@ function replayDuration() {
     }, playDuration * 1000);
   }
 }
+
+function updateMultiplayerUI() {
+  const names = JSON.parse(localStorage.getItem('quizify_multiplayer_names') || "[]");
+  const scores = JSON.parse(localStorage.getItem('quizify_multiplayer_scores') || "[]");
+  const current = parseInt(localStorage.getItem('quizify_multiplayer_current') || "0");
+  if(names.length > 1) {
+    document.getElementById('multiplayerBar').style.display = '';
+    let html = '';
+    names.forEach((n,i) => {
+      html += `<span style="margin:0 10px;${i===current?'font-weight:bold;text-decoration:underline;':''}">${n}: ${scores[i]}</span>`;
+    });
+    html += `<br><span style="font-size:0.95em;color:#bdbdbd;">Am Zug: <b>${names[current]}</b></span>`;
+    document.getElementById('multiplayerPlayers').innerHTML = html;
+    document.getElementById('answerInput').placeholder = "Antwort für " + names[current];
+  }
+}
+
+// Multiplayer: Nach jeder Antwort Punkte & Spieler wechseln
+const origCheckAnswer = checkAnswer;
+checkAnswer = function() {
+  const names = JSON.parse(localStorage.getItem('quizify_multiplayer_names') || "[]");
+  const scores = JSON.parse(localStorage.getItem('quizify_multiplayer_scores') || "[]");
+  const current = parseInt(localStorage.getItem('quizify_multiplayer_current') || "0");
+  const guess = document.getElementById('answerInput').value;
+  if (!guess) return;
+
+  fetch('/check_answer', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      guess: guess,
+      correct_answer: correctAnswer,
+      game_mode: currentGameMode,
+      playlist_id: "{{ playlist_id }}"
+    })
+  })
+  .then(response => response.json())
+  .then(data => {
+    const resultContainer = document.getElementById('resultContainer');
+    resultContainer.style.display = 'block';
+    if (data.correct) {
+      resultContainer.className = 'result-container correct';
+      resultContainer.innerHTML = `<h3>${i18n.correct}</h3>`;
+      scores[current] = (scores[current] || 0) + 1;
+      localStorage.setItem('quizify_multiplayer_scores', JSON.stringify(scores));
+    } else {
+      resultContainer.className = 'result-container incorrect';
+      resultContainer.innerHTML = `<h3>${i18n.wrong}</h3>
+        <p>${i18n.right_answer} <strong>${data.correct_answer}</strong></p>`;
+    }
+    // Song-Infos ergänzen (wie gehabt)
+    // ...
+    // Nächster Spieler
+    let next = (current + 1) % names.length;
+    localStorage.setItem('quizify_multiplayer_current', next);
+    updateMultiplayerUI();
+    document.getElementById('nextQuestionBtn').style.display = 'inline-block';
+  })
+  .catch(error => {
+    console.error('Error checking answer:', error);
+  });
+}
+
+// Beim Laden Multiplayer-UI anzeigen, falls aktiv
+window.onload = function() {
+  // ...dein bisheriger onload code...
+  updateMultiplayerUI();
+}
   </script>
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
@@ -429,6 +498,43 @@ function replayDuration() {
         <p>{{ translations['tip_year'] }}</p>
       {% endif %}
     </div>
+    <div id="multiplayerBar" style="display:none;margin-bottom:15px;text-align:center;">
+      <span id="multiplayerPlayers"></span>
+    </div>
   </div>
+  {% if request.args.get('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>
+function startMultiplayer(e) {
+  e.preventDefault();
+  const names = [];
+  for(let i=1;i<=4;i++) {
+    const val = document.getElementById('player'+i).value.trim();
+    if(val) names.push(val);
+  }
+  if(names.length < 2) {
+    alert("Bitte mindestens 2 Namen eingeben!");
+    return;
+  }
+  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';
+  updateMultiplayerUI();
+}
+</script>
+{% endif %}
 </body>
 </html>