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>

306
public/style.css
View File

@@ -1,4 +1,13 @@
.app {
/* ── Reset & base ─────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial,
"Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
color: #e9eef6;
@@ -6,8 +15,55 @@
min-height: 100vh;
}
body {
/* ── Mobile / small-screen overlay ───────────────────────────────────────── */
.mobileOverlay {
display: none; /* hidden on desktop — shown via media query below */
position: fixed;
inset: 0;
z-index: 200;
background: rgba(5, 8, 18, 0.97);
backdrop-filter: blur(16px);
align-items: center;
justify-content: center;
padding: 24px;
text-align: center;
}
.mobileOverlayCard {
max-width: 360px;
padding: 40px 28px;
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(15, 22, 42, 0.9);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
}
.mobileOverlayIcon {
font-size: 52px;
margin-bottom: 16px;
}
.mobileOverlayTitle {
margin: 0 0 12px;
font-size: 22px;
font-weight: 800;
letter-spacing: 0.2px;
color: rgba(113, 199, 255, 0.95);
}
.mobileOverlayText {
margin: 0;
font-size: 14px;
line-height: 1.7;
color: rgba(233, 238, 246, 0.75);
}
/* Show overlay on small / narrow screens */
@media (max-width: 768px), (max-height: 500px) {
.mobileOverlay {
display: flex;
}
}
/* ── Auth overlay ─────────────────────────────────────────────────────────── */
@@ -272,8 +328,8 @@ body {
display: flex;
align-items: center;
gap: 16px;
padding: 10px 20px;
border-radius: 16px;
padding: 10px 16px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
font-size: 22px;
@@ -319,79 +375,96 @@ body {
font-size: 18px;
}
/* ── Top bar ──────────────────────────────────────────────────────────────── */
/* ── Main app layout ──────────────────────────────────────────────────────── */
.topbar {
.app {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 18px 18px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(7, 10, 20, 0.65);
backdrop-filter: blur(8px);
position: sticky;
top: 0;
z-index: 2;
flex-direction: row;
align-items: stretch;
height: 100vh;
overflow: hidden;
}
.h1 {
font-size: 18px;
/* ── Left information column ──────────────────────────────────────────────── */
.infoColumn {
flex: 1 1 0;
min-width: 260px;
max-width: 420px;
display: flex;
flex-direction: column;
gap: 16px;
padding: 22px 18px 18px;
overflow-y: auto;
overflow-x: hidden;
background: rgba(7, 10, 20, 0.55);
border-right: 1px solid rgba(255, 255, 255, 0.07);
}
/* Scrollbar styling for the info column */
.infoColumn::-webkit-scrollbar {
width: 5px;
}
.infoColumn::-webkit-scrollbar-track {
background: transparent;
}
.infoColumn::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.12);
border-radius: 4px;
}
.infoSection--title .h1 {
font-size: 17px;
font-weight: 700;
letter-spacing: 0.2px;
}
.sub {
font-size: 12px;
opacity: 0.75;
margin-top: 3px;
.infoSection--title .sub {
font-size: 11px;
opacity: 0.65;
margin-top: 4px;
}
/* ── Top-right table ──────────────────────────────────────────────────────── */
/* ── Info table (rows of key/value pairs) ─────────────────────────────────── */
.topRight {
.infoTable {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
gap: 6px;
}
.infoRow {
display: flex;
align-items: baseline;
gap: 8px;
min-height: 22px;
}
.infoKey {
flex: 0 0 auto;
}
.topRightTable {
display: table;
border-collapse: separate;
border-spacing: 0 4px;
}
.topRightRow {
display: table-row;
}
.trKey {
display: table-cell;
font-size: 11px;
opacity: 0.65;
white-space: nowrap;
min-width: 130px;
text-align: right;
padding-right: 8px;
font-size: 11px;
opacity: 0.7;
white-space: nowrap;
vertical-align: middle;
}
.trVal {
display: table-cell;
text-align: left;
.infoVal {
flex: 1;
font-size: 11px;
white-space: nowrap;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
}
.trVal code {
.infoVal code {
font-size: 11px;
padding: 2px 8px;
border-radius: 8px;
padding: 2px 7px;
border-radius: 7px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
word-break: break-all;
white-space: normal;
}
/* Countdown row */
@@ -410,14 +483,16 @@ body {
text-transform: uppercase;
letter-spacing: 0.06em;
color: rgba(255, 193, 113, 0.9);
opacity: 1 !important;
}
.countdownVal {
display: table-cell;
font-size: 14px;
font-size: 15px;
font-weight: 700;
color: rgba(255, 193, 113, 1);
vertical-align: middle;
display: flex;
align-items: baseline;
gap: 2px;
}
.countdown {
@@ -429,7 +504,6 @@ body {
.countdownUnit {
font-size: 12px;
opacity: 0.8;
margin-left: 2px;
}
/* User display */
@@ -459,51 +533,86 @@ body {
}
.muted {
opacity: 0.7;
opacity: 0.55;
}
/* ── Controls ──────────────────────────────────────────────────────────────── */
.controls {
display: flex;
align-items: end;
align-items: center;
gap: 10px;
}
button {
padding: 10px 12px;
padding: 9px 14px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(113, 199, 255, 0.16);
color: #e9eef6;
font-size: 13px;
cursor: pointer;
transition: background 0.15s;
}
button:hover {
background: rgba(113, 199, 255, 0.22);
background: rgba(113, 199, 255, 0.24);
}
.main {
display: grid;
grid-template-columns: 1fr 360px;
gap: 14px;
padding: 14px 18px 18px;
}
/* ── Selection panel ─────────────────────────────────────────────────────── */
.board {
position: relative;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.10);
background: rgba(255, 255, 255, 0.04);
.panel {
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.09);
background: rgba(255, 255, 255, 0.03);
overflow: hidden;
flex: 1 1 auto;
min-height: 80px;
}
.panelTitle {
padding: 10px 14px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
opacity: 0.7;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.details {
margin: 0;
padding: 12px 14px 14px;
font-size: 12px;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
color: rgba(233, 238, 246, 0.92);
}
.details--hidden {
color: rgba(233, 238, 246, 0.4);
font-style: italic;
}
/* ── Galaxy: square, pinned to the right ──────────────────────────────────── */
.galaxyMain {
/* Height fills the viewport; aspect-ratio keeps it perfectly square */
flex: 0 0 auto;
position: relative;
height: 100vh;
aspect-ratio: 1 / 1;
/* Constrain width so the canvas never exceeds available space */
max-width: calc(100vw - 260px);
background: #000;
overflow: hidden;
min-height: 820px;
}
canvas {
display: block;
width: min(820px, calc(100vw - 420px));
height: min(820px, calc(100vw - 420px));
max-width: 820px;
max-height: 820px;
margin: 0 auto;
width: 100%;
height: 100%;
image-rendering: pixelated;
}
@@ -515,46 +624,9 @@ canvas {
font-size: 12px;
opacity: 0.8;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(7, 10, 20, 0.65);
backdrop-filter: blur(6px);
}
.panel {
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.10);
background: rgba(255, 255, 255, 0.04);
overflow: hidden;
height: fit-content;
}
.panelTitle {
padding: 12px 14px;
font-weight: 700;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.details {
margin: 0;
padding: 12px 14px 14px;
font-size: 12px;
line-height: 1.4;
white-space: pre-wrap;
word-break: break-word;
color: rgba(233, 238, 246, 0.92);
}
.details--hidden {
color: rgba(233, 238, 246, 0.45);
font-style: italic;
}
@media (max-width: 1100px) {
.main {
grid-template-columns: 1fr;
}
canvas {
width: min(820px, calc(100vw - 36px));
height: min(820px, calc(100vw - 36px));
}
max-width: calc(100% - 28px);
pointer-events: none;
}