From 75e25fb3df7705050ab24576bfc9a663be967d33 Mon Sep 17 00:00:00 2001
From: ben8 <ben_ollech@outlook.com>
Date: Sat, 17 May 2025 12:08:25 +0200
Subject: [PATCH] fix und Balkenanimation

---
 django/play/consumers/game.py                 |  2 +-
 .../templates/play/game/score_overview.html   | 41 +++++++++++++------
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/django/play/consumers/game.py b/django/play/consumers/game.py
index 484fe7f..985412b 100644
--- a/django/play/consumers/game.py
+++ b/django/play/consumers/game.py
@@ -188,7 +188,7 @@ class GameConsumer(AsyncWebsocketConsumer):
             question_data = json.loads(current_question.data)
             print(answer_index)
             try:
-                #if answer_index >= 0 :  # -1 means timeout
+                if answer_index >= 0 :  # -1 means timeout
                     is_correct = question_data['options'][answer_index]['is_correct']
                     print(is_correct)
             except:
diff --git a/django/templates/play/game/score_overview.html b/django/templates/play/game/score_overview.html
index b75eed5..bf17498 100644
--- a/django/templates/play/game/score_overview.html
+++ b/django/templates/play/game/score_overview.html
@@ -10,10 +10,16 @@
             <p class="text-lg mb-2">{{ question_data.question }}</p>
             <div class="grid grid-cols-2 gap-4">
                 {% for option in question_data.options %}
-                    <div class="p-4 rounded-lg {% if option.is_correct %}bg-green-100 border-2 border-green-500 {% else %} bg-gray-100 {% endif %}">
-                        <p class="text-lg">{{ option.value }}</p>
-                        <p class="text-gray-600" id="option-count-{{ forloop.counter0 }}">0 Antworten</p>
-                    </div>
+                
+            <div id="option-box-{{ forloop.counter0 }}" class="bg-gray-100 relative p-4 rounded-lg overflow-hidden {% if option.is_correct %} border-2 border-green-500{% else %}border-2 border-red-500{% endif %}">
+            
+            <div id="option-fill-{{ forloop.counter0 }}" class="absolute left-0 top-0 h-full {% if option.is_correct %}bg-green-300 {% else %}bg-red-300 {% endif %} opacity-50 z-0 transition-all duration-1500 " style="width: 0%;"></div>
+            <div class="relative z-10">
+            <p class="text-lg">{{ option.value }}</p>
+            <p class="text-gray-600" id="option-count-{{ forloop.counter0 }}">0 Antworten</p>
+             
+            </div>
+        </div>
                 {% endfor %}
             </div>
         </div>
@@ -36,7 +42,7 @@
                                     {% endif %}
                                     {{ participant.display_name }}
                                 </p>
-                                <p class="text-gray-600">{{ participant.score }} Punkte</p> 
+                                <p data-last-score="{{ participant.last_score }}" class="text-gray-600" id="score-{{ forloop.counter0 }}">{{ participant.score }} Punkte</p> 
                             </div>                     
                             {% if participant.last_answer_correct %}
                                 <span class="text-green-500">✓</span>
@@ -66,6 +72,7 @@
 
 {% block extra_js %}
 {% if is_last_question %}
+
 <script>
     // Hilfsfunktion für Pausen
     function sleep(ms) {
@@ -174,17 +181,25 @@
     {% endif %}
     {% endif %}
 
-    function updateAnswerStats(stats) {
-        for (var optionIndex in stats) {
-            if (stats.hasOwnProperty(optionIndex)) {
-                var element = document.getElementById('option-count-' + optionIndex);
-                if (element) {
-                    
-                    element.textContent = stats[optionIndex] + ' Antwort(en)';
-                }
+function updateAnswerStats(stats) {
+    const total = Object.values(stats).reduce((a, b) => a + b, 0) || 1;
+
+    for (var optionIndex in stats) {
+        if (stats.hasOwnProperty(optionIndex)) {
+            var countElement = document.getElementById('option-count-' + optionIndex);
+            var fillElement = document.getElementById('option-fill-' + optionIndex);
+
+            if (countElement) {
+                countElement.textContent = stats[optionIndex] + ' Antwort(en)';
+            }
+
+            if (fillElement) {
+                const percentage = Math.round((stats[optionIndex] / total) * 100);
+                fillElement.style.width = percentage + '%';
             }
         }
     }
+}
 
     // Request answer stats when page loads
     gameSocket.onopen = function(e) {