Initial Game Logic 2

2025-04-06 15:57:42 +02:00
parent 3637edce33
commit 3f07ce4ec7
15 changed files with 1506 additions and 151 deletions
--- a/django/templates/play/game/question_participant.html
+++ b/django/templates/play/game/question_participant.html
@@ -1,19 +1,115 @@
-{% load static %}
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="{% static 'css/t-style.css' %}">
-    <title>qivip</title>
-</head>
-<body>
-    <div class="qp-answer-container" id="qp-answer-container">
-        {% for option in question.data.options %}
-                <div>
-                    <p>{{ option.value }}</p>
-                </div>
-        {% endfor %}
+{% extends 'base.html' %}
+
+{% block content %}
+<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>
-</body>
-</html>
+    <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>
+        
+        <div class="p-4 bg-blue-50 rounded-lg mb-6">
+            <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>
+
+        <div class="grid grid-cols-2 gap-4" id="options-container">
+            {% for option in question_data.options %}
+                <button 
+                    class="p-4 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option"
+                    data-index="{{ forloop.counter0 }}"
+                    onclick="submitAnswer({{ forloop.counter0 }});">
+                    <p class="text-lg">{{ option.value }}</p>
+                </button>
+            {% endfor %}
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+{% include 'play/game/common_scripts.html' %}
+<script>
+    let hasAnswered = false;
+    const joinCode = '{{ quiz_game.join_code }}';
+    const participantId = '{{ participant.participant_id }}';
+    const questionStartTime = {{ start_time }};
+    const questionDuration = 30000; // 30 seconds in milliseconds
+    const gameSocket = initializeGameSocket(joinCode);
+
+    gameSocket.onmessage = function(e) {
+        const data = JSON.parse(e.data);
+        if (data.type === 'redirect' && data.url) {
+            window.location.href = data.url;
+        } else if (data.type === 'game_state_update' && 
+            data.action === 'show_scores' && 
+            data.redirect_url) {
+            window.location.href = data.redirect_url;
+        }
+    };
+
+    gameSocket.onclose = function(e) {
+        wsUtil.handleClose(e);
+    };
+
+    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
+        }));
+    }
+
+    // Timer
+    function updateTimer() {
+        const now = Date.now();
+        const elapsed = now - questionStartTime;
+        const remaining = Math.max(0, Math.ceil((questionDuration - elapsed) / 1000));
+        
+        document.getElementById('remaining-time').textContent = remaining;
+
+        if (remaining === 0 && !hasAnswered) {
+            // Auto-submit timeout answer
+            submitAnswer(-1);
+        } else if (remaining > 0) {
+            requestAnimationFrame(updateTimer);
+        }
+    }
+
+    function leaveGame() {
+        if (confirm('Möchtest du das Spiel wirklich verlassen?')) {
+            gameSocket.send(JSON.stringify({
+                type: 'leave_game',
+                participant_id: participantId
+            }));
+        }
+    }
+
+    // Start timer when page loads
+    updateTimer();
+</script>
+{% endblock %}