169 lines
7.2 KiB
HTML
169 lines
7.2 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Star Wars - Wild Space</title>
|
||
<link rel="stylesheet" href="./style.css" />
|
||
</head>
|
||
<body>
|
||
<!-- Mobile / small-screen notice ───────────────────────────────────────── -->
|
||
<div class="mobileOverlay" id="mobileOverlay" aria-live="polite" role="alert">
|
||
<div class="mobileOverlayCard">
|
||
<div class="mobileOverlayIcon">🚀</div>
|
||
<h2 class="mobileOverlayTitle">Desktop only</h2>
|
||
<p class="mobileOverlayText">
|
||
<strong>Star Wars – Wild Space</strong> requires a desktop browser.<br />
|
||
The galaxy map is not playable on phones or small screens.<br />
|
||
Please open this page on a computer.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Auth Modal ──────────────────────────────────────────────────────────── -->
|
||
<div class="authOverlay" id="authOverlay">
|
||
<div class="authModal">
|
||
<div class="authTabs">
|
||
<button type="button" class="authTab authTab--active" id="tabLogin">Login</button>
|
||
<button type="button" class="authTab" id="tabRegister">Register</button>
|
||
</div>
|
||
|
||
<!-- Login form -->
|
||
<form class="authForm" id="loginForm">
|
||
<div class="authField">
|
||
<label>Username</label>
|
||
<input type="text" id="loginUsername" autocomplete="username" required />
|
||
</div>
|
||
<div class="authField">
|
||
<label>Password</label>
|
||
<input type="password" id="loginPassword" autocomplete="current-password" required />
|
||
</div>
|
||
<div class="authError hidden" id="loginError"></div>
|
||
<button type="submit" class="authSubmit">Login</button>
|
||
</form>
|
||
|
||
<!-- Register form -->
|
||
<form class="authForm hidden" id="registerForm">
|
||
<div class="authField">
|
||
<label>Username</label>
|
||
<input type="text" id="regUsername" autocomplete="username" required />
|
||
</div>
|
||
<div class="authField">
|
||
<label>Email</label>
|
||
<input type="email" id="regEmail" autocomplete="email" required />
|
||
</div>
|
||
<div class="authField">
|
||
<label>Password <span class="authHint">(min 6 chars)</span></label>
|
||
<input type="password" id="regPassword" autocomplete="new-password" required />
|
||
</div>
|
||
<div class="authField">
|
||
<label>Team</label>
|
||
<div class="authTeamChoice">
|
||
<label class="authTeamOption">
|
||
<input type="radio" name="regTeam" value="blue" required />
|
||
<span class="authTeamBadge authTeamBadge--blue">Blue</span>
|
||
</label>
|
||
<label class="authTeamOption">
|
||
<input type="radio" name="regTeam" value="red" />
|
||
<span class="authTeamBadge authTeamBadge--red">Red</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="authError hidden" id="registerError"></div>
|
||
<button type="submit" class="authSubmit">Create Account</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Debug team switcher (only visible when debugModeForTeams is enabled) -->
|
||
<div class="teamCorner teamCorner--hidden" id="teamCorner">
|
||
<span class="teamCornerLabel">Team</span>
|
||
<div class="teamSegmented" role="group" aria-label="Active team">
|
||
<div class="teamSegmentedTrack" id="teamSegmentedTrack" data-active="blue">
|
||
<button type="button" class="teamSegmentedBtn" id="teamBlue" data-team="blue">Blue</button>
|
||
<button type="button" class="teamSegmentedBtn" id="teamRed" data-team="red">Red</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main app layout: left info column + right galaxy square ─────────────── -->
|
||
<div class="app">
|
||
|
||
<!-- ── Left information column ────────────────────────────────────────── -->
|
||
<aside class="infoColumn">
|
||
|
||
<div class="infoSection infoSection--title">
|
||
<div class="h1">Star Wars – Wild Space</div>
|
||
<div class="sub">100×100 — exploitable ring only (inner Ø60, outer Ø100)</div>
|
||
</div>
|
||
|
||
<!-- Team score display -->
|
||
<div class="scoreBoard" id="scoreBoard">
|
||
<span class="scoreTeam scoreTeam--blue">
|
||
<span class="scoreTeamName">Blue</span>
|
||
<span class="scoreValue" id="scoreBlue">0</span>
|
||
</span>
|
||
<span class="scoreSep">—</span>
|
||
<span class="scoreTeam scoreTeam--red">
|
||
<span class="scoreValue" id="scoreRed">0</span>
|
||
<span class="scoreTeamName">Red</span>
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Info rows -->
|
||
<div class="infoTable">
|
||
<div class="infoRow" id="userInfoRow">
|
||
<span class="infoKey">Player</span>
|
||
<span class="infoVal">
|
||
<span id="userDisplay">—</span>
|
||
<button type="button" id="logoutBtn" class="logoutBtn hidden">Logout</button>
|
||
</span>
|
||
</div>
|
||
<div class="infoRow" id="countdownWrap" aria-live="polite">
|
||
<span class="infoKey countdownLabel">Cooldown</span>
|
||
<span class="infoVal countdownVal">
|
||
<span id="countdown" class="countdown">0</span>
|
||
<span class="countdownUnit">s</span>
|
||
</span>
|
||
</div>
|
||
<div class="infoRow">
|
||
<span class="infoKey muted">clickCooldownSeconds</span>
|
||
<code class="infoVal" id="cooldownConfig">—</code>
|
||
</div>
|
||
<div class="infoRow">
|
||
<span class="infoKey muted">worldSeed</span>
|
||
<code class="infoVal" id="worldSeedDisplay">—</code>
|
||
</div>
|
||
<div class="infoRow">
|
||
<span class="infoKey muted">next period (UTC)</span>
|
||
<code class="infoVal" id="nextPeriodUtc">—</code>
|
||
</div>
|
||
<div class="infoRow">
|
||
<span class="infoKey muted">resets in</span>
|
||
<code class="infoVal" id="refreshCountdown">--:--:--</code>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="controls">
|
||
<button id="refreshBtn" type="button">Refresh</button>
|
||
</div>
|
||
|
||
<!-- Selection details panel -->
|
||
<div class="panel">
|
||
<div class="panelTitle">Selection</div>
|
||
<pre id="details" class="details details--hidden">Stats are hidden until you click a tile.</pre>
|
||
</div>
|
||
|
||
</aside>
|
||
|
||
<!-- ── Galaxy (square, anchored to the right edge) ────────────────────── -->
|
||
<main class="galaxyMain">
|
||
<canvas id="canvas" width="800" height="800"></canvas>
|
||
<div id="hint" class="hint">Click a cell in the ring. Planet stats stay hidden until you reveal a tile.</div>
|
||
</main>
|
||
|
||
</div>
|
||
|
||
<script type="module" src="./src/main.js"></script>
|
||
</body>
|
||
</html> |