65 lines
4.0 KiB
Svelte
65 lines
4.0 KiB
Svelte
<script lang="ts">
|
|
import { playerStatMetrics, type PlayerMatch } from '$lib/leaderboard.js';
|
|
import { timeFormat } from '$ui/stores/time-zone.js';
|
|
import Badge from '$ui/components/primitives/Badge.svelte';
|
|
|
|
let { matches }: { matches: PlayerMatch[] } = $props();
|
|
const number = new Intl.NumberFormat('en-US');
|
|
const gameName = (game: string) => game === 't5' ? 'Black Ops I' : game === 't6' ? 'Black Ops II' : game.toUpperCase();
|
|
const otherMetrics = ['roundsSurvived', 'headshots', 'revives', 'downs', 'bestScore'] as const;
|
|
</script>
|
|
|
|
<div class="match-cards">
|
|
{#each matches as match (match.id)}
|
|
<article class="match-card">
|
|
<header>
|
|
<p class="game">{gameName(match.game)}</p>
|
|
<h3>{#if match.status === 'completed'}<a href={`/matches/${match.id}`} aria-label={`View ${match.mapName} match from ${$timeFormat.dateTime(match.startedAt)}`}>{match.mapName}</a>{:else}{match.mapName}{/if}</h3>
|
|
<p class="server">{match.server} {#if match.server_deleted_at}<Badge>Deleted</Badge>{/if}</p>
|
|
</header>
|
|
<dl class="match-info">
|
|
<div><dt>First observed</dt><dd><time datetime={match.startedAt}>{$timeFormat.dateTime(match.startedAt)}</time></dd></div>
|
|
<div><dt>Match status</dt><dd><span class="status">{match.status}</span> · {match.completed ? 'Completion credited' : 'No completion credit'}</dd></div>
|
|
</dl>
|
|
<dl class="primary-stats">
|
|
<div><dt>Highest round</dt><dd class="best">{number.format(match.highestRound)}</dd></div>
|
|
<div><dt>Kills</dt><dd>{number.format(match.kills)}</dd></div>
|
|
</dl>
|
|
<details class="more-stats">
|
|
<summary aria-label={`More match stats for ${match.mapName} from ${$timeFormat.dateTime(match.startedAt)}`}>More match stats</summary>
|
|
<dl class="additional-stats">
|
|
{#each otherMetrics as key (key)}
|
|
<div><dt>{playerStatMetrics.find(metric => metric.key === key)!.label}</dt><dd>{number.format(match[key])}</dd></div>
|
|
{/each}
|
|
</dl>
|
|
<p class="observation">Last observed <time datetime={match.lastSeen}>{$timeFormat.dateTime(match.lastSeen)}</time></p>
|
|
<p class="match-id">Match #{match.id}</p>
|
|
</details>
|
|
</article>
|
|
{/each}
|
|
</div>
|
|
|
|
<style>
|
|
.match-cards { min-width: 0; }
|
|
.match-card { min-width: 0; padding: var(--space-4); border-top: 1px solid var(--border-subtle); overflow-wrap: anywhere; }
|
|
h3, p, dl, dd { margin: 0; }
|
|
h3 { margin-top: var(--space-1); font-size: var(--text-md); line-height: 1.5; }
|
|
a { color: var(--accent-primary-hover); }
|
|
.game, .server, .observation, .match-id { color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.5; }
|
|
.server { margin-top: var(--space-2); }
|
|
.match-info { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
|
|
dt { color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.5; }
|
|
dd { margin-top: var(--space-1); font-size: var(--text-sm); line-height: 1.5; }
|
|
.status { text-transform: capitalize; }
|
|
.primary-stats, .additional-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
|
|
.primary-stats { margin-top: var(--space-4); }
|
|
.primary-stats dd, .additional-stats dd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
|
|
.primary-stats dd { font-size: var(--text-xl); }
|
|
.best { color: var(--accent-primary-hover); }
|
|
.more-stats { margin-top: var(--space-2); }
|
|
summary { min-height: 44px; padding: var(--space-3) 0; box-sizing: border-box; color: var(--accent-primary-hover); font-size: var(--text-sm); line-height: 1.5; cursor: pointer; }
|
|
.observation { margin-top: var(--space-4); }
|
|
.match-id { margin-top: var(--space-1); }
|
|
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; border-radius: var(--radius-sm); }
|
|
</style>
|