justice/www/html/Join Room/join.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';
  const IMG = {
    publishOn: 'IMAGE/btn-publish-room-h.png',
    publishOff: 'IMAGE/btn-publish-room.png',
    privateOn: 'IMAGE/btn-private-room-h.png',
    privateOff: 'IMAGE/btn-private-room.png',
    joinOn: 'IMAGE/btn-join-room.png',
    joinOff: 'IMAGE/btn-join-room-2.png',
  };

  function getNick() {
    return (localStorage.getItem('playerName') || '').trim() || 'ผู้เล่น';
  }

  function escapeHtml(s) {
    var div = document.createElement('div');
    div.textContent = s;
    return div.innerHTML;
  }

  var btnBack = document.getElementById('btn-back');
  var tabPublic = document.getElementById('tab-public');
  var tabPrivate = document.getElementById('tab-private');
  var imgPublic = document.getElementById('tab-img-public');
  var imgPrivate = document.getElementById('tab-img-private');
  var viewPublic = document.getElementById('join-public-view');
  var viewPrivate = document.getElementById('join-private-view');
  var listPublic = document.getElementById('room-list-public');
  var tplRow = document.getElementById('tpl-room-row');
  var passPrivate = document.getElementById('join-private-password');
  var idPrivate = document.getElementById('join-private-room-id');
  var btnPrivateJoin = document.getElementById('btn-private-join');

  btnBack?.addEventListener('click', function () {
    window.location.href = '/Main-Menu/';
  });

  passPrivate?.addEventListener('input', function (e) {
    e.target.value = e.target.value.replace(/[^0-9]/g, '').slice(0, 4);
  });

  function goToRoom(spaceId) {
    window.location.href = BASE + '/room-lobby.html?space=' + encodeURIComponent(spaceId) + '&nick=' + encodeURIComponent(getNick());
  }

  function refreshPublicRooms() {
    if (!listPublic || !tplRow) return;
    listPublic.innerHTML = '<div class="join-list-status" id="room-list-status">โหลดรายการห้อง...</div>';
    var statusEl = document.getElementById('room-list-status');
    fetch(BASE + '/api/spaces?_=' + Date.now())
      .then(function (r) { return r.json(); })
      .then(function (list) {
        if (!Array.isArray(list)) {
          if (statusEl) statusEl.textContent = 'โหลดรายการห้องไม่ได้';
          return;
        }
        listPublic.innerHTML = '';
        if (list.length === 0) {
          listPublic.innerHTML = '<div class="join-list-status">ยังไม่มีห้อง</div>';
          return;
        }
        list.forEach(function (room) {
          var code = room.spaceId || ('room-' + Math.random().toString(36).slice(2, 8));
          var name = room.spaceName || code;
          var mapName = room.mapName || '—';
          var count = room.peerCount != null ? room.peerCount : 0;
          var max = room.maxPlayers != null ? room.maxPlayers : 10;
          var full = count >= max;
          var node = tplRow.content.cloneNode(true);
          var nameEl = node.querySelector('.join-room-name');
          var playersEl = node.querySelector('.join-room-players');
          var btn = node.querySelector('.join-room-btn');
          var img = node.querySelector('.join-room-btn-img');

          nameEl.textContent = escapeHtml(name) + (mapName !== '—' ? ' (ฉาก: ' + escapeHtml(mapName) + ')' : '');
          playersEl.textContent = count + '/' + max + ' คน' + (full ? ' (เต็ม)' : '');
          img.src = full ? IMG.joinOff : IMG.joinOn;
          img.alt = full ? 'เต็ม' : 'เข้าร่วม';

          if (full) {
            btn.disabled = true;
          } else {
            btn.addEventListener('click', function () {
              goToRoom(room.spaceId);
            });
          }
          listPublic.appendChild(node);
        });
      })
      .catch(function () {
        if (statusEl) statusEl.textContent = 'โหลดรายการห้องไม่ได้';
      });
  }

  function setTab(mode) {
    var isPublic = mode === 'public';
    if (imgPublic) imgPublic.src = isPublic ? IMG.publishOn : IMG.publishOff;
    if (imgPrivate) imgPrivate.src = isPublic ? IMG.privateOff : IMG.privateOn;
    tabPublic?.setAttribute('aria-selected', isPublic ? 'true' : 'false');
    tabPrivate?.setAttribute('aria-selected', isPublic ? 'false' : 'true');
    if (viewPublic) viewPublic.classList.toggle('join-view--hidden', !isPublic);
    if (viewPrivate) viewPrivate.classList.toggle('join-view--hidden', isPublic);
  }

  tabPublic?.addEventListener('click', function () {
    setTab('public');
  });

  tabPrivate?.addEventListener('click', function () {
    setTab('private');
  });

  btnPrivateJoin?.addEventListener('click', function () {
    var code = (idPrivate?.value || '').trim();
    var pass = (passPrivate?.value || '').trim();
    if (!code) {
      alert('กรุณากรอกรหัสห้อง');
      idPrivate?.focus();
      return;
    }
    if (pass && pass.length !== 4) {
      alert('รหัสผ่านต้องเป็นตัวเลข 4 หลัก');
      passPrivate?.focus();
      return;
    }
    goToRoom(code);
  });

  refreshPublicRooms();
  setInterval(refreshPublicRooms, 8000);
  setTab('public');
})();