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>
2026-09-12 08:20:54 -04:00
parent 854f5532a9
commit 9bff47a9a4
29 changed files with 1636 additions and 356 deletions
@@ -0,0 +1,111 @@
+<script lang="ts">
+    import type { RosterPlayer, Health } from '$ui/stores/servers.js';
+
+    interface Props {
+        roster: RosterPlayer[] | null;
+        health: Health;
+        compact?: boolean;   // hide guid column, cap rows
+        limit?: number;
+    }
+    let { roster, health, compact = false, limit }: Props = $props();
+
+    let sorted = $derived(
+        (roster ?? [])
+            .slice()
+            .sort((a, b) => b.score - a.score)
+            .slice(0, limit ?? Infinity)
+    );
+
+    function pingClass(ping: number): string {
+        if (ping < 60) return 'ping-good';
+        if (ping < 150) return 'ping-ok';
+        return 'ping-bad';
+    }
+</script>
+
+{#if health === 'offline'}
+    <div class="state offline">server unreachable</div>
+{:else if !roster || roster.length === 0}
+    <div class="state empty">lobby is empty</div>
+{:else}
+    <table class="roster" class:compact>
+        <thead>
+            <tr>
+                {#if !compact}<th class="col-num">#</th>{/if}
+                <th class="col-name">player</th>
+                <th class="col-score">score</th>
+                <th class="col-ping">ping</th>
+                {#if !compact}<th class="col-guid">guid</th>{/if}
+            </tr>
+        </thead>
+        <tbody>
+            {#each sorted as p (p.guid ?? p.name + '-' + p.num)}
+                <tr>
+                    {#if !compact}<td class="col-num mono">{p.num ?? ''}</td>{/if}
+                    <td class="col-name">{p.name || '—'}</td>
+                    <td class="col-score mono">{p.score}</td>
+                    <td class="col-ping mono {pingClass(p.ping)}">{p.ping}</td>
+                    {#if !compact}<td class="col-guid mono">{p.guid ? p.guid.slice(0, 8) + '…' : '—'}</td>{/if}
+                </tr>
+            {/each}
+        </tbody>
+    </table>
+{/if}
+
+<style>
+    .state {
+        font-family: var(--font-mono);
+        font-size: 12px;
+        padding: 10px 12px;
+        border-radius: var(--r-sm);
+    }
+    .state.offline {
+        color: var(--danger-500);
+        background: rgba(255, 48, 80, 0.08);
+        border: 1px solid rgba(255, 48, 80, 0.25);
+    }
+    .state.empty {
+        color: var(--ink-500);
+        background: var(--cherry-925);
+        border: 1px dashed var(--cherry-700);
+    }
+
+    .roster {
+        width: 100%;
+        border-collapse: separate;
+        border-spacing: 0;
+        font-family: var(--font-body);
+        font-size: 13px;
+        color: var(--ink-100);
+    }
+    .roster thead th {
+        text-align: left;
+        font-family: var(--font-body);
+        font-size: 10px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 1.2px;
+        color: var(--ink-500);
+        padding: 6px 10px;
+        border-bottom: 1px solid var(--cherry-700);
+    }
+    .roster tbody td {
+        padding: 8px 10px;
+        border-bottom: 1px solid rgba(74, 15, 30, 0.4);
+    }
+    .roster tbody tr:hover td {
+        background: rgba(34, 224, 255, 0.04);
+    }
+    .roster.compact tbody td { padding: 4px 8px; font-size: 12px; }
+
+    .mono { font-family: var(--font-mono); }
+    .col-num { width: 40px; color: var(--ink-500); }
+    .col-name { color: var(--cream); font-weight: 500; }
+    .col-score { width: 90px; color: var(--spark-500); }
+    .col-ping { width: 80px; }
+    .col-guid { width: 110px; color: var(--ink-500); }
+
+    .ping-good { color: var(--spark-400); }
+    .ping-ok { color: var(--cream-dim); }
+    .ping-bad { color: var(--amber-500); }
+</style>