149 lines
6.0 KiB
HTML
149 lines
6.0 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>
|
||
<!-- 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>
|
||
|
||
<div class="app">
|
||
<header class="topbar">
|
||
<div class="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>
|
||
|
||
<div class="topRight">
|
||
<div class="topRightTable">
|
||
<div class="topRightRow" id="userInfoRow">
|
||
<span class="trKey">player</span>
|
||
<span class="trVal">
|
||
<span id="userDisplay">—</span>
|
||
<button type="button" id="logoutBtn" class="logoutBtn hidden">Logout</button>
|
||
</span>
|
||
</div>
|
||
<div class="topRightRow" id="countdownWrap" aria-live="polite">
|
||
<span class="trKey countdownLabel">Cooldown</span>
|
||
<span class="trVal countdownVal">
|
||
<span id="countdown" class="countdown">0</span>
|
||
<span class="countdownUnit">s</span>
|
||
</span>
|
||
</div>
|
||
<div class="topRightRow">
|
||
<span class="trKey muted">clickCooldownSeconds</span>
|
||
<code class="trVal" id="cooldownConfig">—</code>
|
||
</div>
|
||
<div class="topRightRow">
|
||
<span class="trKey muted">worldSeed</span>
|
||
<code class="trVal" id="worldSeedDisplay">—</code>
|
||
</div>
|
||
<div class="topRightRow">
|
||
<span class="trKey muted">next period (UTC)</span>
|
||
<code class="trVal" id="nextPeriodUtc">—</code>
|
||
</div>
|
||
<div class="topRightRow">
|
||
<span class="trKey muted">resets in</span>
|
||
<code class="trVal" id="refreshCountdown">--:--:--</code>
|
||
</div>
|
||
</div>
|
||
<div class="controls">
|
||
<button id="refreshBtn" type="button">Refresh</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="main">
|
||
<section class="board">
|
||
<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>
|
||
</section>
|
||
<aside class="panel">
|
||
<div class="panelTitle">Selection</div>
|
||
<pre id="details" class="details details--hidden">Stats are hidden until you click a tile.</pre>
|
||
</aside>
|
||
</main>
|
||
</div>
|
||
|
||
<script type="module" src="./src/main.js"></script>
|
||
</body>
|
||
</html> |