diff --git a/django/templates/play/game/score_overview.html b/django/templates/play/game/score_overview.html index 8a6fa75..8f92bf6 100644 --- a/django/templates/play/game/score_overview.html +++ b/django/templates/play/game/score_overview.html @@ -70,9 +70,55 @@

Punktestand

+ +{% if is_last_question and request.session.mode != "learn" %} + +
+ + + {% with participant=participants.1 %} +
+ {{ participant.display_name }} +

{{ participant.score }}

+
+ 🥈
{{ participant.display_name }} +
+
+ {% endwith %} + + + {% with participant=participants.0 %} + +
+ {{ participant.display_name }} +

{{ participant.score }}

+
+ 🥇
+
+ +
+ {% endwith %} + + + {% with participant=participants.2 %} +
+ {{ participant.display_name }} +

{{ participant.score }}

+
+ 🥉
{{ participant.display_name }} +
+
+ {% endwith %} + +
+{% endif %} + + +
{% for participant in participants %} + {% if not is_last_question or request.session.mode == "learn" %} {% if participant == my_participant or is_host %}
@@ -92,61 +138,15 @@

{{ participant.score }} Punkte

{% if participant == my_participant or request.session.mode == "learn"%}

+{{ participant.last_score }} Punkte

- {% endif %} -
- - {% if participant == my_participant or request.session.mode == "learn" %} @@ -211,53 +211,7 @@ return new Promise(resolve => setTimeout(resolve, ms)); } - document.addEventListener('DOMContentLoaded', async function() { - const items = document.querySelectorAll('#scoreboard div'); - const top3 = Array.from(items).slice(0, 3); // Nur die ersten 3 animieren - - // Sofort Startzustände für Top3 setzen, die anderen sofort sichtbar - items.forEach((el, index) => { - if (index >= 3) { - el.style.opacity = '1'; - el.style.transform = 'translateY(0)'; - } else { - el.style.opacity = '0'; - el.style.transform = 'translateY(20px)'; - } - }); - try{ - document.getElementById("finish-button").style.display = 'none';} - catch{} - - // Warten bevor Animation startet - await sleep(500); // <<< hier die Pause - - - // Transition-Eigenschaft setzen nach Render-Zyklus - requestAnimationFrame(() => { - top3.forEach(el => { - el.style.transition = 'all 0.8s ease'; - }); - - // Animation für Top 3 starten – von Platz 3 zu 1 - top3.reverse().forEach((el, index) => { - setTimeout(() => { - el.style.opacity = '1'; - el.style.transform = 'translateY(0)'; - - if (index === top3.length - 1) { - triggerConfetti(); - try{ - - document.getElementById("finish-button").style.display = 'block';} - catch{} - - } - }, index * 1000); // Zeitversetzt aufdecken - }); - }); - }); - + function triggerConfetti() { const end = Date.now() + 15 * 1000; (function frame() { @@ -266,6 +220,7 @@ if (Date.now() < end) requestAnimationFrame(frame); })(); } + triggerConfetti(); {% endif %} {% include 'play/game/common_scripts.html' %} @@ -277,6 +232,48 @@