46 lines
1.4 KiB
Svelte
46 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import { timeFormat } from '$ui/stores/time-zone.js';
|
|
import { telemetryByServer, uiNow } from '$ui/stores/servers.js';
|
|
import { freshStatusTimestamp } from '$lib/server-freshness.js';
|
|
import { elapsedSince } from '$ui/duration.js';
|
|
import type { GameTelemetry } from '$lib/telemetry.js';
|
|
let {
|
|
name,
|
|
since = null,
|
|
report: observation
|
|
}: { name: string; since?: string | null; report?: GameTelemetry } = $props();
|
|
let report = $derived(observation ?? $telemetryByServer.get(name));
|
|
let fresh = $derived(
|
|
report &&
|
|
freshStatusTimestamp(report.receivedAt, $uiNow) &&
|
|
(!since || Date.parse(report.receivedAt) >= Date.parse(since))
|
|
);
|
|
</script>
|
|
|
|
{#if report && (report.event === 'round_change' || report.event === 'heartbeat') && fresh}
|
|
<div class="round">
|
|
<strong>Round {report.round}</strong>
|
|
<span title={$timeFormat.dateTime(report.receivedAt)}
|
|
>Last reported {elapsedSince(report.receivedAt, $uiNow)} ago</span
|
|
>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.round {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
gap: var(--space-2);
|
|
}
|
|
strong {
|
|
color: var(--text-primary);
|
|
font-family: var(--font-numeric);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
span {
|
|
color: var(--text-tertiary);
|
|
font-size: var(--text-xs);
|
|
}
|
|
</style>
|