modified: templates/quiz_multiplayer.html
This commit is contained in:
SimolZimol
@@ -1,11 +1,72 @@
|
||||
{% extends "quiz_base.html" %}
|
||||
{% block quiz_content %}
|
||||
<div id="multiplayerBar" style="display:none;margin-bottom:15px;text-align:center;">
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>{{ translations['quiz_title'] }}</title>
|
||||
<script src="https://sdk.scdn.co/spotify-player.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
body {
|
||||
background: linear-gradient(135deg, #191414 0%, #1DB954 100%);
|
||||
color: #fff;
|
||||
font-family: Arial, sans-serif;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.quiz-container {
|
||||
background: rgba(25, 20, 20, 0.92);
|
||||
padding: 40px 30px 30px 30px;
|
||||
border-radius: 22px;
|
||||
box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37);
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.btn {
|
||||
padding: 10px 15px;
|
||||
margin: 5px;
|
||||
background-color: #1DB954;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn:hover { background-color: #1ed760; }
|
||||
.btn-secondary { background-color: #535353; }
|
||||
.btn-secondary:hover { background-color: #7b7b7b; }
|
||||
.btn-danger { background-color: #f44336; }
|
||||
.game-modes { margin: 20px 0; display: flex; justify-content: center; }
|
||||
.result-container { margin: 20px 0; padding: 15px; border-radius: 5px; text-align: center; display: none; }
|
||||
.correct { background-color: #e8f5e9; border: 1px solid #4CAF50; }
|
||||
.incorrect { background-color: #ffebee; border: 1px solid #f44336; }
|
||||
input[type="text"], input[type="number"] {
|
||||
padding: 10px; width: 300px; border: 1px solid #ddd; border-radius: 20px; font-size: 16px;
|
||||
}
|
||||
.search-results {
|
||||
margin-top: 15px;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
display: none;
|
||||
}
|
||||
.search-item { padding: 8px 10px; border-bottom: 1px solid #eee; cursor: pointer; }
|
||||
.search-item:hover { background-color: #f5f5f5; }
|
||||
.hint-container { margin: 15px 0; font-style: italic; color: #bdbdbd; }
|
||||
#multiplayerBar { display:none;margin-bottom:15px;text-align:center; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="quiz-container">
|
||||
<div id="multiplayerBar">
|
||||
<span id="multiplayerPlayers"></span>
|
||||
</div>
|
||||
<div style="text-align:center; margin-bottom: 10px;">
|
||||
<span id="progressInfo">{{ translations['songs_in_playlist'] }} {{ total_questions }}</span>
|
||||
</div>
|
||||
<div style="text-align:center; margin-bottom: 20px;">
|
||||
<a href="/reset_quiz/{{ playlist_id }}?local_multiplayer=1" class="btn btn-danger" style="margin-top:10px;">{{ translations['end_quiz'] }}</a>
|
||||
</div>
|
||||
@@ -45,7 +106,7 @@
|
||||
<div id="resultContainer" class="result-container" style="background:#222; color:#fff; border:1px solid #444;"></div>
|
||||
<a id="nextQuestionBtn" href="/quiz/{{ playlist_id }}?mode={{ game_mode }}&local_multiplayer=1" class="btn" style="display: none;">{{ translations['next_question'] }}</a>
|
||||
</div>
|
||||
<div class="hint-container" style="color:#bdbdbd;">
|
||||
<div class="hint-container">
|
||||
{% if game_mode == 'artist' %}
|
||||
<p>{{ translations['tip_artist'] }}</p>
|
||||
{% elif game_mode == 'title' %}
|
||||
@@ -54,11 +115,10 @@
|
||||
<p>{{ translations['tip_year'] }}</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
</div>
|
||||
|
||||
{% block extra_body %}
|
||||
{% 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;">
|
||||
<!-- Multiplayer Popup -->
|
||||
<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>
|
||||
@@ -70,9 +130,10 @@
|
||||
<button class="btn" type="submit" style="margin-top:10px;">Starten</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function startMultiplayer(e) {
|
||||
</div>
|
||||
<script>
|
||||
// --- Multiplayer Popup ---
|
||||
function startMultiplayer(e) {
|
||||
e.preventDefault();
|
||||
const names = [];
|
||||
for(let i=1;i<=4;i++) {
|
||||
@@ -89,16 +150,15 @@ function startMultiplayer(e) {
|
||||
document.getElementById('multiplayerPopup').style.display = 'none';
|
||||
updateMultiplayerUI();
|
||||
quizifyReady();
|
||||
}
|
||||
</script>
|
||||
{% endif %}
|
||||
<script>
|
||||
let allTracks = {{ all_tracks|tojson }};
|
||||
let currentGameMode = "{{ game_mode }}";
|
||||
let correctAnswer = "";
|
||||
const i18n = {{ translations|tojson }};
|
||||
}
|
||||
|
||||
window.onSpotifyWebPlaybackSDKReady = () => {
|
||||
// --- Spotify Web Playback SDK ---
|
||||
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',
|
||||
@@ -108,14 +168,34 @@ window.onSpotifyWebPlaybackSDKReady = () => {
|
||||
|
||||
player.addListener('ready', ({ device_id }) => {
|
||||
document.getElementById('device_id').value = device_id;
|
||||
// Musikstart wird erst durch quizifyReady() ausgelöst!
|
||||
});
|
||||
|
||||
player.connect();
|
||||
window.spotifyPlayer = player;
|
||||
};
|
||||
};
|
||||
|
||||
function setCorrectAnswer() {
|
||||
function quizifyReady() {
|
||||
// Musik abspielen, wenn Popup geschlossen
|
||||
if (window.spotifyPlayer && window.spotifyPlayer._options && window.spotifyPlayer._options.getOAuthToken) {
|
||||
const device_id = document.getElementById('device_id').value;
|
||||
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(() => { window.spotifyPlayer.pause(); }, playDuration * 1000);
|
||||
}
|
||||
} else if (window.onSpotifyWebPlaybackSDKReady) {
|
||||
window.onSpotifyWebPlaybackSDKReady();
|
||||
}
|
||||
setCorrectAnswer();
|
||||
}
|
||||
|
||||
function setCorrectAnswer() {
|
||||
if (currentGameMode === 'artist') {
|
||||
correctAnswer = "{{ track.artists[0].name }}";
|
||||
document.getElementById('question-text').innerText = i18n.question_artist;
|
||||
@@ -130,9 +210,9 @@ function setCorrectAnswer() {
|
||||
document.getElementById('answerInput').placeholder = i18n.input_year;
|
||||
document.getElementById('answerInput').type = "number";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function searchTracks() {
|
||||
function searchTracks() {
|
||||
const query = document.getElementById('answerInput').value;
|
||||
if (query.length < 2) {
|
||||
document.getElementById('searchResults').style.display = 'none';
|
||||
@@ -164,9 +244,9 @@ function searchTracks() {
|
||||
});
|
||||
resultsContainer.style.display = 'block';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function updateMultiplayerUI() {
|
||||
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");
|
||||
@@ -180,9 +260,9 @@ function updateMultiplayerUI() {
|
||||
document.getElementById('multiplayerPlayers').innerHTML = html;
|
||||
document.getElementById('answerInput').placeholder = "Antwort für " + names[current];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function checkAnswer() {
|
||||
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");
|
||||
@@ -213,7 +293,6 @@ function checkAnswer() {
|
||||
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>
|
||||
@@ -229,24 +308,30 @@ function checkAnswer() {
|
||||
localStorage.setItem('quizify_multiplayer_current', next);
|
||||
updateMultiplayerUI();
|
||||
document.getElementById('nextQuestionBtn').style.display = 'inline-block';
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error checking answer:', error);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function switchGameMode(mode) {
|
||||
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; }
|
||||
function setOption(key, value) { localStorage.setItem(key, value); }
|
||||
function getOption(key, defaultValue) { return localStorage.getItem(key) || defaultValue; }
|
||||
|
||||
window.onload = function() {
|
||||
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');
|
||||
@@ -262,23 +347,9 @@ window.onload = function() {
|
||||
label.style.display = '';
|
||||
}
|
||||
document.getElementById('startPosition').value = getOption('startPosition', 'start');
|
||||
updateMultiplayerUI();
|
||||
// Starte Quiz nur, wenn KEIN Multiplayer-Popup offen 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() {
|
||||
function onPlayDurationChange() {
|
||||
const sel = document.getElementById('playDuration');
|
||||
const custom = document.getElementById('customDuration');
|
||||
const label = document.getElementById('customDurationLabel');
|
||||
@@ -291,18 +362,17 @@ function onPlayDurationChange() {
|
||||
label.style.display = 'none';
|
||||
setOption('playDuration', sel.value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getPlayDuration() {
|
||||
function getPlayDuration() {
|
||||
const sel = document.getElementById('playDuration');
|
||||
if (sel.value === 'custom') {
|
||||
return parseInt(document.getElementById('customDuration').value) || 10;
|
||||
}
|
||||
return parseInt(sel.value);
|
||||
}
|
||||
}
|
||||
|
||||
// "Nochmal X Sekunden"-Button Funktion
|
||||
function replayDuration() {
|
||||
function replayDuration() {
|
||||
const playDuration = getPlayDuration();
|
||||
if (window.spotifyPlayer) {
|
||||
window.spotifyPlayer.resume();
|
||||
@@ -311,6 +381,7 @@ function replayDuration() {
|
||||
window.spotifyPlayer.pause();
|
||||
}, playDuration * 1000);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user