Initial Game Logic 2

django/templates/play/game/score_overview.html

@@ -1,5 +1,128 @@
-<!--> 
-    Spieler sehen ihre Punktzahl, Platzierung und Richtig/Falsch
+{% extends 'base.html' %}
 
-    Host: Scoreboard, Button: 'Weiter'
-</!-->
+{% block content %}
+<div class="container mx-auto px-4">
+    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+        <h1 class="text-3xl font-bold mb-6">Ergebnisse</h1>
+        
+        <div class="mb-6">
+            <h2 class="text-xl font-bold mb-4">Aktuelle Frage</h2>
+            <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>
+                {% endfor %}
+            </div>
+        </div>
+
+        <div class="mb-6">
+            <h2 class="text-xl font-bold mb-4">Punktestand</h2>
+            <div class="space-y-2">
+                {% for participant in participants %}
+                    <div class="p-4 {% if forloop.first %}bg-yellow-100 border-2 border-yellow-500{% else %}bg-gray-100{% endif %} rounded-lg flex justify-between items-center">
+                        <div>
+                            <p class="text-lg font-bold">{{ participant.display_name }}</p>
+                            <p class="text-gray-600">{{ participant.score }} Punkte</p>
+                        </div>
+                        {% if participant.last_answer_correct %}
+                            <span class="text-green-500">✓</span>
+                        {% elif participant.last_answer_correct == False %}
+                            <span class="text-red-500">✗</span>
+                        {% endif %}
+                    </div>
+                {% endfor %}
+            </div>
+        </div>
+
+        {% if is_host %}
+            {% if is_last_question %}
+                <button id="finish-button" class="w-full p-3 rounded-full bg-blue-600 text-white font-bold hover:bg-blue-700 transition-colors duration-200">
+                    Quiz beenden
+                </button>
+            {% else %}
+                <button id="next-button" class="w-full p-3 rounded-full bg-blue-600 text-white font-bold hover:bg-blue-700 transition-colors duration-200">
+                    Nächste Frage
+                </button>
+            {% endif %}
+        {% endif %}
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+{% include 'play/game/common_scripts.html' %}
+<script>
+    const joinCode = '{{ quiz_game.join_code }}';
+    const hostId = '{{ host_id }}';
+    const wsScheme = window.location.protocol === 'https:' ? 'wss' : 'ws';
+    const gameSocket = new WebSocket(
+        `${wsScheme}://${window.location.host}/ws/game/${joinCode}/`
+    );
+
+    gameSocket.onmessage = function(e) {
+        const data = JSON.parse(e.data);
+        if (data.type === 'game_state_update' && 
+            data.redirect_url && 
+            (data.action === 'next_question' || data.action === 'finish_game')) {
+            window.location.href = data.redirect_url;
+        } else if (data.type === 'answer_stats') {
+            updateAnswerStats(data.stats);
+        }
+    };
+
+    gameSocket.onclose = function(e) {
+        // Normal closure (code 1000) oder Navigation zu einer anderen Seite (code 1001)
+        if (e.code === 1000 || e.code === 1001) {
+            console.log('Game socket closed normally');
+        } else {
+            console.error('Game socket closed unexpectedly', e.code);
+        }
+    };
+
+    {% if is_host %}
+    // Add click handlers for host buttons
+    {% if is_last_question %}
+    var finishButton = document.getElementById('finish-button');
+    if (finishButton) {
+        finishButton.addEventListener('click', function() {
+            gameSocket.send(JSON.stringify({
+                'type': 'finish_game',
+                'host_id': hostId
+            }));
+        });
+    }
+    {% else %}
+    var nextButton = document.getElementById('next-button');
+    if (nextButton) {
+        nextButton.addEventListener('click', function() {
+            gameSocket.send(JSON.stringify({
+                'type': 'next_question',
+                'host_id': hostId
+            }));
+        });
+    }
+    {% 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] + ' Antworten';
+                }
+            }
+        }
+    }
+
+    // Request answer stats when page loads
+    gameSocket.onopen = function(e) {
+        gameSocket.send(JSON.stringify({
+            'type': 'get_answer_stats'
+        }));
+    };
+</script>
+{% endblock %}