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

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:
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
+37
View File
@@ -0,0 +1,37 @@
<script lang="ts">
interface Props {
size?: 'sm' | 'md' | 'lg';
}
let { size = 'md' }: Props = $props();
</script>
<span class="mark mark-{size}">
<svg class="bolt" viewBox="0 0 12 20" aria-hidden="true">
<path d="M7 0 L1 11 L5 11 L4 20 L11 8 L7 8 Z" />
</svg>
<span class="word">ELECTRIC CHERRY</span>
</span>
<style>
.mark {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
color: var(--cream);
letter-spacing: 2px;
line-height: 1;
animation: cherry-fizz 6s ease-in-out infinite;
}
.mark-sm .word { font-size: 12px; letter-spacing: 1.5px; }
.mark-md .word { font-size: 16px; }
.mark-lg .word { font-size: 26px; letter-spacing: 3px; }
.bolt {
fill: var(--spark-500);
filter: drop-shadow(0 0 4px rgba(34, 224, 255, 0.7));
}
.mark-sm .bolt { width: 10px; height: 16px; }
.mark-md .bolt { width: 12px; height: 20px; }
.mark-lg .bolt { width: 18px; height: 30px; }
</style>