268 lines
15 KiB
HTML
268 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="th">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<title>Main Lobby — JD JUSTICE DIVERS</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css?v=0.0190">
|
|
<link rel="stylesheet" href="daily-popup.css?v=8">
|
|
<link rel="stylesheet" href="../Game/css/customize-popup.css?v=43">
|
|
<link rel="stylesheet" href="../Game/css/profile-popup.css?v=7">
|
|
</head>
|
|
<body class="lobby-page">
|
|
<div class="lobby-bg" role="img" aria-label="พื้นหลัง">
|
|
<img src="IMAGE/BG-Main-Lobby.png" alt="" class="lobby-bg-img" role="presentation" decoding="async">
|
|
</div>
|
|
<div class="lobby-vignette" aria-hidden="true"></div>
|
|
|
|
<div class="lobby-ui">
|
|
<header class="lobby-header">
|
|
<div class="lobby-profile-panel">
|
|
<img src="IMAGE/profile-bg.png" alt="" class="lobby-profile-bg" role="presentation" decoding="async">
|
|
<div class="lobby-profile-inner">
|
|
<div class="lobby-avatar-wrap">
|
|
<img src="" alt="" class="lobby-avatar-mask" id="lobby-profile-avatar" width="50" height="50" decoding="async">
|
|
</div>
|
|
<div class="lobby-profile-info">
|
|
<p class="lobby-profile-name" id="lobby-profile-name">MONE</p>
|
|
<p class="lobby-profile-meta">AGENT ID : <span id="lobby-profile-agent-id">001998</span></p>
|
|
<p class="lobby-profile-coins">
|
|
<img src="IMAGE/coin-JD.png" alt="" class="lobby-coin-icon" role="presentation" width="18" height="18" decoding="async">
|
|
COINS : <span id="lobby-profile-coins">0</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="lobby-news-wrap">
|
|
<img src="IMAGE/news-banner-bg.png" alt="" class="lobby-news-bg" role="presentation" decoding="async">
|
|
<img src="IMAGE/news.png" alt="ข่าวสารศูนย์บัญชาการ" class="lobby-news-img" role="presentation" decoding="async">
|
|
</div>
|
|
<div class="lobby-header-row2-left">
|
|
<button type="button" class="lobby-btn-tutorial" id="btn-tutorial" title="วิธีเล่น" aria-label="วิธีเล่น">
|
|
<img src="IMAGE/btn-tutorial.png" alt="" class="lobby-btn-tutorial-img" role="presentation" decoding="async">
|
|
</button>
|
|
</div>
|
|
<button type="button" class="lobby-btn-daily" id="btn-daily" aria-label="รางวัลประจำวัน">
|
|
<img src="IMAGE/daily-rewards.png" alt="" class="lobby-daily-img" role="presentation" decoding="async">
|
|
<span class="lobby-daily-dot" aria-hidden="true"></span>
|
|
</button>
|
|
</header>
|
|
|
|
<div class="lobby-character-area">
|
|
<div class="lobby-center-left">
|
|
<button type="button" class="lobby-btn-cloth" id="btn-cloth" aria-label="ห้องแต่งตัว">
|
|
<img src="IMAGE/btn-cloth.png" alt="" class="lobby-btn-cloth-img" role="presentation" decoding="async">
|
|
</button>
|
|
</div>
|
|
<div class="lobby-character-center" id="lobby-character-center" aria-hidden="true">
|
|
<img id="lobby-character-img" src="" alt="" class="lobby-character-img" width="256" height="256" decoding="async">
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="lobby-leaderboard" aria-label="กระดานผู้นำ">
|
|
<img src="IMAGE/leaderboard-bg.png" alt="" class="lobby-leaderboard-bg" role="presentation" decoding="async">
|
|
<div class="lobby-leaderboard-mask">
|
|
<div class="lobby-leaderboard-inner">
|
|
<div class="lobby-leaderboard-scroll">
|
|
<ul class="lobby-leaderboard-list">
|
|
<li>
|
|
<img src="IMAGE/leaderboard-1.png" alt="" class="lobby-rank-icon" role="presentation" decoding="async">
|
|
<div class="lobby-rank-info">
|
|
<span class="lobby-rank-name">Mixie Kim</span>
|
|
<span class="lobby-rank-case">(คดี : มหาเศรษฐีนามปลอม)</span>
|
|
</div>
|
|
<span class="lobby-rank-score">9999</span>
|
|
</li>
|
|
<li>
|
|
<img src="IMAGE/leaderboard-2.png" alt="" class="lobby-rank-icon" role="presentation" decoding="async">
|
|
<div class="lobby-rank-info">
|
|
<span class="lobby-rank-name">Golden L.</span>
|
|
<span class="lobby-rank-case">(คดี : โจรกรรมไซเบอร์)</span>
|
|
</div>
|
|
<span class="lobby-rank-score">9951</span>
|
|
</li>
|
|
<li>
|
|
<img src="IMAGE/leaderboard-3.png" alt="" class="lobby-rank-icon" role="presentation" decoding="async">
|
|
<div class="lobby-rank-info">
|
|
<span class="lobby-rank-name">Lilly 991</span>
|
|
<span class="lobby-rank-case">(คดี : ปั่นแอพพลวงเกม)</span>
|
|
</div>
|
|
<span class="lobby-rank-score">9552</span>
|
|
</li>
|
|
<li>
|
|
<span class="lobby-rank-num">4</span>
|
|
<div class="lobby-rank-info">
|
|
<span class="lobby-rank-name">Nova Byte</span>
|
|
<span class="lobby-rank-case">(คดี : ฟิชชิงองค์กร)</span>
|
|
</div>
|
|
<span class="lobby-rank-score">9410</span>
|
|
</li>
|
|
<li>
|
|
<span class="lobby-rank-num">5</span>
|
|
<div class="lobby-rank-info">
|
|
<span class="lobby-rank-name">Aster R.</span>
|
|
<span class="lobby-rank-case">(คดี : แก๊งค์หลอกลงทุน)</span>
|
|
</div>
|
|
<span class="lobby-rank-score">9280</span>
|
|
</li>
|
|
<li>
|
|
<span class="lobby-rank-num">6</span>
|
|
<div class="lobby-rank-info">
|
|
<span class="lobby-rank-name">Hexa One</span>
|
|
<span class="lobby-rank-case">(คดี : เจาะระบบธนาคาร)</span>
|
|
</div>
|
|
<span class="lobby-rank-score">9145</span>
|
|
</li>
|
|
<li>
|
|
<span class="lobby-rank-num">7</span>
|
|
<div class="lobby-rank-info">
|
|
<span class="lobby-rank-name">Mint C.</span>
|
|
<span class="lobby-rank-case">(คดี : ปลอมเพจขายสินค้า)</span>
|
|
</div>
|
|
<span class="lobby-rank-score">9032</span>
|
|
</li>
|
|
<li>
|
|
<span class="lobby-rank-num">8</span>
|
|
<div class="lobby-rank-info">
|
|
<span class="lobby-rank-name">Q-Logic</span>
|
|
<span class="lobby-rank-case">(คดี : หลอกโอนผ่านแชท)</span>
|
|
</div>
|
|
<span class="lobby-rank-score">8918</span>
|
|
</li>
|
|
<li>
|
|
<span class="lobby-rank-num">9</span>
|
|
<div class="lobby-rank-info">
|
|
<span class="lobby-rank-name">Rin 47</span>
|
|
<span class="lobby-rank-case">(คดี : ลักข้อมูลส่วนบุคคล)</span>
|
|
</div>
|
|
<span class="lobby-rank-score">8804</span>
|
|
</li>
|
|
<li>
|
|
<span class="lobby-rank-num">10</span>
|
|
<div class="lobby-rank-info">
|
|
<span class="lobby-rank-name">Skyline X</span>
|
|
<span class="lobby-rank-case">(คดี : ฟอกเงินคริปโต)</span>
|
|
</div>
|
|
<span class="lobby-rank-score">8690</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="lobby-leaderboard-scroll-track" id="lobby-leaderboard-scroll-track" aria-hidden="true"></div>
|
|
<div class="lobby-leaderboard-scroll-thumb" id="lobby-leaderboard-scroll-thumb" aria-hidden="true"></div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<footer class="lobby-footer">
|
|
<div class="lobby-footer-left">
|
|
<button type="button" class="lobby-btn-ai-chat" id="btn-ai-chat" aria-label="เทพความรู้">
|
|
<img src="IMAGE/BTN-AI-ChatBOT.png" alt="" class="lobby-btn-ai-chat-img" role="presentation" decoding="async">
|
|
</button>
|
|
</div>
|
|
<div class="lobby-footer-center">
|
|
<button type="button" class="lobby-btn-start" id="btn-start-mission" aria-label="ไปเมนูหลัก" data-href="../Main-Menu/">
|
|
<img src="IMAGE/btn-start-mission.png" alt="" class="lobby-btn-start-img" role="presentation" decoding="async">
|
|
</button>
|
|
<button type="button" class="lobby-btn-quiz" id="btn-quiz-battle" aria-label="ห้องเกมตอบคำถาม" data-href="../Quiz-Battle/">
|
|
<img src="IMAGE/btn-quix%20battle.png" alt="" class="lobby-btn-quiz-img" role="presentation" decoding="async">
|
|
</button>
|
|
</div>
|
|
<div class="lobby-footer-right">
|
|
<button type="button" class="lobby-btn-profile" id="btn-myprofile" aria-label="โปรไฟล์ของฉัน">
|
|
<img src="IMAGE/btn-myprofile.png" alt="" class="lobby-btn-profile-img" role="presentation" decoding="async">
|
|
</button>
|
|
</div>
|
|
</footer>
|
|
|
|
<div id="lobby-guide-dim" class="lobby-guide-dim hidden" aria-hidden="true"></div>
|
|
<div id="lobby-guide-focus" class="lobby-guide-focus hidden" aria-hidden="true"></div>
|
|
<div class="lobby-guide-bar hidden" id="lobby-guide-bar" role="dialog" aria-modal="true" aria-labelledby="guide-img-label">
|
|
<span id="guide-img-label" class="sr-only">คำแนะนำทีละขั้น</span>
|
|
<div class="lobby-guide-frame">
|
|
<img src="IMAGE/guide/guide-01.png" alt="คำแนะนำ" class="lobby-guide-img" id="guide-img" decoding="async">
|
|
<button type="button" class="lobby-guide-next" id="btn-guide-next" aria-label="ถัดไป">
|
|
<img src="IMAGE/guide/btn-next.png" alt="" decoding="async">
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- แชท AI — API เดียวกับ room-lobby -->
|
|
<div id="lobby-ai-chat-panel" class="lobby-ai-chat-panel lobby-ai-chat-hidden" role="dialog" aria-label="เทพความรู้">
|
|
<div class="lobby-ai-chat-header">
|
|
<span class="lobby-ai-chat-title">
|
|
<img src="../Game/img/ai-chat-header.png" alt="คุยกับ AI" decoding="async">
|
|
<img src="../Game/img/ai-chat-title-label.png" alt="เทพความรู้" class="lobby-ai-chat-title-label" decoding="async">
|
|
</span>
|
|
<button type="button" class="lobby-ai-chat-close" id="lobby-ai-chat-close-btn" title="ปิดแชท AI" aria-label="ปิดแชท AI">
|
|
<img src="../Game/img/chat-close-btn.png" alt="ปิด" id="lobby-ai-chat-toggle-img" width="50" height="50" decoding="async">
|
|
</button>
|
|
</div>
|
|
<div id="lobby-ai-chat-messages" class="lobby-ai-chat-messages"></div>
|
|
<form id="lobby-ai-chat-form" class="lobby-ai-chat-form">
|
|
<input id="lobby-ai-chat-input" type="text" placeholder="Type a here..." autocomplete="off" aria-label="ข้อความถึง AI">
|
|
<button type="submit" class="lobby-ai-chat-send" title="ส่ง" aria-label="ส่ง">
|
|
<img src="../Game/img/chat-btn-send.png" alt="" decoding="async">
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="lobby-howto-overlay" class="lobby-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="lobby-howto-title">
|
|
<div class="lobby-howto-inner">
|
|
<h2 id="lobby-howto-title" class="sr-only">วิธีเล่น</h2>
|
|
<img src="IMAGE/Howto/howtoplay.png" alt="วิธีเล่น" decoding="async">
|
|
<div class="lobby-howto-close">
|
|
<button type="button" class="lobby-icon-btn" id="btn-howto-got-it" aria-label="เข้าใจแล้ว">
|
|
<img src="IMAGE/Howto/btn-got-it.png" alt="" decoding="async" onerror="this.style.display='none'; this.parentElement.textContent='ปิด';">
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="lobby-toast" class="lobby-toast" role="status" aria-live="polite"></div>
|
|
|
|
<script src="../app-base.js?v=2"></script>
|
|
<script src="../Game/js/display-name.js?v=3"></script>
|
|
<script src="daily-popup.js?v=26" data-daily-trigger="#btn-daily" data-daily-asset-base="IMAGE/Daily" data-daily-test-reset-seconds="0"></script>
|
|
<script src="../Game/js/customize-popup.js?v=38" data-customize-triggers="#btn-cloth" data-customize-asset-base="/Game/img/03-5-Customize"></script>
|
|
<script src="../Game/js/achievements.js?v=0.002" data-asset-base="/Game/img/03-6-Profile"></script>
|
|
<script src="../Game/js/sound.js?v=2"></script>
|
|
<script src="../Game/js/profile-popup.js?v=9" data-profile-trigger="#btn-myprofile" data-profile-asset-base="/Game/img/03-6-Profile"></script>
|
|
<script src="lobby.js?v=0.0195"></script>
|
|
<script>
|
|
/* เสียงคลิกปุ่มใน Main-Lobby (เฉพาะปุ่มจริง) */
|
|
document.addEventListener('click', function (e) {
|
|
if (!window.jdSound) return;
|
|
var t = (e.target && e.target.closest) ? e.target.closest('button, .btn, [role="button"], [class*="btn-"]') : null;
|
|
if (t) { try { window.jdSound.playSfx('button', 'lobby'); } catch (err) { /* ignore */ } }
|
|
}, true);
|
|
</script>
|
|
|
|
<!-- [intro trailer] เล่นวิดีโอ intro ตอนเข้าระบบ (guest/login) — ข้ามได้ · เล่นครั้งเดียวต่อ session -->
|
|
<div id="jd-intro-video" style="position:fixed;inset:0;z-index:2147483000;background:#000;display:none;align-items:center;justify-content:center">
|
|
<video id="jd-intro-vid" playsinline preload="auto" style="width:100%;height:100%;object-fit:contain;background:#000"></video>
|
|
<button id="jd-intro-skip" type="button" style="position:absolute;bottom:26px;right:26px;padding:10px 24px;border:none;border-radius:24px;background:rgba(0,0,0,.55);color:#fff;font:700 16px/1 Kanit,system-ui,sans-serif;cursor:pointer;backdrop-filter:blur(4px)">ข้าม ⏭</button>
|
|
</div>
|
|
<script>
|
|
(function () {
|
|
try {
|
|
if (sessionStorage.getItem('jdIntroPlayed') === '1') return; /* เล่นครั้งเดียวต่อ session */
|
|
var ov = document.getElementById('jd-intro-video'), vid = document.getElementById('jd-intro-vid'), skip = document.getElementById('jd-intro-skip');
|
|
if (!ov || !vid) return;
|
|
function done() { try { vid.pause(); } catch (e) {} ov.style.display = 'none'; try { sessionStorage.setItem('jdIntroPlayed', '1'); } catch (e) {} }
|
|
vid.src = '/Game/video/intro-trailer.mp4';
|
|
vid.onended = done; vid.onerror = done; /* วิดีโอหาย/พัง → ไม่บล็อกหน้า */
|
|
if (skip) skip.addEventListener('click', done);
|
|
ov.style.display = 'flex';
|
|
vid.muted = false;
|
|
var p = vid.play();
|
|
if (p && p.catch) p.catch(function () { vid.muted = true; vid.play().catch(done); }); /* autoplay-with-sound ถูกบล็อก → เล่นแบบ mute */
|
|
} catch (e) { /* ห้ามบล็อก lobby */ }
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|