diff --git a/templates/quiz_multiplayer.html b/templates/quiz_multiplayer.html index f682176..4fd43b2 100644 --- a/templates/quiz_multiplayer.html +++ b/templates/quiz_multiplayer.html @@ -1,316 +1,387 @@ -{% extends "quiz_base.html" %} -{% block quiz_content %} - -
- {{ translations['songs_in_playlist'] }} {{ total_questions }} -
-
- {{ translations['end_quiz'] }} -
-

{{ translations['question_artist'] }}

- -
- - - -
-
- - -
-
- -
-
- - -
-
- -
-
- {% if game_mode == 'artist' %} -

{{ translations['tip_artist'] }}

- {% elif game_mode == 'title' %} -

{{ translations['tip_title'] }}

- {% elif game_mode == 'year' %} -

{{ translations['tip_year'] }}

- {% endif %} -
-{% endblock %} - -{% block extra_body %} -{% if local_multiplayer %} -
-
-

Lokaler Multiplayer

-

Gib bis zu 4 Spielernamen ein:

-
-
-
-
-
- -
-
-
- -{% endif %} - + + + + +
+
+ +
+
+ {{ translations['end_quiz'] }} +
+

{{ translations['question_artist'] }}

+ +
+ + + +
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ {% if game_mode == 'artist' %} +

{{ translations['tip_artist'] }}

+ {% elif game_mode == 'title' %} +

{{ translations['tip_title'] }}

+ {% elif game_mode == 'year' %} +

{{ translations['tip_year'] }}

+ {% endif %} +
+
-function switchGameMode(mode) { - // Beim Moduswechsel Multiplayer-Daten löschen - localStorage.removeItem('quizify_multiplayer_names'); - localStorage.removeItem('quizify_multiplayer_scores'); - localStorage.removeItem('quizify_multiplayer_current'); - window.location.href = `/reset_quiz/{{ playlist_id }}?next_mode=${mode}&local_multiplayer=1`; -} + +
+
+

Lokaler Multiplayer

+

Gib bis zu 4 Spielernamen ein:

+
+
+
+
+
+ +
+
+
+ -{% endblock %} \ No newline at end of file + function setCorrectAnswer() { + if (currentGameMode === 'artist') { + correctAnswer = "{{ track.artists[0].name }}"; + document.getElementById('question-text').innerText = i18n.question_artist; + document.getElementById('answerInput').placeholder = i18n.input_artist; + } else if (currentGameMode === 'title' ) { + correctAnswer = "{{ track.name }}"; + document.getElementById('question-text').innerText = i18n.question_title; + document.getElementById('answerInput').placeholder = i18n.input_title; + } else if (currentGameMode === 'year' ) { + correctAnswer = "{{ track.album.release_date[:4] }}"; + document.getElementById('question-text').innerText = i18n.question_year; + document.getElementById('answerInput').placeholder = i18n.input_year; + document.getElementById('answerInput').type = "number"; + } + } + + function searchTracks() { + const query = document.getElementById('answerInput').value; + if (query.length < 2) { + document.getElementById('searchResults').style.display = 'none'; + return; + } + fetch('/search_track', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ query: query, all_tracks: allTracks }) + }) + .then(response => response.json()) + .then(data => { + const resultsContainer = document.getElementById('searchResults'); + resultsContainer.innerHTML = ''; + if (data.results.length === 0) { + resultsContainer.style.display = 'none'; + return; + } + data.results.forEach(result => { + const item = document.createElement('div'); + item.className = 'search-item'; + item.innerHTML = `${result.name} - ${result.artist}`; + item.onclick = function() { + document.getElementById('answerInput').value = + currentGameMode === 'artist' ? result.artist : result.name; + resultsContainer.style.display = 'none'; + }; + resultsContainer.appendChild(item); + }); + resultsContainer.style.display = 'block'; + }); + } + + 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 += `${n}: ${scores[i]}`; + }); + html += `
Am Zug: ${names[current]}`; + document.getElementById('multiplayerPlayers').innerHTML = html; + document.getElementById('answerInput').placeholder = "Antwort für " + names[current]; + } + } + + function checkAnswer() { + 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 = `

${i18n.correct}

`; + scores[current] = (scores[current] || 0) + 1; + localStorage.setItem('quizify_multiplayer_scores', JSON.stringify(scores)); + } else { + resultContainer.className = 'result-container incorrect'; + resultContainer.innerHTML = `

${i18n.wrong}

+

${i18n.right_answer} ${data.correct_answer}

`; + } + resultContainer.innerHTML += ` +
+ Cover
+ ${i18n.song}: {{ track.name }}
+ ${i18n.artist}: {{ track.artists[0].name }}
+ ${i18n.album}: {{ track.album.name }}
+ ${i18n.year}: {{ track.album.release_date[:4] }}
+ ${i18n.open_on_spotify} +
+ `; + // Nächster Spieler + let next = (current + 1) % names.length; + localStorage.setItem('quizify_multiplayer_current', next); + updateMultiplayerUI(); + document.getElementById('nextQuestionBtn').style.display = 'inline-block'; + }); + } + + function switchGameMode(mode) { + // Beim Moduswechsel Multiplayer-Daten löschen + localStorage.removeItem('quizify_multiplayer_names'); + localStorage.removeItem('quizify_multiplayer_scores'); + localStorage.removeItem('quizify_multiplayer_current'); + window.location.href = `/reset_quiz/{{ playlist_id }}?next_mode=${mode}&local_multiplayer=1`; + } + + function setOption(key, value) { localStorage.setItem(key, value); } + function getOption(key, defaultValue) { return localStorage.getItem(key) || defaultValue; } + + window.onload = function() { + // Popup immer anzeigen, bis Namen gesetzt + if (!localStorage.getItem('quizify_multiplayer_names')) { + document.getElementById('multiplayerPopup').style.display = 'flex'; + } else { + document.getElementById('multiplayerPopup').style.display = 'none'; + updateMultiplayerUI(); + quizifyReady(); + } + // PlayDuration-UI + const playDuration = getOption('playDuration', '0'); + const sel = document.getElementById('playDuration'); + const custom = document.getElementById('customDuration'); + const label = document.getElementById('customDurationLabel'); + if (['10','15','30','0'].includes(playDuration)) { + sel.value = playDuration; + custom.style.display = 'none'; + label.style.display = 'none'; + } else { + sel.value = 'custom'; + custom.value = playDuration; + custom.style.display = ''; + label.style.display = ''; + } + document.getElementById('startPosition').value = getOption('startPosition', 'start'); + }; + + function onPlayDurationChange() { + const sel = document.getElementById('playDuration'); + const custom = document.getElementById('customDuration'); + const label = document.getElementById('customDurationLabel'); + if (sel.value === 'custom') { + custom.style.display = ''; + label.style.display = ''; + setOption('playDuration', custom.value || '10'); + } else { + custom.style.display = 'none'; + label.style.display = 'none'; + setOption('playDuration', sel.value); + } + } + + function getPlayDuration() { + const sel = document.getElementById('playDuration'); + if (sel.value === 'custom') { + return parseInt(document.getElementById('customDuration').value) || 10; + } + return parseInt(sel.value); + } + + function replayDuration() { + const playDuration = getPlayDuration(); + if (window.spotifyPlayer) { + window.spotifyPlayer.resume(); + if (window.quizifyTimeout) clearTimeout(window.quizifyTimeout); + window.quizifyTimeout = setTimeout(() => { + window.spotifyPlayer.pause(); + }, playDuration * 1000); + } + } + + +