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:
@@ -0,0 +1,37 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
}
|
||||
let { size = 'md' }: Props = $props();
|
||||
</script>
|
||||
|
||||
<span class="mark mark-{size}">
|
||||
<svg class="bolt" viewBox="0 0 12 20" aria-hidden="true">
|
||||
<path d="M7 0 L1 11 L5 11 L4 20 L11 8 L7 8 Z" />
|
||||
</svg>
|
||||
<span class="word">ELECTRIC CHERRY</span>
|
||||
</span>
|
||||
|
||||
<style>
|
||||
.mark {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-family: var(--font-display);
|
||||
color: var(--cream);
|
||||
letter-spacing: 2px;
|
||||
line-height: 1;
|
||||
animation: cherry-fizz 6s ease-in-out infinite;
|
||||
}
|
||||
.mark-sm .word { font-size: 12px; letter-spacing: 1.5px; }
|
||||
.mark-md .word { font-size: 16px; }
|
||||
.mark-lg .word { font-size: 26px; letter-spacing: 3px; }
|
||||
|
||||
.bolt {
|
||||
fill: var(--spark-500);
|
||||
filter: drop-shadow(0 0 4px rgba(34, 224, 255, 0.7));
|
||||
}
|
||||
.mark-sm .bolt { width: 10px; height: 16px; }
|
||||
.mark-md .bolt { width: 12px; height: 20px; }
|
||||
.mark-lg .bolt { width: 18px; height: 30px; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user