1050 lines
50 KiB
HTML
1050 lines
50 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="th">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>โถงรอ — Game</title>
|
||
<link rel="stylesheet" href="css/style.css?v=0.0144">
|
||
<style>
|
||
html, body.room-lobby-page { margin: 0; padding: 0; overflow: hidden; width: 100%; height: 100%; min-height: 100%; }
|
||
#mic-permission-overlay {
|
||
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
|
||
z-index: 9999;
|
||
display: flex; align-items: center; justify-content: center;
|
||
background: rgba(10, 10, 20, 0.88);
|
||
backdrop-filter: blur(6px);
|
||
}
|
||
#mic-permission-overlay.hidden { display: none !important; }
|
||
/* How to — อยู่เหนือไมค์ */
|
||
#room-howto-overlay {
|
||
position: fixed; inset: 0; z-index: 10000;
|
||
display: flex; align-items: center; justify-content: center;
|
||
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
|
||
background: rgba(4, 6, 18, 0.88);
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
#room-howto-overlay.hidden { display: none !important; }
|
||
.room-howto-inner {
|
||
max-width: min(96vw, 720px);
|
||
text-align: center;
|
||
}
|
||
.room-howto-inner > img.room-howto-art {
|
||
display: block;
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
.room-howto-close {
|
||
margin-top: 12px;
|
||
}
|
||
#room-howto-btn-got-it {
|
||
padding: 0; border: none; background: transparent; cursor: pointer;
|
||
max-width: min(88vw, 420px);
|
||
}
|
||
#room-howto-btn-got-it img { display: block; width: 100%; height: auto; }
|
||
#room-players-hud {
|
||
position: fixed;
|
||
top: max(10px, env(safe-area-inset-top));
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 50;
|
||
margin: 0;
|
||
padding: 0.35rem 1.25rem;
|
||
font-family: system-ui, 'Kanit', sans-serif;
|
||
font-size: clamp(0.95rem, 2vw, 1.15rem);
|
||
font-weight: 600;
|
||
letter-spacing: 0.04em;
|
||
color: #e2e8f0;
|
||
text-shadow: 0 0 12px rgba(34, 211, 238, 0.45);
|
||
pointer-events: none;
|
||
}
|
||
/* ข้อเสนอตัวป่วน (LobbyB) — เหนือ howto/mic */
|
||
#troublesome-overlay {
|
||
position: fixed; inset: 0; z-index: 10050;
|
||
display: flex; align-items: center; justify-content: center;
|
||
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
|
||
background: rgba(4, 4, 12, 0.78);
|
||
backdrop-filter: blur(6px);
|
||
}
|
||
#troublesome-overlay.is-hidden { display: none !important; }
|
||
.troublesome-modal {
|
||
display: flex; flex-direction: column; align-items: center;
|
||
gap: 0.5rem; max-width: min(96vw, 560px); width: 100%;
|
||
}
|
||
.troublesome-art {
|
||
display: block; width: 100%; height: auto;
|
||
max-height: min(72vh, 640px); object-fit: contain;
|
||
filter: drop-shadow(0 0 24px rgba(255, 40, 60, 0.35));
|
||
}
|
||
.troublesome-actions {
|
||
display: flex; flex-direction: row; align-items: center; justify-content: center;
|
||
gap: clamp(0.5rem, 3vw, 1.5rem); flex-wrap: wrap;
|
||
margin-top: 0.25rem;
|
||
}
|
||
.troublesome-decline-btn, .troublesome-accept-btn {
|
||
padding: 0; border: none; background: transparent; cursor: pointer;
|
||
transition: transform 0.15s ease, filter 0.15s ease;
|
||
}
|
||
.troublesome-decline-btn:hover, .troublesome-accept-btn:hover {
|
||
transform: scale(1.04); filter: brightness(1.08);
|
||
}
|
||
.troublesome-decline-btn img, .troublesome-accept-btn img {
|
||
display: block; height: auto; width: min(42vw, 200px); object-fit: contain;
|
||
}
|
||
.troublesome-timer-wrap {
|
||
position: relative; width: 56px; height: 56px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
background: url(/Main-Lobby/IMAGE/Troublesome/time-frame.png) center/contain no-repeat;
|
||
}
|
||
.troublesome-timer-wrap span {
|
||
font-family: system-ui, sans-serif; font-weight: 800; font-size: 1.35rem;
|
||
color: #fff; text-shadow: 0 0 8px rgba(255, 80, 100, 0.8);
|
||
}
|
||
/* เลือกผู้ต้องสงสัย (LobbyB) — หลังข้อเสนอตัวป่วน */
|
||
#suspect-pick-overlay {
|
||
position: fixed; inset: 0; z-index: 10045;
|
||
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
||
padding: max(12px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom));
|
||
box-sizing: border-box;
|
||
background: rgba(6, 10, 22, 0.92);
|
||
backdrop-filter: blur(10px);
|
||
overflow: auto;
|
||
}
|
||
#suspect-pick-overlay.is-hidden { display: none !important; }
|
||
/* ครอบสเกล — ความสูงจริง = offsetHeight * scale กันชนขอบจอ */
|
||
.suspect-pick-scale-wrap {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
}
|
||
.suspect-pick-inner {
|
||
width: 1200px;
|
||
max-width: none;
|
||
box-sizing: border-box;
|
||
display: flex; flex-direction: column; align-items: center;
|
||
gap: 12px;
|
||
transform-origin: top center;
|
||
will-change: transform;
|
||
}
|
||
.suspect-pick-top {
|
||
width: 100%; display: grid;
|
||
grid-template-columns: 1fr auto 1fr;
|
||
align-items: start; gap: 0.5rem;
|
||
}
|
||
.suspect-pick-case-tag { justify-self: start; }
|
||
.suspect-pick-players { justify-self: center; text-align: center; margin: 0; }
|
||
.suspect-pick-top-spacer { justify-self: end; width: 0; height: 0; overflow: hidden; }
|
||
.suspect-pick-case-tag {
|
||
font-family: 'Kanit', system-ui, sans-serif;
|
||
font-size: clamp(0.75rem, 2vw, 0.95rem);
|
||
color: #a5f3fc; padding: 0.35rem 0.75rem;
|
||
border: 1px solid rgba(34, 211, 238, 0.45); border-radius: 8px;
|
||
background: rgba(15, 23, 42, 0.65);
|
||
text-shadow: 0 0 12px rgba(34, 211, 238, 0.35);
|
||
}
|
||
.suspect-pick-players {
|
||
font-family: 'Kanit', system-ui, sans-serif;
|
||
font-weight: 700; font-size: clamp(0.85rem, 2.2vw, 1.05rem);
|
||
letter-spacing: 0.06em; color: #e2e8f0;
|
||
text-shadow: 0 0 14px rgba(34, 211, 238, 0.4);
|
||
margin: 0 auto;
|
||
}
|
||
.suspect-pick-title-img {
|
||
display: block; width: min(520px, 100%); height: auto; margin: 0 auto;
|
||
filter: drop-shadow(0 0 20px rgba(34, 211, 238, 0.35));
|
||
}
|
||
.suspect-pick-sub {
|
||
font-family: 'Kanit', system-ui, sans-serif;
|
||
font-size: clamp(0.8rem, 2vw, 0.95rem);
|
||
color: #94a3b8; text-align: center; max-width: 42rem; margin: 0 0.5rem;
|
||
line-height: 1.45;
|
||
}
|
||
.suspect-cards-row {
|
||
display: flex; flex-direction: row; flex-wrap: nowrap;
|
||
align-items: stretch; justify-content: center;
|
||
gap: 16px;
|
||
width: 100%; margin-top: 0.25rem;
|
||
}
|
||
.suspect-card {
|
||
position: relative;
|
||
padding: 0; border: none; background: transparent; cursor: default;
|
||
border-radius: 12px;
|
||
transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
|
||
flex: 1 1 0;
|
||
min-width: 0;
|
||
max-width: 380px;
|
||
}
|
||
.suspect-card img {
|
||
display: block; width: 100%; height: auto;
|
||
border-radius: 10px;
|
||
vertical-align: middle;
|
||
}
|
||
.suspect-card--host {
|
||
cursor: pointer;
|
||
}
|
||
.suspect-card--host:hover {
|
||
transform: scale(1.02);
|
||
filter: brightness(1.06);
|
||
}
|
||
.suspect-card--selected {
|
||
box-shadow: 0 0 24px 5px rgba(34, 211, 238, 0.75), 0 0 4px 2px rgba(34, 211, 238, 0.9);
|
||
outline: 2px solid #22d3ee;
|
||
outline-offset: 2px;
|
||
}
|
||
.suspect-pick-actions {
|
||
display: none;
|
||
flex-direction: column; align-items: center;
|
||
gap: 0.75rem; margin-top: 0.5rem; width: 100%;
|
||
}
|
||
.suspect-pick-actions.suspect-pick-actions--visible {
|
||
display: flex;
|
||
}
|
||
.suspect-btn-start {
|
||
padding: 0; border: none; background: transparent; cursor: pointer;
|
||
max-width: 420px; width: 100%;
|
||
transition: filter 0.2s, transform 0.15s;
|
||
}
|
||
.suspect-btn-start img { display: block; width: 100%; height: auto; }
|
||
.suspect-btn-start:hover { transform: scale(1.03); filter: brightness(1.08); }
|
||
#suspect-pick-close {
|
||
position: fixed;
|
||
top: max(10px, env(safe-area-inset-top));
|
||
right: max(10px, env(safe-area-inset-right));
|
||
z-index: 10046;
|
||
padding: 0;
|
||
margin: 0;
|
||
border: none;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
line-height: 0;
|
||
transition: transform 0.15s ease, filter 0.15s ease;
|
||
}
|
||
#suspect-pick-close:hover { transform: scale(1.07); filter: brightness(1.12); }
|
||
#suspect-pick-close img { display: block; width: min(52px, 11vw); height: auto; }
|
||
/* ปุ่มบนโถง — เปิด overlay ใหม่เมื่อเฟสยัง active */
|
||
#btn-suspect-reopen {
|
||
position: fixed;
|
||
z-index: 10044;
|
||
left: max(12px, env(safe-area-inset-left));
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 10px 22px;
|
||
font-family: 'Kanit', system-ui, sans-serif;
|
||
font-weight: 600;
|
||
font-size: clamp(0.82rem, 2.1vw, 1rem);
|
||
color: #e0f2fe;
|
||
cursor: pointer;
|
||
border: 1px solid rgba(34, 211, 238, 0.55);
|
||
border-radius: 999px;
|
||
background: rgba(15, 23, 42, 0.94);
|
||
box-shadow: 0 0 22px rgba(34, 211, 238, 0.28);
|
||
max-width: calc(100vw - 24px);
|
||
}
|
||
#btn-suspect-reopen:hover {
|
||
filter: brightness(1.08);
|
||
box-shadow: 0 0 28px rgba(34, 211, 238, 0.4);
|
||
}
|
||
#btn-suspect-reopen.is-hidden { display: none !important; }
|
||
#btn-suspect-reopen img { flex-shrink: 0; width: 28px; height: auto; display: block; }
|
||
#mic-permission-modal {
|
||
position: relative;
|
||
width: min(92vw, 420px);
|
||
background: url(/Game/img/mic-permission-bg.png) center/100% 100% no-repeat;
|
||
background-size: contain;
|
||
background-color: rgba(26, 27, 38, 0.95);
|
||
border-radius: 16px;
|
||
box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.4), 0 0 24px rgba(147, 51, 234, 0.3);
|
||
padding: 2rem 2rem 2.25rem;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
}
|
||
#mic-permission-modal .mic-permission-close {
|
||
position: absolute; top: 12px; right: 12px;
|
||
width: 40px; height: 40px; padding: 0; border: none; border-radius: 8px;
|
||
background: url(/Game/img/mic-permission-btn-close.png) center/contain no-repeat;
|
||
background-color: transparent; cursor: pointer; opacity: 0.95;
|
||
}
|
||
#mic-permission-modal .mic-permission-close:hover { opacity: 1; }
|
||
#mic-permission-modal .mic-permission-txt {
|
||
display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto 1.5rem;
|
||
object-fit: contain;
|
||
}
|
||
#mic-permission-modal .mic-permission-btn-allow {
|
||
display: inline-block;
|
||
width: 180px; height: 56px; padding: 0; border: none; border-radius: 12px;
|
||
background: url(/Game/img/mic-permission-btn-allow.png) center/contain no-repeat;
|
||
background-color: transparent; cursor: pointer; opacity: 0.95;
|
||
}
|
||
#mic-permission-modal .mic-permission-btn-allow:hover { opacity: 1; }
|
||
#mic-permission-modal .mic-permission-btn-allow:disabled { opacity: 0.6; cursor: not-allowed; }
|
||
#mic-permission-modal .mic-permission-btn-allow { font-size: 0; color: transparent; }
|
||
|
||
/* LobbyA — เลือกระดับแล้วคดี (เต็มจอ) */
|
||
#lobby-preplay-overlay {
|
||
position: fixed; inset: 0; z-index: 10042;
|
||
width: 100vw;
|
||
height: 100dvh;
|
||
min-height: 100vh;
|
||
margin: 0;
|
||
padding: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
justify-content: stretch;
|
||
background: rgba(3, 5, 14, 0.94);
|
||
backdrop-filter: blur(14px);
|
||
-webkit-backdrop-filter: blur(14px);
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
}
|
||
#lobby-preplay-overlay.is-hidden { display: none !important; }
|
||
.lobby-preplay-inner {
|
||
position: relative;
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
width: 100%;
|
||
max-width: none;
|
||
height: 100%;
|
||
max-height: none;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
|
||
}
|
||
.lobby-preplay-close-top,
|
||
.lobby-preplay-close-case {
|
||
position: absolute;
|
||
top: max(4px, env(safe-area-inset-top));
|
||
right: max(6px, env(safe-area-inset-right));
|
||
z-index: 5;
|
||
padding: 0; border: none; background: transparent; cursor: pointer;
|
||
line-height: 0;
|
||
}
|
||
.lobby-preplay-close-top img,
|
||
.lobby-preplay-close-case img { display: block; width: min(52px, 11vw); height: auto; }
|
||
.lobby-preplay-title-img {
|
||
display: block;
|
||
max-width: min(94vw, 780px);
|
||
width: auto;
|
||
max-height: min(16vh, 200px);
|
||
height: auto;
|
||
margin: 0 auto;
|
||
object-fit: contain;
|
||
filter: drop-shadow(0 0 14px rgba(34, 211, 238, 0.4));
|
||
}
|
||
.lobby-preplay-subtitle {
|
||
text-align: center;
|
||
margin: 0.1rem auto 0.35rem;
|
||
padding: 0 0.75rem;
|
||
max-width: 40rem;
|
||
font-family: system-ui, 'Kanit', sans-serif;
|
||
font-size: clamp(0.8rem, 1.65vw, 1.08rem);
|
||
font-weight: 500;
|
||
line-height: 1.35;
|
||
color: #e2e8f0;
|
||
}
|
||
.lobby-preplay-step {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
width: 100%;
|
||
position: relative;
|
||
}
|
||
.lobby-preplay-step.is-hidden { display: none !important; }
|
||
.lobby-preplay-level-row {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: clamp(4px, 0.9vw, 14px);
|
||
min-height: 0;
|
||
padding: 0.2rem 0;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
scrollbar-width: thin;
|
||
}
|
||
@media (max-width: 720px) {
|
||
.lobby-preplay-level-row {
|
||
flex-wrap: wrap;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
align-content: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
.lobby-level-card {
|
||
flex: 1 1 0;
|
||
min-width: 0;
|
||
max-width: 20%;
|
||
padding: 0;
|
||
border: 2px solid rgba(34, 211, 238, 0.5);
|
||
border-radius: 10px;
|
||
background: rgba(10, 14, 32, 0.75);
|
||
cursor: pointer;
|
||
transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
|
||
line-height: 0;
|
||
}
|
||
@media (max-width: 720px) {
|
||
.lobby-level-card {
|
||
flex: 1 1 40%;
|
||
max-width: 46%;
|
||
}
|
||
}
|
||
.lobby-level-card img {
|
||
display: block;
|
||
width: 100%;
|
||
height: auto;
|
||
max-height: min(64vh, calc(100dvh - 200px));
|
||
object-fit: contain;
|
||
object-position: bottom center;
|
||
border-radius: 8px;
|
||
vertical-align: bottom;
|
||
}
|
||
.lobby-level-card:hover { transform: translateY(-2px); box-shadow: 0 0 22px rgba(34, 211, 238, 0.3); }
|
||
.lobby-level-card.is-selected {
|
||
border-color: #22d3ee;
|
||
box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.85), 0 0 28px rgba(34, 211, 238, 0.45);
|
||
}
|
||
.lobby-preplay-ready {
|
||
flex-shrink: 0;
|
||
align-self: center;
|
||
margin-top: auto;
|
||
margin-bottom: max(4px, env(safe-area-inset-bottom));
|
||
padding: 0.55rem 2.25rem;
|
||
font-family: system-ui, 'Kanit', sans-serif;
|
||
font-weight: 800;
|
||
font-size: clamp(0.95rem, 2.2vw, 1.2rem);
|
||
letter-spacing: 0.14em;
|
||
color: #ecfdf5;
|
||
background: linear-gradient(180deg, #166534 0%, #14532d 100%);
|
||
border: 2px solid #22c55e;
|
||
border-radius: 10px;
|
||
cursor: pointer;
|
||
box-shadow: 0 0 22px rgba(34, 197, 94, 0.28);
|
||
}
|
||
.lobby-preplay-ready:hover { filter: brightness(1.08); }
|
||
.lobby-preplay-back-wrap {
|
||
position: absolute;
|
||
top: max(4px, env(safe-area-inset-top));
|
||
left: max(6px, env(safe-area-inset-left));
|
||
z-index: 5;
|
||
margin: 0;
|
||
}
|
||
.lobby-preplay-back-wrap button {
|
||
padding: 0; border: none; background: transparent; cursor: pointer; line-height: 0;
|
||
}
|
||
.lobby-preplay-back-wrap img { display: block; width: min(220px, 52vw); height: auto; }
|
||
.lobby-preplay-case-head {
|
||
flex-shrink: 0;
|
||
text-align: center;
|
||
padding-top: min(5vh, 48px);
|
||
padding-left: min(48vw, 240px);
|
||
padding-right: min(48vw, 240px);
|
||
}
|
||
.lobby-preplay-case-row {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: center;
|
||
align-items: stretch;
|
||
gap: clamp(6px, 1.2vw, 18px);
|
||
width: 100%;
|
||
min-height: 0;
|
||
padding: 0.35rem 0 0.25rem;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
scrollbar-width: thin;
|
||
}
|
||
@media (max-width: 900px) {
|
||
.lobby-preplay-case-row {
|
||
flex-wrap: wrap;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
align-content: stretch;
|
||
}
|
||
}
|
||
.lobby-case-card-wrap {
|
||
flex: 1 1 0;
|
||
min-width: 0;
|
||
max-width: 34%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: clamp(4px, 1vh, 10px);
|
||
border: 2px solid rgba(167, 139, 250, 0.45);
|
||
border-radius: 12px;
|
||
padding: clamp(6px, 1vw, 10px);
|
||
background: rgba(8, 10, 24, 0.72);
|
||
max-height: min(82vh, calc(100dvh - 120px));
|
||
}
|
||
@media (max-width: 900px) {
|
||
.lobby-case-card-wrap {
|
||
flex: 1 1 100%;
|
||
max-width: min(420px, 100%);
|
||
max-height: none;
|
||
}
|
||
}
|
||
.lobby-case-art {
|
||
display: block;
|
||
width: 100%;
|
||
flex: 1 1 auto;
|
||
min-height: 0;
|
||
max-height: min(58vh, calc(100dvh - 220px));
|
||
height: auto;
|
||
object-fit: contain;
|
||
object-position: center top;
|
||
border-radius: 8px;
|
||
}
|
||
.lobby-case-actions {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
justify-content: center;
|
||
}
|
||
.lobby-case-actions button {
|
||
padding: 0; border: none; background: transparent; cursor: pointer; line-height: 0;
|
||
}
|
||
.lobby-case-actions button img { display: block; width: min(150px, 36vw); height: auto; pointer-events: none; user-select: none; }
|
||
#lobby-preplay-case-detail-overlay {
|
||
position: fixed; inset: 0; z-index: 10048;
|
||
display: flex; align-items: center; justify-content: center;
|
||
padding: 16px; background: rgba(0, 0, 0, 0.75);
|
||
}
|
||
#lobby-preplay-case-detail-overlay.is-hidden { display: none !important; }
|
||
.lobby-preplay-case-detail-inner { position: relative; max-width: min(96vw, 720px); }
|
||
.lobby-preplay-case-detail-inner > img { display: block; max-width: 100%; height: auto; border-radius: 8px; }
|
||
#lobby-preplay-case-detail-close {
|
||
position: absolute; top: 8px; right: 8px;
|
||
width: 44px; height: 44px; border-radius: 50%;
|
||
border: 2px solid rgba(34, 211, 238, 0.7); background: rgba(10, 12, 24, 0.85);
|
||
color: #22d3ee; font-size: 1.5rem; line-height: 1; cursor: pointer;
|
||
}
|
||
/* เกมตอบคำถาม — HUD แนวอ้างอิง (TIME บนกลาง, SCORE ซ้าย, คำถามใหญ่) */
|
||
#quiz-game-overlay {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
|
||
z-index: 10085;
|
||
pointer-events: none;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
}
|
||
#quiz-game-overlay.is-hidden { display: none !important; }
|
||
.quiz-hud-root {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-start;
|
||
gap: clamp(10px, 2vw, 20px);
|
||
width: 100%;
|
||
max-width: min(1200px, 100%);
|
||
}
|
||
.quiz-hud-score-col {
|
||
flex: 0 0 auto;
|
||
min-width: 140px;
|
||
max-width: min(34vw, 220px);
|
||
background: rgba(6, 10, 22, 0.88);
|
||
border: 2px solid rgba(34, 211, 238, 0.55);
|
||
border-radius: 12px;
|
||
padding: 0.45rem 0.5rem 0.55rem;
|
||
box-shadow: 0 0 24px rgba(34, 211, 238, 0.12), inset 0 0 40px rgba(0, 0, 0, 0.35);
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
.quiz-hud-score-title {
|
||
font-size: 0.7rem;
|
||
font-weight: 900;
|
||
letter-spacing: 0.14em;
|
||
color: #22d3ee;
|
||
margin: 0 0 0.35rem;
|
||
padding-bottom: 0.25rem;
|
||
border-bottom: 1px solid rgba(34, 211, 238, 0.3);
|
||
}
|
||
.quiz-scoreboard-list {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
max-height: min(42vh, 320px);
|
||
overflow: auto;
|
||
}
|
||
.quiz-scoreboard-list li {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
padding: 0.28rem 0;
|
||
border-bottom: 1px solid rgba(100, 120, 180, 0.15);
|
||
}
|
||
.quiz-scoreboard-list li:last-child { border-bottom: none; }
|
||
.quiz-sb-avatar {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 6px;
|
||
object-fit: cover;
|
||
border: 1px solid rgba(122, 162, 247, 0.45);
|
||
flex-shrink: 0;
|
||
background: rgba(20, 24, 40, 0.9);
|
||
}
|
||
.quiz-sb-meta {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
gap: 0.35rem;
|
||
}
|
||
.quiz-scoreboard-name {
|
||
font-size: 0.72rem;
|
||
color: #c0caf5;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.quiz-scoreboard-val {
|
||
font-variant-numeric: tabular-nums;
|
||
font-weight: 900;
|
||
font-size: 0.8rem;
|
||
color: #e2e8f0;
|
||
flex-shrink: 0;
|
||
}
|
||
.quiz-scoreboard-list li.quiz-scoreboard-me .quiz-scoreboard-name { color: #9ece6a; font-weight: 700; }
|
||
.quiz-scoreboard-list li.quiz-scoreboard-me .quiz-scoreboard-val { color: #9ece6a; }
|
||
.quiz-hud-main {
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
text-align: center;
|
||
padding-top: 0.15rem;
|
||
}
|
||
.quiz-hud-time-row {
|
||
font-family: 'Kanit', system-ui, sans-serif;
|
||
font-size: clamp(1rem, 2.8vw, 1.35rem);
|
||
font-weight: 800;
|
||
color: #94e8ff;
|
||
letter-spacing: 0.06em;
|
||
text-shadow: 0 0 18px rgba(34, 211, 238, 0.45);
|
||
margin-bottom: 0.15rem;
|
||
}
|
||
.quiz-hud-time-val {
|
||
font-variant-numeric: tabular-nums;
|
||
color: #fbbf24;
|
||
margin-left: 0.25rem;
|
||
}
|
||
.quiz-hud-quiz-num {
|
||
font-family: 'Kanit', system-ui, sans-serif;
|
||
font-size: clamp(0.78rem, 2vw, 0.95rem);
|
||
font-weight: 700;
|
||
color: #a5b4fc;
|
||
letter-spacing: 0.12em;
|
||
margin-bottom: 0.35rem;
|
||
}
|
||
.quiz-hud-question-text {
|
||
margin: 0 auto 0.4rem;
|
||
max-width: min(92vw, 720px);
|
||
font-family: 'Kanit', system-ui, sans-serif;
|
||
font-size: clamp(0.95rem, 2.8vw, 1.25rem);
|
||
line-height: 1.4;
|
||
font-weight: 700;
|
||
color: #fde047;
|
||
text-shadow: 0 0 20px rgba(250, 204, 21, 0.35), 0 2px 12px rgba(0, 0, 0, 0.75);
|
||
}
|
||
.quiz-hud-phase {
|
||
font-size: 0.68rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: #7aa2f7;
|
||
opacity: 0.95;
|
||
}
|
||
#quiz-map-question-panel {
|
||
position: absolute;
|
||
z-index: 4;
|
||
pointer-events: none;
|
||
box-sizing: border-box;
|
||
padding: clamp(6px, 1.5vw, 14px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
justify-content: flex-start;
|
||
text-align: center;
|
||
overflow: hidden;
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
--qmap-bg: rgba(12, 14, 28, 0.88);
|
||
--qmap-border: rgba(255, 214, 102, 0.7);
|
||
--qmap-border-w: 2px;
|
||
--qmap-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
|
||
background: var(--qmap-bg);
|
||
border: var(--qmap-border-w) solid var(--qmap-border);
|
||
border-radius: 12px;
|
||
box-shadow: var(--qmap-shadow);
|
||
}
|
||
#quiz-map-question-panel.is-hidden {
|
||
display: none !important;
|
||
}
|
||
#quiz-map-question-panel::-webkit-scrollbar {
|
||
display: none;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
/* ตอนเล่น quiz ซ่อนปุ่ม READY กลางล่าง — ไม่ให้ทับ/แย่งโฟกัสกับแถบคำถาม */
|
||
body.room-lobby--quiz-active .room-lobby-ready-fixed {
|
||
visibility: hidden;
|
||
pointer-events: none;
|
||
}
|
||
#quiz-map-question-text {
|
||
margin: 0;
|
||
font-family: 'Kanit', system-ui, sans-serif;
|
||
font-size: clamp(14px, 2.5vmin, 18px);
|
||
font-weight: 600;
|
||
line-height: 1.45;
|
||
--qmap-text: #f1f5f9;
|
||
--qmap-text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
|
||
color: var(--qmap-text);
|
||
text-shadow: var(--qmap-text-shadow);
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
flex: 0 1 auto;
|
||
min-height: 0;
|
||
max-height: 100%;
|
||
overflow: hidden;
|
||
overflow-wrap: anywhere;
|
||
word-break: break-word;
|
||
white-space: pre-line;
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
}
|
||
#quiz-map-question-text::-webkit-scrollbar {
|
||
display: none;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
#quiz-feedback-banner {
|
||
position: fixed;
|
||
top: max(132px, env(safe-area-inset-top));
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
z-index: 10086;
|
||
max-width: min(92vw, 480px);
|
||
padding: 0.65rem 1.1rem;
|
||
border-radius: 14px;
|
||
font-size: clamp(0.95rem, 3.2vw, 1.15rem);
|
||
font-weight: 800;
|
||
text-align: center;
|
||
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
|
||
pointer-events: none;
|
||
line-height: 1.35;
|
||
}
|
||
#quiz-feedback-banner.is-hidden { display: none !important; }
|
||
.quiz-feedback-banner.quiz-feedback-ok {
|
||
background: rgba(22, 40, 28, 0.95);
|
||
border: 2px solid rgba(158, 206, 106, 0.85);
|
||
color: #c3e6a8;
|
||
}
|
||
.quiz-feedback-banner.quiz-feedback-bad {
|
||
background: rgba(40, 22, 30, 0.95);
|
||
border: 2px solid rgba(247, 118, 140, 0.85);
|
||
color: #fecdd3;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="room-lobby-page">
|
||
<div id="room-howto-overlay" class="hidden" role="dialog" aria-modal="true" aria-labelledby="room-howto-title">
|
||
<div class="room-howto-inner">
|
||
<h2 id="room-howto-title" class="visually-hidden" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);">วิธีเล่นเบื้องต้น</h2>
|
||
<img class="room-howto-art" src="/Main-Lobby/IMAGE/Howto/howtoplay.png" alt="วิธีเล่นเบื้องต้น" decoding="async">
|
||
<div class="room-howto-close">
|
||
<button type="button" id="room-howto-btn-got-it" title="เข้าใจแล้ว" aria-label="เข้าใจแล้ว ปิดวิธีเล่น">
|
||
<img src="/Main-Lobby/IMAGE/Howto/btn-got-it.png" alt="" decoding="async" onerror="this.style.display='none';this.parentElement.textContent='เข้าใจแล้ว';">
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="troublesome-overlay" class="is-hidden" role="dialog" aria-modal="true" aria-labelledby="troublesome-title">
|
||
<div class="troublesome-modal">
|
||
<h2 id="troublesome-title" class="visually-hidden" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);">ข้อเสนอลับ ตัวป่วน</h2>
|
||
<img src="/Main-Lobby/IMAGE/Troublesome/secret%20offer.png" alt="ข้อเสนอลับ: บทตัวป่วน" class="troublesome-art" width="520" height="600" decoding="async">
|
||
<div class="troublesome-actions">
|
||
<button type="button" class="troublesome-decline-btn" id="troublesome-decline" title="ปฏิเสธ" aria-label="ปฏิเสธข้อเสนอ">
|
||
<img src="/Main-Lobby/IMAGE/Troublesome/btn-cancel.png" alt="ปฏิเสธ" width="200" height="72" decoding="async">
|
||
</button>
|
||
<div class="troublesome-timer-wrap" aria-live="polite"><span id="troublesome-sec">15</span></div>
|
||
<button type="button" class="troublesome-accept-btn" id="troublesome-accept" title="รับข้อเสนอ" aria-label="รับข้อเสนอ">
|
||
<img src="/Main-Lobby/IMAGE/Troublesome/btn-accept.png" alt="รับข้อเสนอ" width="200" height="72" decoding="async">
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="suspect-pick-overlay" class="is-hidden" role="dialog" aria-modal="true" aria-labelledby="suspect-pick-sr-title" aria-hidden="true">
|
||
<h2 id="suspect-pick-sr-title" class="visually-hidden" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);">เลือกผู้ต้องสงสัย</h2>
|
||
<button type="button" id="suspect-pick-close" class="suspect-pick-close" title="ปิดหน้าต่าง (กดปุ่มด้านล่างเพื่อเปิดอีกครั้ง)" aria-label="ปิดหน้าเลือกผู้ต้องสงสัย">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/btn-close_1.png" alt="" width="56" height="56" decoding="async">
|
||
</button>
|
||
<div id="suspect-pick-scale-wrap" class="suspect-pick-scale-wrap">
|
||
<div class="suspect-pick-inner">
|
||
<div class="suspect-pick-top">
|
||
<span class="suspect-pick-case-tag" id="suspect-case-label">คดีโจรกรรมไซเบอร์</span>
|
||
<p class="suspect-pick-players" id="suspect-players-hud" aria-live="polite">PLAYERS : 0/10</p>
|
||
<span class="suspect-pick-top-spacer" aria-hidden="true"></span>
|
||
</div>
|
||
<img class="suspect-pick-title-img" src="/Main-Lobby/IMAGE/Choose%20a%20suspect/txt-suspect.png" alt="เลือกผู้ต้องสงสัย" width="520" height="120" decoding="async">
|
||
<p class="suspect-pick-sub">เลือกผู้ต้องสงสัย และเข้าไปทำภารกิจให้สำเร็จ เพื่อรับหลักฐานเพิ่มเติม · <strong>เฉพาะ host</strong> เลือกการ์ดและกดเริ่มสืบสวน</p>
|
||
<div class="suspect-cards-row" id="suspect-cards-row">
|
||
<button type="button" class="suspect-card" data-index="0" aria-label="ผู้ต้องสงสัย 1">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/suspect-1.png" alt="" decoding="async">
|
||
</button>
|
||
<button type="button" class="suspect-card" data-index="1" aria-label="ผู้ต้องสงสัย 2">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/suspect-2.png" alt="" decoding="async">
|
||
</button>
|
||
<button type="button" class="suspect-card" data-index="2" aria-label="ผู้ต้องสงสัย 3">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/suspect-3.png" alt="" decoding="async">
|
||
</button>
|
||
</div>
|
||
<div class="suspect-pick-actions" id="suspect-pick-actions" aria-hidden="true">
|
||
<button type="button" class="suspect-btn-start" id="suspect-btn-start" title="เริ่มสืบสวน" aria-label="เริ่มสืบสวน">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/suspect-start.png" alt="เริ่มสืบสวน" decoding="async">
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="lobby-preplay-overlay" class="is-hidden" role="dialog" aria-modal="true" aria-labelledby="lobby-preplay-sr-title" aria-hidden="true">
|
||
<h2 id="lobby-preplay-sr-title" class="visually-hidden" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);">เลือกระดับและคดี</h2>
|
||
<div class="lobby-preplay-inner">
|
||
<div id="lobby-preplay-step-level" class="lobby-preplay-step">
|
||
<button type="button" class="lobby-preplay-close-top" id="lobby-preplay-close-level" title="ปิด" aria-label="ปิด">
|
||
<img src="/Main-Lobby/IMAGE/LEVEL/btn-close.png" alt="" decoding="async">
|
||
</button>
|
||
<img class="lobby-preplay-title-img" src="/Main-Lobby/IMAGE/LEVEL/level-txt.png" alt="เส้นทางนักสืบ — เลือกระดับความท้าทาย" decoding="async">
|
||
<p class="lobby-preplay-subtitle">เลือกระดับความท้าทายตามความเชี่ยวชาญของคุณ</p>
|
||
<div class="lobby-preplay-level-row">
|
||
<button type="button" class="lobby-level-card" data-level="1" title="ROOKIE"><img src="/Main-Lobby/IMAGE/LEVEL/level-1.png" alt="ROOKIE" decoding="async"></button>
|
||
<button type="button" class="lobby-level-card" data-level="2" title="JUNIOR"><img src="/Main-Lobby/IMAGE/LEVEL/level-2.png" alt="JUNIOR" decoding="async"></button>
|
||
<button type="button" class="lobby-level-card" data-level="3" title="SENIOR"><img src="/Main-Lobby/IMAGE/LEVEL/level-3.png" alt="SENIOR" decoding="async"></button>
|
||
<button type="button" class="lobby-level-card" data-level="4" title="SPECIALIST"><img src="/Main-Lobby/IMAGE/LEVEL/level-4.png" alt="SPECIALIST" decoding="async"></button>
|
||
<button type="button" class="lobby-level-card" data-level="5" title="MASTERMIND"><img src="/Main-Lobby/IMAGE/LEVEL/level-5.png" alt="MASTERMIND" decoding="async"></button>
|
||
</div>
|
||
<button type="button" class="lobby-preplay-ready" id="lobby-preplay-level-ready">READY</button>
|
||
</div>
|
||
<div id="lobby-preplay-step-case" class="lobby-preplay-step is-hidden">
|
||
<div class="lobby-preplay-back-wrap">
|
||
<button type="button" id="lobby-preplay-back-case" title="กลับ — เส้นทางนักสืบ" aria-label="กลับไปเลือกระดับ">
|
||
<img src="/Main-Lobby/IMAGE/case/btn-back-step.png" alt="" decoding="async">
|
||
</button>
|
||
</div>
|
||
<button type="button" class="lobby-preplay-close-case" id="lobby-preplay-close-case" title="ปิด" aria-label="ปิด">
|
||
<img src="/Main-Lobby/IMAGE/LEVEL/btn-close.png" alt="" decoding="async">
|
||
</button>
|
||
<div class="lobby-preplay-case-head">
|
||
<img class="lobby-preplay-title-img" src="/Main-Lobby/IMAGE/case/case-txt.png" alt="เลือกคดี" decoding="async">
|
||
</div>
|
||
<div class="lobby-preplay-case-row">
|
||
<div class="lobby-case-card-wrap">
|
||
<img class="lobby-case-art" src="/Main-Lobby/IMAGE/case/case-1.png" alt="คดีโจรกรรมไซเบอร์" decoding="async">
|
||
<div class="lobby-case-actions">
|
||
<button type="button" class="lobby-case-detail" title="รายละเอียด"><img src="/Main-Lobby/IMAGE/case/btn-detail.png" alt="รายละเอียด" decoding="async"></button>
|
||
<button type="button" class="lobby-case-start" data-case="1" title="เริ่มคดี"><img src="/Main-Lobby/IMAGE/case/btn-startcase.png" alt="เริ่มคดี" decoding="async"></button>
|
||
</div>
|
||
</div>
|
||
<div class="lobby-case-card-wrap">
|
||
<img class="lobby-case-art" src="/Main-Lobby/IMAGE/case/case-2.png" alt="คดีปล้นร้านอัญมณี" decoding="async">
|
||
<div class="lobby-case-actions">
|
||
<button type="button" class="lobby-case-detail" title="รายละเอียด"><img src="/Main-Lobby/IMAGE/case/btn-detail.png" alt="รายละเอียด" decoding="async"></button>
|
||
<button type="button" class="lobby-case-start" data-case="2" title="เริ่มคดี"><img src="/Main-Lobby/IMAGE/case/btn-startcase.png" alt="เริ่มคดี" decoding="async"></button>
|
||
</div>
|
||
</div>
|
||
<div class="lobby-case-card-wrap">
|
||
<img class="lobby-case-art" src="/Main-Lobby/IMAGE/case/case-3.png" alt="คดีฆาตกรรมปริศนา" decoding="async">
|
||
<div class="lobby-case-actions">
|
||
<button type="button" class="lobby-case-detail" title="รายละเอียด"><img src="/Main-Lobby/IMAGE/case/btn-detail.png" alt="รายละเอียด" decoding="async"></button>
|
||
<button type="button" class="lobby-case-start" data-case="3" title="เริ่มคดี"><img src="/Main-Lobby/IMAGE/case/btn-startcase.png" alt="เริ่มคดี" decoding="async"></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="lobby-preplay-case-detail-overlay" class="is-hidden" role="dialog" aria-modal="true" aria-hidden="true">
|
||
<div class="lobby-preplay-case-detail-inner">
|
||
<button type="button" id="lobby-preplay-case-detail-close" title="ปิด" aria-label="ปิดรายละเอียด">×</button>
|
||
<img src="/Main-Lobby/IMAGE/case/case-detail.png" alt="รายละเอียดคดี" decoding="async">
|
||
</div>
|
||
</div>
|
||
<div id="mic-permission-overlay" aria-label="ขอสิทธิ์ไมโครโฟน">
|
||
<div id="mic-permission-modal">
|
||
<button type="button" class="mic-permission-close" id="mic-permission-close" title="ปิด" aria-label="ปิด"></button>
|
||
<img src="/Game/img/mic-permission-txt.png" alt="อนุญาตให้เข้าถึงไมโครโฟน เพื่อให้คุณสามารถสื่อสารและบันทึกเสียงได้อย่างคมชัด โปรดอนุญาตให้แอปเข้าถึงไมโครโฟนของอุปกรณ์" class="mic-permission-txt">
|
||
<button type="button" class="mic-permission-btn-allow" id="mic-permission-allow" title="อนุญาต">อนุญาต</button>
|
||
</div>
|
||
</div>
|
||
<div id="quiz-game-overlay" class="is-hidden" role="status" aria-live="polite" aria-atomic="true">
|
||
<div class="quiz-hud-root">
|
||
<aside class="quiz-hud-score-col" aria-label="คะแนน">
|
||
<div class="quiz-hud-score-title">SCORE</div>
|
||
<ul id="quiz-scoreboard-list" class="quiz-scoreboard-list"></ul>
|
||
</aside>
|
||
<div class="quiz-hud-main">
|
||
<div class="quiz-hud-time-row" aria-live="polite">TIME : <span id="quiz-game-timer" class="quiz-hud-time-val">—</span></div>
|
||
<div id="quiz-hud-quiz-num" class="quiz-hud-quiz-num">- Quiz — -</div>
|
||
<p id="quiz-game-question" class="quiz-hud-question-text"></p>
|
||
<div id="quiz-game-phase-label" class="quiz-hud-phase"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="quiz-feedback-banner" class="is-hidden quiz-feedback-banner" role="status" aria-atomic="true"></div>
|
||
<div id="lobby-map-wrap">
|
||
<canvas id="lobby-map-canvas" tabindex="0" role="application" aria-label="แผนที่ห้อง — กด F โต้ตอบช่องสีเขียว"></canvas>
|
||
<div id="quiz-map-question-panel" class="is-hidden" aria-hidden="true">
|
||
<p id="quiz-map-question-text"></p>
|
||
</div>
|
||
<div id="lobby-zoom-pct" class="lobby-zoom-pct" aria-live="polite"></div>
|
||
<p class="lobby-interact-hint" title="ยืนหรือหันหน้าไปช่องสีเขียว — กดปุ่ม F (หรือ ด บนแป้นไทย)">ช่องเขียว · กด <kbd>F</kbd> / แป้นไทย <kbd>ด</kbd> โต้ตอบ</p>
|
||
</div>
|
||
<p id="room-players-hud" aria-live="polite">player: 0/10</p>
|
||
<button type="button" id="btn-suspect-reopen" class="is-hidden" title="เปิดหน้าเลือกผู้ต้องสงสัย" aria-label="เปิดหน้าเลือกผู้ต้องสงสัย">
|
||
<img src="/Main-Lobby/IMAGE/Choose%20a%20suspect/symbol-card.png" alt="" width="32" height="32" decoding="async">
|
||
<span>เลือกผู้ต้องสงสัย</span>
|
||
</button>
|
||
<div class="room-lobby-top-right-cluster" role="group" aria-label="โปรไฟล์ตัวละคร">
|
||
<div class="room-lobby-profile-wrap">
|
||
<div class="room-lobby-profile-frame">
|
||
<img id="room-lobby-profile-avatar" src="" alt="ตัวละครของคุณ" width="64" height="64" decoding="async">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="room-lobby-top-left-cluster">
|
||
<div class="room-lobby-exit-fixed">
|
||
<button type="button" id="btn-leave-lobby" class="btn-exit-icon" title="ออกจากห้อง" aria-label="ออกจากห้อง กลับไปสร้างห้อง">
|
||
<img src="/Game/img/btn-exit-room.png?v=2" alt="ออกจากห้อง" width="80" height="80" decoding="async">
|
||
</button>
|
||
<button type="button" id="btn-room-howto" class="btn-exit-icon" title="วิธีเล่นเบื้องต้น" aria-label="วิธีเล่นเบื้องต้น">
|
||
<img src="/Game/img/btn-howto-room.png" alt="" width="80" height="80" decoding="async">
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="container room-lobby-overlay">
|
||
<div class="room-lobby-peers" id="peers-list"></div>
|
||
<div class="room-lobby-actions">
|
||
<button type="button" id="btn-voice-permission" class="room-lobby-btn-hidden" title="กดเพื่อให้เบราว์เซอร์ถามสิทธิ์ไมค์">🎤 ขอสิทธิ์ไมค์</button>
|
||
<button type="button" id="btn-hear" class="room-lobby-btn-hidden" title="ถ้าไม่ได้ยินเสียงเพื่อน ให้กดปุ่มนี้หนึ่งครั้ง">👂 เปิดรับเสียง</button>
|
||
<div id="host-only" style="display:none;">
|
||
<label>เลือกฉาก (สำหรับเล่น) <select id="play-map-select"><option value="">โหลด...</option></select></label>
|
||
<button type="button" id="btn-start" title="เริ่มเกม">เริ่มเกม</button>
|
||
<p id="host-start-area-hint" class="host-start-area-hint" hidden></p>
|
||
</div>
|
||
<span id="non-host-msg" style="display:none;">รอ host เลือกฉากและเริ่มเกม</span>
|
||
<button type="button" id="btn-preview-claim-host" style="display:none;margin-top:0.45rem;padding:0.45rem 0.75rem;border-radius:8px;border:1px solid rgba(122,162,247,0.55);background:rgba(26,32,48,0.95);color:#c0caf5;font-size:0.82rem;cursor:pointer;max-width:min(96vw,300px);">ขอเป็นโฮสต์ (ทดสอบจากเอดิเตอร์)</button>
|
||
</div>
|
||
</div>
|
||
<!-- แชทเพื่อน — อยู่นอก overlay ที่ถูกซ่อน -->
|
||
<div class="room-lobby-chat room-lobby-chat-peers chat-panel chat-panel-collapsed" id="peer-chat-panel" aria-expanded="false">
|
||
<div class="chat-header-bar">
|
||
<span class="chat-header-title chat-header-title-img"><img src="/Game/img/chat-header-title.png" alt="Chat"></span>
|
||
<button type="button" class="chat-close-btn" id="chat-close-btn" title="เปิดแชท" aria-label="เปิดแชท"><img src="/Game/img/btn-chat.png" alt="" id="chat-toggle-img"></button>
|
||
</div>
|
||
<div id="chat-messages" class="chat-messages-bg"></div>
|
||
<form id="chat-form" class="chat-form-bar">
|
||
<input id="chat-input" placeholder="Type a here..." autocomplete="off">
|
||
<button type="submit" class="chat-send-btn" title="ส่ง"><img src="/Game/img/chat-btn-send.png" alt="ส่ง"></button>
|
||
</form>
|
||
</div>
|
||
<!-- AI Chat อยู่นอก overlay ที่ถูกซ่อน — โค้ดเดิม room-lobby.js ใช้ id เดิม -->
|
||
<div class="room-lobby-chat room-lobby-chat-ai chat-panel chat-panel-collapsed" id="ai-chat-panel" aria-expanded="false">
|
||
<div class="chat-header-bar">
|
||
<span class="chat-header-title chat-header-title-img"><img src="/Game/img/ai-chat-header.png" alt="คุยกับ AI"><img src="/Game/img/ai-chat-title-label.png" alt="เทพความรู้" class="ai-chat-title-label"></span>
|
||
<button type="button" class="chat-close-btn" id="ai-chat-close-btn" title="เปิดแชท AI" aria-label="เปิดแชท AI"><img src="/Game/img/btn-ai-chatbot.png" alt="เทพความรู้" id="ai-chat-toggle-img"></button>
|
||
</div>
|
||
<div id="ai-chat-messages" class="chat-messages-bg"></div>
|
||
<form id="ai-chat-form" class="chat-form-bar">
|
||
<input id="ai-chat-input" placeholder="Type a here..." autocomplete="off">
|
||
<button type="submit" class="chat-send-btn" title="ส่ง"><img src="/Game/img/chat-btn-send.png" alt="ส่ง"></button>
|
||
</form>
|
||
<p class="ai-chat-admin-link"><a href="/Game/ai-admin.html">ตั้งค่า AI (Admin)</a></p>
|
||
</div>
|
||
<!-- READY / ไมค์ อยู่นอก overlay — กดได้ทุกจำนวนคนในห้อง ไม่โดนบังจากแผงรายชื่อยาว -->
|
||
<div class="room-lobby-ready-fixed">
|
||
<label for="ready-check" class="ready-label" id="ready-label">
|
||
<input type="checkbox" id="ready-check" class="ready-check-input" aria-label="สลับสถานะพร้อม">
|
||
<img class="ready-label-img" id="ready-label-img" src="/Game/img/btn-ready-idle.png?v=1" width="200" height="64" alt="ยังไม่พร้อม — กดเพื่อพร้อม" decoding="async">
|
||
</label>
|
||
</div>
|
||
<div class="room-lobby-br-fixed" id="room-lobby-br-fixed">
|
||
<div id="lobby-b-extra-row" class="lobby-b-extra-row is-hidden" aria-hidden="true">
|
||
<button type="button" class="lobby-b-sq-btn" id="lobby-b-btn-evidence" title="สืบสวน / หลักฐาน" aria-label="สืบสวน หลักฐาน">
|
||
<img src="/Game/img/lobby-b/icon-evidence.png?v=1" alt="" width="56" height="56" decoding="async">
|
||
</button>
|
||
<button type="button" class="lobby-b-sq-btn" id="lobby-b-btn-rank" title="อันดับ / รางวัล" aria-label="อันดับ รางวัล">
|
||
<img src="/Game/img/lobby-b/icon-rank.png?v=1" alt="" width="56" height="56" decoding="async">
|
||
</button>
|
||
</div>
|
||
<button type="button" id="btn-voice" class="btn-voice-icon" title="เปิด/ปิดเสียงพูด" aria-label="เปิด/ปิดเสียงพูด">
|
||
<img src="/Game/img/btn-mic-mute.png" alt="เปิดเสียง" id="btn-voice-icon-img">
|
||
</button>
|
||
</div>
|
||
<!-- แฟ้มหลักฐาน LobbyB — รูปกรอบ/แท็บจาก /Main-Lobby/IMAGE/See evidence -->
|
||
<div id="lobby-evidence-overlay" class="lobby-evidence-overlay is-hidden" aria-hidden="true">
|
||
<div class="lobby-evidence-backdrop" id="lobby-evidence-backdrop" aria-hidden="true"></div>
|
||
<div class="lobby-evidence-dialog" role="dialog" aria-modal="true" aria-labelledby="lobby-evidence-sr-title">
|
||
<h2 id="lobby-evidence-sr-title" class="visually-hidden" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);">แฟ้มหลักฐาน</h2>
|
||
<div class="lobby-evidence-frame">
|
||
<img class="lobby-evidence-bg" src="/Main-Lobby/IMAGE/See%20evidence/evidence-bg.png" alt="" width="1684" height="963" decoding="async">
|
||
<button type="button" class="lobby-evidence-close" id="lobby-evidence-close" title="ปิด" aria-label="ปิดแฟ้มหลักฐาน">×</button>
|
||
<div class="lobby-evidence-tabs-layer">
|
||
<img id="lobby-evidence-tabs-img" class="lobby-evidence-tabs-img" src="/Main-Lobby/IMAGE/See%20evidence/evidence-tab-1.png" alt="" width="1481" height="129" decoding="async">
|
||
<div class="lobby-evidence-tab-hits" role="tablist" aria-label="เลือกผู้ต้องสงสัย">
|
||
<button type="button" class="lobby-evidence-tab-hit" role="tab" data-evidence-tab="0" aria-selected="true" aria-label="ผู้ต้องสงสัย 1"></button>
|
||
<button type="button" class="lobby-evidence-tab-hit" role="tab" data-evidence-tab="1" aria-selected="false" aria-label="ผู้ต้องสงสัย 2"></button>
|
||
<button type="button" class="lobby-evidence-tab-hit" role="tab" data-evidence-tab="2" aria-selected="false" aria-label="ผู้ต้องสงสัย 3"></button>
|
||
<span class="lobby-evidence-tab-hit-spacer" aria-hidden="true"></span>
|
||
</div>
|
||
</div>
|
||
<div class="lobby-evidence-cards-root" id="lobby-evidence-cards-root"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- กระดานอันดับ LobbyB — เหรียญจาก /Main-Lobby/IMAGE -->
|
||
<div id="lobby-rank-overlay" class="lobby-rank-overlay is-hidden" aria-hidden="true">
|
||
<div class="lobby-rank-backdrop" id="lobby-rank-backdrop" aria-hidden="true"></div>
|
||
<div class="lobby-rank-dialog" role="dialog" aria-modal="true" aria-labelledby="lobby-rank-case-title">
|
||
<div class="lobby-rank-panel">
|
||
<header class="lobby-rank-head">
|
||
<h2 id="lobby-rank-case-title" class="lobby-rank-case-title"></h2>
|
||
<button type="button" class="lobby-rank-close" id="lobby-rank-close" title="ปิด" aria-label="ปิดกระดานอันดับ">×</button>
|
||
</header>
|
||
<div class="lobby-rank-podium" id="lobby-rank-podium" aria-label="อันดับสามอันดับแรก"></div>
|
||
<div class="lobby-rank-table-wrap">
|
||
<table class="lobby-rank-table">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">RANK</th>
|
||
<th scope="col">PLAYER NAME</th>
|
||
<th scope="col">SCORE</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="lobby-rank-tbody"></tbody>
|
||
</table>
|
||
</div>
|
||
<footer class="lobby-rank-self" id="lobby-rank-self" aria-label="อันดับของคุณ"></footer>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="/Game/socket.io/socket.io.js"></script>
|
||
<script src="js/version.js?v=0.0122"></script>
|
||
<script src="js/room-lobby.js?v=0.0188"></script>
|
||
<div class="version-tag">v —</div>
|
||
</body>
|
||
</html>
|