(function () { 'use strict'; var script = document.currentScript; var triggerSelector = (script && script.getAttribute('data-profile-trigger')) || '#btn-myprofile,#btn-profile-set'; var assetBase = (script && script.getAttribute('data-profile-asset-base')) || 'img/03-6-Profile'; var DISPLAY_NAME_KEY = 'roomLobbyDisplayName'; var overlayId = 'room-lobby-profile-overlay'; if (typeof window !== 'undefined') window.__USE_SHARED_PROFILE_POPUP = true; function resolveAssetBase(raw) { var base = String(raw || 'img/03-6-Profile').replace(/\/$/, ''); if (/^\/(Game|img)\//i.test(base)) { return typeof window.appPath === 'function' ? window.appPath(base) : base; } try { return new URL(base + '/', window.location.href).pathname.replace(/\/$/, ''); } catch (e) { return base; } } var resolvedAssetBase = resolveAssetBase(assetBase); function asset(name) { return resolvedAssetBase + '/' + name; } function appRel(path) { if (typeof window.appPath === 'function') return window.appPath(path); return path; } function readName() { try { return (localStorage.getItem(DISPLAY_NAME_KEY) || localStorage.getItem('playerName') || 'MONE').trim() || 'MONE'; } catch (e) { return 'MONE'; } } function readAgentId() { try { return (localStorage.getItem('agentDisplayId') || '001998').trim() || '001998'; } catch (e) { return '001998'; } } function readCoins() { try { return String(Math.max(0, parseInt(localStorage.getItem('jdCoins') || '0', 10) || 0)); } catch (e) { return '0'; } } var refs = { overlay: null, backdrop: null, dialog: null, closeBtn: null, avatarEl: null, nameEl: null, agentEl: null, coinsEl: null, musicBtn: null, sfxBtn: null, groupBtns: [], archivListEl: null, archivScrollEl: null, archivScrollBarEl: null, editBtn: null, logoutBtn: null }; function createMarkupIfNeeded() { if (document.getElementById(overlayId)) return; var overlay = document.createElement('div'); overlay.id = overlayId; overlay.className = 'room-lobby-profile-overlay is-hidden'; overlay.setAttribute('aria-hidden', 'true'); overlay.innerHTML = '' + '' + ''; document.body.appendChild(overlay); } function bindRefs() { refs.overlay = document.getElementById(overlayId); refs.backdrop = document.getElementById('room-lobby-profile-backdrop'); refs.dialog = refs.overlay ? refs.overlay.querySelector('.room-lobby-profile-dialog') : null; refs.closeBtn = document.getElementById('room-lobby-profile-close'); refs.avatarEl = document.getElementById('room-lobby-profile-overlay-avatar'); refs.nameEl = document.getElementById('room-lobby-profile-overlay-name'); refs.agentEl = document.getElementById('room-lobby-profile-overlay-agent'); refs.coinsEl = document.getElementById('room-lobby-profile-coins-val'); refs.musicBtn = document.getElementById('room-lobby-profile-music'); refs.sfxBtn = document.getElementById('room-lobby-profile-sfx'); refs.groupBtns = Array.prototype.slice.call(document.querySelectorAll('.room-lobby-profile-archiv-group-btn')); refs.archivListEl = document.getElementById('room-lobby-profile-achievements-list'); refs.archivScrollEl = document.querySelector('.room-lobby-profile-archiv-scroll'); refs.archivScrollBarEl = document.querySelector('.room-lobby-profile-archiv-scroll-bar'); refs.editBtn = document.getElementById('room-lobby-profile-edit-btn'); refs.logoutBtn = document.getElementById('room-lobby-profile-logout'); } function syncArchivScroll() { if (!refs.archivListEl || !refs.archivScrollEl || !refs.archivScrollBarEl) return; var total = refs.archivListEl.scrollHeight || 0; var visible = refs.archivListEl.clientHeight || 0; var overflow = total > visible + 1; refs.archivScrollEl.classList.toggle('is-hidden', !overflow); if (!overflow) return; var max = Math.max(1, total - visible); var ratio = Math.max(0, Math.min(1, refs.archivListEl.scrollTop / max)); var barPct = Math.max(18, Math.min(42, (visible / Math.max(1, total)) * 100)); refs.archivScrollBarEl.style.height = barPct.toFixed(2) + '%'; refs.archivScrollBarEl.style.top = ((100 - barPct) * ratio).toFixed(2) + '%'; } function syncProfileScale() { if (!refs.dialog) return; var rect = refs.dialog.getBoundingClientRect(); if (!rect.width || !rect.height) return; var scaleW = rect.width / 1701; var scaleH = rect.height / 951; var scale = Math.max(0.35, Math.min(1, Math.min(scaleW, scaleH))); refs.dialog.style.setProperty('--rp-scale', String(scale.toFixed(4))); } function setGroup(index) { refs.groupBtns.forEach(function (btn) { var id = parseInt(btn.getAttribute('data-group'), 10) || 1; var active = id === index; btn.classList.toggle('is-active', active); var img = btn.querySelector('img'); if (img) img.src = active ? asset('archiv-group-0' + id + '-a.png') : asset('archiv-group-0' + id + '.png'); }); syncArchivScroll(); } function toggleChip(btn) { if (!btn) return; var on = String(btn.getAttribute('data-on') || '').toLowerCase() === 'true'; on = !on; btn.setAttribute('data-on', on ? 'true' : 'false'); var img = btn.querySelector('img'); if (img) img.src = on ? asset('btn-on.png') : asset('btn-off.png'); } function setProfileData(data) { var payload = data || {}; var lobbyAvatar = document.getElementById('lobby-profile-avatar'); var roomAvatar = document.getElementById('room-lobby-profile-avatar'); var src = payload.avatarSrc || (lobbyAvatar && lobbyAvatar.getAttribute('src')) || (roomAvatar && roomAvatar.getAttribute('src')) || ''; if (refs.avatarEl && src) refs.avatarEl.src = src; if (refs.nameEl) refs.nameEl.textContent = (payload.displayName || readName()).toUpperCase(); if (refs.agentEl) refs.agentEl.textContent = payload.agentIdLabel || ('AGENT ID : ' + readAgentId()); if (refs.coinsEl) refs.coinsEl.textContent = String(payload.coins != null ? payload.coins : readCoins()); } function openPopup(data) { if (!refs.overlay) return; setProfileData(data); refs.overlay.classList.remove('is-hidden'); refs.overlay.setAttribute('aria-hidden', 'false'); syncProfileScale(); syncArchivScroll(); if (refs.closeBtn) refs.closeBtn.focus(); } function closePopup() { if (!refs.overlay) return; refs.overlay.classList.add('is-hidden'); refs.overlay.setAttribute('aria-hidden', 'true'); } function bindEvents() { if (refs.backdrop) refs.backdrop.addEventListener('click', closePopup); if (refs.closeBtn) refs.closeBtn.addEventListener('click', closePopup); if (refs.musicBtn) refs.musicBtn.addEventListener('click', function () { toggleChip(refs.musicBtn); }); if (refs.sfxBtn) refs.sfxBtn.addEventListener('click', function () { toggleChip(refs.sfxBtn); }); refs.groupBtns.forEach(function (btn) { btn.addEventListener('click', function () { setGroup(parseInt(btn.getAttribute('data-group'), 10) || 1); }); }); if (refs.archivListEl) refs.archivListEl.addEventListener('scroll', syncArchivScroll, { passive: true }); if (refs.editBtn) refs.editBtn.addEventListener('click', function () { var runApply = function (draft) { if (draft == null) return; var applyFn = typeof window.jdApplyDisplayNameChange === 'function' ? window.jdApplyDisplayNameChange : null; if (applyFn) { var result = applyFn(draft, { socket: window.__jdGameSocket || null }); if (!result.ok) return; if (refs.nameEl) refs.nameEl.textContent = result.displayName.toUpperCase(); return; } try { localStorage.setItem(DISPLAY_NAME_KEY, draft); localStorage.setItem('playerName', draft); } catch (e) { /* ignore */ } if (refs.nameEl) refs.nameEl.textContent = draft.toUpperCase(); var headerName = document.getElementById('lobby-profile-name'); if (headerName) headerName.textContent = draft.toUpperCase(); }; if (window.jdDisplayName && typeof window.jdDisplayName.openEditor === 'function') { window.jdDisplayName.openEditor({ initialValue: typeof window.jdReadDisplayName === 'function' ? window.jdReadDisplayName() : readName() }).then(runApply); return; } if (typeof window.jdPromptAndApplyDisplayName === 'function') { window.jdPromptAndApplyDisplayName({ socket: window.__jdGameSocket || null }).then(function (result) { if (result && result.ok && refs.nameEl) refs.nameEl.textContent = result.displayName.toUpperCase(); }); return; } var draft = window.prompt('แก้ไขชื่อผู้เล่น', readName() || ''); runApply(draft == null ? null : String(draft).trim() || null); }); if (refs.logoutBtn) refs.logoutBtn.addEventListener('click', function () { if (document.getElementById('btn-back')) { window.location.href = appRel('/Login/'); return; } window.location.href = appRel('/Create%20Room/'); }); document.addEventListener('keydown', function (e) { if (e.key !== 'Escape') return; var nameEditor = document.getElementById('jd-display-name-editor-overlay'); if (nameEditor && !nameEditor.classList.contains('is-hidden')) return; if (refs.overlay && !refs.overlay.classList.contains('is-hidden')) closePopup(); }); window.addEventListener('resize', function () { syncProfileScale(); syncArchivScroll(); }); document.querySelectorAll(triggerSelector).forEach(function (el) { el.addEventListener('click', function (e) { e.preventDefault(); openPopup(); }); }); } function isRoomLobbyPage() { return /room-lobby\.html$/i.test(String(window.location.pathname || '')); } function init() { if (isRoomLobbyPage()) { return; } createMarkupIfNeeded(); bindRefs(); bindEvents(); syncProfileScale(); setGroup(1); window.openProfilePopup = openPopup; window.closeProfilePopup = closePopup; window.roomLobbyProfileOverlay = { open: openPopup, close: closePopup }; window.mainLobbyProfileOverlay = { open: openPopup, close: closePopup }; } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init, { once: true }); } else { init(); } })();