53 lines
1.6 KiB
HTML
53 lines
1.6 KiB
HTML
{% 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 %} |