justice/www/html/Create Room/create-room.js

(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);
})();