สร้างห้องเกม
+
+
+
+
+
diff --git a/www/html/Create Room/create-room.js b/www/html/Create Room/create-room.js index 680abb0..16cabf5 100644 --- a/www/html/Create Room/create-room.js +++ b/www/html/Create Room/create-room.js @@ -2,23 +2,20 @@ 'use strict'; function checkLoginStatus() { - const isLoggedIn = localStorage.getItem('isLoggedIn'); + var isLoggedIn = localStorage.getItem('isLoggedIn'); if (!isLoggedIn || isLoggedIn !== 'true') { - window.location.href = '/Login/'; + window.location.href = typeof appPath === 'function' ? appPath('/Login/') : '/Login/'; return false; } return true; } - if (!checkLoginStatus()) { - return; - } + 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 BASE = typeof appPath === 'function' ? appPath('/Game') : '/Game'; + var SERVER = (typeof GAME_SERVER !== 'undefined' ? GAME_SERVER : '') + '/Game'; + var LOBBY_A_MAP_ID = 'mlsbbxfe'; + var LOBBY_TOTAL_SLOTS = 6; var selectedSlot = 3; var isPrivate = false; @@ -55,7 +52,7 @@ } btnBack?.addEventListener('click', function () { - window.location.href = '/Main-Menu/'; + window.location.href = typeof appPath === 'function' ? appPath('/Main-Menu/') : '/Main-Menu/'; }); inputPrivatePin?.addEventListener('input', function (e) { @@ -63,6 +60,16 @@ updateConfirmButtonEnabled(); }); + function updateModeImages() { + [tabPublic, tabPrivate].forEach(function (btn) { + if (!btn) return; + var img = btn.querySelector('.create-mode-btn-img'); + if (!img) return; + var isActive = btn.classList.contains('create-mode-btn--active'); + img.src = isActive ? btn.getAttribute('data-img-h') : btn.getAttribute('data-img'); + }); + } + function setTab(privateMode) { isPrivate = privateMode; tabPublic?.classList.toggle('create-mode-btn--active', !privateMode); @@ -70,21 +77,30 @@ tabPublic?.setAttribute('aria-selected', privateMode ? 'false' : 'true'); tabPrivate?.setAttribute('aria-selected', privateMode ? 'true' : 'false'); if (privateBlock) privateBlock.classList.toggle('create-view--hidden', !privateMode); + updateModeImages(); 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') : []; + function updatePlayerImages() { + if (!playerBtnsWrap) return; + var buttons = 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); + var img = btn.querySelector('.create-num-btn-img'); + if (img) { + img.src = on ? btn.getAttribute('data-img-h') : btn.getAttribute('data-img'); + } btn.setAttribute('aria-pressed', on ? 'true' : 'false'); }); + } + + function selectSlot(n) { + selectedSlot = Math.min(6, Math.max(1, parseInt(n, 10) || 3)); + updatePlayerImages(); updateSummary(); } @@ -94,12 +110,20 @@ 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.className = 'create-num-btn'; b.setAttribute('data-slot', String(i)); + b.setAttribute('data-img', 'IMAGE/player-' + i + '.png'); + b.setAttribute('data-img-h', 'IMAGE/player-' + i + '-h.png'); 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); + + var img = document.createElement('img'); + img.className = 'create-num-btn-img'; + img.alt = String(i); + img.decoding = 'async'; + img.src = i === selectedSlot ? 'IMAGE/player-' + i + '-h.png' : 'IMAGE/player-' + i + '.png'; + b.appendChild(img); + b.addEventListener('click', function () { selectSlot(this.getAttribute('data-slot')); }); @@ -148,7 +172,7 @@ isPrivate: isPrivate, maxPlayers: maxPlayersForSlot(selectedSlot), }; - fetch(BASE + '/api/spaces', { + fetch(SERVER + '/api/spaces', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body), @@ -169,15 +193,12 @@ return; } if (isPrivate) { - try { - localStorage.setItem('roomPinHint_' + sid, getPrivatePinDigits()); - } catch (e) { /* ignore */ } + try { localStorage.setItem('roomPinHint_' + sid, getPrivatePinDigits()); } catch (e) {} } try { localStorage.setItem('lastCreatedSpaceId', sid); localStorage.setItem('lastCreatedSpaceName', name); - } catch (e) { /* ignore */ } - /* room-lobby ใช้ ?space= เป็น spaceId ของห้องที่เพิ่งสร้าง ไม่ใช่ mapId (LobbyA = mapId ใน POST เท่านั้น) */ + } catch (e) {} var lobbyUrl = BASE + '/room-lobby.html?space=' + encodeURIComponent(sid) + '&nick=' + encodeURIComponent(getNick()); lobbyUrl += '&displayRoom=' + encodeURIComponent(name); try { @@ -185,9 +206,8 @@ 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 (e) {} + window.location.replace((typeof appPath === 'function' ? appPath('/Loading/') : '/Loading/') + '?redirect=' + encodeURIComponent(lobbyUrl)); }) .catch(function () { if (statusEl) statusEl.textContent = 'เชื่อมต่อเซิร์ฟเวอร์ไม่ได้'; diff --git a/www/html/Create Room/index.html b/www/html/Create Room/index.html index 9b95ee3..ccfe652 100644 --- a/www/html/Create Room/index.html +++ b/www/html/Create Room/index.html @@ -7,64 +7,78 @@ - +
+
+
+
+