(function () { 'use strict'; function checkLoginStatus() { const isLoggedIn = localStorage.getItem('isLoggedIn'); if (!isLoggedIn || isLoggedIn !== 'true') { window.location.href = '/Login/'; return false; } return true; } if (!checkLoginStatus()) { return; } const BASE = '/Game'; /** mapId ฉาก LobbyA (/Game/data/maps/mlsbbxfe.json — ไม่ใช่ mn8nx46h ที่เป็น LobbyB) */ const LOBBY_A_MAP_ID = 'mlsbbxfe'; /** ผู้เล่นจริง + Bot รวมกัน = 6 ที่นั่ง (เลขปุ่ม = จำนวนผู้เล่น, ที่เหลือเป็น Bot) */ const LOBBY_TOTAL_SLOTS = 6; var selectedSlot = 3; var isPrivate = false; function getNick() { return (localStorage.getItem('playerName') || '').trim() || 'ผู้เล่น'; } function botCountForSlot(n) { var humans = Math.min(LOBBY_TOTAL_SLOTS, Math.max(1, parseInt(n, 10) || 1)); return Math.max(0, LOBBY_TOTAL_SLOTS - humans); } function maxPlayersForSlot(n) { var humans = Math.min(LOBBY_TOTAL_SLOTS, Math.max(1, parseInt(n, 10) || 3)); return Math.min(10, Math.max(1, humans)); } var btnBack = document.getElementById('btn-back'); var tabPublic = document.getElementById('tab-public'); var tabPrivate = document.getElementById('tab-private'); var privateBlock = document.getElementById('create-private-block'); var inputRoomName = document.getElementById('create-room-name'); var inputPrivatePin = document.getElementById('create-private-pin'); var playerBtnsWrap = document.getElementById('create-player-btns'); var btnConfirm = document.getElementById('btn-confirm'); var statusEl = document.getElementById('create-status'); var summaryEl = document.getElementById('create-summary'); function updateSummary() { if (!summaryEl) return; var bots = botCountForSlot(selectedSlot); summaryEl.textContent = 'สรุปจำนวน : ' + selectedSlot + ' ผู้เล่น + ' + bots + ' Bot'; } btnBack?.addEventListener('click', function () { window.location.href = '/Main-Menu/'; }); inputPrivatePin?.addEventListener('input', function (e) { e.target.value = e.target.value.replace(/[^0-9]/g, '').slice(0, 4); updateConfirmButtonEnabled(); }); function setTab(privateMode) { isPrivate = privateMode; tabPublic?.classList.toggle('create-mode-btn--active', !privateMode); tabPrivate?.classList.toggle('create-mode-btn--active', privateMode); tabPublic?.setAttribute('aria-selected', privateMode ? 'false' : 'true'); tabPrivate?.setAttribute('aria-selected', privateMode ? 'true' : 'false'); if (privateBlock) privateBlock.classList.toggle('create-view--hidden', !privateMode); updateConfirmButtonEnabled(); } tabPublic?.addEventListener('click', function () { setTab(false); }); tabPrivate?.addEventListener('click', function () { setTab(true); }); function selectSlot(n) { selectedSlot = Math.min(6, Math.max(1, parseInt(n, 10) || 3)); var buttons = playerBtnsWrap ? playerBtnsWrap.querySelectorAll('.create-num-btn') : []; buttons.forEach(function (btn) { var v = parseInt(btn.getAttribute('data-slot'), 10); var on = v === selectedSlot; btn.classList.toggle('create-num-btn--active', on); btn.setAttribute('aria-pressed', on ? 'true' : 'false'); }); updateSummary(); } function buildPlayerButtons() { if (!playerBtnsWrap) return; playerBtnsWrap.innerHTML = ''; for (var i = 1; i <= 6; i++) { var b = document.createElement('button'); b.type = 'button'; b.className = 'create-num-btn' + (i === selectedSlot ? ' create-num-btn--active' : ''); b.setAttribute('data-slot', String(i)); b.setAttribute('aria-label', 'เลือก ' + i + ' ผู้เล่น รวม ' + LOBBY_TOTAL_SLOTS + ' ที่นั่ง (Bot ' + botCountForSlot(i) + ' ตัว)'); b.setAttribute('title', i + ' ผู้เล่น + ' + botCountForSlot(i) + ' Bot'); b.setAttribute('aria-pressed', i === selectedSlot ? 'true' : 'false'); b.textContent = String(i); b.addEventListener('click', function () { selectSlot(this.getAttribute('data-slot')); }); playerBtnsWrap.appendChild(b); } updateSummary(); } function getRoomName() { return (inputRoomName && inputRoomName.value || '').trim(); } function getPrivatePinDigits() { if (!inputPrivatePin) return ''; return String(inputPrivatePin.value || '').replace(/\D/g, '').slice(0, 4); } function isPrivatePinComplete() { return /^\d{4}$/.test(getPrivatePinDigits()); } function updateConfirmButtonEnabled() { if (!btnConfirm) return; if (btnConfirm.getAttribute('data-create-loading') === '1') return; btnConfirm.disabled = isPrivate && !isPrivatePinComplete(); } btnConfirm?.addEventListener('click', function () { if (statusEl) statusEl.textContent = ''; var mapId = LOBBY_A_MAP_ID; var name = getRoomName(); if (!name) { if (statusEl) statusEl.textContent = 'กรุณาใส่ชื่อห้อง'; return; } if (isPrivate && !isPrivatePinComplete()) { if (statusEl) statusEl.textContent = 'กรุณาใส่รหัสผ่าน 4 หลัก (ตัวเลข) สำหรับห้องส่วนตัว'; inputPrivatePin?.focus(); return; } btnConfirm.setAttribute('data-create-loading', '1'); btnConfirm.disabled = true; var body = { mapId: mapId, name: name, isPrivate: isPrivate, maxPlayers: maxPlayersForSlot(selectedSlot), }; fetch(BASE + '/api/spaces', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body), }) .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, j: j }; }); }) .then(function (res) { if (!res.j || !res.j.ok) { if (statusEl) statusEl.textContent = (res.j && res.j.error) || 'สร้างห้องไม่สำเร็จ'; btnConfirm.removeAttribute('data-create-loading'); updateConfirmButtonEnabled(); return; } var sid = res.j.spaceId; if (!sid) { if (statusEl) statusEl.textContent = 'ไม่ได้รับรหัสห้อง'; btnConfirm.removeAttribute('data-create-loading'); updateConfirmButtonEnabled(); return; } if (isPrivate) { try { localStorage.setItem('roomPinHint_' + sid, getPrivatePinDigits()); } catch (e) { /* ignore */ } } try { localStorage.setItem('lastCreatedSpaceId', sid); localStorage.setItem('lastCreatedSpaceName', name); } catch (e) { /* ignore */ } /* room-lobby ใช้ ?space= เป็น spaceId ของห้องที่เพิ่งสร้าง ไม่ใช่ mapId (LobbyA = mapId ใน POST เท่านั้น) */ var lobbyUrl = BASE + '/room-lobby.html?space=' + encodeURIComponent(sid) + '&nick=' + encodeURIComponent(getNick()); lobbyUrl += '&displayRoom=' + encodeURIComponent(name); try { var caseId = localStorage.getItem('caseId'); var prevSpaceName = localStorage.getItem('prevSpaceName'); if (caseId) lobbyUrl += '&caseId=' + encodeURIComponent(caseId); if (prevSpaceName) lobbyUrl += '&prevSpaceName=' + encodeURIComponent(prevSpaceName); } catch (e) { /* ignore */ } /* replace = ลบ Create Room ออกจาก history — Back จาก Loading กลับ Main-Menu */ window.location.replace('/Loading/?redirect=' + encodeURIComponent(lobbyUrl)); }) .catch(function () { if (statusEl) statusEl.textContent = 'เชื่อมต่อเซิร์ฟเวอร์ไม่ได้'; btnConfirm.removeAttribute('data-create-loading'); updateConfirmButtonEnabled(); }); }); inputRoomName?.addEventListener('input', function () { updateConfirmButtonEnabled(); }); buildPlayerButtons(); setTab(false); })();