123
This commit is contained in:
164
public/game.js
164
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 = '<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) {
|
||||
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 = '<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) => {
|
||||
@ -1970,6 +2058,13 @@
|
||||
$('host-panel')?.classList.remove('active');
|
||||
$('join-panel')?.classList.remove('active');
|
||||
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) {
|
||||
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', () => {
|
||||
$('instructions-overlay')?.classList.remove('hidden');
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user