Bonchellon/Star-wars-card-game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

123

Browse Source
This commit is contained in:
Bonchellon
2026-01-28 00:30:13 +03:00
parent b19badb31d
commit c009a78f61
1 changed files with 96 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
public/game.js
View File

@ -108,6 +108,79 @@
return div.innerHTML; return div.innerHTML;
} }
// Обработчик списка комнат - определяем глобально ДО подключения к серверу
window.handleRoomsList = function(roomsList) {
const roomsListEl = $('rooms-list');
if (!roomsListEl) {
console.warn('rooms-list element not found');
return;
}
console.log('handleRoomsList called with:', roomsList);
if (!roomsList || roomsList.length === 0) {
roomsListEl.innerHTML = '<p class="hint" style="text-align: center; padding: 2rem; color: #94a3b8;">Нет доступных игр</p>';
return;
}
roomsListEl.innerHTML = roomsList.map((room) => {
const status = room.gameStarted ? 'Игра идёт' : 'Ожидание игроков';
const statusColor = room.gameStarted ? 'var(--amber)' : 'var(--cyan)';
const playersText = room.players && room.players.length > 0 ? room.players.join(', ') : 'Нет игроков';
const canJoin = !room.gameStarted && room.playerCount < room.maxPlayers;
const actionIcon = room.gameStarted ? '<i data-lucide="eye" style="width: 14px; height: 14px; vertical-align: middle; margin-right: 0.3rem;"></i>' : (canJoin ? '<i data-lucide="play" style="width: 14px; height: 14px; vertical-align: middle; margin-right: 0.3rem;"></i>' : '');
const actionText = room.gameStarted ? 'Наблюдать' : (canJoin ? 'Подключиться' : 'Полная');
const actionClass = room.gameStarted ? 'btn-ghost' : (canJoin ? 'btn-primary' : 'btn-ghost');
const actionDisabled = !room.gameStarted && !canJoin;
return `<div class="room-item" style="padding: 1rem; margin-bottom: 0.75rem; background: rgba(0,0,0,0.3); border: 2px solid rgba(212,168,75,0.2); border-radius: 8px;">
<div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.5rem;">
<div>
<div style="font-weight: 700; color: var(--cyan); font-size: 1.1rem; letter-spacing: 0.1em;">${escapeHtml(room.code)}</div>
<div style="font-size: 0.85rem; color: ${statusColor}; margin-top: 0.25rem;">${status}</div>
</div>
<div style="text-align: right; font-size: 0.85rem; color: #94a3b8;">
<div>Игроки: ${room.playerCount}/${room.maxPlayers}</div>
${room.spectators > 0 ? `<div>Наблюдателей: ${room.spectators}</div>` : ''}
${room.hasAI ? '<div style="color: var(--amber); display: inline-flex; align-items: center; gap: 0.3rem;"><i data-lucide="bot" style="width: 14px; height: 14px;"></i>ИИ</div>' : ''}
</div>
</div>
<div style="font-size: 0.8rem; color: #94a3b8; margin-bottom: 0.5rem;">${escapeHtml(playersText)}</div>
<button type="button" class="btn ${actionClass}" data-room-code="${room.code}" ${actionDisabled ? 'disabled' : ''} style="width: 100%;">${actionIcon}${actionText}</button>
</div>`;
}).join('');
// Обработчики подключения к комнатам
$all('.room-item button').forEach(btn => {
btn.addEventListener('click', function() {
const code = this.dataset.roomCode;
const name = ($('browse-name')?.value || '').trim() || 'Игрок';
if (!code) return;
if (!socket || !socket.connected) {
const url = window.location.origin;
connect(url);
socket.once('connect', () => {
socket.emit('joinRoom', { code, name });
});
} else {
socket.emit('joinRoom', { code, name });
}
});
});
// Обновляем иконки Lucide после создания кнопок
if (typeof lucide !== 'undefined') {
setTimeout(() => {
try {
lucide.createIcons();
} catch (e) {
console.warn('Error updating Lucide icons:', e);
}
}, 100);
}
};
function connect(url) { function connect(url) {
if (socket) { if (socket) {
socket.disconnect(); socket.disconnect();
@ -164,7 +237,22 @@
renderPlayerList('connect-player-list', lobby); renderPlayerList('connect-player-list', lobby);
}); });
socket.on('roomsList', (roomsList) => { socket.on('roomsList', (roomsList) => {
if (typeof window.handleRoomsList === 'function') window.handleRoomsList(roomsList); console.log('Received roomsList:', roomsList);
if (typeof window.handleRoomsList === 'function') {
window.handleRoomsList(roomsList);
} else {
console.warn('handleRoomsList function not found, using fallback');
// Fallback: отображаем список напрямую
const roomsListEl = $('rooms-list');
if (roomsListEl) {
if (!roomsList || roomsList.length === 0) {
roomsListEl.innerHTML = '<p class="hint" style="text-align: center; padding: 2rem; color: #94a3b8;">Нет доступных игр</p>';
} else {
// Простое отображение для отладки
roomsListEl.innerHTML = '<p class="hint" style="text-align: center; padding: 2rem; color: #94a3b8;">Найдено игр: ' + roomsList.length + '. Функция handleRoomsList еще не загружена.</p>';
}
}
}
}); });
socket.on('joinedAsSpectator', (data) => { socket.on('joinedAsSpectator', (data) => {
@ -1970,6 +2058,13 @@
$('host-panel')?.classList.remove('active'); $('host-panel')?.classList.remove('active');
$('join-panel')?.classList.remove('active'); $('join-panel')?.classList.remove('active');
clearError(); clearError();
// Показываем сообщение о загрузке
const roomsListEl = $('rooms-list');
if (roomsListEl) {
roomsListEl.innerHTML = '<p class="hint" style="text-align: center; padding: 2rem; color: #94a3b8;">Загрузка списка игр...</p>';
}
// Подключаемся к серверу если еще не подключены // Подключаемся к серверу если еще не подключены
if (!socket || !socket.connected) { if (!socket || !socket.connected) {
const url = window.location.origin; const url = window.location.origin;
@ -2157,73 +2252,6 @@
} }
}); });
// Обработчик списка комнат
window.handleRoomsList = function(roomsList) {
const roomsListEl = $('rooms-list');
if (!roomsListEl) return;
if (!roomsList || roomsList.length === 0) {
roomsListEl.innerHTML = '<p class="hint" style="text-align: center; padding: 2rem; color: #94a3b8;">Нет доступных игр</p>';
return;
}
roomsListEl.innerHTML = roomsList.map((room) => {
const status = room.gameStarted ? 'Игра идёт' : 'Ожидание игроков';
const statusColor = room.gameStarted ? 'var(--amber)' : 'var(--cyan)';
const playersText = room.players.length > 0 ? room.players.join(', ') : 'Нет игроков';
const canJoin = !room.gameStarted && room.playerCount < room.maxPlayers;
const actionIcon = room.gameStarted ? '<i data-lucide="eye" style="width: 14px; height: 14px; vertical-align: middle; margin-right: 0.3rem;"></i>' : (canJoin ? '<i data-lucide="play" style="width: 14px; height: 14px; vertical-align: middle; margin-right: 0.3rem;"></i>' : '');
const actionText = room.gameStarted ? 'Наблюдать' : (canJoin ? 'Подключиться' : 'Полная');
const actionClass = room.gameStarted ? 'btn-ghost' : (canJoin ? 'btn-primary' : 'btn-ghost');
const actionDisabled = !room.gameStarted && !canJoin;
return `<div class="room-item" style="padding: 1rem; margin-bottom: 0.75rem; background: rgba(0,0,0,0.3); border: 2px solid rgba(212,168,75,0.2); border-radius: 8px;">
<div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.5rem;">
<div>
<div style="font-weight: 700; color: var(--cyan); font-size: 1.1rem; letter-spacing: 0.1em;">${escapeHtml(room.code)}</div>
<div style="font-size: 0.85rem; color: ${statusColor}; margin-top: 0.25rem;">${status}</div>
</div>
<div style="text-align: right; font-size: 0.85rem; color: #94a3b8;">
<div>Игроки: ${room.playerCount}/${room.maxPlayers}</div>
${room.spectators > 0 ? `<div>Наблюдателей: ${room.spectators}</div>` : ''}
${room.hasAI ? '<div style="color: var(--amber); display: inline-flex; align-items: center; gap: 0.3rem;"><i data-lucide="bot" style="width: 14px; height: 14px;"></i>ИИ</div>' : ''}
</div>
</div>
<div style="font-size: 0.8rem; color: #94a3b8; margin-bottom: 0.5rem;">${escapeHtml(playersText)}</div>
<button type="button" class="btn ${actionClass}" data-room-code="${room.code}" ${actionDisabled ? 'disabled' : ''} style="width: 100%;">${actionIcon}${actionText}</button>
</div>`;
}).join('');
// Обработчики подключения к комнатам
$all('.room-item button').forEach(btn => {
btn.addEventListener('click', function() {
const code = this.dataset.roomCode;
const name = ($('browse-name')?.value || '').trim() || 'Игрок';
if (!code) return;
if (!socket || !socket.connected) {
const url = window.location.origin;
connect(url);
socket.once('connect', () => {
socket.emit('joinRoom', { code, name });
});
} else {
socket.emit('joinRoom', { code, name });
}
});
});
// Обновляем иконки Lucide после создания кнопок
if (typeof lucide !== 'undefined') {
setTimeout(() => {
try {
lucide.createIcons();
} catch (e) {
console.warn('Error updating Lucide icons:', e);
}
}, 100);
}
};
$('btn-instructions')?.addEventListener('click', () => { $('btn-instructions')?.addEventListener('click', () => {
$('instructions-overlay')?.classList.remove('hidden'); $('instructions-overlay')?.classList.remove('hidden');
}); });