josh/electric-cherry
1
0
Fork 0
Code Issues 18 Pull Requests Actions Packages Projects Releases Wiki Activity

Perk-a-cola redesign + surface RCON map/gametype/roster/health

Browse Source 
Themes the fleet manager around the Electric Cherry perk-a-cola from Mob of
the Dead — cherry-red art-deco label with electric cyan discharge. New
design tokens (Alfa Slab One + Inter + JetBrains Mono, self-hosted), full
redesign of layout/dashboard/cards/detail page, tokens pass on
deployments/betas/pipeline/beta/diff, cherry+lightning favicon.

Lights up server data that RCON was already fetching but the UI dropped.
parsePlayerRoster() extracts num/score/ping/guid/name from both status
dialects. Worker persists last_map/last_gametype/last_roster/last_seen_at/
last_error (new columns with idempotent boot-time ALTERs) and emits them
over SSE. Fleet cards now show health dot, map · gametype, top-3 roster
preview, and last-seen. Detail page adds a sortable full roster with
distinct empty-lobby vs offline states. New health classifier
(online/stale/offline) drives the visual state.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
josh
2026-09-12 08:20:54 -04:00
co-authored by Claude Opus 4.7
parent 854f5532a9
commit 9bff47a9a4
29 changed files with 1636 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/+page.svelte
+103 -21
View File
@@ -3,6 +3,7 @@
import ServerCard from '$ui/components/ServerCard.svelte';
import PipelineTimeline from '$ui/components/PipelineTimeline.svelte';
import { statusByServer } from '$ui/stores/servers.js';
import type { RosterPlayer, Health } from '$ui/stores/servers.js';
interface HeldRow { target: string; slug: string; }
interface ServerRow {
@@ -12,6 +13,12 @@
game_port: number | null;
rcon_host: string | null;
last_players: number | null;
last_map: string | null;
last_gametype: string | null;
last_seen_at: string | null;
last_error: string | null;
roster: RosterPlayer[] | null;
health: Health;
held: HeldRow[];
}
@@ -44,16 +51,39 @@
: `pushed to ${body.totalChangedServers ?? 0} servers · ${body.totalFiles ?? 0} files`;
}
function playersFor(name: string): number | null {
const s = $statusByServer.get(name);
return s?.players ?? null;
// Live server view — merge SSE data over the initial GET
function liveFor(name: string, fallback: ServerRow) {
const live = $statusByServer.get(name);
if (!live) {
return {
players: fallback.last_players,
map: fallback.last_map,
gametype: fallback.last_gametype,
roster: fallback.roster,
health: fallback.health,
lastSeenAt: fallback.last_seen_at,
lastError: fallback.last_error
};
}
return {
players: live.players,
map: live.map,
gametype: live.gametype,
roster: live.roster,
health: live.health,
lastSeenAt: live.lastSeenAt,
lastError: live.lastError
};
}
</script>
<div class="grid">
<section class="left">
<header class="hdr">
<h1>Fleet</h1>
<div class="title-block">
<h1>Fleet</h1>
<span class="count">{servers.length} server{servers.length === 1 ? '' : 's'}</span>
</div>
<div class="actions">
<button onclick={() => push(true)} disabled={pushing}>dry run</button>
<button class="primary" onclick={() => push(false)} disabled={pushing}>push all</button>
@@ -65,9 +95,16 @@
{:else}
<div class="cards">
{#each servers as s (s.name)}
{@const live = liveFor(s.name, s)}
<ServerCard
name={s.name}
players={playersFor(s.name) ?? s.last_players}
players={live.players}
map={live.map}
gametype={live.gametype}
roster={live.roster}
health={live.health}
lastSeenAt={live.lastSeenAt}
lastError={live.lastError}
held={s.held}
/>
{/each}
@@ -84,7 +121,7 @@
.grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 20px;
gap: 24px;
}
@media (max-width: 900px) {
.grid { grid-template-columns: 1fr; }
@@ -92,32 +129,77 @@
.hdr {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 16px;
align-items: flex-end;
margin-bottom: 20px;
padding-bottom: 14px;
border-bottom: 1px solid var(--cherry-700);
}
.title-block { display: flex; align-items: baseline; gap: 14px; }
h1 {
margin: 0;
font-size: 22px;
color: #ff6060;
font-family: var(--font-display);
font-size: 32px;
color: var(--cream);
letter-spacing: 2px;
line-height: 1;
}
.count {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-500);
letter-spacing: 0.5px;
}
.actions { display: flex; gap: 8px; }
button {
background: #222;
color: #ddd;
border: 1px solid #444;
border-radius: 4px;
padding: 8px 14px;
background: var(--cherry-875);
color: var(--ink-100);
border: 1px solid var(--cherry-700);
border-radius: var(--r-sm);
padding: 8px 16px;
cursor: pointer;
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.3px;
transition: border-color 0.15s, box-shadow 0.15s;
}
button.primary { background: #ff3030; color: #fff; border-color: #ff3030; font-weight: 600; }
button:disabled { opacity: 0.5; cursor: default; }
button:hover:not(:disabled) {
border-color: var(--spark-500);
box-shadow: var(--spark-glow);
}
button.primary {
background: linear-gradient(180deg, var(--cherry-500), var(--cherry-600));
color: var(--cream);
border-color: var(--cherry-400);
font-weight: 600;
}
button.primary:hover:not(:disabled) {
border-color: var(--spark-500);
box-shadow: var(--spark-glow), 0 0 20px rgba(200, 16, 46, 0.4);
}
button:disabled { opacity: 0.4; cursor: default; }
.cards {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.empty {
color: var(--ink-500);
font-family: var(--font-mono);
font-size: 13px;
padding: 40px;
text-align: center;
border: 1px dashed var(--cherry-700);
border-radius: var(--r-md);
}
.flash {
color: var(--spark-400);
margin: 0 0 16px;
font-family: var(--font-mono);
font-size: 12px;
padding: 10px 14px;
background: rgba(34, 224, 255, 0.06);
border: 1px solid rgba(34, 224, 255, 0.25);
border-radius: var(--r-sm);
}
.empty { color: #666; }
.flash { color: #aaa; margin: 0 0 12px; font-family: ui-monospace, monospace; font-size: 12px; }
</style>