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/deployments/+page.svelte
+67 -31
View File
@@ -31,14 +31,8 @@
return d.servers.some((s) => s.restart_state === 'pending' || s.restart_state === 'failed');
}
function chipColor(state: string): { bg: string; fg: string } {
switch (state) {
case 'done': return { bg: '#2d4a2d', fg: '#a8e6a8' };
case 'failed': return { bg: '#4a2d2d', fg: '#ff8080' };
case 'pending': return { bg: '#3a2f00', fg: '#ffcc55' };
case 'manual': return { bg: '#333', fg: '#aaa' };
default: return { bg: '#222', fg: '#888' };
}
function chipClass(state: string): string {
return `chip chip-${state}`;
}
function ago(iso: string): string {
@@ -89,8 +83,7 @@
</div>
<div class="chips">
{#each d.servers as s (s.server)}
{@const c = chipColor(s.restart_state)}
<span class="chip" style="background:{c.bg};color:{c.fg}" title={s.error ?? ''}>
<span class={chipClass(s.restart_state)} title={s.error ?? ''}>
{s.server}{s.players !== null && s.players > 0 ? ` (${s.players}p)` : ''}
</span>
{/each}
@@ -100,35 +93,78 @@
{/snippet}
<style>
h1 { color: #ff6060; margin: 0 0 20px; }
h1 {
color: var(--cream);
font-family: var(--font-display);
font-size: 32px;
letter-spacing: 2px;
margin: 0 0 20px;
}
h2 {
margin: 30px 0 10px;
font-size: 13px;
margin: 28px 0 12px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #888;
letter-spacing: 1.5px;
color: var(--ink-300);
}
.row {
display: block;
background: #141414;
border: 1px solid #333;
border-radius: 6px;
padding: 12px;
margin-bottom: 8px;
color: #ddd;
background: var(--cherry-925);
border: 1px solid var(--cherry-700);
border-radius: var(--r-md);
padding: 14px 16px;
margin-bottom: 10px;
color: var(--ink-100);
text-decoration: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.row:hover { border-color: #555; }
.head { display: flex; justify-content: space-between; margin-bottom: 8px; }
.action { font-family: ui-monospace, monospace; font-size: 13px; }
.when { color: #666; font-size: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.row:hover { border-color: var(--spark-500); box-shadow: var(--spark-glow); }
.head { display: flex; justify-content: space-between; margin-bottom: 8px; align-items: baseline; }
.action { font-family: var(--font-mono); font-size: 13px; color: var(--cream); }
.when { color: var(--ink-500); font-size: 12px; font-family: var(--font-mono); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.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);
}
.id {
color: var(--ink-700);
font-family: var(--font-mono);
font-size: 11px;
}
.empty {
color: var(--ink-500);
font-family: var(--font-mono);
font-size: 13px;
}
.id { color: #444; font-family: ui-monospace, monospace; font-size: 11px; }
.empty { color: #666; font-size: 13px; }
</style>
src/routes/deployments/[id]/+page.svelte
+110 -52
View File
@@ -116,88 +116,146 @@
{/if}
<style>
h1 { color: #ff6060; margin: 0 0 4px; font-family: ui-monospace, monospace; font-size: 18px; }
h2 {
margin: 24px 0 8px;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #888;
h1 {
color: var(--cream);
font-family: var(--font-display);
font-size: 24px;
letter-spacing: 1.5px;
margin: 0 0 6px;
}
h2 {
margin: 26px 0 10px;
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: var(--ink-300);
}
h3 {
margin: 14px 0 6px;
font-size: 13px;
color: var(--cream);
font-family: var(--font-mono);
}
.meta {
color: var(--ink-500);
font-size: 12px;
margin: 0 0 22px;
font-family: var(--font-mono);
}
h3 { margin: 12px 0 4px; font-size: 13px; color: #ddd; font-family: ui-monospace, monospace; }
.meta { color: #666; font-size: 12px; margin: 0 0 20px; font-family: ui-monospace, monospace; }
.server-grid {
display: grid;
gap: 8px;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.srv {
background: #141414;
border: 1px solid #333;
border-radius: 4px;
padding: 10px;
background: var(--cherry-925);
border: 1px solid var(--cherry-700);
border-radius: var(--r-sm);
padding: 12px;
}
.srv-done { border-color: #2d4a2d; }
.srv-failed { border-color: #4a2d2d; }
.srv-pending { border-color: #3a2f00; }
.name { font-weight: 600; margin-bottom: 4px; }
.line { font-size: 12px; color: #bbb; }
.line.dim { color: #666; }
.line.err { color: #ff6060; }
.file-group { margin-bottom: 12px; }
.srv-done { border-color: rgba(34, 224, 255, 0.35); }
.srv-failed { border-color: rgba(255, 48, 80, 0.35); }
.srv-pending { border-color: rgba(255, 176, 32, 0.35); }
.srv-held { border-color: rgba(242, 230, 200, 0.3); }
.srv-manual { border-color: var(--ink-500); }
.name {
font-weight: 600;
margin-bottom: 6px;
color: var(--cream);
}
.line { font-size: 12px; color: var(--ink-300); font-family: var(--font-mono); }
.line.dim { color: var(--ink-500); }
.line.err { color: var(--danger-500); }
.file-group { margin-bottom: 16px; }
.file-row {
display: flex;
align-items: center;
gap: 8px;
gap: 10px;
width: 100%;
background: #141414;
border: 1px solid #2a2a2a;
border-radius: 3px;
padding: 4px 8px;
margin: 2px 0;
color: #ddd;
background: var(--cherry-925);
border: 1px solid var(--cherry-700);
border-radius: var(--r-sm);
padding: 6px 10px;
margin: 3px 0;
color: var(--ink-100);
cursor: pointer;
font: inherit;
text-align: left;
transition: border-color 0.15s;
}
.file-row:hover { border-color: #444; }
.file-row:hover { border-color: var(--spark-500); }
.verb {
padding: 1px 6px;
border-radius: 3px;
font-size: 11px;
font-family: ui-monospace, monospace;
padding: 2px 7px;
border-radius: var(--r-sm);
font-size: 10px;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.8px;
border: 1px solid transparent;
}
.verb-added {
background: rgba(34, 224, 255, 0.1);
border-color: rgba(34, 224, 255, 0.3);
color: var(--spark-500);
}
.verb-updated {
background: rgba(242, 230, 200, 0.08);
border-color: rgba(242, 230, 200, 0.25);
color: var(--cream);
}
.verb-removed {
background: rgba(255, 48, 80, 0.1);
border-color: rgba(255, 48, 80, 0.3);
color: var(--danger-500);
}
.verb-held {
background: rgba(255, 176, 32, 0.1);
border-color: rgba(255, 176, 32, 0.3);
color: var(--amber-500);
}
.sizes {
margin-left: auto;
color: var(--ink-500);
font-size: 11px;
font-family: var(--font-mono);
}
code { font-family: var(--font-mono); color: var(--ink-100); }
.empty {
color: var(--ink-500);
font-family: var(--font-mono);
font-size: 13px;
}
.verb-added { background: #2d4a2d; color: #a8e6a8; }
.verb-updated { background: #2d3a4a; color: #a8c8e6; }
.verb-removed { background: #4a2d2d; color: #ff8080; }
.verb-held { background: #3a2f00; color: #ffcc55; }
.sizes { margin-left: auto; color: #666; font-size: 11px; font-family: ui-monospace, monospace; }
code { font-family: ui-monospace, monospace; color: #ddd; }
.empty { color: #666; }
.diff-scrim {
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.75);
background: rgba(4, 2, 3, 0.85);
z-index: 100;
display: grid;
place-items: center;
backdrop-filter: blur(4px);
}
.diff-modal {
max-width: 1000px;
width: 92%;
max-height: 92vh;
overflow: auto;
background: #0a0a0a;
border: 1px solid #444;
border-radius: 6px;
padding: 16px;
background: var(--cherry-925);
border: 1px solid var(--cherry-700);
border-radius: var(--r-md);
padding: 20px;
box-shadow: var(--shadow-panel);
}
.close {
float: right;
background: #222;
color: #ddd;
border: 1px solid #444;
border-radius: 3px;
padding: 4px 10px;
background: var(--cherry-875);
color: var(--ink-100);
border: 1px solid var(--cherry-700);
border-radius: var(--r-sm);
padding: 5px 12px;
font-family: var(--font-body);
font-size: 12px;
cursor: pointer;
}
.close:hover { border-color: var(--spark-500); box-shadow: var(--spark-glow); }
</style>