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 03:35:47 +02:00
parent 3b43e1346e
commit 1764f745e4
1 changed files with 378 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
templates/quiz_multiplayer.html
View File

@@ -1,11 +1,72 @@
{% extends "quiz_base.html" %} <!DOCTYPE html>
{% block quiz_content %} <html>
<div id="multiplayerBar" style="display:none;margin-bottom:15px;text-align:center;"> <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> <span id="multiplayerPlayers"></span>
</div> </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;"> <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> <a href="/reset_quiz/{{ playlist_id }}?local_multiplayer=1" class="btn btn-danger" style="margin-top:10px;">{{ translations['end_quiz'] }}</a>
</div> </div>
@@ -45,7 +106,7 @@
<div id="resultContainer" class="result-container" style="background:#222; color:#fff; border:1px solid #444;"></div> <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> <a id="nextQuestionBtn" href="/quiz/{{ playlist_id }}?mode={{ game_mode }}&local_multiplayer=1" class="btn" style="display: none;">{{ translations['next_question'] }}</a>
</div> </div>
<div class="hint-container" style="color:#bdbdbd;"> <div class="hint-container">
{% if game_mode == 'artist' %} {% if game_mode == 'artist' %}
<p>{{ translations['tip_artist'] }}</p> <p>{{ translations['tip_artist'] }}</p>
{% elif game_mode == 'title' %} {% elif game_mode == 'title' %}
@@ -54,10 +115,9 @@
<p>{{ translations['tip_year'] }}</p> <p>{{ translations['tip_year'] }}</p>
{% endif %} {% endif %}
</div> </div>
{% endblock %} </div>
{% block extra_body %} <!-- Multiplayer Popup -->
{% 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;"> <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;"> <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> <h3>Lokaler Multiplayer</h3>
@@ -72,6 +132,7 @@
</div> </div>
</div> </div>
<script> <script>
// --- Multiplayer Popup ---
function startMultiplayer(e) { function startMultiplayer(e) {
e.preventDefault(); e.preventDefault();
const names = []; const names = [];
@@ -90,9 +151,8 @@ function startMultiplayer(e) {
updateMultiplayerUI(); updateMultiplayerUI();
quizifyReady(); quizifyReady();
} }
</script>
{% endif %} // --- Spotify Web Playback SDK ---
<script>
let allTracks = {{ all_tracks|tojson }}; let allTracks = {{ all_tracks|tojson }};
let currentGameMode = "{{ game_mode }}"; let currentGameMode = "{{ game_mode }}";
let correctAnswer = ""; let correctAnswer = "";
@@ -108,13 +168,33 @@ window.onSpotifyWebPlaybackSDKReady = () => {
player.addListener('ready', ({ device_id }) => { player.addListener('ready', ({ device_id }) => {
document.getElementById('device_id').value = device_id; document.getElementById('device_id').value = device_id;
// Musikstart wird erst durch quizifyReady() ausgelöst!
}); });
player.connect(); player.connect();
window.spotifyPlayer = player; window.spotifyPlayer = player;
}; };
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() { function setCorrectAnswer() {
if (currentGameMode === 'artist') { if (currentGameMode === 'artist') {
correctAnswer = "{{ track.artists[0].name }}"; correctAnswer = "{{ track.artists[0].name }}";
@@ -213,7 +293,6 @@ function checkAnswer() {
resultContainer.innerHTML = `<h3>${i18n.wrong}</h3> resultContainer.innerHTML = `<h3>${i18n.wrong}</h3>
<p>${i18n.right_answer} <strong>${data.correct_answer}</strong></p>`; <p>${i18n.right_answer} <strong>${data.correct_answer}</strong></p>`;
} }
// Song-Infos ergänzen
resultContainer.innerHTML += ` resultContainer.innerHTML += `
<div style="margin-top:10px;"> <div style="margin-top:10px;">
<img src="{{ track.album.images[0].url }}" alt="Cover" style="width:80px;border-radius:8px;"><br> <img src="{{ track.album.images[0].url }}" alt="Cover" style="width:80px;border-radius:8px;"><br>
@@ -229,9 +308,6 @@ function checkAnswer() {
localStorage.setItem('quizify_multiplayer_current', next); localStorage.setItem('quizify_multiplayer_current', next);
updateMultiplayerUI(); updateMultiplayerUI();
document.getElementById('nextQuestionBtn').style.display = 'inline-block'; document.getElementById('nextQuestionBtn').style.display = 'inline-block';
})
.catch(error => {
console.error('Error checking answer:', error);
}); });
} }
@@ -247,6 +323,15 @@ function setOption(key, value) { localStorage.setItem(key, value); }
function getOption(key, defaultValue) { return localStorage.getItem(key) || defaultValue; } 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 playDuration = getOption('playDuration', '0');
const sel = document.getElementById('playDuration'); const sel = document.getElementById('playDuration');
const custom = document.getElementById('customDuration'); const custom = document.getElementById('customDuration');
@@ -262,21 +347,7 @@ window.onload = function() {
label.style.display = ''; label.style.display = '';
} }
document.getElementById('startPosition').value = getOption('startPosition', 'start'); 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 sel = document.getElementById('playDuration');
@@ -301,7 +372,6 @@ function getPlayDuration() {
return parseInt(sel.value); return parseInt(sel.value);
} }
// "Nochmal X Sekunden"-Button Funktion
function replayDuration() { function replayDuration() {
const playDuration = getPlayDuration(); const playDuration = getPlayDuration();
if (window.spotifyPlayer) { if (window.spotifyPlayer) {
@@ -313,4 +383,5 @@ function replayDuration() {
} }
} }
</script> </script>
{% endblock %} </body>
</html>