101 lines
4.8 KiB
JavaScript
101 lines
4.8 KiB
JavaScript
(function () {
|
|
const BASE = '/Game';
|
|
const roomListEl = document.getElementById('room-list');
|
|
const roomListStatus = document.getElementById('room-list-status');
|
|
const LOBBY_MAP_NAME = 'LobbyA';
|
|
const LOBBY_ROOM_NAME = 'LobbyA';
|
|
|
|
function getNick() {
|
|
const el = document.getElementById('nick');
|
|
return (el && el.value || '').trim() || 'ผู้เล่น';
|
|
}
|
|
|
|
function refreshRoomList() {
|
|
if (!roomListStatus) return;
|
|
roomListStatus.textContent = 'โหลดรายการห้อง...';
|
|
fetch(BASE + '/api/spaces')
|
|
.then(r => r.json())
|
|
.then(list => {
|
|
if (!Array.isArray(list)) { roomListStatus.textContent = 'ไม่มีห้องที่เปิดอยู่'; return; }
|
|
roomListStatus.textContent = '';
|
|
if (!roomListEl) return;
|
|
roomListEl.innerHTML = '';
|
|
if (list.length === 0) {
|
|
roomListStatus.textContent = 'ยังไม่มีห้องสาธารณะ — สร้างห้อง Public หรือเข้าร่วมห้อง Private ด้วยรหัสด้านล่าง';
|
|
return;
|
|
}
|
|
list.forEach(room => {
|
|
const li = document.createElement('li');
|
|
li.className = 'room-item';
|
|
const code = room.spaceId || ('room-' + Math.random().toString(36).slice(2, 8));
|
|
const mapName = room.mapName || '—';
|
|
const count = room.peerCount != null ? room.peerCount : 0;
|
|
const max = room.maxPlayers != null ? room.maxPlayers : 10;
|
|
const full = count >= max;
|
|
const namePart = room.spaceName ? ' <span class="room-meta-inline">(' + escapeHtml(room.spaceName) + ')</span>' : '';
|
|
li.innerHTML = '<span class="room-name">' + escapeHtml(code) + '</span>' + namePart + ' <span class="room-meta">ฉาก: ' + escapeHtml(mapName) + ' · ' + count + '/' + max + ' คน' + (full ? ' (เต็ม)' : '') + '</span> ';
|
|
const btn = document.createElement('button');
|
|
btn.type = 'button';
|
|
btn.textContent = full ? 'เต็ม' : 'เข้าร่วม';
|
|
btn.disabled = full;
|
|
btn.addEventListener('click', () => {
|
|
window.location.href = 'room-lobby.html?space=' + encodeURIComponent(room.spaceId) + '&nick=' + encodeURIComponent(getNick());
|
|
});
|
|
li.appendChild(btn);
|
|
roomListEl.appendChild(li);
|
|
});
|
|
})
|
|
.catch(() => {
|
|
if (roomListStatus) roomListStatus.textContent = 'โหลดรายการห้องไม่ได้';
|
|
});
|
|
}
|
|
|
|
function escapeHtml(s) {
|
|
const div = document.createElement('div');
|
|
div.textContent = s;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
if (roomListEl) refreshRoomList();
|
|
setInterval(refreshRoomList, 8000);
|
|
|
|
const btnCreateLobby = document.getElementById('btn-create-lobby');
|
|
if (btnCreateLobby) {
|
|
btnCreateLobby.addEventListener('click', () => {
|
|
const nick = getNick();
|
|
fetch(BASE + '/api/maps')
|
|
.then(r => r.json())
|
|
.then(list => {
|
|
const maps = Array.isArray(list) ? list : [];
|
|
const lobbyMap = maps.find(m => (m.name || '').trim().toLowerCase() === LOBBY_MAP_NAME.toLowerCase());
|
|
const mapId = lobbyMap ? lobbyMap.id : 'lobbya';
|
|
const isPrivate = document.querySelector('input[name="room-type"]:checked')?.value === 'private';
|
|
const maxPlayers = Math.min(10, Math.max(2, parseInt(document.getElementById('max-players')?.value || 10, 10)));
|
|
const roomName = isPrivate ? 'ห้องส่วนตัว' : LOBBY_ROOM_NAME;
|
|
return fetch(BASE + '/api/spaces', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ mapId, name: roomName, isPrivate, maxPlayers })
|
|
}).then(r => r.json()).then(data => {
|
|
if (data.ok) {
|
|
window.location.href = 'room-lobby.html?space=' + encodeURIComponent(data.spaceId) + '&nick=' + encodeURIComponent(nick);
|
|
} else {
|
|
alert(data.error || 'สร้างห้องไม่ได้');
|
|
}
|
|
});
|
|
})
|
|
.catch(() => alert('โหลดรายการฉากไม่ได้ หรือยังไม่มีฉากชื่อ "' + LOBBY_MAP_NAME + '" ใน Editor — สร้างฉากชื่อ LobbyA ก่อน'));
|
|
});
|
|
}
|
|
|
|
const formJoin = document.getElementById('form-join');
|
|
const spaceIdInput = document.getElementById('space-id');
|
|
if (formJoin && spaceIdInput) {
|
|
formJoin.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
const spaceId = spaceIdInput.value.trim();
|
|
window.location.href = 'room-lobby.html?space=' + encodeURIComponent(spaceId) + '&nick=' + encodeURIComponent(getNick());
|
|
});
|
|
}
|
|
})();
|