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

  /* asset หนัก/ใช้บ่อยของห้อง + 7 มินิเกม — preload ไว้ที่หน้านี้ครั้งเดียว เข้าเกม/ห้องภายหลังจะลื่น (ไม่ pop-in) */
  var DEFAULT_PRELOAD_ASSETS = [
    '/Game/img/QUESTION/score-bar.png',
    '/Game/img/QUESTION/score-avartar.png',
    '/Game/img/QUESTION/score.png',
    '/Game/img/gauntlet-assets/popup-Howto.png',
    '/Game/img/gauntlet-assets/Avartar.png',
    '/Game/img/TowerBlock/admin-tab-minigame-3.png',
    '/Game/img/quiz-carry/Avartar.png',
    '/Game/img/quiz-carry/score-avartar.png',
    '/Game/img/Jumper/popup-Howto.png',
    '/Game/img/ViolentCrime/score-bar.png',
    '/Game/img/ViolentCrime/Rocket-2.png',
    '/Game/img/ViolentCrime/life-bar.png',
    '/Game/img/MegaVirus/score-bar.png',
    '/Game/img/MegaVirus/Artboard 9.png',
    '/Game/img/MegaVirus/score-avartar.png'
  ];
  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;
  }

  /* ===== โหลด asset จริง → % จริง (แทน timer ปลอม) ===== */
  var preloadList = (params.get('preload') || '')
    .split(',').map(function (s) { return s.trim(); }).filter(Boolean);
  if (!preloadList.length) preloadList = DEFAULT_PRELOAD_ASSETS.slice();
  preloadList = preloadList.map(ap);
  var totalAssets = preloadList.length;
  var doneAssets = 0;
  var MIN_MS = 2500;   /* โชว์ทิป + ไม่วูบเร็วไป */
  var MAX_MS = 16000;  /* safety: ไม่ค้างเกินแม้โหลดไม่ครบ */
  var startMs = (typeof performance !== 'undefined' && performance.now) ? performance.now() : Date.now();

  function nowMs() { return (typeof performance !== 'undefined' && performance.now) ? performance.now() : Date.now(); }

  preloadList.forEach(function (url) {
    var img = new Image();
    var settled = false;
    function one() { if (settled) return; settled = true; doneAssets += 1; }
    img.onload = one;
    img.onerror = one;
    try { img.src = url; } catch (e) { one(); }
    setTimeout(one, 9000); /* per-asset timeout กันไฟล์ค้าง */
  });

  function update() {
    if (navigated) return;
    var elapsed = nowMs() - startMs;
    var frac = totalAssets ? (doneAssets / totalAssets) : 1;
    var p = Math.floor(frac * 100);
    /* โหลดเสร็จไวกว่า MIN_MS → ค้าง ~92-99% รอจนถึง MIN_MS กันกระพริบ */
    if (p >= 100 && elapsed < MIN_MS) p = Math.max(92, Math.floor((elapsed / MIN_MS) * 100));
    paintProgress(Math.max(0, Math.min(100, p)));
    if ((doneAssets >= totalAssets && elapsed >= MIN_MS) || elapsed >= MAX_MS) {
      paintProgress(100);
      goLobby();
      return;
    }
    requestAnimationFrame(update);
  }
  requestAnimationFrame(update);
})();