274 lines
8.5 KiB
HTML
274 lines
8.5 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">
|
|
<style>
|
|
html, body { height: 100%; margin: 0; }
|
|
body { min-height: 100dvh; }
|
|
.play-canvas-stack {
|
|
position: relative;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.play-canvas-stack #game-canvas {
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
width: 100%;
|
|
display: block;
|
|
touch-action: none;
|
|
}
|
|
#quiz-game-overlay {
|
|
position: fixed;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: max(12px, env(safe-area-inset-bottom));
|
|
z-index: 650;
|
|
max-width: min(96vw, 520px);
|
|
width: 100%;
|
|
pointer-events: none;
|
|
}
|
|
#quiz-game-overlay.is-hidden { display: none !important; }
|
|
.quiz-game-inner {
|
|
background: rgba(12, 14, 28, 0.92);
|
|
border: 1px solid rgba(122, 162, 247, 0.45);
|
|
border-radius: 14px;
|
|
padding: 0.65rem 1rem 0.75rem;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
.quiz-game-phase {
|
|
font-size: 0.72rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: #7aa2f7;
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
.quiz-game-q {
|
|
margin: 0 0 0.45rem;
|
|
font-size: clamp(0.95rem, 3vw, 1.1rem);
|
|
line-height: 1.45;
|
|
color: #e2e8f0;
|
|
font-weight: 600;
|
|
}
|
|
.quiz-game-timer {
|
|
font-variant-numeric: tabular-nums;
|
|
font-size: 1.35rem;
|
|
font-weight: 800;
|
|
color: #9ece6a;
|
|
text-shadow: 0 0 12px rgba(158, 206, 106, 0.35);
|
|
}
|
|
.quiz-play-legend {
|
|
margin: 0;
|
|
font-size: 0.72rem;
|
|
line-height: 1.4;
|
|
color: #a9b1d6;
|
|
}
|
|
#quiz-map-question-panel {
|
|
position: absolute;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
box-sizing: border-box;
|
|
padding: clamp(6px, 1.5vw, 14px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
overflow: auto;
|
|
background: rgba(12, 14, 28, 0.88);
|
|
border: 2px solid rgba(255, 214, 102, 0.7);
|
|
border-radius: 12px;
|
|
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
|
|
}
|
|
#quiz-map-question-panel.is-hidden { display: none !important; }
|
|
#quiz-map-question-text {
|
|
margin: 0;
|
|
font-size: clamp(0.78rem, 2.4vmin, 1.12rem);
|
|
font-weight: 600;
|
|
line-height: 1.45;
|
|
color: #f1f5f9;
|
|
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
|
|
max-height: 100%;
|
|
overflow: auto;
|
|
}
|
|
#play-quiz-scoreboard {
|
|
position: fixed;
|
|
top: max(56px, env(safe-area-inset-top));
|
|
right: max(10px, env(safe-area-inset-right));
|
|
z-index: 10070;
|
|
min-width: 150px;
|
|
max-width: min(42vw, 220px);
|
|
background: rgba(12, 14, 28, 0.92);
|
|
border: 1px solid rgba(122, 162, 247, 0.4);
|
|
border-radius: 12px;
|
|
padding: 0.45rem 0.55rem 0.55rem;
|
|
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
|
|
pointer-events: none;
|
|
}
|
|
#play-quiz-scoreboard.is-hidden { display: none !important; }
|
|
.play-quiz-scoreboard-title {
|
|
font-size: 0.65rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: #7aa2f7;
|
|
margin-bottom: 0.3rem;
|
|
border-bottom: 1px solid rgba(122, 162, 247, 0.25);
|
|
padding-bottom: 0.2rem;
|
|
}
|
|
.play-quiz-scoreboard-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
max-height: 38vh;
|
|
overflow: auto;
|
|
}
|
|
.play-quiz-scoreboard-list li {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 0.4rem;
|
|
font-size: 0.74rem;
|
|
color: #c0caf5;
|
|
padding: 0.15rem 0;
|
|
}
|
|
.play-quiz-scoreboard-me { color: #9ece6a !important; font-weight: 700; }
|
|
.play-quiz-scoreboard-val { font-variant-numeric: tabular-nums; font-weight: 800; }
|
|
.play-quiz-scoreboard-me .play-quiz-scoreboard-val { color: #9ece6a; }
|
|
#play-quiz-feedback {
|
|
position: fixed;
|
|
top: max(10px, env(safe-area-inset-top));
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 10072;
|
|
max-width: min(92vw, 440px);
|
|
padding: 0.55rem 1rem;
|
|
border-radius: 12px;
|
|
font-size: clamp(0.88rem, 3vw, 1.05rem);
|
|
font-weight: 800;
|
|
text-align: center;
|
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
|
|
pointer-events: none;
|
|
line-height: 1.35;
|
|
}
|
|
#play-quiz-feedback.is-hidden { display: none !important; }
|
|
.play-quiz-feedback-ok {
|
|
background: rgba(22, 40, 28, 0.95);
|
|
border: 2px solid rgba(158, 206, 106, 0.85);
|
|
color: #c3e6a8;
|
|
}
|
|
.play-quiz-feedback-bad {
|
|
background: rgba(40, 22, 30, 0.95);
|
|
border: 2px solid rgba(247, 118, 140, 0.85);
|
|
color: #fecdd3;
|
|
}
|
|
#gauntlet-ended-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 10080;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
|
|
box-sizing: border-box;
|
|
}
|
|
#gauntlet-ended-overlay.is-hidden { display: none !important; }
|
|
.gauntlet-ended-backdrop {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(8, 10, 18, 0.82);
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
.gauntlet-ended-card {
|
|
position: relative;
|
|
max-width: min(92vw, 400px);
|
|
width: 100%;
|
|
background: rgba(18, 20, 32, 0.96);
|
|
border: 1px solid rgba(247, 118, 140, 0.45);
|
|
border-radius: 16px;
|
|
padding: 1.25rem 1.35rem 1.1rem;
|
|
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
|
|
}
|
|
.gauntlet-ended-card h2 {
|
|
margin: 0 0 0.5rem;
|
|
font-size: 1.15rem;
|
|
color: #f7768e;
|
|
font-weight: 800;
|
|
}
|
|
#gauntlet-ended-message {
|
|
margin: 0 0 0.75rem;
|
|
font-size: 0.95rem;
|
|
color: #c0caf5;
|
|
line-height: 1.45;
|
|
}
|
|
#gauntlet-ended-rankings {
|
|
margin: 0 0 1rem;
|
|
padding-left: 1.2rem;
|
|
color: #a9b1d6;
|
|
font-size: 0.88rem;
|
|
line-height: 1.5;
|
|
}
|
|
#gauntlet-ended-rankings .gauntlet-ended-me {
|
|
color: #9ece6a;
|
|
font-weight: 700;
|
|
}
|
|
#btn-gauntlet-ended-lobby {
|
|
width: 100%;
|
|
padding: 0.55rem 1rem;
|
|
border-radius: 10px;
|
|
border: none;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
background: linear-gradient(180deg, #7aa2f7, #5a7fd4);
|
|
color: #1a1b26;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="game-wrap">
|
|
<div class="game-header">
|
|
<span id="room-id"></span>
|
|
<button id="btn-leave">ออกจากห้อง</button>
|
|
</div>
|
|
<div class="play-canvas-stack">
|
|
<canvas id="game-canvas"></canvas>
|
|
<div id="quiz-map-question-panel" class="is-hidden" aria-hidden="true">
|
|
<p id="quiz-map-question-text"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="play-quiz-scoreboard" class="is-hidden" aria-live="polite">
|
|
<div class="play-quiz-scoreboard-title">คะแนน</div>
|
|
<ul id="play-quiz-scoreboard-list" class="play-quiz-scoreboard-list"></ul>
|
|
</div>
|
|
<div id="play-quiz-feedback" class="is-hidden play-quiz-feedback" role="status" aria-atomic="true"></div>
|
|
<div id="quiz-game-overlay" class="is-hidden" role="status" aria-live="polite" aria-atomic="true">
|
|
<div class="quiz-game-inner">
|
|
<div class="quiz-game-phase" id="quiz-game-phase-label"></div>
|
|
<p class="quiz-game-q" id="quiz-game-question"></p>
|
|
<div class="quiz-game-timer" id="quiz-game-timer" aria-hidden="true"></div>
|
|
<p class="quiz-play-legend" id="quiz-play-legend"></p>
|
|
</div>
|
|
</div>
|
|
<div id="gauntlet-ended-overlay" class="is-hidden" role="dialog" aria-modal="true" aria-labelledby="gauntlet-ended-title">
|
|
<div class="gauntlet-ended-backdrop" aria-hidden="true"></div>
|
|
<div class="gauntlet-ended-card">
|
|
<h2 id="gauntlet-ended-title">เกมจบ</h2>
|
|
<p id="gauntlet-ended-message"></p>
|
|
<ol id="gauntlet-ended-rankings"></ol>
|
|
<button type="button" id="btn-gauntlet-ended-lobby">กลับห้อง (ล็อบบี้) · Back to room lobby</button>
|
|
</div>
|
|
</div>
|
|
<script src="../app-base.js"></script>
|
|
<script>document.write('<script src="' + (typeof GAME_SERVER !== 'undefined' ? GAME_SERVER : '') + '/Game/socket.io/socket.io.js"><\/script>');</script>
|
|
<script src="js/version.js?v=0.0164"></script>
|
|
<script src="js/play.js?v=0.0165"></script>
|
|
<div class="version-tag">v —</div>
|
|
</body>
|
|
</html>
|