gauvain/star-wars-wild-space
Private
Public Access
1
0
Fork 0
Code Activity

feat: Adding logging solution + alert for mobile phones

Browse Source
This commit is contained in:
gauvainboiche
2026-03-29 12:23:57 +02:00
parent 4eac0f4415
commit 79cf3ca13e
7 changed files with 383 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
public/index.html
View File

@@ -7,7 +7,20 @@
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<!-- Auth Modal -->
<!-- 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">
@@ -73,10 +86,14 @@
</div>
</div>
<!-- Main app layout: left info column + right galaxy square ─────────────── -->
<div class="app">
<header class="topbar">
<div class="title">
<div class="h1">Star Wars - Wild Space</div>
<!-- ── 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>
@@ -93,55 +110,58 @@
</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>
<!-- 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="controls">
<button id="refreshBtn" type="button">Refresh</button>
<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>
</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="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>
</aside>
</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>