justice/www/html/Loading/loading.js

(function () {
  'use strict';

  var params = new URLSearchParams(window.location.search);
  var redirect = params.get('redirect');
  var debugMode = params.get('debug') === '1' || localStorage.getItem('debugLoadingFreeze') === '1';
  if (debugMode) document.body.classList.add('loading-debug-mode');
  function ap(p) {
    return typeof appPath === 'function' ? appPath(p) : p;
  }
  if (!redirect) {
    redirect = ap('/Main-Menu/');
  }

  var safe = false;
  try {
    var u = new URL(redirect, window.location.origin);
    var suffix = '/Game/room-lobby.html';
    if (u.origin === window.location.origin && (u.pathname === suffix || u.pathname.endsWith(suffix))) {
      safe = true;
    }
  } catch (e) {
    safe = false;
  }
  if (!safe) {
    redirect = ap('/Game/lobby.html');
  }

  var slides = [
    't-01.png',
    't-02.png',
    't-03.png',
    't-04.png',
    't-05.png',
    't-06.png',
    't-07.png'
  ];
  var totalSlides = slides.length;
  var idx = 0;
  var slideImg = document.getElementById('slide-img');
  var pageEl = document.getElementById('slide-page');
  var fill = document.getElementById('loading-bar-fill');
  var pctEl = document.getElementById('loading-pct');
  var barWrap = document.getElementById('loading-bar-wrap');
  var debugFreezeBtn = document.getElementById('btn-debug-freeze');

  function pad2(n) {
    return n < 10 ? '0' + n : String(n);
  }

  function normalizeIndex(i) {
    return ((i % totalSlides) + totalSlides) % totalSlides;
  }

  function showSlide(i) {
    idx = normalizeIndex(i);
    if (slideImg) slideImg.src = 'IMAGE/' + slides[idx] + '?v=1';
    if (pageEl) pageEl.textContent = (idx + 1) + ' / ' + totalSlides;
  }

  document.getElementById('btn-prev')?.addEventListener('click', function () {
    showSlide(idx - 1);
  });
  document.getElementById('btn-next')?.addEventListener('click', function () {
    showSlide(idx + 1);
  });
  showSlide(0);

  var durationMs = 6500;
  var freezeLoading = params.get('freeze') === '1' || localStorage.getItem('debugLoadingFreeze') === '1';
  var freezePctRaw = parseInt(
    params.get('freezePct') || localStorage.getItem('debugLoadingFreezePct') || '0',
    10
  );
  var freezePct = Math.max(0, Math.min(100, Number.isNaN(freezePctRaw) ? 0 : freezePctRaw));
  var customDurationRaw = parseInt(
    params.get('durationMs') || localStorage.getItem('debugLoadingDurationMs') || '',
    10
  );
  if (!Number.isNaN(customDurationRaw) && customDurationRaw > 0) {
    durationMs = customDurationRaw;
  }
  var startTs = null;
  var navigated = false;
  var currentPct = freezePct;

  function goLobby() {
    if (navigated) return;
    navigated = true;
    /* replace = ไม่ให้ room-lobby กด Back กลับมาค้างที่หน้า Loading — ควรกลับไป Main-Menu */
    window.location.replace(redirect);
  }

  document.getElementById('btn-skip')?.addEventListener('click', goLobby);

  function setDebugFreezeLabel() {
    if (!debugFreezeBtn) return;
    var on = localStorage.getItem('debugLoadingFreeze') === '1';
    debugFreezeBtn.textContent = on ? 'Freeze: ON' : 'Freeze: OFF';
  }

  if (debugFreezeBtn) {
    debugFreezeBtn.addEventListener('click', function () {
      var on = localStorage.getItem('debugLoadingFreeze') === '1';
      if (on) {
        localStorage.removeItem('debugLoadingFreeze');
        localStorage.removeItem('debugLoadingFreezePct');
      } else {
        localStorage.setItem('debugLoadingFreeze', '1');
        localStorage.setItem('debugLoadingFreezePct', String(currentPct));
      }
      setDebugFreezeLabel();
      window.location.reload();
    });
    setDebugFreezeLabel();
  }

  function paintProgress(p) {
    currentPct = p;
    if (fill) fill.style.setProperty('--loading-fill-scale', String(p / 100));
    if (pctEl) pctEl.textContent = p + '%';
    if (barWrap) barWrap.setAttribute('aria-valuenow', String(p));
  }

  if (freezeLoading) {
    paintProgress(freezePct);
    return;
  }

  function tick(ts) {
    if (navigated) return;
    if (startTs == null) startTs = ts;
    var t = Math.min(1, (ts - startTs) / durationMs);
    var p = Math.min(100, Math.floor(t * 100));
    paintProgress(p);
    if (t >= 1) {
      goLobby();
      return;
    }
    requestAnimationFrame(tick);
  }
  requestAnimationFrame(tick);
})();