Add main game page (title, scan, AR hunt, roster)
This commit is contained in:
@@ -0,0 +1,142 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1" />
|
||||
<title>Newbury Nights — AR Ghost Hunt</title>
|
||||
<link rel="stylesheet" href="/css/app.css" />
|
||||
<link rel="stylesheet" href="/css/game.css" />
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- ============ TITLE SCREEN ============ -->
|
||||
<section id="screen-title" class="screen">
|
||||
<div class="title-wrap">
|
||||
<div class="eyebrow">Newbury · After Dark</div>
|
||||
<h1 class="game-title">Newbury<span>Nights</span></h1>
|
||||
<p class="tagline">The town is glooming over. Raise your detector, find the cold spots, and clear them before your battery dies.</p>
|
||||
|
||||
<div class="title-actions">
|
||||
<button class="primary" id="btn-scan-set">Scan a Set</button>
|
||||
<button id="btn-freehunt">Free Hunt</button>
|
||||
<button id="btn-roster">Ghost Index</button>
|
||||
</div>
|
||||
|
||||
<div class="battery-hint mono">DETECTOR ONLINE · v0.1</div>
|
||||
</div>
|
||||
<div class="disclaimer">
|
||||
Fan-made tribute. Not affiliated with, sponsored by, or endorsed by the LEGO Group.
|
||||
LEGO® and Hidden Side™ are trademarks of the LEGO Group.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ SCAN SCREEN ============ -->
|
||||
<section id="screen-scan" class="screen hidden">
|
||||
<button class="back" data-back>← Back</button>
|
||||
<div class="scan-wrap">
|
||||
<h2>Scan a Set</h2>
|
||||
<p class="muted">Point your camera at the set's code, or type it in.</p>
|
||||
<div id="scan-video-wrap" class="scan-video">
|
||||
<video id="scan-video" playsinline muted></video>
|
||||
<div class="scan-reticle"></div>
|
||||
<div id="scan-status" class="scan-status mono">Starting camera…</div>
|
||||
</div>
|
||||
<div class="manual-entry">
|
||||
<label for="manual-code">Set code</label>
|
||||
<div class="row">
|
||||
<input id="manual-code" placeholder="e.g. NN-70419" autocomplete="off" />
|
||||
<button class="primary" id="btn-manual-go">Go</button>
|
||||
</div>
|
||||
<div id="scan-error" class="scan-error hidden"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ HUNT (AR) SCREEN ============ -->
|
||||
<section id="screen-hunt" class="screen hidden">
|
||||
<video id="ar-video" playsinline muted></video>
|
||||
<canvas id="ar-canvas"></canvas>
|
||||
|
||||
<!-- HUD overlay -->
|
||||
<div class="hud">
|
||||
<div class="hud-top">
|
||||
<button class="back small" data-back>✕</button>
|
||||
<div class="battery">
|
||||
<div class="battery-label mono">BATTERY</div>
|
||||
<div class="battery-bar"><div id="battery-fill" class="battery-fill"></div></div>
|
||||
<div id="battery-pct" class="mono">100%</div>
|
||||
</div>
|
||||
<div class="gloom-count mono"><span class="dot" style="background:var(--gloom);box-shadow:0 0 8px var(--gloom)"></span> <span id="gloom-count">0</span></div>
|
||||
</div>
|
||||
|
||||
<!-- color wheel scanner -->
|
||||
<div class="wheel" id="color-wheel" aria-label="Gloom detector color wheel">
|
||||
<button class="wheel-seg seg-red" data-type="red" aria-label="Scan red gloom"></button>
|
||||
<button class="wheel-seg seg-yellow" data-type="yellow" aria-label="Scan yellow gloom"></button>
|
||||
<button class="wheel-seg seg-blue" data-type="blue" aria-label="Scan blue gloom"></button>
|
||||
<div class="wheel-core mono" id="wheel-core">SCAN</div>
|
||||
</div>
|
||||
|
||||
<!-- lock-on label -->
|
||||
<div id="lockon" class="lockon hidden">
|
||||
<div class="lockon-name display" id="lockon-name">—</div>
|
||||
<div class="lockon-sub mono"><span id="lockon-type">—</span> · <span id="lockon-rarity">—</span> · <span id="lockon-ability">—</span></div>
|
||||
<div class="ghost-hp"><div id="ghost-hp-fill" class="ghost-hp-fill"></div></div>
|
||||
</div>
|
||||
|
||||
<!-- blaster -->
|
||||
<div class="hud-bottom">
|
||||
<div class="overheat" id="overheat-wrap"><div id="overheat-fill" class="overheat-fill"></div></div>
|
||||
<button id="btn-blast" class="blaster">HOLD TO BLAST</button>
|
||||
</div>
|
||||
|
||||
<!-- jumpscare / toast -->
|
||||
<div id="toast" class="toast hidden"></div>
|
||||
<div id="result" class="result hidden">
|
||||
<div class="result-card">
|
||||
<div id="result-title" class="display">Set Cleared</div>
|
||||
<div id="result-body" class="muted"></div>
|
||||
<button class="primary" data-back>Return to Newbury</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ ROSTER / INDEX ============ -->
|
||||
<section id="screen-roster" class="screen hidden">
|
||||
<button class="back" data-back>← Back</button>
|
||||
<div class="roster-wrap">
|
||||
<h2>Ghost Index</h2>
|
||||
<div class="roster-filters">
|
||||
<select id="filter-type">
|
||||
<option value="">All types</option>
|
||||
<option value="red">Red</option>
|
||||
<option value="yellow">Yellow</option>
|
||||
<option value="blue">Blue</option>
|
||||
</select>
|
||||
<select id="filter-rarity">
|
||||
<option value="">All rarities</option>
|
||||
<option value="1">★</option>
|
||||
<option value="2">★★</option>
|
||||
<option value="3">★★★</option>
|
||||
<option value="4">★★★★</option>
|
||||
</select>
|
||||
<label class="boss-toggle"><input type="checkbox" id="filter-boss" /> Bosses only</label>
|
||||
</div>
|
||||
<div id="roster-grid" class="roster-grid"></div>
|
||||
</div>
|
||||
<div class="disclaimer">
|
||||
Fan-made tribute. Not affiliated with, sponsored by, or endorsed by the LEGO Group.
|
||||
LEGO® and Hidden Side™ are trademarks of the LEGO Group.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="module" src="/js/game.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user