210 lines
9.3 KiB
HTML
210 lines
9.3 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">Resistance</span>
|
||
</label>
|
||
<label class="authTeamOption">
|
||
<input type="radio" name="regTeam" value="red" />
|
||
<span class="authTeamBadge authTeamBadge--red">First Order</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 admin unlocked) -->
|
||
<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">Resistance</button>
|
||
<button type="button" class="teamSegmentedBtn" id="teamRed" data-team="red">First Order</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main app layout: left info column + right galaxy square ─────────────── -->
|
||
<div class="app">
|
||
|
||
<!-- ── Left information column ────────────────────────────────────────── -->
|
||
<aside class="infoColumn" id="infoColumn">
|
||
|
||
<!-- Mobile close button -->
|
||
<button type="button" id="closeMenuBtn" class="closeMenuBtn" aria-label="Close menu">✕</button>
|
||
|
||
<div class="infoSection infoSection--title">
|
||
<div class="h1">Star Wars – Wild Space</div>
|
||
<div class="sub">100×100 — exploitable zone from playground SVG map</div>
|
||
</div>
|
||
|
||
<!-- Team score display -->
|
||
<div class="scoreBoard" id="scoreBoard">
|
||
<span class="scoreTeam scoreTeam--blue">
|
||
<img src="./graphism/logo_resistance.svg" alt="Resistance" class="team-logo" />
|
||
<span class="scoreTeamName">Resistance</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">First Order</span>
|
||
<img src="./graphism/logo_first_order.svg" alt="First Order" class="team-logo" />
|
||
</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">Temps avant prochain clic</span>
|
||
<code class="infoVal" id="cooldownConfig">—</code>
|
||
</div>
|
||
<div class="infoRow">
|
||
<span class="infoKey muted">Graine de la carte</span>
|
||
<code class="infoVal" id="worldSeedDisplay">—</code>
|
||
</div>
|
||
<div class="infoRow">
|
||
<span class="infoKey muted">Prochaine graine (UTC)</span>
|
||
<code class="infoVal" id="nextPeriodUtc">—</code>
|
||
</div>
|
||
<div class="infoRow">
|
||
<span class="infoKey muted">Prochaine graine dans</span>
|
||
<code class="infoVal" id="refreshCountdown">--:--:--</code>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Planet stats (collapsible) -->
|
||
<details class="panel panelCollapsible" id="planetStatsDetails" open>
|
||
<summary class="panelTitle panelTitleSummary">🪐 Planet stats</summary>
|
||
<pre id="details" class="details details--hidden">Stats are hidden until you click a tile.</pre>
|
||
</details>
|
||
|
||
<!-- Team income summary + cumulative economic score -->
|
||
<div class="econSummary">
|
||
<!-- Row 1: income per second -->
|
||
<div class="econSummaryRow">
|
||
<span class="econSummaryTeam econSummaryTeam--blue">
|
||
<span class="econSummaryLabel">Résistance</span>
|
||
<span class="econSummaryVal" id="incomeBlue">+0.000/s</span>
|
||
</span>
|
||
<span class="econSummarySep">—</span>
|
||
<span class="econSummaryTeam econSummaryTeam--red">
|
||
<span class="econSummaryVal" id="incomeRed">+0.000/s</span>
|
||
<span class="econSummaryLabel">Premier Ordre</span>
|
||
</span>
|
||
</div>
|
||
<!-- Row 2: cumulative economic score -->
|
||
<div class="econSummaryRow econSummaryRow--score">
|
||
<span class="econSummaryTeam econSummaryTeam--blue">
|
||
<span class="econScoreVal" id="econScoreBlue">0.000</span>
|
||
<span class="econDelta" id="econDeltaBlue"></span>
|
||
</span>
|
||
<span class="econSummarySep">—</span>
|
||
<span class="econSummaryTeam econSummaryTeam--red">
|
||
<span class="econDelta" id="econDeltaRed"></span>
|
||
<span class="econScoreVal" id="econScoreRed">0.000</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Resources overview (collapsible) -->
|
||
<details class="panel panelCollapsible">
|
||
<summary class="panelTitle panelTitleSummary">💰 Ressources économiques</summary>
|
||
<div id="resourceTableBody" class="econTableWrap">
|
||
<p class="econEmpty">Chargement…</p>
|
||
</div>
|
||
</details>
|
||
|
||
<!-- Admin / options section -->
|
||
<div class="infoSection infoSection--options">
|
||
<details class="optionsDetails">
|
||
<summary class="optionsSummary">⚙ Options</summary>
|
||
<div class="optionsPanel">
|
||
<div class="authField">
|
||
<label>Admin password</label>
|
||
<input type="password" id="adminPasswordInput" placeholder="Enter admin password" autocomplete="off" />
|
||
</div>
|
||
<button type="button" id="adminUnlockBtn" class="adminUnlockBtn">Unlock</button>
|
||
<div id="adminStatus" class="adminStatus hidden"></div>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
|
||
</aside>
|
||
|
||
<!-- ── Galaxy (square, 1000×1000, fixed ratio) ────────────────────────── -->
|
||
<main class="galaxyMain">
|
||
<!-- Mobile burger button -->
|
||
<button type="button" id="burgerBtn" class="burgerBtn" aria-label="Open menu">☰</button>
|
||
<canvas id="canvas" width="1000" height="1000"></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> |