Initial Game Logic 2

django/templates/play/game/wait_for_other_players.html

@@ -1,5 +1,53 @@
-<!--> 
-    Spieler: Countdown, automatische Weiterleitung
+{% extends 'base.html' %}
 
-    (Host: Frage)
-</!-->
+{% block content %}
+<div class="container mx-auto px-4">
+    <div class="bg-white rounded-lg shadow-md p-6 mb-6 text-center">
+        <h1 class="text-3xl font-bold mb-6">Warte auf andere Spieler...</h1>
+        
+        <div class="p-4 bg-blue-50 rounded-lg mb-6 inline-block">
+            <p class="text-blue-600 text-xl mb-2">Die nächste Frage beginnt in</p>
+            <p id="countdown" class="text-6xl font-bold text-blue-700">5</p>
+        </div>
+
+        <div class="animate-pulse">
+            <p class="text-gray-600">Bitte warte, bis alle Spieler bereit sind</p>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+{% include 'play/game/common_scripts.html' %}
+<script>
+    const joinCode = '{{ quiz_game.join_code }}';
+    const wsScheme = window.location.protocol === 'https:' ? 'wss' : 'ws';
+    const gameSocket = new WebSocket(
+        wsScheme + '://' + window.location.host + '/ws/game/' + joinCode + '/'
+    );
+
+    let countdown = 5;
+    const countdownElement = document.getElementById('countdown');
+
+    gameSocket.onmessage = function(e) {
+        const data = JSON.parse(e.data);
+        if (data.type === 'game_state_update' && data.action === 'start_question' && data.redirect_url) {
+            window.location.href = data.redirect_url;
+        }
+    };
+
+    gameSocket.onclose = function(e) {
+        wsUtil.handleClose(e);
+    };
+
+    function updateCountdown() {
+        countdownElement.textContent = countdown;
+        if (countdown > 0) {
+            countdown--;
+            setTimeout(updateCountdown, 1000);
+        }
+    }
+
+    updateCountdown();
+</script>
+{% endblock %}