375 lines
17 KiB
HTML
375 lines
17 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto px-4 py-8">
|
|
|
|
<div class="max-w-2xl mx-auto bg-white rounded-lg shadow-lg p-6">
|
|
<!-- Quiz Info -->
|
|
<div class="text-center mb-8">
|
|
<h3 class="text-xl text-gray-600 mb-2">{{ quiz.name }}</h3>
|
|
{% if request.session.mode != "learn" %}
|
|
<div class="bg-blue-100 rounded-lg p-4 mb-4">
|
|
<h1 class="text-4xl font-bold text-blue-800">{{ quiz_game.join_code }}</h1>
|
|
<p class="text-sm text-blue-600 mt-1">Spiel-Code</p>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Participant Info -->
|
|
{% if participant %}
|
|
<div class="mb-6 text-center">
|
|
<div class="inline-flex items-center bg-green-100 px-4 py-2 rounded-full">
|
|
<span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
|
|
<span>Angemeldet als <b>{{ participant.display_name }}</b></span>
|
|
</div>
|
|
<a href="{% url 'play:create_participant' quiz_game.join_code %}">Auftreten ändern...</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Participants List -->
|
|
<div class="mb-6">
|
|
<h3 class="font-bold text-lg mb-3 flex items-center">
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
|
|
</svg>
|
|
Teilnehmer
|
|
</h3>
|
|
<ul id="participants-list" class="space-y-2 max-h-60 overflow-y-auto">
|
|
<li class="text-gray-500 p-3 bg-gray-50 rounded-lg text-center">Warte auf Teilnehmer...</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="space-y-3">
|
|
{% if host_id %}
|
|
<button id="start-button" class="w-full p-4 rounded-lg bg-blue-600 text-white font-bold hover:bg-blue-700 transform hover:scale-105 transition duration-200 shadow-md flex items-center justify-center" type="button">
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
Spiel starten
|
|
</button>
|
|
{% endif %}
|
|
{% if participant %}
|
|
<button id="leave-button" class="w-full p-4 rounded-lg bg-red-100 text-red-700 font-bold hover:bg-red-200 transition duration-200 flex items-center justify-center" type="button">
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
|
</svg>
|
|
Spiel verlassen
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
const joinCode = '{{ quiz_game.join_code }}';
|
|
const wsScheme = window.location.protocol === 'https:' ? 'wss' : 'ws';
|
|
let lobbySocket = null;
|
|
let reconnectAttempts = 0;
|
|
let pingInterval = null;
|
|
const maxReconnectAttempts = 5;
|
|
const pingDelay = 30000; // 30 seconds
|
|
const heartbeatDelay = 10000; // 10 seconds
|
|
let heartbeatInterval = null;
|
|
|
|
function startPingInterval() {
|
|
stopPingInterval();
|
|
pingInterval = setInterval(() => {
|
|
if (lobbySocket && lobbySocket.readyState === WebSocket.OPEN) {
|
|
lobbySocket.send(JSON.stringify({ type: 'ping' }));
|
|
}
|
|
}, pingDelay);
|
|
}
|
|
|
|
function stopPingInterval() {
|
|
if (pingInterval) {
|
|
clearInterval(pingInterval);
|
|
pingInterval = null;
|
|
}
|
|
}
|
|
|
|
function startHeartbeat() {
|
|
stopHeartbeat();
|
|
heartbeatInterval = setInterval(() => {
|
|
if (lobbySocket && lobbySocket.readyState === WebSocket.OPEN) {
|
|
lobbySocket.send(JSON.stringify({
|
|
type: 'heartbeat',
|
|
participant_id: '{{ participant.participant_id }}'
|
|
}));
|
|
}
|
|
}, heartbeatDelay);
|
|
}
|
|
|
|
function stopHeartbeat() {
|
|
if (heartbeatInterval) {
|
|
clearInterval(heartbeatInterval);
|
|
heartbeatInterval = null;
|
|
}
|
|
}
|
|
|
|
function connectWebSocket() {
|
|
if (lobbySocket && (lobbySocket.readyState === WebSocket.CONNECTING || lobbySocket.readyState === WebSocket.OPEN)) {
|
|
return lobbySocket; // Already connected or connecting
|
|
}
|
|
|
|
if (reconnectAttempts >= maxReconnectAttempts) {
|
|
console.error('Max reconnection attempts reached');
|
|
return null;
|
|
}
|
|
|
|
|
|
try {
|
|
lobbySocket = new WebSocket(
|
|
wsScheme + '://' + window.location.host + '/ws/play/lobby/' + joinCode + '/'
|
|
);
|
|
|
|
lobbySocket.onopen = function(e) {
|
|
console.log('Lobby socket connected');
|
|
reconnectAttempts = 0;
|
|
startPingInterval();
|
|
{% if participant %}
|
|
startHeartbeat();
|
|
{% endif %}
|
|
// Request initial participants list
|
|
lobbySocket.send(JSON.stringify({
|
|
type: 'update_participants'
|
|
}));
|
|
};
|
|
|
|
lobbySocket.onclose = function(e) {
|
|
wsUtil.handleClose(e);
|
|
stopPingInterval();
|
|
stopHeartbeat();
|
|
lobbySocket = null;
|
|
reconnectAttempts++;
|
|
if (reconnectAttempts < maxReconnectAttempts) {
|
|
const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 10000); // Exponential backoff, max 10s
|
|
setTimeout(connectWebSocket, delay);
|
|
}
|
|
};
|
|
|
|
lobbySocket.onerror = function(e) {
|
|
console.error('Lobby socket error:', e);
|
|
};
|
|
|
|
lobbySocket.onmessage = function(e) {
|
|
const data = JSON.parse(e.data);
|
|
if (data.type === 'participants_list_update') {
|
|
updateParticipantsList(data.participants);
|
|
} else if (data.type === 'game_state_update' &&
|
|
data.action === 'start_game' &&
|
|
data.redirect_url) {
|
|
window.location.href = data.redirect_url;
|
|
} else if (data.type === 'pong') {
|
|
console.log('Received pong from server');
|
|
} else if (data.type === 'redirect' && data.url) {
|
|
window.location.href = data.url;
|
|
} else if (data.type === 'player_joined' && '{{ host_id }}') {
|
|
toast.create(`${data.player_name} ist beigetreten`, 'success');
|
|
} else if (data.type === 'player_left') {
|
|
if (data.was_kicked) {
|
|
// Show kick message
|
|
toast.create(`${data.player_name} wurde vom Host entfernt`, 'error');
|
|
|
|
// If this client was kicked, redirect to home
|
|
if (data.participant_id === '{{ participant.participant_id }}') {
|
|
window.location.href = '/';
|
|
}
|
|
} else {
|
|
toast.create(`${data.player_name} hat das Spiel verlassen`, 'info');
|
|
}
|
|
}
|
|
};
|
|
|
|
return lobbySocket;
|
|
} catch (error) {
|
|
console.error('Error creating WebSocket:', error);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Initial connection
|
|
lobbySocket = connectWebSocket();
|
|
|
|
function leaveGame() {
|
|
if (confirm('Möchtest du das Spiel wirklich verlassen?')) {
|
|
lobbySocket.send(JSON.stringify({
|
|
type: 'leave_game',
|
|
participant_id: '{{ participant.participant_id }}'
|
|
}));
|
|
}
|
|
}
|
|
|
|
function kickPlayer(participantId) {
|
|
const button = event.currentTarget;
|
|
if (!button.disabled && confirm('Möchtest du diesen Spieler wirklich aus dem Spiel entfernen?')) {
|
|
console.log('Attempting to kick player:', participantId);
|
|
console.log('Host ID:', '{{ quiz_game.host_id }}');
|
|
console.log('Current host cookie:', document.cookie.split('; ').find(row => row.startsWith('host_id=')));
|
|
|
|
button.disabled = true;
|
|
button.classList.add('opacity-50');
|
|
button.innerHTML = '<svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">' +
|
|
'<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>' +
|
|
'<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>' +
|
|
'</svg>';
|
|
|
|
if (lobbySocket && lobbySocket.readyState === WebSocket.OPEN) {
|
|
const message = {
|
|
type: 'kick_player',
|
|
participant_id: participantId,
|
|
host_id: '{{ quiz_game.host_id }}'
|
|
};
|
|
console.log('Sending kick message:', message);
|
|
lobbySocket.send(JSON.stringify(message));
|
|
} else {
|
|
console.error('WebSocket is not connected');
|
|
button.disabled = false;
|
|
button.classList.remove('opacity-50');
|
|
alert('Verbindungsfehler. Bitte versuche es erneut.');
|
|
}
|
|
}
|
|
}
|
|
|
|
function updateParticipantsList(participants) {
|
|
const list = document.getElementById('participants-list');
|
|
if (!list) {
|
|
console.warn('Participants list element not found');
|
|
return;
|
|
}
|
|
|
|
if (!participants || participants.length === 0) {
|
|
list.innerHTML = '<li class="text-gray-500 p-3 bg-gray-50 rounded-lg text-center">Noch keine Teilnehmer...</li>';
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Finde neue und entfernte Teilnehmer
|
|
const currentParticipants = Array.from(list.children)
|
|
.map(li => li.textContent)
|
|
.filter(name => name !== 'Noch keine Teilnehmer...' && name !== 'Fehler beim Aktualisieren der Liste');
|
|
|
|
const newParticipants = participants
|
|
.filter(p => !currentParticipants.includes(p.display_name))
|
|
.map(p => p.display_name);
|
|
|
|
const removedParticipants = currentParticipants
|
|
.filter(name => !participants.find(p => p.display_name === name));
|
|
|
|
// Aktualisiere die Liste mit animierten Einträgen
|
|
list.innerHTML = participants
|
|
.filter(p => p && p.display_name) // Filter out invalid participants
|
|
.map(function(p) {
|
|
if (!p || !p.display_name) {
|
|
console.error('Invalid participant data:', p);
|
|
return '';
|
|
}
|
|
const displayName = p.display_name;
|
|
const initial = displayName.charAt(0) || '?';
|
|
const participantId = p.participant_id;
|
|
|
|
// Check if this entry is for the host
|
|
const isHost = participantId === '{{ quiz_game.host_id }}';
|
|
const isCurrentUserHost = document.cookie.includes('host_id={{ quiz_game.host_id }}');
|
|
console.log('Participant check:', {
|
|
participantId,
|
|
displayName,
|
|
isHost,
|
|
isCurrentUserHost,
|
|
gameHostId: '{{ quiz_game.host_id }}'
|
|
});
|
|
|
|
// Show kick button if current user is host and this is not their own entry
|
|
let kickButton = '';
|
|
if (isCurrentUserHost && !isHost && participantId) {
|
|
kickButton = '<button onclick="kickPlayer(\'' + p.participant_id + '\')" ' +
|
|
'class="p-1.5 rounded-full text-red-600 hover:text-white hover:bg-red-600 ' +
|
|
'transition-all duration-200 group relative" title="Spieler kicken">' +
|
|
'<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">' +
|
|
'<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" ' +
|
|
'd="M6 18L18 6M6 6l12 12"/>' +
|
|
'</svg>' +
|
|
'<span class="absolute -top-8 left-1/2 transform -translate-x-1/2 px-2 py-1 ' +
|
|
'bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 ' +
|
|
'transition-opacity duration-200 whitespace-nowrap">Spieler kicken</span>' +
|
|
'</button>';
|
|
}
|
|
|
|
return '<li class="p-3 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition duration-200 flex items-center justify-between animate-fade-in">' +
|
|
'<div class="flex items-center">' +
|
|
'<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">' +
|
|
'<span class="text-blue-600 font-bold">' + initial.toUpperCase() + '</span>' +
|
|
'</div>' +
|
|
'<span class="font-medium">' + displayName + '</span>' +
|
|
'</div>' +
|
|
'<div class="flex items-center space-x-2">' +
|
|
(isHost ? '<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Host</span>' : '') +
|
|
'<span class="w-2 h-2 bg-green-500 rounded-full ml-2"></span>' +
|
|
kickButton +
|
|
'</div>' +
|
|
'</li>';
|
|
})
|
|
.join('');
|
|
|
|
// Benachrichtigungen werden über WebSocket-Events gehandelt
|
|
} catch (error) {
|
|
console.error('Error updating participants list:', error);
|
|
list.innerHTML = '<li class="text-red-500">Fehler beim Aktualisieren der Liste</li>';
|
|
}
|
|
}
|
|
|
|
{% if host_id %}
|
|
const startButton = document.getElementById('start-button');
|
|
if (startButton) {
|
|
startButton.addEventListener('click', function() {
|
|
if (lobbySocket && lobbySocket.readyState === WebSocket.OPEN) {
|
|
startButton.disabled = true;
|
|
startButton.classList.add('opacity-50');
|
|
startButton.innerHTML =
|
|
'<svg class="animate-spin h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">' +
|
|
'<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>' +
|
|
'<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>' +
|
|
'</svg>' +
|
|
'Spiel wird gestartet...';
|
|
lobbySocket.send(JSON.stringify({
|
|
type: 'start_game',
|
|
host_id: '{{ host_id }}'
|
|
}));
|
|
}
|
|
});
|
|
}
|
|
{% endif %}
|
|
|
|
{% if participant %}
|
|
const leaveButton = document.getElementById('leave-button');
|
|
if (leaveButton) {
|
|
leaveButton.addEventListener('click', function() {
|
|
if (lobbySocket && lobbySocket.readyState === WebSocket.OPEN) {
|
|
leaveButton.disabled = true;
|
|
leaveButton.classList.add('opacity-50');
|
|
leaveButton.innerHTML =
|
|
'<svg class="animate-spin h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">' +
|
|
'<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>' +
|
|
'<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>' +
|
|
'</svg>' +
|
|
'Verlasse Spiel...';
|
|
lobbySocket.send(JSON.stringify({
|
|
type: 'leave_game',
|
|
participant_id: '{{ participant.participant_id }}'
|
|
}));
|
|
|
|
// Warte kurz und leite dann zur Startseite weiter
|
|
setTimeout(() => {
|
|
window.location.href = '/';
|
|
}, 500);
|
|
}
|
|
});
|
|
}
|
|
{% endif %}
|
|
</script>
|
|
{% endblock %} |