{% extends 'base.html' %}

{% 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 %}