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/lib/ui/components/PipelineTimeline.svelte
+62 -38
View File
@@ -8,24 +8,8 @@
.slice(0, 8)
);
function stateColor(state: string): string {
switch (state) {
case 'done': return '#2d4a2d';
case 'failed': return '#4a2d2d';
case 'pending': return '#3a2f00';
case 'manual': return '#333';
default: return '#222';
}
}
function stateFg(state: string): string {
switch (state) {
case 'done': return '#a8e6a8';
case 'failed': return '#ff8080';
case 'pending': return '#ffcc55';
case 'manual': return '#aaa';
default: return '#888';
}
function stateClass(state: string): string {
return `chip chip-${state}`;
}
</script>
@@ -46,8 +30,7 @@
<div class="chips">
{#each [...dep.servers.entries()] as [srv, meta] (srv)}
<span
class="chip"
style="background:{stateColor(meta.state)};color:{stateFg(meta.state)}"
class={stateClass(meta.state)}
title={meta.error ?? (meta.players !== null ? `${meta.players}p` : meta.state)}
>
{srv}{meta.players !== null && meta.players > 0 ? ` ${meta.players}p` : ''}
@@ -62,43 +45,84 @@
<style>
.wrapper {
background: #141414;
border: 1px solid #333;
border-radius: 6px;
padding: 12px;
background: var(--cherry-925);
border: 1px solid var(--cherry-700);
border-radius: var(--r-md);
padding: 14px 16px;
}
header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 8px;
margin-bottom: 10px;
}
h3 {
margin: 0;
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--ink-300);
}
.empty {
color: var(--ink-500);
font-family: var(--font-mono);
font-size: 12px;
margin: 0;
padding: 12px 0;
}
h3 { margin: 0; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; color: #aaa; }
.empty { color: #666; font-size: 13px; margin: 0; }
.rows { display: grid; gap: 8px; }
.row {
display: block;
color: #ddd;
color: var(--ink-100);
text-decoration: none;
padding: 8px;
background: #1a1a1a;
border-radius: 4px;
border: 1px solid transparent;
padding: 10px 12px;
background: var(--cherry-875);
border-radius: var(--r-sm);
border: 1px solid var(--cherry-700);
transition: border-color 0.15s;
}
.row:hover { border-color: #444; }
.row:hover { border-color: var(--spark-500); }
.row-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 6px;
}
.action { font-family: ui-monospace, monospace; font-size: 13px; }
.count { color: #666; font-size: 12px; }
.action { font-family: var(--font-mono); font-size: 12px; color: var(--cream); }
.count { color: var(--ink-500); font-size: 11px; font-family: var(--font-mono); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
padding: 2px 6px;
border-radius: 3px;
padding: 2px 7px;
border-radius: var(--r-sm);
font-size: 11px;
font-family: ui-monospace, monospace;
font-family: var(--font-mono);
border: 1px solid transparent;
}
.chip-done {
background: rgba(34, 224, 255, 0.1);
border-color: rgba(34, 224, 255, 0.3);
color: var(--spark-500);
}
.chip-failed {
background: rgba(255, 48, 80, 0.1);
border-color: rgba(255, 48, 80, 0.3);
color: var(--danger-500);
}
.chip-pending {
background: rgba(255, 176, 32, 0.1);
border-color: rgba(255, 176, 32, 0.3);
color: var(--amber-500);
}
.chip-held {
background: rgba(242, 230, 200, 0.08);
border-color: rgba(242, 230, 200, 0.25);
color: var(--cream);
}
.chip-manual {
background: var(--cherry-925);
border-color: var(--cherry-700);
color: var(--ink-500);
}
</style>