podest_1.Version

django/templates/play/game/score_overview.html

@@ -70,9 +70,55 @@
 
         <div class="mb-6">
             <h2 class="text-xl font-bold mb-4">Punktestand</h2>
+            
+{% if is_last_question and request.session.mode != "learn" %}
+<!-- Siegerpodest -->
+<div class="flex justify-center items-end gap-4 mb-8">
+  
+  <!-- Platz 2 links -->
+  {% with participant=participants.1 %}
+  <div class="flex flex-col items-center  break-words">
+     <span class="display_name text-gray-600 font-black text-2xl dark:text-white " id="display_name-1">{{ participant.display_name }}</span>
+      <p data-score="{{ participant.score }}" data-last-score="{{ participant.last_score }}" class="dark:text-white text-gray-600 font-bold show-score text-md" id="score-1">{{ participant.score }}</p> 
+    <div  class="h-40 w-24 rounded-t-md  font-bold text-center text-base  shadow-lg bg-gradient-to-b from-gray-400 via-gray-300 to-gray-300 flex flex-col items-center justify-center text-black dark:text-white cursor-pointer leading-tight">
+            <span class="size-10 rounded-full bg-white text-black text-center flex items-center justify-center font-bold text-3xl">🥈</span><br>{{ participant.display_name }}
+    </div>
+  </div>
+  {% endwith %}
+
+  <!-- Platz 1 mitte -->
+  {% with participant=participants.0 %}
+  
+  <div class="flex flex-col items-center break-words">
+    <span class="display_name text-gray-600 font-black text-2xl dark:text-white" id="display_name-0">{{ participant.display_name }}</span>
+    <p data-score="{{ participant.score }}" data-last-score="{{ participant.last_score }}" class="dark:text-white text-gray-600 font-bold show-score text-md" id="score-0">{{ participant.score }}</p> 
+    <div  class="h-64  w-24 rounded-t-md  font-bold text-center text-base  shadow-lg  bg-gradient-to-b from-yellow-400 via-yellow-300 to-yellow-600 flex flex-col items-center justify-center text-black dark:text-white cursor-pointer leading-tight">
+      <span class="size-12 rounded-full bg-white text-black text-center flex items-center justify-center font-bold text-4xl"> 🥇</span><br>  
+    </div>
+    
+  </div>
+  {% endwith %}
+
+  <!-- Platz 3 rechts -->
+  {% with participant=participants.2 %}
+  <div class="flex flex-col items-center  break-words">
+     <span class="display_name text-gray-600 font-black text-2xl dark:text-white " id="display_name-2">{{ participant.display_name }}</span>
+      <p data-score="{{ participant.score }}" data-last-score="{{ participant.last_score }}" class="dark:text-white text-gray-600 font-bold show-score text-md" id="score-2">{{ participant.score }}</p> 
+    <div  class="h-30  w-24 rounded-t-md font-bold text-center text-base shadow-lg  bg-gradient-to-b from-orange-500 via-orange-400 to-orange-700  flex flex-col items-center justify-center text-black dark:text-white cursor-pointer leading-tight">
+            <span class="size-10 rounded-full bg-white text-black text-center flex items-center justify-center font-bold text-3xl ">🥉</span><br>{{ participant.display_name }}
+    </div>
+  </div>
+  {% endwith %}
+
+</div>
+{% endif %}
+
+
+
 
             <div id="scoreboard" class="leading-relaxed">
                 {% for participant in participants %}
+                {% if not is_last_question or request.session.mode == "learn"  %}
                     {% if participant == my_participant or is_host %}
                         <div class="dark:bg-transparent mt-2 shadow-sm p-4 bg-gray-100 rounded-lg border-2 border {% if forloop.counter <= 3 %}border-yellow-500{% else %}border-transparent{% endif %}">
                             <div class="flex flex-col items-start gap-1">  
@@ -92,61 +138,15 @@
                                 <p data-score="{{ participant.score }}" data-last-score="{{ participant.last_score }}" class="dark:text-white text-gray-600 font-bold show-score" id="score-{{ forloop.counter0 }}">{{ participant.score }} Punkte</p> 
                                 {% if participant == my_participant or request.session.mode == "learn"%}
                                 <p class="text-blue-600 font-bold text-sm">+{{ participant.last_score }} Punkte</p>
-                               {% endif %}
-                               </div>
-                            <script>                                
-
-                            async function start() {
-
-                            elements=document.getElementsByClassName("show-score");
-                            for (let i = 0; i < elements.length; i++) {
-                            const el = elements[i];
-
-                            let counter=Number(el.getAttribute('data-score'))-Number(el.getAttribute('data-last-score'));
-                            let goal=Number(el.getAttribute('data-score'));
-                            let interval= setInterval(function(){
-                            el.innerHTML = counter + " Punkte";
-
-                               
-                                if(counter<=goal){
-                            el.innerHTML = counter + " Punkte";
-                            counter+=8;
-                           
-                                }
-                                else{
-                                    
-                                    el.innerHTML = goal + " Punkte";
-                                    clearInterval(interval);
-                                }
-
-                            }, 20);}}
-
-                            function bounce(){
-                                                            
-                            const names = document.getElementsByClassName("display_name");
-                            for (let i = 0; i < names.length; i++) {
-                            names[i].classList.add("animate-bounce");
-                           }
-                            }
- 
-
-                            {% if is_last_question %}
-                            bounce();
-
-                            {% else %}
-                             start();
-                        
-
-                                {% endif %}
-                                
                             
                                
+                               {% endif %}
+                              {% endif %}
+                              
+                               
+                               </div>
 
 
-
-
-                            </script>
-
                                                  
                             
                             {% 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();
   </script>
 {% endif %}  
 {% include 'play/game/common_scripts.html' %}
@@ -277,6 +232,48 @@
 
 
 <script>
+                              async function start() {
+
+                            elements=document.getElementsByClassName("show-score");
+                            for (let i = 0; i < elements.length; i++) {
+                            const el = elements[i];
+
+                            let counter=Number(el.getAttribute('data-score'))-Number(el.getAttribute('data-last-score'));
+                            let goal=Number(el.getAttribute('data-score'));
+                            let interval= setInterval(function(){
+                            el.innerHTML = counter + " Punkte";
+
+                               
+                                if(counter<=goal){
+                            el.innerHTML = counter + " Punkte";
+                            counter+=8;
+                           
+                                }
+                                else{
+                                    
+                                    el.innerHTML = goal + " Punkte";
+                                    clearInterval(interval);
+                                }
+
+                            }, 20);}}
+
+                            function bounce(){
+                                                            
+                            const names = document.getElementsByClassName("display_name");
+                            for (let i = 0; i < names.length; i++) {
+                            names[i].classList.add("animate-bounce");
+                           }
+                            }
+ 
+
+                            {% if is_last_question %}
+                            start();
+                            bounce();
+                                
+
+                            {% else %}
+                             start();
+                                {% endif %}
     
 const richtigeAntworten = [
   "Deine Antwort ist nicht falsch. Sie ist richtig!",