modified: templates/quiz_multiplayer.html
modified: templates/quiz_single.html
This commit is contained in:
SimolZimol
@@ -92,6 +92,233 @@ function startMultiplayer(e) {
|
||||
}
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endraw %}
|
||||
<!-- Hier dein gesamtes Multiplayer-JS aus quiz.html -->
|
||||
<script>
|
||||
let allTracks = {{ all_tracks|tojson }};
|
||||
let currentGameMode = "{{ game_mode }}";
|
||||
let correctAnswer = "";
|
||||
const i18n = {{ translations|tojson }};
|
||||
|
||||
window.onSpotifyWebPlaybackSDKReady = () => {
|
||||
const token = '{{ access_token }}';
|
||||
const player = new Spotify.Player({
|
||||
name: 'Musik Quiz Player',
|
||||
getOAuthToken: cb => { cb(token); },
|
||||
volume: 0.5
|
||||
});
|
||||
|
||||
player.addListener('ready', ({ device_id }) => {
|
||||
document.getElementById('device_id').value = device_id;
|
||||
const playDuration = getPlayDuration();
|
||||
const startPosition = getOption('startPosition', 'start');
|
||||
let position_ms = 0;
|
||||
if (startPosition === 'random') {
|
||||
const duration = {{ track.duration_ms if track.duration_ms else 180000 }};
|
||||
position_ms = Math.floor(Math.random() * (duration - 30000));
|
||||
}
|
||||
fetch(`/play_track?device_id=${device_id}&track_uri={{ track.uri }}&position_ms=${position_ms}`, { method: 'POST' });
|
||||
if (playDuration > 0) {
|
||||
window.quizifyTimeout = setTimeout(() => { player.pause(); }, playDuration * 1000);
|
||||
}
|
||||
setCorrectAnswer();
|
||||
});
|
||||
|
||||
player.connect();
|
||||
window.spotifyPlayer = player;
|
||||
};
|
||||
|
||||
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 = `<strong>${result.name}</strong> - ${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 += `<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];
|
||||
}
|
||||
}
|
||||
|
||||
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 = `<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
|
||||
resultContainer.innerHTML += `
|
||||
<div style="margin-top:10px;">
|
||||
<img src="{{ track.album.images[0].url }}" alt="Cover" style="width:80px;border-radius:8px;"><br>
|
||||
<strong>${i18n.song}:</strong> {{ track.name }}<br>
|
||||
<strong>${i18n.artist}:</strong> {{ track.artists[0].name }}<br>
|
||||
<strong>${i18n.album}:</strong> {{ track.album.name }}<br>
|
||||
<strong>${i18n.year}:</strong> {{ track.album.release_date[:4] }}<br>
|
||||
<a href="{{ track.external_urls.spotify }}" target="_blank" style="color:#1DB954;">${i18n.open_on_spotify}</a>
|
||||
</div>
|
||||
`;
|
||||
// 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() {
|
||||
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');
|
||||
updateMultiplayerUI();
|
||||
|
||||
// Prüfe, ob MultiplayerPopup existiert und sichtbar ist
|
||||
const mpPopup = document.getElementById('multiplayerPopup');
|
||||
if (!mpPopup || mpPopup.style.display === 'none') {
|
||||
quizifyReady();
|
||||
}
|
||||
};
|
||||
|
||||
function quizifyReady() {
|
||||
// Hier alles, was nach dem Schließen des Popups passieren soll
|
||||
if (window.onSpotifyWebPlaybackSDKReady) {
|
||||
window.onSpotifyWebPlaybackSDKReady();
|
||||
}
|
||||
setCorrectAnswer();
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -57,5 +57,196 @@
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block extra_body %}
|
||||
<!-- Hier dein gesamtes JS aus quiz.html, aber OHNE Multiplayer-Logik -->
|
||||
<script>
|
||||
let allTracks = {{ all_tracks|tojson }};
|
||||
let currentGameMode = "{{ game_mode }}";
|
||||
let correctAnswer = "";
|
||||
const i18n = {{ translations|tojson }};
|
||||
|
||||
// Spotify Web Playback SDK
|
||||
window.onSpotifyWebPlaybackSDKReady = () => {
|
||||
const token = '{{ access_token }}';
|
||||
const player = new Spotify.Player({
|
||||
name: 'Musik Quiz Player',
|
||||
getOAuthToken: cb => { cb(token); },
|
||||
volume: 0.5
|
||||
});
|
||||
|
||||
player.addListener('ready', ({ device_id }) => {
|
||||
document.getElementById('device_id').value = device_id;
|
||||
const playDuration = getPlayDuration();
|
||||
const startPosition = getOption('startPosition', 'start');
|
||||
let position_ms = 0;
|
||||
if (startPosition === 'random') {
|
||||
const duration = {{ track.duration_ms if track.duration_ms else 180000 }};
|
||||
position_ms = Math.floor(Math.random() * (duration - 30000));
|
||||
}
|
||||
fetch(`/play_track?device_id=${device_id}&track_uri={{ track.uri }}&position_ms=${position_ms}`, { method: 'POST' });
|
||||
if (playDuration > 0) {
|
||||
window.quizifyTimeout = setTimeout(() => { player.pause(); }, playDuration * 1000);
|
||||
}
|
||||
setCorrectAnswer();
|
||||
});
|
||||
|
||||
player.connect();
|
||||
window.spotifyPlayer = player;
|
||||
};
|
||||
|
||||
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 = `<strong>${result.name}</strong> - ${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 checkAnswer() {
|
||||
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>`;
|
||||
} 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
|
||||
resultContainer.innerHTML += `
|
||||
<div style="margin-top:10px;">
|
||||
<img src="{{ track.album.images[0].url }}" alt="Cover" style="width:80px;border-radius:8px;"><br>
|
||||
<strong>${i18n.song}:</strong> {{ track.name }}<br>
|
||||
<strong>${i18n.artist}:</strong> {{ track.artists[0].name }}<br>
|
||||
<strong>${i18n.album}:</strong> {{ track.album.name }}<br>
|
||||
<strong>${i18n.year}:</strong> {{ track.album.release_date[:4] }}<br>
|
||||
<a href="{{ track.external_urls.spotify }}" target="_blank" style="color:#1DB954;">${i18n.open_on_spotify}</a>
|
||||
</div>
|
||||
`;
|
||||
document.getElementById('nextQuestionBtn').style.display = 'inline-block';
|
||||
});
|
||||
}
|
||||
|
||||
function switchGameMode(mode) {
|
||||
window.location.href = `/reset_quiz/{{ playlist_id }}?next_mode=${mode}`;
|
||||
}
|
||||
|
||||
function setOption(key, value) { localStorage.setItem(key, value); }
|
||||
function getOption(key, defaultValue) { return localStorage.getItem(key) || defaultValue; }
|
||||
|
||||
window.onload = function() {
|
||||
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');
|
||||
if (window.onSpotifyWebPlaybackSDKReady) window.onSpotifyWebPlaybackSDKReady();
|
||||
};
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- Multiplayer-Daten im Singleplayer immer löschen -->
|
||||
<script>
|
||||
localStorage.removeItem('quizify_multiplayer_names');
|
||||
localStorage.removeItem('quizify_multiplayer_scores');
|
||||
localStorage.removeItem('quizify_multiplayer_current');
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user