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:
Claude Opus 4.7
@@ -2,6 +2,10 @@
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { statusByServer } from '$ui/stores/servers.js';
|
||||
import type { RosterPlayer, Health } from '$ui/stores/servers.js';
|
||||
import StatusDot from '$ui/components/StatusDot.svelte';
|
||||
import PlayerRoster from '$ui/components/PlayerRoster.svelte';
|
||||
import { gametypeLabel } from '$ui/gametype.js';
|
||||
|
||||
interface Server {
|
||||
name: string;
|
||||
@@ -12,6 +16,12 @@
|
||||
rcon_host: string | null;
|
||||
last_players: number | null;
|
||||
last_checked_at: string | null;
|
||||
last_map: string | null;
|
||||
last_gametype: string | null;
|
||||
last_seen_at: string | null;
|
||||
last_error: string | null;
|
||||
roster: RosterPlayer[] | null;
|
||||
health: Health;
|
||||
held: Array<{ target: string; slug: string }>;
|
||||
}
|
||||
interface DeploymentRow {
|
||||
@@ -34,96 +44,243 @@
|
||||
history = depBody.deployments.filter((d) => d.servers.some((s) => s.server === name));
|
||||
});
|
||||
|
||||
let live = $derived($statusByServer.get(name)?.players);
|
||||
let live = $derived($statusByServer.get(name));
|
||||
let effectivePlayers = $derived(live?.players ?? server?.last_players ?? null);
|
||||
let effectiveMap = $derived(live?.map ?? server?.last_map ?? null);
|
||||
let effectiveGametype = $derived(live?.gametype ?? server?.last_gametype ?? null);
|
||||
let effectiveRoster = $derived(live?.roster ?? server?.roster ?? null);
|
||||
let effectiveHealth = $derived<Health>(live?.health ?? server?.health ?? 'offline');
|
||||
let effectiveSeen = $derived(live?.lastSeenAt ?? server?.last_seen_at ?? null);
|
||||
let effectiveErr = $derived(live?.lastError ?? server?.last_error ?? null);
|
||||
|
||||
function ago(iso: string | null): string {
|
||||
if (!iso) return 'never';
|
||||
const d = Date.now() - new Date(iso).getTime();
|
||||
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`;
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if server}
|
||||
<h1>{server.name}</h1>
|
||||
<div class="stats">
|
||||
<div class="stat">
|
||||
<div class="k">players</div>
|
||||
<div class="v">{live ?? server.last_players ?? '—'}</div>
|
||||
<section class="hero">
|
||||
<div class="hero-top">
|
||||
<div class="name-row">
|
||||
<StatusDot health={effectiveHealth} size={12} />
|
||||
<h1>{server.name}</h1>
|
||||
</div>
|
||||
<div class="player-block">
|
||||
<div class="player-count" class:has-players={(effectivePlayers ?? 0) > 0}>
|
||||
{effectivePlayers ?? '—'}
|
||||
</div>
|
||||
<div class="player-label">players</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="k">komodo</div>
|
||||
<div class="v">{server.komodo_type} · {server.komodo_name}</div>
|
||||
<div class="hero-meta">
|
||||
<span class="pair"><span class="k">map</span> <span class="v">{effectiveMap ?? '—'}</span></span>
|
||||
<span class="pair"><span class="k">mode</span> <span class="v">{gametypeLabel(effectiveGametype) || '—'}</span></span>
|
||||
<span class="pair"><span class="k">status</span> <span class="v health-{effectiveHealth}">{effectiveHealth}</span></span>
|
||||
<span class="pair"><span class="k">last seen</span> <span class="v">{ago(effectiveSeen)}</span></span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="k">rcon</div>
|
||||
<div class="v">{server.rcon_host ?? 'default'} · port {server.game_port ?? '—'}</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="k">last check</div>
|
||||
<div class="v">{server.last_checked_at ?? '—'}</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="k">held by beta</div>
|
||||
<div class="v">{server.held.length === 0 ? '—' : server.held.map((h) => h.target).join(', ')}</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if effectiveErr && effectiveHealth !== 'online'}
|
||||
<div class="hero-error">RCON: {effectiveErr}</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<h2>Deployment history</h2>
|
||||
{#if history.length === 0}
|
||||
<p class="empty">no deployments recorded on this server</p>
|
||||
{:else}
|
||||
{#each history as d (d.id)}
|
||||
{@const mine = d.servers.find((s) => s.server === name)!}
|
||||
<a class="row row-{mine.restart_state}" href="/deployments/{d.id}">
|
||||
<span class="a">{d.action}</span>
|
||||
<span class="s">{mine.restart_state}{mine.players !== null && mine.players > 0 ? ` (${mine.players}p)` : ''}</span>
|
||||
<span class="f">{mine.files_changed} file{mine.files_changed === 1 ? '' : 's'}</span>
|
||||
<span class="w">{d.started_at}</span>
|
||||
{#if mine.error}<span class="err">{mine.error}</span>{/if}
|
||||
</a>
|
||||
{/each}
|
||||
{/if}
|
||||
<section class="panel">
|
||||
<h2>Roster</h2>
|
||||
<PlayerRoster roster={effectiveRoster} health={effectiveHealth} />
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Config</h2>
|
||||
<div class="stats">
|
||||
<div class="stat">
|
||||
<div class="k">komodo</div>
|
||||
<div class="v mono">{server.komodo_type} · {server.komodo_name}</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="k">rcon</div>
|
||||
<div class="v mono">{server.rcon_host ?? 'default'} · port {server.game_port ?? '—'}</div>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div class="k">held by beta</div>
|
||||
<div class="v mono">{server.held.length === 0 ? '—' : server.held.map((h) => h.target).join(', ')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h2>Deployment history</h2>
|
||||
{#if history.length === 0}
|
||||
<p class="empty">no deployments recorded on this server</p>
|
||||
{:else}
|
||||
{#each history as d (d.id)}
|
||||
{@const mine = d.servers.find((s) => s.server === name)!}
|
||||
<a class="row row-{mine.restart_state}" href="/deployments/{d.id}">
|
||||
<span class="a">{d.action}</span>
|
||||
<span class="s">{mine.restart_state}{mine.players !== null && mine.players > 0 ? ` (${mine.players}p)` : ''}</span>
|
||||
<span class="f">{mine.files_changed} file{mine.files_changed === 1 ? '' : 's'}</span>
|
||||
<span class="w">{ago(d.started_at)}</span>
|
||||
{#if mine.error}<span class="err">{mine.error}</span>{/if}
|
||||
</a>
|
||||
{/each}
|
||||
{/if}
|
||||
</section>
|
||||
{:else}
|
||||
<p class="empty">loading…</p>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
h1 { color: #ff6060; margin: 0 0 20px; }
|
||||
h2 {
|
||||
margin: 30px 0 10px;
|
||||
font-size: 13px;
|
||||
.hero {
|
||||
background:
|
||||
linear-gradient(180deg, var(--cherry-875) 0%, var(--cherry-925) 100%);
|
||||
border: 1px solid var(--cherry-700);
|
||||
border-radius: var(--r-md);
|
||||
padding: 24px 28px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: var(--shadow-panel);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0 0 auto 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, transparent, var(--cherry-500), var(--spark-500), transparent);
|
||||
}
|
||||
.hero-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 20px;
|
||||
}
|
||||
.name-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-family: var(--font-display);
|
||||
font-size: 28px;
|
||||
letter-spacing: 1.5px;
|
||||
color: var(--cream);
|
||||
line-height: 1;
|
||||
}
|
||||
.player-block { text-align: right; }
|
||||
.player-count {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
color: var(--ink-500);
|
||||
line-height: 1;
|
||||
}
|
||||
.player-count.has-players {
|
||||
color: var(--spark-500);
|
||||
text-shadow: var(--spark-glow);
|
||||
}
|
||||
.player-label {
|
||||
font-family: var(--font-body);
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: #888;
|
||||
letter-spacing: 1.5px;
|
||||
color: var(--ink-500);
|
||||
margin-top: 4px;
|
||||
}
|
||||
.hero-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
margin-top: 18px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid var(--cherry-700);
|
||||
font-size: 13px;
|
||||
}
|
||||
.pair { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-mono); }
|
||||
.pair .k {
|
||||
color: var(--ink-500);
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.pair .v { color: var(--ink-100); }
|
||||
.v.health-online { color: var(--spark-500); }
|
||||
.v.health-stale { color: var(--amber-500); }
|
||||
.v.health-offline { color: var(--danger-500); }
|
||||
.hero-error {
|
||||
margin-top: 12px;
|
||||
padding: 8px 12px;
|
||||
background: rgba(255, 48, 80, 0.08);
|
||||
border: 1px solid rgba(255, 48, 80, 0.25);
|
||||
color: var(--danger-500);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
border-radius: var(--r-sm);
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: var(--cherry-925);
|
||||
border: 1px solid var(--cherry-700);
|
||||
border-radius: var(--r-md);
|
||||
padding: 18px 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
h2 {
|
||||
margin: 0 0 12px;
|
||||
font-family: var(--font-body);
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
color: var(--ink-300);
|
||||
}
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
.stat {
|
||||
background: #141414;
|
||||
border: 1px solid #333;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
background: var(--cherry-875);
|
||||
border: 1px solid var(--cherry-700);
|
||||
border-radius: var(--r-sm);
|
||||
padding: 10px 12px;
|
||||
}
|
||||
.k { color: #666; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.v { color: #ddd; font-family: ui-monospace, monospace; margin-top: 4px; }
|
||||
.stat .k {
|
||||
color: var(--ink-500);
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.stat .v { color: var(--ink-100); margin-top: 4px; font-size: 13px; }
|
||||
.mono { font-family: var(--font-mono); }
|
||||
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: 200px 160px 100px 220px 1fr;
|
||||
grid-template-columns: 200px 160px 100px 120px 1fr;
|
||||
gap: 12px;
|
||||
padding: 8px 12px;
|
||||
background: #141414;
|
||||
border: 1px solid #2a2a2a;
|
||||
border-radius: 4px;
|
||||
padding: 10px 14px;
|
||||
background: var(--cherry-875);
|
||||
border: 1px solid var(--cherry-700);
|
||||
border-radius: var(--r-sm);
|
||||
margin: 4px 0;
|
||||
color: #ddd;
|
||||
color: var(--ink-100);
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
font-family: ui-monospace, monospace;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.row:hover { border-color: var(--spark-500); box-shadow: var(--spark-glow); }
|
||||
.row-done { border-left: 3px solid var(--spark-500); }
|
||||
.row-failed { border-left: 3px solid var(--danger-500); }
|
||||
.row-pending { border-left: 3px solid var(--amber-500); }
|
||||
.row-held { border-left: 3px solid var(--cream); }
|
||||
.row-manual { border-left: 3px solid var(--ink-500); }
|
||||
.a { color: var(--cream); }
|
||||
.s { color: var(--ink-300); }
|
||||
.f { color: var(--ink-500); }
|
||||
.w { color: var(--ink-500); }
|
||||
.err { color: var(--danger-500); }
|
||||
.empty {
|
||||
color: var(--ink-500);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 13px;
|
||||
}
|
||||
.row-done { border-left: 3px solid #2d4a2d; }
|
||||
.row-failed { border-left: 3px solid #4a2d2d; }
|
||||
.row-pending { border-left: 3px solid #3a2f00; }
|
||||
.a { color: #ddd; }
|
||||
.s { color: #aaa; }
|
||||
.f { color: #888; }
|
||||
.w { color: #666; }
|
||||
.err { color: #ff6060; }
|
||||
.empty { color: #666; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user