462 lines
16 KiB
Svelte
462 lines
16 KiB
Svelte
<script lang="ts">
|
|
import { timeFormat } from '$ui/stores/time-zone.js';
|
|
import type { GameTelemetry } from '$lib/telemetry.js';
|
|
import { freshTelemetry } from '$lib/server-observation.js';
|
|
import { uiNow } from '$ui/stores/servers.js';
|
|
import { elapsedSince } from '$ui/duration.js';
|
|
import { mapTitle } from '$ui/server-labels.js';
|
|
import { playerProfileHref } from '$lib/leaderboard.js';
|
|
import CopyValue from './CopyValue.svelte';
|
|
import Badge from './primitives/Badge.svelte';
|
|
import EmptyState from './primitives/EmptyState.svelte';
|
|
|
|
let {
|
|
report,
|
|
mapLabel,
|
|
current = true,
|
|
after = null,
|
|
matchElapsed = null,
|
|
activity
|
|
}: {
|
|
report: GameTelemetry | undefined;
|
|
mapLabel?: string;
|
|
current?: boolean;
|
|
after?: string | null;
|
|
matchElapsed?: string | null;
|
|
activity?: string;
|
|
} = $props();
|
|
const fresh = $derived(current && freshTelemetry(report, $uiNow, after));
|
|
const timingNow = $derived(
|
|
report && (report.event === 'game_end' || !fresh) ? Date.parse(report.receivedAt) : $uiNow
|
|
);
|
|
const displayElapsed = $derived(
|
|
fresh
|
|
? matchElapsed
|
|
: report?.timing?.server?.gameStartedAt && !report.timing.server.gameEndedAt
|
|
? elapsedSince(report.timing.server.gameStartedAt, timingNow)
|
|
: null
|
|
);
|
|
const columns = [
|
|
{ key: 'score', label: 'Score' },
|
|
{ key: 'kills', label: 'Kills' },
|
|
{ key: 'headshots', label: 'Headshots' },
|
|
{ key: 'downs', label: 'Downs' },
|
|
{ key: 'revives', label: 'Revives' }
|
|
] as const;
|
|
type StatKey = (typeof columns)[number]['key'];
|
|
let sortBy = $state<StatKey>('score');
|
|
let descending = $state(true);
|
|
let expanded = $state<string[]>([]);
|
|
const uid = $props.id();
|
|
const number = new Intl.NumberFormat('en-US');
|
|
const players = $derived(
|
|
report?.event === 'game_start'
|
|
? report.players.map((player) => ({
|
|
...player,
|
|
score: null,
|
|
kills: null,
|
|
headshots: null,
|
|
downs: null,
|
|
revives: null
|
|
}))
|
|
: (report?.players ?? [])
|
|
);
|
|
const sorted = $derived(
|
|
[...players].sort((a, b) => {
|
|
const difference = (a[sortBy] ?? 0) - (b[sortBy] ?? 0);
|
|
return (descending ? -difference : difference) || a.name.localeCompare(b.name);
|
|
})
|
|
);
|
|
|
|
function sort(key: StatKey) {
|
|
descending = sortBy === key ? !descending : true;
|
|
sortBy = key;
|
|
}
|
|
</script>
|
|
|
|
{#if !report}
|
|
<EmptyState
|
|
title="Waiting for game data"
|
|
description="The scoreboard will appear when this server reports a game start, round change, heartbeat, or game end."
|
|
/>
|
|
{:else}
|
|
<header class="scoreboard-header">
|
|
<div class="match">
|
|
<span class="eyebrow"
|
|
>{report.event === 'game_end'
|
|
? 'Final scoreboard'
|
|
: fresh
|
|
? 'Live scoreboard'
|
|
: 'Last reported scoreboard'}</span
|
|
>
|
|
<div class="match-title">
|
|
<h2 title={report.map}>{mapLabel ?? mapTitle(report.map)}</h2>
|
|
{#if report.event !== 'game_start'}<Badge size="md">Round {report.round}</Badge
|
|
>{/if}
|
|
{#if displayElapsed}<span class="match-time"
|
|
>Match {displayElapsed}{fresh ? '' : ' at last report'}</span
|
|
>{/if}
|
|
{#if report.event === 'game_end'}<Badge>Game ended</Badge>
|
|
{:else if report.event === 'game_start'}<Badge>Game started</Badge>{/if}
|
|
</div>
|
|
</div>
|
|
<div class="report-meta">
|
|
<span
|
|
>{players.length}
|
|
{players.length === 1 ? 'player' : 'players'}{fresh ? '' : ' in last report'}</span
|
|
>
|
|
{#if !fresh}<Badge variant="warning">Historical report</Badge>{/if}
|
|
<time datetime={report.receivedAt} title={$timeFormat.dateTime(report.receivedAt)}>
|
|
Updated {elapsedSince(report.receivedAt, $uiNow)} ago
|
|
</time>
|
|
</div>
|
|
</header>
|
|
|
|
{#if !players.length}
|
|
<EmptyState
|
|
title="No players reported"
|
|
description="This game report has an empty scoreboard."
|
|
/>
|
|
{:else}
|
|
<!-- svelte-ignore a11y_no_noninteractive_tabindex (Keyboard users need to scroll the table.) -->
|
|
<div class="table-scroll" role="region" aria-label="Player scoreboard" tabindex="0">
|
|
<table>
|
|
<caption class="sr-only"
|
|
>{report.event === 'game_end' ? 'Final' : 'Latest'} player scores for {report.server}</caption
|
|
>
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="player">Player</th>
|
|
{#each columns as column (column.key)}
|
|
<th
|
|
scope="col"
|
|
class="stat"
|
|
aria-sort={sortBy === column.key
|
|
? descending
|
|
? 'descending'
|
|
: 'ascending'
|
|
: 'none'}
|
|
>
|
|
<button
|
|
type="button"
|
|
onclick={() => sort(column.key)}
|
|
aria-label={`Sort by ${column.label.toLowerCase()}, ${sortBy === column.key && descending ? 'ascending' : 'descending'}`}
|
|
>
|
|
{column.label}<span
|
|
class:active={sortBy === column.key}
|
|
aria-hidden="true"
|
|
>{sortBy === column.key
|
|
? descending
|
|
? '↓'
|
|
: '↑'
|
|
: '↕'}</span
|
|
>
|
|
</button>
|
|
</th>
|
|
{/each}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each sorted as player}
|
|
{@const timing = report.timing?.players[player.guid]}
|
|
<tr>
|
|
<th scope="row" class="player">
|
|
<a class="player-name" href={playerProfileHref(player.guid)}
|
|
>{player.name}</a
|
|
>
|
|
<button
|
|
class="player-details"
|
|
aria-label={`Details for ${player.name}`}
|
|
aria-expanded={expanded.includes(player.guid)}
|
|
aria-controls={`${uid}-${player.guid}`}
|
|
onclick={() =>
|
|
(expanded = expanded.includes(player.guid)
|
|
? expanded.filter((guid) => guid !== player.guid)
|
|
: [...expanded, player.guid])}>Details</button
|
|
>
|
|
</th>
|
|
{#each columns as column (column.key)}
|
|
<td class="stat" class:score={column.key === 'score'}>
|
|
{#if player[column.key] === null}<span
|
|
class="unreported"
|
|
aria-label="Not yet reported">—</span
|
|
>
|
|
{:else}{number.format(player[column.key]!)}{/if}
|
|
</td>
|
|
{/each}
|
|
</tr>
|
|
<tr id={`${uid}-${player.guid}`} hidden={!expanded.includes(player.guid)}
|
|
><td colspan="6"
|
|
><div class="player-metadata">
|
|
<div class="guid">
|
|
<span>GUID</span><CopyValue
|
|
value={player.guid}
|
|
label={`GUID for ${player.name}`}
|
|
/>
|
|
</div>
|
|
<span
|
|
>Time on instance: {timing
|
|
? elapsedSince(timing.serverJoinedAt, timingNow)
|
|
: '—'}</span
|
|
><span
|
|
>Time in match: {timing
|
|
? elapsedSince(timing.matchJoinedAt, timingNow)
|
|
: '—'}</span
|
|
><span>Joined round: {timing?.roundStarted ?? '—'}</span>
|
|
</div></td
|
|
></tr
|
|
>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{/if}
|
|
<div class="scoreboard-footer">
|
|
<details>
|
|
<summary>About these stats</summary>
|
|
<p class="note">
|
|
{report.event === 'game_start'
|
|
? 'Player stats arrive with the next round report or heartbeat.'
|
|
: report.event === 'game_end'
|
|
? 'Final stats from this game. The scoreboard resets when the next game starts.'
|
|
: 'Stats update at each round change, heartbeat, and game end.'}
|
|
</p>
|
|
<p class="timing-note">
|
|
Times and joining rounds are estimated from player reports. Time on instance carries
|
|
across matches; ended or stale reports freeze at the last update.
|
|
</p>
|
|
{#if activity}<p class="timing-note">{activity}</p>{/if}
|
|
</details>
|
|
<a href="/leaderboard">View lifetime leaderboard →</a>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.player-metadata {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px 24px;
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
}
|
|
summary {
|
|
cursor: pointer;
|
|
color: var(--text-secondary);
|
|
}
|
|
.match-time {
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
button.player-details {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
}
|
|
.scoreboard-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-4);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.match {
|
|
display: grid;
|
|
gap: var(--space-2);
|
|
min-width: 0;
|
|
}
|
|
.eyebrow {
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--weight-semibold);
|
|
letter-spacing: var(--tracking-label);
|
|
text-transform: uppercase;
|
|
color: var(--text-tertiary);
|
|
}
|
|
.match-title {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-3);
|
|
}
|
|
h2 {
|
|
margin: 0;
|
|
font-size: var(--text-lg);
|
|
font-weight: var(--weight-semibold);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.report-meta {
|
|
display: grid;
|
|
gap: var(--space-1);
|
|
text-align: right;
|
|
font-size: var(--text-sm);
|
|
color: var(--text-secondary);
|
|
}
|
|
time {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-tertiary);
|
|
}
|
|
.table-scroll {
|
|
max-width: 100%;
|
|
overflow-x: auto;
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-md);
|
|
}
|
|
.table-scroll:focus-visible {
|
|
outline: none;
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
table {
|
|
width: 100%;
|
|
min-width: 560px;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
}
|
|
th,
|
|
td {
|
|
padding: var(--space-3) var(--space-4);
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
thead th {
|
|
font-size: var(--text-xs);
|
|
color: var(--text-secondary);
|
|
font-weight: var(--weight-semibold);
|
|
background: var(--surface-sunken);
|
|
}
|
|
.player {
|
|
text-align: left;
|
|
position: sticky;
|
|
left: 0;
|
|
z-index: 1;
|
|
}
|
|
thead .player {
|
|
min-width: 160px;
|
|
}
|
|
tbody .player {
|
|
background: var(--surface);
|
|
font-weight: var(--weight-medium);
|
|
}
|
|
.player-name {
|
|
display: block;
|
|
max-width: 320px;
|
|
overflow-wrap: anywhere;
|
|
font-size: var(--text-sm);
|
|
color: var(--text-primary);
|
|
}
|
|
.player-name {
|
|
text-decoration: none;
|
|
}
|
|
.player-name:hover {
|
|
color: var(--accent-primary-hover);
|
|
text-decoration: underline;
|
|
}
|
|
.player-name:focus-visible {
|
|
outline: none;
|
|
border-radius: var(--radius-sm);
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
.timing-note {
|
|
margin: var(--space-2) 0 0;
|
|
font-size: var(--text-xs);
|
|
color: var(--text-tertiary);
|
|
}
|
|
.guid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
margin-top: var(--space-1);
|
|
color: var(--text-tertiary);
|
|
font-size: var(--text-xs);
|
|
}
|
|
.stat {
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
}
|
|
td.stat {
|
|
font: var(--text-sm) var(--font-numeric);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.score {
|
|
color: var(--text-primary);
|
|
font-weight: var(--weight-semibold);
|
|
}
|
|
.unreported {
|
|
color: var(--text-tertiary);
|
|
}
|
|
tbody tr:last-child > * {
|
|
border-bottom: none;
|
|
}
|
|
tbody tr:hover > * {
|
|
background: var(--surface-raised);
|
|
}
|
|
button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: var(--space-1);
|
|
border: 0;
|
|
background: transparent;
|
|
padding: var(--space-1) 0;
|
|
color: inherit;
|
|
font: inherit;
|
|
cursor: pointer;
|
|
}
|
|
button span {
|
|
color: var(--text-tertiary);
|
|
}
|
|
button span.active,
|
|
button:hover {
|
|
color: var(--accent-primary-hover);
|
|
}
|
|
button:focus-visible {
|
|
outline: none;
|
|
border-radius: var(--radius-sm);
|
|
box-shadow: var(--focus-ring);
|
|
}
|
|
.scoreboard-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-3);
|
|
flex-wrap: wrap;
|
|
margin-top: var(--space-3);
|
|
font-size: var(--text-xs);
|
|
}
|
|
.scoreboard-footer a {
|
|
text-decoration: none;
|
|
}
|
|
.scoreboard-footer a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.note {
|
|
margin: 0;
|
|
font-size: var(--text-xs);
|
|
color: var(--text-tertiary);
|
|
}
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
@media (max-width: 640px) {
|
|
.report-meta {
|
|
text-align: left;
|
|
}
|
|
th,
|
|
td {
|
|
padding: var(--space-3);
|
|
}
|
|
thead .player {
|
|
min-width: 150px;
|
|
}
|
|
.player-name {
|
|
max-width: 220px;
|
|
}
|
|
}
|
|
</style>
|