diff --git a/public/game.js b/public/game.js index f5e8fb0..2824bfc 100644 --- a/public/game.js +++ b/public/game.js @@ -108,6 +108,79 @@ 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 = '

Нет доступных игр

'; + 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 ? '' : (canJoin ? '' : ''); + const actionText = room.gameStarted ? 'Наблюдать' : (canJoin ? 'Подключиться' : 'Полная'); + const actionClass = room.gameStarted ? 'btn-ghost' : (canJoin ? 'btn-primary' : 'btn-ghost'); + const actionDisabled = !room.gameStarted && !canJoin; + + return `
+
+
+
${escapeHtml(room.code)}
+
${status}
+
+
+
Игроки: ${room.playerCount}/${room.maxPlayers}
+ ${room.spectators > 0 ? `
Наблюдателей: ${room.spectators}
` : ''} + ${room.hasAI ? '
ИИ
' : ''} +
+
+
${escapeHtml(playersText)}
+ +
`; + }).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) { if (socket) { socket.disconnect(); @@ -164,7 +237,22 @@ renderPlayerList('connect-player-list', lobby); }); 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 = '

Нет доступных игр

'; + } else { + // Простое отображение для отладки + roomsListEl.innerHTML = '

Найдено игр: ' + roomsList.length + '. Функция handleRoomsList еще не загружена.

'; + } + } + } }); socket.on('joinedAsSpectator', (data) => { @@ -1970,6 +2058,13 @@ $('host-panel')?.classList.remove('active'); $('join-panel')?.classList.remove('active'); clearError(); + + // Показываем сообщение о загрузке + const roomsListEl = $('rooms-list'); + if (roomsListEl) { + roomsListEl.innerHTML = '

Загрузка списка игр...

'; + } + // Подключаемся к серверу если еще не подключены if (!socket || !socket.connected) { 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 = '

Нет доступных игр

'; - 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 ? '' : (canJoin ? '' : ''); - const actionText = room.gameStarted ? 'Наблюдать' : (canJoin ? 'Подключиться' : 'Полная'); - const actionClass = room.gameStarted ? 'btn-ghost' : (canJoin ? 'btn-primary' : 'btn-ghost'); - const actionDisabled = !room.gameStarted && !canJoin; - - return `
-
-
-
${escapeHtml(room.code)}
-
${status}
-
-
-
Игроки: ${room.playerCount}/${room.maxPlayers}
- ${room.spectators > 0 ? `
Наблюдателей: ${room.spectators}
` : ''} - ${room.hasAI ? '
ИИ
' : ''} -
-
-
${escapeHtml(playersText)}
- -
`; - }).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', () => { $('instructions-overlay')?.classList.remove('hidden'); });