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

19
.env.example Normal file
View File

@@ -0,0 +1,19 @@
# ── Server ───────────────────────────────────────────────────────────────────
PORT=8080
# ── Security ─────────────────────────────────────────────────────────────────
# Generate with: node -e "console.log(require('crypto').randomBytes(48).toString('hex'))"
JWT_SECRET=CHANGE_ME_TO_A_RANDOM_STRING
# ── Game database (PostgreSQL) ────────────────────────────────────────────────
POSTGRES_USER=game
POSTGRES_PASSWORD=CHANGE_ME
POSTGRES_DB=star_wars_grid
# ── Users database (PostgreSQL) ───────────────────────────────────────────────
POSTGRES_USERS_USER=users
POSTGRES_USERS_PASSWORD=CHANGE_ME
POSTGRES_USERS_DB=star_wars_users
# ── CORS ─────────────────────────────────────────────────────────────────────
CORS_ORIGIN=*

1
.gitignore vendored
View File

@@ -1,4 +1,5 @@
data/postgres/ data/postgres/
data/postgres_users/
.env .env
.env.local .env.local
.env.*.local .env.*.local

14
Dockerfile
View File

@@ -1,17 +1,29 @@
FROM node:20-alpine FROM node:20-alpine
# Create non-root user/group before switching context
RUN addgroup -S appgroup && adduser -S appuser -G appgroup
WORKDIR /app WORKDIR /app
# Install dependencies first for better layer caching
COPY package.json package-lock.json ./ COPY package.json package-lock.json ./
RUN npm ci --omit=dev RUN npm ci --omit=dev
# Copy application source
COPY server ./server COPY server ./server
COPY public ./public COPY public ./public
COPY config ./config COPY config ./config
# Drop to non-root user
USER appuser
ENV NODE_ENV=production
ENV PORT=8080 ENV PORT=8080
ENV CLICK_COOLDOWN_SECONDS=5
EXPOSE 8080 EXPOSE 8080
# Health-check: lightweight wget is available in node:alpine
HEALTHCHECK --interval=15s --timeout=5s --start-period=30s --retries=3 \
CMD wget -qO- http://localhost:8080/api/config > /dev/null || exit 1
CMD ["node", "server/index.js"] CMD ["node", "server/index.js"]

98
README.md
View File

@@ -1,16 +1,48 @@
# Star Wars - Wild Space # Star Wars – Wild Space
Exploitable ring only (outer Ø100, inner Ø60). Planet positions are deterministic from the **server world seed**; **stats stay hidden** until you click a tile. Reveals are **persisted in PostgreSQL**. Exploitable ring only (outer Ø100, inner Ø60). Planet positions are deterministic from the **server world seed**; **stats stay hidden** until you click a tile. Reveals are **persisted in PostgreSQL**.
> **Desktop only** — the galaxy map is not playable on phones or narrow screens (< 768 px wide).
## Layout
The UI is split into two panes:
| Pane | Content |
|------|---------|
| **Left column** | Title, team scores, player info, cooldown timer, world seed & period countdown, Refresh button, selection details |
| **Right side** | Galaxy map — a perfect square anchored to the right edge of the viewport |
## Secrets & environment variables
**Never commit secrets.** All credentials live in **`.env`** (git-ignored).
Copy the template and fill in your values before the first run:
```powershell
cp .env.example .env
# then edit .env
```
| Variable | Description |
|----------|-------------|
| `JWT_SECRET` | Secret used to sign JWT tokens — use a long random string in production |
| `POSTGRES_USER` | Game-DB username (default `game`) |
| `POSTGRES_PASSWORD` | Game-DB password — **change in production** |
| `POSTGRES_DB` | Game-DB name (default `star_wars_grid`) |
| `POSTGRES_USERS_USER` | Users-DB username (default `users`) |
| `POSTGRES_USERS_PASSWORD` | Users-DB password — **change in production** |
| `POSTGRES_USERS_DB` | Users-DB name (default `star_wars_users`) |
| `PORT` | HTTP port exposed by the app (default `8080`) |
## Runtime config (file + volume) ## Runtime config (file + volume)
Edit **`config/game.settings.json`** on the host (mounted into the container at `/app/config/game.settings.json`). The server reloads it when the file’s **mtime** changes, on a schedule controlled by **`configReloadIntervalSeconds`** (minimum 5s), so frequent polling is avoided when nothing changed. Edit **`config/game.settings.json`** on the host (mounted into the container at `/app/config/game.settings.json`). The server reloads it when the file's **mtime** changes, on a schedule controlled by **`configReloadIntervalSeconds`** (minimum 5 s), so frequent polling is avoided when nothing changed.
| Field | Meaning | | Field | Meaning |
|--------|--------| |-------|---------|
| `clickCooldownSeconds` | Cooldown between **new** reveals (same as before). | | `clickCooldownSeconds` | Cooldown between **new** reveals (same as before). |
| `databaseWipeoutIntervalSeconds` | World period length in **seconds** (default `21600` = 6h). The **world seed** is `swg-<slot>` with `slot = floor(UTC unix seconds / this value)`. When the slot changes, **`grid_cells` is truncated** (full wipe). | | `databaseWipeoutIntervalSeconds` | World period length in **seconds** (default `21600` = 6 h). The **world seed** is `swg-<slot>` with `slot = floor(UTC unix seconds / this value)`. When the slot changes, **`grid_cells` is truncated** (full wipe). |
| `debugModeForTeams` | If `true` or string `"true"` / `"True"` (case-insensitive), the **Blue / Red** segmented control is shown; if `false`, it is hidden. | | `debugModeForTeams` | If `true`, the **Blue / Red** segmented control is shown; if `false`, it is hidden. |
| `configReloadIntervalSeconds` | How often the server **checks** the config file (mtime); also used by the client to poll `/api/config`. | | `configReloadIntervalSeconds` | How often the server **checks** the config file (mtime); also used by the client to poll `/api/config`. |
`GET /api/config` returns these values plus **`worldSeed`**, **`seedPeriodEndsAtUtc`**, **`seedPeriodStartsAtUtc`**. `GET /api/config` returns these values plus **`worldSeed`**, **`seedPeriodEndsAtUtc`**, **`seedPeriodStartsAtUtc`**.
@@ -18,45 +50,73 @@ Edit **`config/game.settings.json`** on the host (mounted into the container at
## Teams (blue / red) ## Teams (blue / red)
- With **`debugModeForTeams`**: use the **Team** control (top-left) to switch perspective. - With **`debugModeForTeams`**: use the **Team** control (top-left) to switch perspective.
- **Your** discovered tiles use your team color (blue: bright cyan; red: red when revealed). Unclaimed ring tiles use the **classic** idle tint for both teams. - **Your** discovered tiles use your team colour. Unclaimed ring tiles use the classic idle tint for both teams.
- Tiles discovered by the **other** team appear **grey**, show **no planet**, and are **not clickable**. First reveal **owns** the tile (`discovered_by`). - Tiles discovered by the **other** team appear **grey**, show **no planet**, and are **not clickable**. First reveal **owns** the tile (`discovered_by`).
## Cooldown ## Cooldown
After revealing a **new** tile, a **cooldown** runs (top-right). During cooldown you **cannot reveal additional unseen tiles**, but you can still **click tiles your team already discovered** to view their stats. After revealing a **new** tile, a **cooldown** runs (left column). During cooldown you **cannot reveal additional unseen tiles**, but you can still **click tiles your team already discovered** to view their stats.
## Run with Docker Compose (Node + PostgreSQL) ## Run with Docker Compose (Node + PostgreSQL)
From `d:\Users\GaWin\Travaux\Code\star_wars_grid_game`: ### Prerequisites
```powershell 1. Copy the environment template and set your secrets:
docker compose up --build ```powershell
``` cp star_wars_grid_game/.env.example star_wars_grid_game/.env
# Edit .env — at minimum change JWT_SECRET, POSTGRES_PASSWORD, POSTGRES_USERS_PASSWORD
```
Open `http://localhost:8080`. 2. From `star_wars_grid_game/`:
```powershell
docker compose up --build
```
- **App:** port `8080` 3. Open `http://localhost:8080`.
- **Postgres:** port `5432` (user `game`, password `game`, database `star_wars_grid`)
- **Config:** host folder **`./config`** is mounted to **`/app/config`** — edit `game.settings.json` without rebuilding the image. ### Ports
| Service | Port | Notes |
|---------|------|-------|
| App | `8080` | configurable via `PORT` in `.env` |
| Game Postgres | `5432` | user/pass from `.env` |
| Users Postgres | `5433` | user/pass from `.env` |
### Database persistence ### Database persistence
PostgreSQL data is under **`./data/postgres`** (bind mount). The **world wipe** only clears `grid_cells` when the UTC period slot changes; it does not delete the Postgres data directory. PostgreSQL data is under **`./data/postgres`** and **`./data/postgres_users`** (bind mounts). The **world wipe** only clears `grid_cells` when the UTC period slot changes; it does not delete the Postgres data directory.
## Local dev (without Docker) ## Local dev (without Docker)
Requires PostgreSQL and `DATABASE_URL`, then: Requires PostgreSQL, then:
```powershell ```powershell
cd star_wars_grid_game
cp .env.example .env # fill in DATABASE_URL etc.
npm install npm install
$env:DATABASE_URL="postgres://user:pass@localhost:5432/star_wars_grid" # export vars or use a tool like dotenv-cli
$env:DATABASE_URL="postgres://game:game@localhost:5432/star_wars_grid"
$env:USERS_DATABASE_URL="postgres://users:users@localhost:5433/star_wars_users"
$env:JWT_SECRET="dev_secret"
npm start npm start
``` ```
Ensure `config/game.settings.json` exists (or copy from the repo). Ensure `config/game.settings.json` exists (or copy from the repo).
## Docker image notes
- Base image: `node:20-alpine`
- Runs as a **non-root user** (`appuser`) for security
- `NODE_ENV=production` is set inside the image
- Built-in **health check**: polls `GET /api/config` every 15 s (`wget`)
- Secrets (`JWT_SECRET`, DB passwords) are **never baked into the image** — pass them via `.env` / Compose environment
## API ## API
- `GET /api/config` — cooldown, wipe interval, debug flag, poll interval, `worldSeed`, period timestamps. - `GET /api/config` — cooldown, wipe interval, debug flag, poll interval, `worldSeed`, period timestamps.
- `GET /api/grid/:seed` — cells for that seed; **`410`** if `seed` is not the current world seed. - `GET /api/grid/:seed` — cells for that seed; **`410`** if `seed` is not the current world seed.
- `POST /api/cell/reveal` — body `{ seed, x, y, team: "blue" \| "red" }` — first reveal wins; **`409`** if the other team owns the tile; **`410`** if seed is stale. - `POST /api/cell/reveal` — body `{ seed, x, y, team: "blue" | "red" }` — first reveal wins; **`409`** if the other team owns the tile; **`410`** if seed is stale.
- `POST /api/auth/register` — `{ username, email, password, team }` → `{ token, user }`.
- `POST /api/auth/login` — `{ username, password }` → `{ token, user }`.
- `GET /api/auth/me` — Bearer token required → refreshed `{ token, user }`.
- `GET /api/scores` — `{ blue: N, red: N }` tile counts for the current period.

29
docker-compose.yml
View File

@@ -1,17 +1,18 @@
# Keep `db` as the first service: clearer dependency order and predictable compose overrides. # Secrets come from .env (auto-loaded by Compose) — never hard-code credentials here.
# Copy .env.example to .env and fill in values before running.
services: services:
db: db:
image: postgres:16-alpine image: postgres:16-alpine
environment: environment:
POSTGRES_USER: game POSTGRES_USER: ${POSTGRES_USER:-game}
POSTGRES_PASSWORD: game POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
POSTGRES_DB: star_wars_grid POSTGRES_DB: ${POSTGRES_DB:-star_wars_grid}
volumes: volumes:
- ./data/postgres:/var/lib/postgresql/data - ./data/postgres:/var/lib/postgresql/data
ports: ports:
- "5432:5432" - "5432:5432"
healthcheck: healthcheck:
test: ["CMD-SHELL", "pg_isready -U game -d star_wars_grid"] test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USER:-game} -d ${POSTGRES_DB:-star_wars_grid}"]
interval: 3s interval: 3s
timeout: 5s timeout: 5s
retries: 15 retries: 15
@@ -20,15 +21,15 @@ services:
users_db: users_db:
image: postgres:16-alpine image: postgres:16-alpine
environment: environment:
POSTGRES_USER: users POSTGRES_USER: ${POSTGRES_USERS_USER:-users}
POSTGRES_PASSWORD: users POSTGRES_PASSWORD: ${POSTGRES_USERS_PASSWORD}
POSTGRES_DB: star_wars_users POSTGRES_DB: ${POSTGRES_USERS_DB:-star_wars_users}
volumes: volumes:
- ./data/postgres_users:/var/lib/postgresql/data - ./data/postgres_users:/var/lib/postgresql/data
ports: ports:
- "5433:5432" - "5433:5432"
healthcheck: healthcheck:
test: ["CMD-SHELL", "pg_isready -U users -d star_wars_users"] test: ["CMD-SHELL", "pg_isready -U ${POSTGRES_USERS_USER:-users} -d ${POSTGRES_USERS_DB:-star_wars_users}"]
interval: 3s interval: 3s
timeout: 5s timeout: 5s
retries: 15 retries: 15
@@ -37,12 +38,12 @@ services:
app: app:
build: . build: .
ports: ports:
- "8080:8080" - "${PORT:-8080}:8080"
environment: environment:
DATABASE_URL: postgres://game:game@db:5432/star_wars_grid DATABASE_URL: "postgres://${POSTGRES_USER:-game}:${POSTGRES_PASSWORD}@db:5432/${POSTGRES_DB:-star_wars_grid}"
USERS_DATABASE_URL: postgres://users:users@users_db:5432/star_wars_users USERS_DATABASE_URL: "postgres://${POSTGRES_USERS_USER:-users}:${POSTGRES_USERS_PASSWORD}@users_db:5432/${POSTGRES_USERS_DB:-star_wars_users}"
JWT_SECRET: change_me_in_production_please JWT_SECRET: ${JWT_SECRET}
PORT: "8080" PORT: "${PORT:-8080}"
CONFIG_FILE_PATH: /app/config/game.settings.json CONFIG_FILE_PATH: /app/config/game.settings.json
volumes: volumes:
- ./config:/app/config - ./config:/app/config

112
public/index.html
View File

@@ -7,7 +7,20 @@
<link rel="stylesheet" href="./style.css" /> <link rel="stylesheet" href="./style.css" />
</head> </head>
<body> <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="authOverlay" id="authOverlay">
<div class="authModal"> <div class="authModal">
<div class="authTabs"> <div class="authTabs">
@@ -73,10 +86,14 @@
</div> </div>
</div> </div>
<!-- Main app layout: left info column + right galaxy square ─────────────── -->
<div class="app"> <div class="app">
<header class="topbar">
<div class="title"> <!-- ── Left information column ────────────────────────────────────────── -->
<div class="h1">Star Wars - Wild Space</div> <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 class="sub">100×100 — exploitable ring only (inner Ø60, outer Ø100)</div>
</div> </div>
@@ -93,55 +110,58 @@
</span> </span>
</div> </div>
<div class="topRight"> <!-- Info rows -->
<div class="topRightTable"> <div class="infoTable">
<div class="topRightRow" id="userInfoRow"> <div class="infoRow" id="userInfoRow">
<span class="trKey">player</span> <span class="infoKey">Player</span>
<span class="trVal"> <span class="infoVal">
<span id="userDisplay">—</span> <span id="userDisplay">—</span>
<button type="button" id="logoutBtn" class="logoutBtn hidden">Logout</button> <button type="button" id="logoutBtn" class="logoutBtn hidden">Logout</button>
</span> </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>
<div class="controls"> <div class="infoRow" id="countdownWrap" aria-live="polite">
<button id="refreshBtn" type="button">Refresh</button> <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>
</div> </div>
</header>
<main class="main"> <div class="controls">
<section class="board"> <button id="refreshBtn" type="button">Refresh</button>
<canvas id="canvas" width="800" height="800"></canvas> </div>
<div id="hint" class="hint">Click a cell in the ring. Planet stats stay hidden until you reveal a tile.</div>
</section> <!-- Selection details panel -->
<aside class="panel"> <div class="panel">
<div class="panelTitle">Selection</div> <div class="panelTitle">Selection</div>
<pre id="details" class="details details--hidden">Stats are hidden until you click a tile.</pre> <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> </main>
</div> </div>
<script type="module" src="./src/main.js"></script> <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, font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial,
"Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
color: #e9eef6; color: #e9eef6;
@@ -6,8 +15,55 @@
min-height: 100vh; 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; 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 ─────────────────────────────────────────────────────────── */ /* ── Auth overlay ─────────────────────────────────────────────────────────── */
@@ -272,8 +328,8 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 16px; gap: 16px;
padding: 10px 20px; padding: 10px 16px;
border-radius: 16px; border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04); background: rgba(255, 255, 255, 0.04);
font-size: 22px; font-size: 22px;
@@ -319,79 +375,96 @@ body {
font-size: 18px; font-size: 18px;
} }
/* ── Top bar ──────────────────────────────────────────────────────────────── */ /* ── Main app layout ──────────────────────────────────────────────────────── */
.topbar { .app {
display: flex; display: flex;
align-items: flex-start; flex-direction: row;
justify-content: space-between; align-items: stretch;
gap: 16px; height: 100vh;
padding: 18px 18px 12px; overflow: hidden;
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;
} }
.h1 { /* ── Left information column ──────────────────────────────────────────────── */
font-size: 18px;
.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; font-weight: 700;
letter-spacing: 0.2px; letter-spacing: 0.2px;
} }
.sub { .infoSection--title .sub {
font-size: 12px; font-size: 11px;
opacity: 0.75; opacity: 0.65;
margin-top: 3px; margin-top: 4px;
} }
/* ── Top-right table ──────────────────────────────────────────────────────── */ /* ── Info table (rows of key/value pairs) ─────────────────────────────────── */
.topRight { .infoTable {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-end; gap: 6px;
gap: 10px; }
.infoRow {
display: flex;
align-items: baseline;
gap: 8px;
min-height: 22px;
}
.infoKey {
flex: 0 0 auto; flex: 0 0 auto;
} font-size: 11px;
opacity: 0.65;
.topRightTable { white-space: nowrap;
display: table; min-width: 130px;
border-collapse: separate;
border-spacing: 0 4px;
}
.topRightRow {
display: table-row;
}
.trKey {
display: table-cell;
text-align: right; text-align: right;
padding-right: 8px;
font-size: 11px;
opacity: 0.7;
white-space: nowrap;
vertical-align: middle;
} }
.trVal { .infoVal {
display: table-cell; flex: 1;
text-align: left;
font-size: 11px; font-size: 11px;
white-space: nowrap; white-space: nowrap;
vertical-align: middle; overflow: hidden;
text-overflow: ellipsis;
} }
.trVal code { .infoVal code {
font-size: 11px; font-size: 11px;
padding: 2px 8px; padding: 2px 7px;
border-radius: 8px; border-radius: 7px;
background: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.12);
word-break: break-all; word-break: break-all;
white-space: normal;
} }
/* Countdown row */ /* Countdown row */
@@ -410,14 +483,16 @@ body {
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.06em; letter-spacing: 0.06em;
color: rgba(255, 193, 113, 0.9); color: rgba(255, 193, 113, 0.9);
opacity: 1 !important;
} }
.countdownVal { .countdownVal {
display: table-cell; font-size: 15px;
font-size: 14px;
font-weight: 700; font-weight: 700;
color: rgba(255, 193, 113, 1); color: rgba(255, 193, 113, 1);
vertical-align: middle; display: flex;
align-items: baseline;
gap: 2px;
} }
.countdown { .countdown {
@@ -429,7 +504,6 @@ body {
.countdownUnit { .countdownUnit {
font-size: 12px; font-size: 12px;
opacity: 0.8; opacity: 0.8;
margin-left: 2px;
} }
/* User display */ /* User display */
@@ -459,51 +533,86 @@ body {
} }
.muted { .muted {
opacity: 0.7; opacity: 0.55;
} }
/* ── Controls ──────────────────────────────────────────────────────────────── */
.controls { .controls {
display: flex; display: flex;
align-items: end; align-items: center;
gap: 10px; gap: 10px;
} }
button { button {
padding: 10px 12px; padding: 9px 14px;
border-radius: 10px; border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(113, 199, 255, 0.16); background: rgba(113, 199, 255, 0.16);
color: #e9eef6; color: #e9eef6;
font-size: 13px;
cursor: pointer; cursor: pointer;
transition: background 0.15s;
} }
button:hover { button:hover {
background: rgba(113, 199, 255, 0.22); background: rgba(113, 199, 255, 0.24);
} }
.main { /* ── Selection panel ─────────────────────────────────────────────────────── */
display: grid;
grid-template-columns: 1fr 360px;
gap: 14px;
padding: 14px 18px 18px;
}
.board { .panel {
position: relative; border-radius: 14px;
border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.09);
border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(255, 255, 255, 0.03);
background: rgba(255, 255, 255, 0.04); 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; overflow: hidden;
min-height: 820px;
} }
canvas { canvas {
display: block; display: block;
width: min(820px, calc(100vw - 420px)); width: 100%;
height: min(820px, calc(100vw - 420px)); height: 100%;
max-width: 820px;
max-height: 820px;
margin: 0 auto;
image-rendering: pixelated; image-rendering: pixelated;
} }
@@ -515,46 +624,9 @@ canvas {
font-size: 12px; font-size: 12px;
opacity: 0.8; opacity: 0.8;
border-radius: 12px; 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); background: rgba(7, 10, 20, 0.65);
backdrop-filter: blur(6px); backdrop-filter: blur(6px);
} max-width: calc(100% - 28px);
pointer-events: none;
.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));
}
} }