Refresh Fleet with discovery, operation progress, and lobby watches
This commit is contained in:
+294
-227
@@ -1,257 +1,324 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { cubicOut } from 'svelte/easing';
|
||||
import ServerCard from '$ui/components/ServerCard.svelte';
|
||||
import DeployServerDialog from '$ui/components/DeployServerDialog.svelte';
|
||||
import { statusByServer } from '$ui/stores/servers.js';
|
||||
import { deployments } from '$ui/stores/pipeline.js';
|
||||
import type { RosterPlayer, Health } from '$ui/stores/servers.js';
|
||||
import Button from '$ui/components/primitives/Button.svelte';
|
||||
import Stat from '$ui/components/primitives/Stat.svelte';
|
||||
import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
|
||||
import EmptyState from '$ui/components/primitives/EmptyState.svelte';
|
||||
import Card from '$ui/components/primitives/Card.svelte';
|
||||
import StatusPip from '$ui/components/primitives/StatusPip.svelte';
|
||||
import { fleet, fleetServers, fleetError, fleetRefreshing, refreshFleet, lobbyWatches, followLobby, cancelWatch } from '$ui/stores/fleet.js';
|
||||
import { telemetryByServer, uiNow } from '$ui/stores/servers.js';
|
||||
import { currentRound, fleetIdentity, freshServer, matchesFleet } from '$lib/fleet-overview.js';
|
||||
import type { FleetServer, FleetFilter, FleetSort } from '$lib/fleet-overview.js';
|
||||
import type { ZombieGame } from '$lib/map-aliases.js';
|
||||
import { elapsedSince } from '$ui/duration.js';
|
||||
import { serverTitle } from '$ui/server-labels.js';
|
||||
|
||||
interface HeldRow { target: string; betaId: number; }
|
||||
interface ServerRow {
|
||||
name: string;
|
||||
komodo_type: string;
|
||||
komodo_name: string;
|
||||
game_port: number | null;
|
||||
rcon_host: string | null;
|
||||
last_players: number | null;
|
||||
last_map: string | null;
|
||||
last_gametype: string | null;
|
||||
last_seen_at: string | null;
|
||||
last_error: string | null;
|
||||
roster: RosterPlayer[] | null;
|
||||
health: Health;
|
||||
endpoint: { host: string; port: number } | null;
|
||||
held: HeldRow[];
|
||||
active_since: string | null;
|
||||
inactive_since: string | null;
|
||||
game_started_at: string | null;
|
||||
game_ended_at: string | null;
|
||||
}
|
||||
|
||||
let servers = $state<ServerRow[]>([]);
|
||||
let query = $state('');
|
||||
let filter = $state<FleetFilter>('all');
|
||||
let game = $state('');
|
||||
let sort = $state<FleetSort>('name');
|
||||
let view = $state<'cards' | 'table'>('cards');
|
||||
let grouping = $state<'map' | 'game' | 'none'>('none');
|
||||
let operationsOpen = $state(false);
|
||||
let pinned = $state<string[]>([]);
|
||||
let preferencesReady = $state(false);
|
||||
let deployOpen = $state(false);
|
||||
|
||||
async function refresh(): Promise<void> {
|
||||
const res = await fetch('/api/servers');
|
||||
const body = (await res.json()) as { servers: ServerRow[] };
|
||||
servers = body.servers;
|
||||
}
|
||||
let initialGame = $state<ZombieGame>('t5');
|
||||
let initialMapSlug = $state('');
|
||||
const filters: { id: FleetFilter; label: string }[] = [
|
||||
{ id: 'all', label: 'All' }, { id: 'occupied', label: 'Occupied' }, { id: 'empty', label: 'Empty' },
|
||||
{ id: 'attention', label: 'Needs attention' }, { id: 'testing', label: 'Testing' }, { id: 'pinned', label: 'Pinned' }
|
||||
];
|
||||
|
||||
onMount(() => {
|
||||
refresh();
|
||||
try {
|
||||
const saved = JSON.parse(localStorage.getItem('electric-cherry:fleet') ?? '{}');
|
||||
if (saved.view === 'cards' || saved.view === 'table') view = saved.view;
|
||||
if (['map', 'game', 'none'].includes(saved.grouping)) grouping = saved.grouping;
|
||||
if (['name', 'players', 'round', 'duration'].includes(saved.sort)) sort = saved.sort;
|
||||
if (filters.some(item => item.id === saved.filter)) filter = saved.filter;
|
||||
if (['', 't5', 't6'].includes(saved.game)) game = saved.game;
|
||||
if (Array.isArray(saved.pinned)) pinned = saved.pinned.filter((name: unknown) => typeof name === 'string');
|
||||
} catch { /* Preferences also work when storage is disabled. */ }
|
||||
preferencesReady = true;
|
||||
void refreshFleet();
|
||||
});
|
||||
|
||||
function liveFor(name: string, fallback: ServerRow) {
|
||||
const live = $statusByServer.get(name);
|
||||
if (!live) {
|
||||
return {
|
||||
players: fallback.last_players,
|
||||
map: fallback.last_map,
|
||||
gametype: fallback.last_gametype,
|
||||
roster: fallback.roster,
|
||||
health: fallback.health,
|
||||
lastSeenAt: fallback.last_seen_at,
|
||||
lastError: fallback.last_error,
|
||||
activeSince: fallback.active_since,
|
||||
inactiveSince: fallback.inactive_since,
|
||||
gameStartedAt: fallback.game_started_at,
|
||||
gameEndedAt: fallback.game_ended_at
|
||||
};
|
||||
}
|
||||
return {
|
||||
players: live.players,
|
||||
map: live.map,
|
||||
gametype: live.gametype,
|
||||
roster: live.roster,
|
||||
health: live.health,
|
||||
lastSeenAt: live.lastSeenAt,
|
||||
lastError: live.lastError,
|
||||
activeSince: live.activeSince,
|
||||
inactiveSince: live.inactiveSince,
|
||||
gameStartedAt: live.gameStartedAt,
|
||||
gameEndedAt: live.gameEndedAt
|
||||
};
|
||||
}
|
||||
$effect(() => {
|
||||
if (!preferencesReady) return;
|
||||
try { localStorage.setItem('electric-cherry:fleet', JSON.stringify({ view, grouping, sort, filter, game, pinned })); }
|
||||
catch { /* The current view still works without persistent storage. */ }
|
||||
});
|
||||
|
||||
// Aggregate fleet metrics — pulled from the same SSE store cards use, so
|
||||
// the hero and grid stay perfectly consistent.
|
||||
let liveViews = $derived(servers.map((s) => liveFor(s.name, s)));
|
||||
let totalPlayers = $derived(
|
||||
liveViews.reduce((sum, v) => sum + (v.players ?? 0), 0)
|
||||
);
|
||||
let activeCount = $derived(
|
||||
liveViews.filter((v) => v.health === 'online').length
|
||||
);
|
||||
let totalCount = $derived(servers.length);
|
||||
let inFlightCampaigns = $derived(
|
||||
Array.from($deployments.values()).filter((d) => {
|
||||
for (const s of d.servers.values()) if (s.state === 'pending') return true;
|
||||
return false;
|
||||
}).length
|
||||
);
|
||||
let activeRatio = $derived(totalCount > 0 ? activeCount / totalCount : 0);
|
||||
let servers = $derived($fleetServers.map(server => server.health === 'online' && !freshServer(server, $uiNow)
|
||||
? { ...server, health: 'stale' as const } : server));
|
||||
let activeOperations = $derived($fleet.operations.filter(op => op.state !== 'done'));
|
||||
let attentionOperations = $derived(activeOperations.filter(op => op.state === 'attention'));
|
||||
let campaigns = $derived(new Set(activeOperations.filter(op => op.kind === 'campaign').map(op => op.group)).size);
|
||||
let healthy = $derived(servers.filter(server => freshServer(server, $uiNow)));
|
||||
let players = $derived(healthy.reduce((sum, server) => sum + (server.last_players ?? 0), 0));
|
||||
let empty = $derived(healthy.filter(server => server.last_players === 0).length);
|
||||
let problems = $derived(servers.filter(server => server.health === 'offline' || server.health === 'stale'));
|
||||
let starting = $derived(servers.filter(server => server.health === 'starting').length);
|
||||
let filtered = $derived(servers.filter(server => matchesFleet(server, query, filter, game, pinned, activeOperations, $uiNow))
|
||||
.sort((a, b) => {
|
||||
const pinOrder = Number(pinned.includes(b.name)) - Number(pinned.includes(a.name));
|
||||
if (pinOrder) return pinOrder;
|
||||
const rank = (server: FleetServer) => sort === 'players' ? (freshServer(server, $uiNow) ? server.last_players ?? -1 : -1)
|
||||
: sort === 'round' ? currentRound(server, $telemetryByServer.get(server.name), $uiNow) ?? -1
|
||||
: sort === 'duration' ? matchDuration(server) : 0;
|
||||
return rank(b) - rank(a) || serverTitle(a.name).localeCompare(serverTitle(b.name), undefined, { numeric: true });
|
||||
}));
|
||||
let groups = $derived.by(() => {
|
||||
const result = new Map<string, { title: string; game: string; servers: FleetServer[]; launch: ReturnType<typeof fleetIdentity>['launch'] }>();
|
||||
for (const server of filtered) {
|
||||
const identity = fleetIdentity(server);
|
||||
const key = grouping === 'map' ? identity.group : grouping === 'game' ? identity.game : 'all';
|
||||
if (!result.has(key)) result.set(key, { title: grouping === 'map' ? identity.map : grouping === 'game'
|
||||
? identity.game.toUpperCase() || 'Other servers' : 'All servers', game: identity.game,
|
||||
servers: [], launch: grouping === 'map' ? identity.launch : null });
|
||||
result.get(key)!.servers.push(server);
|
||||
}
|
||||
return [...result.entries()].sort(([, a], [, b]) => a.title.localeCompare(b.title));
|
||||
});
|
||||
let spotlight = $derived(servers.filter(server => currentRound(server, $telemetryByServer.get(server.name), $uiNow) !== null)
|
||||
.sort((a, b) => matchDuration(b) - matchDuration(a))[0]);
|
||||
|
||||
function matchDuration(server: FleetServer): number {
|
||||
return freshServer(server, $uiNow) && server.active_since && server.game_started_at && !server.game_ended_at
|
||||
&& (server.last_players ?? 0) > 0 ? Math.max(0, $uiNow - Date.parse(server.game_started_at)) : -1;
|
||||
}
|
||||
function togglePin(name: string) { pinned = pinned.includes(name) ? pinned.filter(item => item !== name) : [...pinned, name]; }
|
||||
function launch(selection: { game: ZombieGame; slug: string } | null = null) {
|
||||
initialGame = selection?.game ?? 't5'; initialMapSlug = selection?.slug ?? ''; deployOpen = true;
|
||||
}
|
||||
function watch(server: FleetServer, event: Event) {
|
||||
const input = event.currentTarget as HTMLSelectElement;
|
||||
const value = input.value;
|
||||
input.value = '';
|
||||
if (value === 'empty' || value === 'online') followLobby(server.name, value);
|
||||
else {
|
||||
const operation = activeOperations.find(op => op.key === value);
|
||||
if (operation) followLobby(server.name, 'operation', operation);
|
||||
}
|
||||
}
|
||||
function resetFilters() { query = ''; filter = 'all'; game = ''; }
|
||||
</script>
|
||||
|
||||
<section class="page">
|
||||
<!-- Fleet Overview — the first thing the eye lands on: three big numbers
|
||||
that tell the operator the state of the world in under half a second. -->
|
||||
<div class="hero">
|
||||
<Card padding="lg" elevation="flat">
|
||||
<div class="hero-grid">
|
||||
<div class="hero-cell">
|
||||
<Stat
|
||||
label="Players online"
|
||||
value={totalPlayers}
|
||||
size="xl"
|
||||
tone={totalPlayers > 0 ? 'online' : 'primary'}
|
||||
tween
|
||||
/>
|
||||
</div>
|
||||
<div class="hero-cell">
|
||||
<Stat
|
||||
label="Active servers"
|
||||
value={`${activeCount}/${totalCount}`}
|
||||
size="xl"
|
||||
tone="primary"
|
||||
tween={false}
|
||||
/>
|
||||
<div class="ratio-bar" aria-hidden="true">
|
||||
<div class="ratio-fill" style="width: {activeRatio * 100}%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-cell">
|
||||
<a class="deploy-link" href="/campaigns">
|
||||
<Stat
|
||||
label="Campaigns in flight"
|
||||
value={inFlightCampaigns}
|
||||
size="xl"
|
||||
tone={inFlightCampaigns > 0 ? 'accent' : 'primary'}
|
||||
tween
|
||||
/>
|
||||
<span class="link-hint">View →</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<svelte:head><title>Fleet · Electric Cherry</title></svelte:head>
|
||||
|
||||
<SectionHeader
|
||||
title="Fleet"
|
||||
subtitle={totalCount === 1 ? '1 server' : `${totalCount} servers`}
|
||||
>
|
||||
<section class="page">
|
||||
<SectionHeader title="Fleet" subtitle="Your lobbies. Every player. The next move.">
|
||||
{#snippet actions()}
|
||||
<Button variant="primary" size="md" onclick={() => (deployOpen = true)}>
|
||||
Deploy new server
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" loading={$fleetRefreshing} onclick={() => void refreshFleet()}>Refresh</Button>
|
||||
<Button variant="primary" onclick={() => launch()}>Deploy new server</Button>
|
||||
{/snippet}
|
||||
</SectionHeader>
|
||||
<DeployServerDialog bind:open={deployOpen} {initialGame} {initialMapSlug} />
|
||||
|
||||
<DeployServerDialog bind:open={deployOpen} />
|
||||
{#if $fleetError}
|
||||
<div class="error" role="alert"><strong>{$fleet.receivedAt ? 'Showing the last available snapshot.' : 'Fleet is unavailable.'}</strong> {$fleetError}
|
||||
<button onclick={() => void refreshFleet()}>Retry now</button></div>
|
||||
{/if}
|
||||
|
||||
{#if servers.length === 0}
|
||||
<EmptyState
|
||||
title="No servers registered yet"
|
||||
description="Point SERVERS_ROOT at your fleet directory and refresh to hydrate the dashboard."
|
||||
/>
|
||||
{#if !$fleet.receivedAt}
|
||||
{#if !$fleetError}<div class="loading" role="status">Loading your fleet…</div>{/if}
|
||||
{:else}
|
||||
<div class="cards">
|
||||
{#each servers as s, i (s.name)}
|
||||
{@const live = liveFor(s.name, s)}
|
||||
<div in:fly={{ y: 12, duration: 320, delay: Math.min(i * 40, 320), easing: cubicOut }}>
|
||||
<ServerCard
|
||||
name={s.name}
|
||||
players={live.players}
|
||||
map={live.map}
|
||||
gametype={live.gametype}
|
||||
roster={live.roster}
|
||||
health={live.health}
|
||||
lastSeenAt={live.lastSeenAt}
|
||||
lastError={live.lastError}
|
||||
held={s.held}
|
||||
activeSince={live.activeSince}
|
||||
inactiveSince={live.inactiveSince}
|
||||
gameStartedAt={live.gameStartedAt}
|
||||
gameEndedAt={live.gameEndedAt}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
<div class="overview">
|
||||
<div><Stat label="Players online" value={players} size="lg" tone={players > 0 ? 'online' : 'primary'} tween /><span class="hint">From fresh server reports</span></div>
|
||||
<div><Stat label="Healthy servers" value={`${healthy.length}/${servers.length}`} size="lg" tween={false} /><span class="hint">{starting ? `${starting} starting` : 'Live fleet status'}</span></div>
|
||||
<button class="metric-link" onclick={() => { resetFilters(); filter = 'empty'; }}><Stat label="Empty lobbies" value={empty} size="lg" tween /><span class="hint">Find an open lobby →</span></button>
|
||||
<a class="metric-link" href="/campaigns"><Stat label="Active campaigns" value={campaigns} size="lg" tween /><span class="hint">View progress →</span></a>
|
||||
</div>
|
||||
|
||||
{#if servers.length || activeOperations.length}
|
||||
<div class="attention" class:has-issues={problems.length > 0 || attentionOperations.length > 0}>
|
||||
<span class="attention-mark" aria-hidden="true">{problems.length || attentionOperations.length ? '!' : '✓'}</span>
|
||||
<div class="attention-copy">
|
||||
{#if problems.length}
|
||||
<button onclick={() => { resetFilters(); filter = 'attention'; }}>{problems.length} {problems.length === 1 ? 'server needs' : 'servers need'} attention →</button>
|
||||
{:else}<strong>{servers.length ? starting ? `${starting} ${starting === 1 ? 'server is' : 'servers are'} starting` : 'All servers healthy' : 'Preparing your fleet'}</strong>{/if}
|
||||
<span>{problems.length ? 'Open a server to inspect its connection and diagnostics.' : 'Live health, match reports, and operation progress in one place.'}</span>
|
||||
</div>
|
||||
{#if attentionOperations.length}<a href="#fleet-operations" onclick={() => operationsOpen = true}>{attentionOperations.length} operation {attentionOperations.length === 1 ? 'needs' : 'need'} attention →</a>{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if spotlight}
|
||||
<a class="spotlight" href="/servers/{encodeURIComponent(spotlight.name)}">
|
||||
<div><span class="eyebrow">Longest running match</span><strong>{serverTitle(spotlight.name)}</strong></div>
|
||||
<span class="round">Round {currentRound(spotlight, $telemetryByServer.get(spotlight.name), $uiNow)}</span>
|
||||
<span>{spotlight.last_players} {spotlight.last_players === 1 ? 'survivor' : 'survivors'} · {elapsedSince(spotlight.game_started_at, $uiNow)} <span aria-hidden="true">→</span></span>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
{#if $lobbyWatches.length}
|
||||
<div class="watches" aria-label="Lobby watches">
|
||||
<div><strong>Following {$lobbyWatches.length} {$lobbyWatches.length === 1 ? 'condition' : 'conditions'}</strong><span class="hint">Notifications stay active as you navigate. Keep this app open.</span></div>
|
||||
{#each $lobbyWatches as item (item.id)}
|
||||
<button title="Cancel this watch" onclick={() => cancelWatch(item.id)} aria-label="Cancel {item.kind} watch for {serverTitle(item.server)}">{serverTitle(item.server)} · {item.kind === 'empty' ? 'when empty' : item.kind === 'online' ? 'when online' : 'when complete'} ×</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if activeOperations.length}
|
||||
<details id="fleet-operations" class="operations" bind:open={operationsOpen}>
|
||||
<summary>{activeOperations.length} server {activeOperations.length === 1 ? 'operation' : 'operations'} in progress{attentionOperations.length ? ` · ${attentionOperations.length} need attention` : ''}</summary>
|
||||
<div class="operation-list">{#each activeOperations as operation (operation.key)}
|
||||
<a href={operation.href} class:issue={operation.state === 'attention'}><strong>{serverTitle(operation.server)}</strong><span>{operation.label}</span><small>{operation.detail}</small></a>
|
||||
{/each}</div>
|
||||
</details>
|
||||
{/if}
|
||||
|
||||
{#if servers.length === 0}
|
||||
<EmptyState title="Your first lobby starts here" description="Deploy a server or choose a saved blueprint to bring your fleet online." />
|
||||
{:else}
|
||||
<div class="toolbar">
|
||||
<div class="search-row">
|
||||
<label class="search"><span>Find a lobby or player</span><input type="search" bind:value={query} placeholder="Search players, maps, or server names…" /></label>
|
||||
<label>Game<select bind:value={game}><option value="">All games</option><option value="t5">T5 · Black Ops</option><option value="t6">T6 · Black Ops II</option></select></label>
|
||||
<label>Group by<select bind:value={grouping}><option value="map">Map</option><option value="game">Game</option><option value="none">None</option></select></label>
|
||||
<label>Sort by<select bind:value={sort}><option value="name">Lobby name</option><option value="players">Most players</option><option value="round">Highest round</option><option value="duration">Longest match</option></select></label>
|
||||
</div>
|
||||
<div class="filter-row">
|
||||
<div class="chips" aria-label="Filter servers">{#each filters as item}
|
||||
<button class:selected={filter === item.id} aria-pressed={filter === item.id} onclick={() => filter = item.id}>{item.label}<span>{servers.filter(server => matchesFleet(server, '', item.id, game, pinned, activeOperations, $uiNow)).length}</span></button>
|
||||
{/each}</div>
|
||||
<div class="view-toggle" aria-label="Display mode"><button class:selected={view === 'cards'} aria-pressed={view === 'cards'} onclick={() => view = 'cards'}>Cards</button><button class:selected={view === 'table'} aria-pressed={view === 'table'} onclick={() => view = 'table'}>Table</button></div>
|
||||
</div>
|
||||
<div class="result-count"><span role="status">Showing {filtered.length} of {servers.length} servers</span>{#if query || filter !== 'all' || game}<button onclick={resetFilters}>Clear filters</button>{/if}<span class="hint">Pinned lobbies appear first in each group.</span></div>
|
||||
</div>
|
||||
|
||||
{#if filtered.length === 0}<EmptyState title="No matching lobbies" description="Try a different player or map, or clear your filters." />{/if}
|
||||
{#each groups as [key, group] (key)}
|
||||
<section class="map-group" aria-label={group.title}>
|
||||
<div class="group-heading"><div><span class="eyebrow">{grouping === 'map' ? group.game.toUpperCase() : 'Fleet lineup'}</span><h2>{group.title}</h2><p>{group.servers.length} {group.servers.length === 1 ? 'lobby' : 'lobbies'} · {group.servers.reduce((sum, s) => sum + (freshServer(s, $uiNow) ? s.last_players ?? 0 : 0), 0)} players · {group.servers.filter(s => freshServer(s, $uiNow) && s.last_players === 0).length} empty</p></div>
|
||||
{#if group.launch}<Button size="sm" onclick={() => launch(group.launch)}>Add another lobby</Button>{/if}
|
||||
</div>
|
||||
{#if view === 'cards'}
|
||||
<div class="cards">{#each group.servers as server (server.name)}
|
||||
<article class="server-tile" class:pinned={pinned.includes(server.name)}>
|
||||
<ServerCard name={server.name} players={server.last_players} map={server.last_map ?? server.map}
|
||||
gametype={server.last_gametype} roster={server.roster} health={server.health}
|
||||
lastSeenAt={server.last_seen_at} lastError={server.last_error} held={server.held}
|
||||
activeSince={server.active_since} inactiveSince={server.inactive_since}
|
||||
gameStartedAt={server.game_started_at} gameEndedAt={server.game_ended_at} compactEmpty
|
||||
mapLabelOverride={fleetIdentity(server).map} />
|
||||
{@render serverOperations(server)}
|
||||
<div class="tile-actions">{@render serverActions(server)}</div>
|
||||
</article>
|
||||
{/each}</div>
|
||||
{:else}
|
||||
<div class="table-scroll"><table><caption class="sr-only">{group.title} servers</caption><thead><tr><th>Lobby</th><th>Status</th><th>Players</th><th>Round / match</th><th>Operation</th><th>Follow</th></tr></thead><tbody>
|
||||
{#each group.servers as server (server.name)}
|
||||
{@const round = currentRound(server, $telemetryByServer.get(server.name), $uiNow)}
|
||||
<tr><td><a class="lobby-link" href="/servers/{encodeURIComponent(server.name)}">{serverTitle(server.name)}</a><small>{fleetIdentity(server).map}</small></td>
|
||||
<td><span class="health"><StatusPip health={server.health} />{server.health}</span></td><td>{freshServer(server, $uiNow) ? server.last_players ?? '—' : '—'}</td>
|
||||
<td>{round !== null ? `Round ${round}` : '—'}{#if matchDuration(server) >= 0}<small>{elapsedSince(server.game_started_at, $uiNow)}</small>{/if}</td>
|
||||
<td>{@render serverOperations(server, true)}</td><td><div class="table-actions">{@render serverActions(server)}</div></td></tr>
|
||||
{/each}
|
||||
</tbody></table></div>
|
||||
{/if}
|
||||
</section>
|
||||
{/each}
|
||||
{/if}
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
{#snippet serverOperations(server: FleetServer, showEmpty = false)}
|
||||
{@const operations = activeOperations.filter(op => op.server === server.name)}
|
||||
{#if operations.length}<div class="server-operations">{#each operations as operation (operation.key)}
|
||||
<a href={operation.href} class:issue={operation.state === 'attention'} title={operation.detail}><span>{operation.label} →</span><small>{operation.detail}</small></a>
|
||||
{/each}</div>{:else if showEmpty}<span class="hint">No pending work</span>{/if}
|
||||
{/snippet}
|
||||
|
||||
{#snippet serverActions(server: FleetServer)}
|
||||
<button class="pin" class:selected={pinned.includes(server.name)} aria-pressed={pinned.includes(server.name)} aria-label="Pin {serverTitle(server.name)}" onclick={() => togglePin(server.name)}>{pinned.includes(server.name) ? '★ Pinned' : '☆ Pin'}</button>
|
||||
<select class="watch-select" aria-label="Follow {serverTitle(server.name)}" onchange={event => watch(server, event)}>
|
||||
<option value="">Follow lobby…</option>
|
||||
<option value="empty" disabled={freshServer(server, $uiNow) && server.last_players === 0}>Tell me when it’s empty</option>
|
||||
<option value="online" disabled={freshServer(server, $uiNow)}>Tell me when it’s online</option>
|
||||
{#each activeOperations.filter(op => op.server === server.name && (op.kind === 'campaign' || op.kind === 'deployment') && op.state === 'active') as operation (operation.key)}
|
||||
<option value={operation.key}>When complete: {operation.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
{/snippet}
|
||||
|
||||
<style>
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-10);
|
||||
}
|
||||
|
||||
.hero-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: var(--space-8);
|
||||
}
|
||||
.hero-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ratio-bar {
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
max-width: 220px;
|
||||
background: var(--surface-overlay);
|
||||
border-radius: var(--radius-pill);
|
||||
overflow: hidden;
|
||||
}
|
||||
.ratio-fill {
|
||||
height: 100%;
|
||||
background: var(--accent-primary);
|
||||
transition: width var(--dur-slow) var(--ease-standard);
|
||||
}
|
||||
|
||||
.deploy-link {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
border-radius: var(--radius-md);
|
||||
transition: opacity var(--dur-fast) var(--ease-standard);
|
||||
}
|
||||
.deploy-link:hover { opacity: 0.85; }
|
||||
.deploy-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
|
||||
.link-hint {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
letter-spacing: var(--tracking-wide);
|
||||
}
|
||||
|
||||
.cards {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
}
|
||||
.cards > div { display: flex; flex-direction: column; }
|
||||
.cards > div > :global(*) { flex: 1; }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.hero-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--space-5);
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.cards { grid-template-columns: 1fr; }
|
||||
}
|
||||
.page { display: flex; flex-direction: column; gap: 24px; }
|
||||
button, input, select { font: inherit; }
|
||||
button { cursor: pointer; }
|
||||
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--accent-primary-hover); outline-offset: 3px; }
|
||||
.overview { display: grid; grid-template-columns: repeat(4, 1fr); padding: 24px; gap: 24px; background: var(--surface); border-radius: 16px; border: 1px solid var(--border-subtle); }
|
||||
.overview > * { min-width: 0; }
|
||||
.metric-link { text-align: left; color: inherit; text-decoration: none; background: none; border: 0; padding: 0; }
|
||||
.metric-link:hover .hint { color: var(--accent-primary-hover); }
|
||||
.hint { display: block; color: var(--text-secondary); font-size: 12px; margin-top: 6px; }
|
||||
.attention { display: flex; gap: 14px; align-items: center; padding: 16px 20px; border: 1px solid var(--border-subtle); border-radius: 12px; }
|
||||
.attention-mark { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--surface-raised); color: var(--state-online); }
|
||||
.has-issues { border-color: color-mix(in srgb, var(--state-warning) 35%, transparent); }
|
||||
.has-issues .attention-mark { color: var(--state-warning); }
|
||||
.attention-copy { flex: 1; display: flex; flex-direction: column; gap: 5px; }
|
||||
.attention-copy span { font-size: 13px; color: var(--text-secondary); }
|
||||
.attention button, .result-count button, .error button { background: none; color: var(--accent-primary-hover); border: 0; padding: 0; text-align: left; }
|
||||
.attention a { font-size: 13px; color: var(--state-warning); }
|
||||
.spotlight { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; padding: 20px 24px; background: linear-gradient(110deg, color-mix(in srgb, var(--accent-primary) 15%, var(--surface)), var(--surface)); border: 1px solid var(--border-strong); border-radius: 14px; color: var(--text-primary); text-decoration: none; }
|
||||
.spotlight > div { flex: 1; min-width: 190px; }
|
||||
.spotlight strong { display: block; margin-top: 6px; }
|
||||
.spotlight > span:last-child { color: var(--text-secondary); font-size: 13px; }
|
||||
.round { font-family: var(--font-mono); font-size: 23px; color: var(--state-online); }
|
||||
.eyebrow { color: var(--text-secondary); text-transform: uppercase; font-size: 10px; letter-spacing: .12em; font-weight: 600; }
|
||||
.toolbar { display: flex; flex-direction: column; gap: 18px; }
|
||||
.search-row { display: flex; gap: 12px; flex-wrap: wrap; }
|
||||
label { display: flex; flex-direction: column; gap: 8px; color: var(--text-secondary); font-size: 12px; }
|
||||
.search { flex: 1; min-width: min(280px, 100%); }
|
||||
input, select { color: var(--text-primary); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; min-height: 42px; padding: 10px 12px; max-width: 100%; }
|
||||
input::placeholder { color: var(--text-secondary); }
|
||||
.filter-row, .result-count { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
|
||||
.chips, .view-toggle { display: flex; gap: 6px; flex-wrap: wrap; }
|
||||
.chips button, .view-toggle button, .pin, .watches button { background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 12px; color: var(--text-secondary); font-size: 12px; }
|
||||
.chips button span { margin-left: 8px; opacity: .75; font-variant-numeric: tabular-nums; }
|
||||
button.selected { background: color-mix(in srgb, var(--accent-primary) 15%, var(--surface)); color: var(--accent-primary-hover); border-color: color-mix(in srgb, var(--accent-primary) 50%, transparent); }
|
||||
.result-count { justify-content: flex-start; font-size: 12px; color: var(--text-secondary); }
|
||||
.result-count .hint { margin: 0 0 0 auto; }
|
||||
.map-group { display: flex; flex-direction: column; gap: 16px; }
|
||||
.group-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
|
||||
h2 { margin: 4px 0 6px; font-size: 20px; letter-spacing: -.03em; }
|
||||
.group-heading p { margin: 0; color: var(--text-secondary); font-size: 12px; }
|
||||
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: 16px; align-items: start; }
|
||||
.server-tile { min-width: 0; border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; background: var(--surface); }
|
||||
.server-tile.pinned { border-color: color-mix(in srgb, var(--accent-primary) 50%, transparent); }
|
||||
.server-tile :global(.card) { border-radius: 0; }
|
||||
.tile-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border-subtle); }
|
||||
.pin { white-space: nowrap; }
|
||||
.watch-select { font-size: 12px; min-height: 36px; min-width: 0; width: 145px; padding: 6px; }
|
||||
.server-operations { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; font-size: 12px; }
|
||||
.server-operations a { text-decoration: none; color: var(--accent-primary-hover); overflow-wrap: anywhere; }
|
||||
.server-operations small { display: block; margin-top: 5px; color: var(--text-secondary); }
|
||||
.server-operations .issue, .operation-list .issue { color: var(--state-warning); }
|
||||
.operations { border: 1px solid var(--border-subtle); padding: 16px 20px; border-radius: 12px; font-size: 13px; }
|
||||
summary { cursor: pointer; }
|
||||
.operation-list { display: grid; gap: 10px; margin-top: 16px; }
|
||||
.operation-list a { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; padding: 12px; text-decoration: none; background: var(--surface); border-radius: 8px; color: var(--text-primary); }
|
||||
.operation-list small { grid-column: 1 / -1; color: var(--text-secondary); overflow-wrap: anywhere; }
|
||||
.watches { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; }
|
||||
.watches > div { margin-right: auto; }
|
||||
.error { padding: 16px; border: 1px solid var(--state-warning); border-radius: 12px; font-size: 13px; line-height: 1.7; }
|
||||
.error button { margin-left: 8px; }
|
||||
.loading { padding: 70px 20px; text-align: center; color: var(--text-secondary); background: var(--surface); border-radius: 16px; }
|
||||
.table-scroll { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: 12px; }
|
||||
table { width: 100%; border-collapse: collapse; background: var(--surface); font-size: 13px; text-align: left; }
|
||||
th { color: var(--text-secondary); font-weight: 500; white-space: nowrap; font-size: 12px; }
|
||||
th, td { padding: 14px 16px; border-bottom: 1px solid var(--border-subtle); }
|
||||
tr:last-child td { border-bottom: 0; }
|
||||
td small { display: block; color: var(--text-secondary); margin-top: 6px; }
|
||||
td .server-operations { padding: 0; min-width: 180px; }
|
||||
.lobby-link { color: var(--text-primary); text-decoration: none; font-weight: 600; white-space: nowrap; }
|
||||
.health { display: flex; align-items: center; gap: 8px; text-transform: capitalize; }
|
||||
.table-actions { display: flex; align-items: center; gap: 8px; }
|
||||
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
|
||||
@media (max-width: 900px) { .overview { grid-template-columns: repeat(2, 1fr); } .attention { flex-wrap: wrap; } }
|
||||
@media (max-width: 600px) { .page { gap: 20px; } .overview { padding: 18px; gap: 22px 16px; } .search-row > label:not(.search) { flex: 1; min-width: 100px; } .search { flex-basis: 100%; } .group-heading { align-items: flex-start; } .result-count .hint { width: 100%; margin: 0; } .spotlight { padding: 18px; gap: 12px; } .spotlight > div { flex-basis: 100%; } .operation-list a { grid-template-columns: 1fr; } }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user