Merge branch 'master' into '23-bilder-fur-fragen-und-co'

# Conflicts:
#   django/templates/play/game/question_host.html

django/templates/play/game/finished.html

@@ -7,7 +7,7 @@
         <div class="bg-white rounded-lg shadow-md p-8 mb-6">
             <div class="text-center mb-8">
                 <h1 class="text-4xl font-bold text-blue-600 mb-4">Quiz beendet!</h1>
-                <p class="text-xl text-gray-600">Vielen Dank fürs Mitspielen!</p>
+                <p class="text-xl text-gray-600">Vielen Dank fürs Spielen!</p>
             </div>
                     
             {% if not is_host %}

django/templates/play/game/question_host.html

@@ -1,7 +1,14 @@
 {% extends 'base.html' %}
-
 {% block content %}
+
+{% if request.session.mode == "learn" %}
+
 <div class="container mx-auto px-4">
+    <div class="flex justify-end mb-4">
+        <button onclick="leaveGame()" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded">
+            Spiel verlassen
+        </button>
+    </div>{% endif %}
     <div class="bg-white rounded-lg shadow-md p-6 mb-6">
         <p class="text-gray-700 font-bold text-xl mb-4">Frage {{ question_index|add:1 }} von {{ total_questions }}</p>
         <h1 class="text-3xl font-bold mb-6">{{ question_data.question }}</h1>
@@ -12,29 +19,44 @@
             </div>
         {% endif %}
         
+        {% if request.session.mode == "learn" %} 
+        <div class="grid grid-cols-1 gap-4 mb-6">
+        {% else %}
         <div class="grid grid-cols-2 gap-4 mb-6">
+        {% endif %}
+                {% if request.session.mode != "learn" %} 
             <div class="p-4 bg-blue-50 rounded-lg">
-                <p class="text-blue-600 text-xl mb-2">Verbleibende Zeit</p>
+                <p class="text-blue-600 text-xl mb-2">Verbleibende Zeit </p>
                 <p id="remaining-time" class="text-6xl font-bold text-blue-700">30</p>
             </div>
+            {% endif %}
+
             <div class="p-4 bg-blue-50 rounded-lg">
                 <p class="text-blue-600 text-xl mb-2">Antworten</p>
                 <p id="answer-count" class="text-6xl font-bold text-blue-700">0/0</p>
             </div>
         </div>
 
-        <div class="grid grid-cols-2 gap-4">
+        <div class="grid grid-cols-2 gap-4" id="options-container">
             {% for option in question_data.options %}
-                <div class="p-4 bg-gray-100 rounded-lg" data-correct="{{ option.is_correct }}">
+                <button 
+                    class="p-4 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option"
+                    data-index="{{ forloop.counter0 }}"
+                    {% if request.session.mode == "learn" %}
+                    onclick="submitAnswer({{ forloop.counter0 }});" {% endif %}>
                     <p class="text-lg">{{ option.value }}</p>
-                    <p id="option-count-{{ forloop.counter0 }}" class="text-gray-600 hidden">0 Antworten</p>
-                </div>
+                </button>
             {% endfor %}
         </div>
+
+
+
     </div>
 </div>
 {% endblock %}
 
+
+
 {% block extra_js %}
 {% include 'play/game/common_scripts.html' %}
 <script>
@@ -46,7 +68,7 @@
     let answeredParticipants = 0;
     let totalParticipants = 0;
     const optionCounts = {};
-
+    
     gameSocket.onmessage = function(e) {
         const data = JSON.parse(e.data);
         if (data.type === 'participant_answer') {
@@ -91,7 +113,7 @@
         // Show correct answers and answer counts
         var correctOptions = document.querySelectorAll('[data-correct="True"]');
         for (var i = 0; i < correctOptions.length; i++) {
-            correctOptions[i].classList.add('border-2', 'border-green-500');
+            correctOptions[i].classList.add('border-2', 'border-blue-500');
         }
         
         // Show answer counts
@@ -110,6 +132,7 @@
     }
 
     // Timer
+    {% if request.session.mode != "learn" %}
     function updateTimer() {
         const now = Date.now();
         const elapsed = now - questionStartTime;
@@ -124,6 +147,9 @@
         }
     }
 
+    
+    {% endif %}
+    
     // Request initial participants list
     gameSocket.onopen = function(e) {
         gameSocket.send(JSON.stringify({
@@ -131,5 +157,51 @@
         }));
         updateTimer();
     };
+
+    
+    let hasAnswered = false;
+    const participantId = '{{ host_id }}'; // HIER IST DER HOST DER SPIELER
+
+    function leaveGame() {
+        if (confirm('Möchtest du das Spiel wirklich verlassen?')) {
+            gameSocket.send(JSON.stringify({
+                type: 'leave_game',
+                participant_id: participantId
+            }));
+            window.location.href = '/';
+            gameSocket.close();
+        }
+    }
+
+    
+
+    function submitAnswer(optionIndex) {
+        if (hasAnswered) return;
+        
+        hasAnswered = true;
+        const now = Date.now();
+        const timeRemaining = Math.max(0, questionDuration - (now - questionStartTime));
+
+        // Disable all options and highlight selected
+        const options = document.getElementsByClassName('answer-option');
+        for (let option of options) {
+            option.disabled = true;
+            option.classList.remove('hover:bg-blue-100');
+            if (parseInt(option.dataset.index) === optionIndex) {
+                option.classList.remove('bg-gray-100');
+                option.classList.add('bg-blue-600', 'text-white');
+            } else {
+                option.classList.add('opacity-50');
+            }
+        }
+
+        // Send answer to server
+        gameSocket.send(JSON.stringify({
+            type: 'submit_answer',
+            participant_id: participantId,
+            answer: optionIndex,
+            time_remaining: timeRemaining
+        }));
+    }
 </script>
 {% endblock %}

django/templates/play/game/score_overview.html

@@ -10,33 +10,43 @@
             <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 %}">
+                    <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>
-
+    {% if request.session.mode != "learn" %} 
+    
         <div class="mb-6">
             <h2 class="text-xl font-bold mb-4">Punktestand</h2>
             <div class="space-y-2">
                 {% for participant in participants %}
+                {% if participant == my_participant or is_host %}
+                
                     <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>
+                        <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>
+                    {% else %}
+
+
+                    {% endif %}
+                    
+
+
                 {% endfor %}
             </div>
         </div>
-
+        {% endif %}
         {% 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">
@@ -112,7 +122,8 @@
             if (stats.hasOwnProperty(optionIndex)) {
                 var element = document.getElementById('option-count-' + optionIndex);
                 if (element) {
-                    element.textContent = stats[optionIndex] + ' Antworten';
+                    
+                    element.textContent = stats[optionIndex] + ' Antwort(en)';
                 }
             }
         }