230 lines
10 KiB
HTML
230 lines
10 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">Se connecter</button>
|
||
<button type="button" class="authTab" id="tabRegister">S'enregistrer</button>
|
||
</div>
|
||
|
||
<!-- Login form -->
|
||
<form class="authForm" id="loginForm">
|
||
<div class="authField">
|
||
<label>Nom d'utilisateur</label>
|
||
<input type="text" id="loginUsername" autocomplete="username" required />
|
||
</div>
|
||
<div class="authField">
|
||
<label>Mot de passe</label>
|
||
<input type="password" id="loginPassword" autocomplete="current-password" required />
|
||
</div>
|
||
<div class="authError hidden" id="loginError"></div>
|
||
<button type="submit" class="authSubmit">Se connecter</button>
|
||
</form>
|
||
|
||
<!-- Register form -->
|
||
<form class="authForm hidden" id="registerForm">
|
||
<div class="authField">
|
||
<label>Nom d'utilisateur</label>
|
||
<input type="text" id="regUsername" autocomplete="username" required />
|
||
</div>
|
||
<div class="authField">
|
||
<label>Adresse courriel</label>
|
||
<input type="email" id="regEmail" autocomplete="email" required />
|
||
</div>
|
||
<div class="authField">
|
||
<label>Mot de passe <span class="authHint">(6 caractères min.)</span></label>
|
||
<input type="password" id="regPassword" autocomplete="new-password" required />
|
||
</div>
|
||
<div class="authField">
|
||
<label>Équipe</label>
|
||
<div class="authTeamChoice">
|
||
<label class="authTeamOption">
|
||
<input type="radio" name="regTeam" value="blue" required />
|
||
<span class="authTeamBadge authTeamBadge--blue">Résistance</span>
|
||
</label>
|
||
<label class="authTeamOption">
|
||
<input type="radio" name="regTeam" value="red" />
|
||
<span class="authTeamBadge authTeamBadge--red">Premier ordre</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="authError hidden" id="registerError"></div>
|
||
<button type="submit" class="authSubmit">Créer le compte</button>
|
||
</form>
|
||
</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">Explorez les Régions Inconnues pour faire triompher votre camp !</div>
|
||
</div>
|
||
|
||
<!-- Team score display -->
|
||
<div class="scoreBoard" id="scoreBoard">
|
||
<img src="./graphism/logo_resistance.svg" alt="Resistance" class="team-logo" />
|
||
<div class="scoreBoardContent">
|
||
<div class="scoreBoardRow">
|
||
<div class="scoreTeam scoreTeam--blue">
|
||
<span class="scoreTeamName">Résistance</span>
|
||
<div class="scoreStats">
|
||
<div class="scoreStat">
|
||
<span class="scoreStatVal scoreValue" id="scoreBlue">0</span>
|
||
<span class="scoreStatLabel">Tuiles</span>
|
||
</div>
|
||
<div class="scoreStat">
|
||
<span class="scoreStatVal scoreVP" id="vpBlue">0</span>
|
||
<span class="scoreStatLabel">Points</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<span class="scoreSep">—</span>
|
||
<div class="scoreTeam scoreTeam--red">
|
||
<span class="scoreTeamName">Premier Ordre</span>
|
||
<div class="scoreStats">
|
||
<div class="scoreStat">
|
||
<span class="scoreStatVal scoreVP" id="vpRed">0</span>
|
||
<span class="scoreStatLabel">Points</span>
|
||
</div>
|
||
<div class="scoreStat">
|
||
<span class="scoreStatVal scoreValue" id="scoreRed">0</span>
|
||
<span class="scoreStatLabel">Tuiles</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Income summary + cumulative economic score (inside scoreBoard) -->
|
||
<div class="scoreBoardEcon">
|
||
<div class="econSummaryRow">
|
||
<span class="econSummaryTeam econSummaryTeam--blue econSummaryTeam--center">
|
||
<span class="econSummaryVal" id="incomeBlue">+0.000/s</span>
|
||
</span>
|
||
<span class="econSummarySep">—</span>
|
||
<span class="econSummaryTeam econSummaryTeam--red econSummaryTeam--center">
|
||
<span class="econSummaryVal" id="incomeRed">+0.000/s</span>
|
||
</span>
|
||
</div>
|
||
<div class="econSummaryRow econSummaryRow--score">
|
||
<span class="econSummaryTeam econSummaryTeam--blue econSummaryTeam--center">
|
||
<span class="econScoreVal" id="econScoreBlue">0.000</span>
|
||
<span class="econDelta" id="econDeltaBlue"></span>
|
||
</span>
|
||
<span class="econSummarySep">—</span>
|
||
<span class="econSummaryTeam econSummaryTeam--red econSummaryTeam--center">
|
||
<span class="econDelta" id="econDeltaRed"></span>
|
||
<span class="econScoreVal" id="econScoreRed">0.000</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<img src="./graphism/logo_first_order.svg" alt="First Order" class="team-logo" />
|
||
</div>
|
||
|
||
<!-- Info rows -->
|
||
<div class="infoTable">
|
||
<div class="infoRow" id="userInfoRow">
|
||
<span class="infoKey">Joueur</span>
|
||
<span class="infoVal">
|
||
<span id="userDisplay">—</span>
|
||
<button type="button" id="logoutBtn" class="logoutBtn hidden">Déconnexion</button>
|
||
</span>
|
||
</div>
|
||
<div class="infoRow" id="countdownWrap" aria-live="polite">
|
||
<span class="infoKey countdownLabel">Prochain clic</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">Délai entre deux clics</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 class="infoRow">
|
||
<span class="infoKey muted">Graine actuelle depuis</span>
|
||
<code class="infoVal" id="dbCreatedAt">—</code>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Planet stats (collapsible) -->
|
||
<details class="panel panelCollapsible" id="planetStatsDetails" open>
|
||
<summary class="panelTitle panelTitleSummary">🪐 Statistiques Planétaires</summary>
|
||
<pre id="details" class="details details--hidden">Les stats sont vides sauf à cliquer sur une tuile exploitable.</pre>
|
||
</details>
|
||
|
||
<!-- Resources overview (collapsible) -->
|
||
<details class="panel panelCollapsible">
|
||
<summary class="panelTitle panelTitleSummary">💰 Ressources</summary>
|
||
<div id="resourceTableBody" class="econTableWrap">
|
||
<p class="econEmpty">Chargement…</p>
|
||
</div>
|
||
</details>
|
||
|
||
<!-- Element bonus (collapsible) -->
|
||
<details class="panel panelCollapsible">
|
||
<summary class="panelTitle panelTitleSummary">⚡ Bonus d'exploration</summary>
|
||
<div class="elemBonusTotals">
|
||
<span class="elemBonusTeam elemBonusTeam--blue">
|
||
<span class="elemBonusLabel">Résistance</span>
|
||
<span class="elemBonusVal" id="elemBonusBlue">0.00</span>
|
||
<span class="elemBonusUnit">%</span>
|
||
</span>
|
||
<span class="elemBonusSep">—</span>
|
||
<span class="elemBonusTeam elemBonusTeam--red">
|
||
<span class="elemBonusVal" id="elemBonusRed">0.00</span>
|
||
<span class="elemBonusUnit">%</span>
|
||
<span class="elemBonusLabel">Premier Ordre</span>
|
||
</span>
|
||
<span class="elemBonusEffective">
|
||
<span class="elemBonusDetailLabel">Recharge :</span>
|
||
<span class="elemBonusDetailVal" id="effectiveCooldown">—</span>
|
||
</span>
|
||
</div>
|
||
<div id="elementBonusTableBody" class="econTableWrap">
|
||
<p class="econEmpty">Chargement…</p>
|
||
</div>
|
||
</details>
|
||
|
||
</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">Cliquez sur une tuile. Les stats seront vides à moins de cliquer.</div>
|
||
</main>
|
||
|
||
</div>
|
||
|
||
<script type="module" src="./src/main.js"></script>
|
||
</body>
|
||
</html> |