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/ServerCard.svelte
+226 -37
View File
@@ -1,4 +1,8 @@
<script lang="ts">
import StatusDot from './StatusDot.svelte';
import type { RosterPlayer, Health } from '$ui/stores/servers.js';
import { gametypeLabel } from '$ui/gametype.js';
interface Held {
target: string;
slug: string;
@@ -6,32 +10,89 @@
interface Props {
name: string;
players?: number | null;
map?: string | null;
gametype?: string | null;
roster?: RosterPlayer[] | null;
health?: Health;
lastSeenAt?: string | null;
lastError?: string | null;
held?: Held[];
lastRestartedAt?: string | null;
restarting?: boolean;
}
let { name, players = null, held = [], lastRestartedAt = null, restarting = false }: Props = $props();
let {
name,
players = null,
map = null,
gametype = null,
roster = null,
health = 'offline',
lastSeenAt = null,
lastError = null,
held = [],
lastRestartedAt = null,
restarting = false
}: Props = $props();
function ago(iso: string | null): string {
if (!iso) return 'never';
const d = Date.now() - new Date(iso).getTime();
if (d < 60_000) return 'just now';
if (d < 60_000) return `${Math.max(1, Math.floor(d / 1000))}s ago`;
if (d < 3_600_000) return `${Math.floor(d / 60_000)}m ago`;
if (d < 86_400_000) return `${Math.floor(d / 3_600_000)}h ago`;
return `${Math.floor(d / 86_400_000)}d ago`;
}
let topRoster = $derived(
(roster ?? [])
.slice()
.sort((a, b) => b.score - a.score)
.slice(0, 3)
);
let showRoster = $derived(health !== 'offline');
let mapLabel = $derived(map ?? '—');
let gtLabel = $derived(gametypeLabel(gametype));
</script>
<a class="card" href="/servers/{name}" class:restarting>
<a class="card" href="/servers/{name}" class:restarting class:offline={health === 'offline'}>
<div class="head">
<strong>{name}</strong>
<span class="players" class:has-players={players !== null && players > 0}>
{players ?? '—'}
</span>
<div class="name-row">
<StatusDot {health} />
<strong class="name">{name}</strong>
</div>
{#if health !== 'offline'}
<span class="players" class:has-players={players !== null && players > 0}>
{players ?? '—'}
</span>
{:else}
<span class="players offline-badge">offline</span>
{/if}
</div>
<div class="meta">
restart: {ago(lastRestartedAt)}
<span class="map">{mapLabel}</span>
{#if gtLabel}
<span class="dot-sep">·</span>
<span class="gt">{gtLabel}</span>
{/if}
</div>
{#if showRoster}
{#if topRoster.length > 0}
<ul class="roster">
{#each topRoster as p (p.guid ?? p.name)}
<li>
<span class="pname">{p.name || '—'}</span>
<span class="pscore">{p.score}</span>
<span class="pping">{p.ping}ms</span>
</li>
{/each}
</ul>
{:else if health !== 'offline'}
<div class="lobby-empty">lobby is empty</div>
{/if}
{/if}
{#if held.length > 0}
<div class="held">
{#each held as h (h.target)}
@@ -39,6 +100,19 @@
{/each}
</div>
{/if}
<div class="foot">
{#if health === 'offline' && lastError}
<span class="err">{lastError}</span>
{:else if lastSeenAt}
<span>last seen {ago(lastSeenAt)}</span>
{:else if lastRestartedAt}
<span>restart {ago(lastRestartedAt)}</span>
{:else}
<span class="dim">no data</span>
{/if}
</div>
{#if restarting}
<div class="restarting-bar" aria-label="restarting"></div>
{/if}
@@ -46,50 +120,165 @@
<style>
.card {
display: block;
background: #1a1a1a;
border: 1px solid #333;
border-radius: 6px;
padding: 12px;
color: #ddd;
display: flex;
flex-direction: column;
gap: 10px;
background:
linear-gradient(180deg, var(--cherry-875) 0%, var(--cherry-925) 100%);
border: 1px solid var(--cherry-700);
border-radius: var(--r-md);
padding: 14px 16px 12px;
color: var(--ink-100);
text-decoration: none;
transition: border-color 0.15s;
transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
box-shadow: var(--shadow-card);
position: relative;
overflow: hidden;
}
.card:hover { border-color: #555; }
.card.restarting { border-color: #ffab00; }
.card::before {
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--cherry-500), transparent);
opacity: 0.5;
}
.card:hover {
border-color: var(--spark-500);
box-shadow: var(--spark-glow), var(--shadow-card);
transform: translateY(-1px);
}
.card.restarting { border-color: var(--amber-500); box-shadow: var(--amber-glow); }
.card.offline { opacity: 0.75; }
.head {
display: flex;
justify-content: space-between;
align-items: baseline;
align-items: center;
gap: 10px;
}
.name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.name {
font-family: var(--font-body);
font-size: 15px;
font-weight: 600;
letter-spacing: 0.3px;
color: var(--cream);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.players {
background: #222;
padding: 2px 8px;
background: var(--cherry-925);
border: 1px solid var(--cherry-700);
padding: 3px 10px;
border-radius: 999px;
font-family: ui-monospace, monospace;
font-family: var(--font-mono);
font-size: 12px;
color: #888;
font-weight: 500;
color: var(--ink-500);
min-width: 34px;
text-align: center;
}
.players.has-players { background: #2d4a2d; color: #a8e6a8; }
.meta { color: #666; font-size: 12px; margin-top: 4px; }
.held { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.players.has-players {
color: var(--spark-500);
border-color: var(--spark-500);
box-shadow: var(--spark-glow);
}
.players.offline-badge {
color: var(--danger-500);
border-color: rgba(255, 48, 80, 0.4);
font-family: var(--font-body);
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
}
.meta {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-300);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.map { color: var(--cream-dim); }
.gt { color: var(--ink-300); }
.dot-sep { color: var(--ink-500); }
.roster {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.roster li {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 10px;
align-items: center;
padding: 2px 0;
font-size: 12px;
}
.pname {
color: var(--cream);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pscore {
font-family: var(--font-mono);
color: var(--spark-500);
font-size: 11px;
}
.pping {
font-family: var(--font-mono);
color: var(--ink-300);
font-size: 11px;
min-width: 44px;
text-align: right;
}
.lobby-empty {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-500);
padding: 4px 0;
}
.held { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
background: #3a2f00;
color: #ffcc55;
border: 1px solid #665500;
border-radius: 3px;
background: rgba(242, 230, 200, 0.08);
color: var(--cream);
border: 1px solid rgba(242, 230, 200, 0.25);
border-radius: var(--r-sm);
padding: 1px 6px;
font-size: 11px;
font-family: ui-monospace, monospace;
font-family: var(--font-mono);
}
.foot {
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--ink-500);
letter-spacing: 0.3px;
margin-top: auto;
padding-top: 4px;
}
.err { color: var(--danger-500); }
.dim { color: var(--ink-700); }
.restarting-bar {
height: 2px;
background: linear-gradient(90deg, transparent, #ffab00, transparent);
margin-top: 8px;
animation: slide 1.2s infinite linear;
}
@keyframes slide {
from { background-position: -100% 0; }
to { background-position: 200% 0; }
background: linear-gradient(90deg, transparent, var(--amber-500), var(--spark-500), transparent);
background-size: 200% 100%;
animation: spark-slide 1.2s infinite linear;
}
</style>