67 lines
4.0 KiB
Svelte
67 lines
4.0 KiB
Svelte
<script lang="ts">
|
|
import { playerStatMetrics, type PlayerMapRecord, type PersonalBestMetric, type LeaderboardMetric } from '$lib/leaderboard.js';
|
|
import { timeFormat } from '$ui/stores/time-zone.js';
|
|
import RecordSource from '$ui/components/RecordSource.svelte';
|
|
|
|
let { maps, metric = 'highestRound' }: { maps: PlayerMapRecord[]; metric?: LeaderboardMetric } = $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 = playerStatMetrics.filter(metric => metric.key !== 'highestRound' && metric.key !== 'kills');
|
|
const recordMetrics = ['highestRound', 'bestKills', 'bestScore'] as const satisfies readonly PersonalBestMetric[];
|
|
</script>
|
|
|
|
<div class="map-cards">
|
|
{#each maps as map (`${map.game}:${map.key}`)}
|
|
<article class="map-card">
|
|
<header>
|
|
<p class="game">{gameName(map.game)}</p>
|
|
<h3><a href={`/leaderboard?${new URLSearchParams({ game: map.game, map: map.key, metric })}`}>{map.name}</a></h3>
|
|
<p class="last-played">Last played <time datetime={map.lastSeen}>{$timeFormat.dateTime(map.lastSeen)}</time></p>
|
|
</header>
|
|
<dl class="primary-stats">
|
|
<div><dt>Highest round</dt><dd class="best">{number.format(map.highestRound)}</dd></div>
|
|
<div><dt>Total kills</dt><dd>{number.format(map.kills)}</dd></div>
|
|
</dl>
|
|
<details class="more-stats">
|
|
<summary aria-label={`All stats and record runs for ${map.name}, ${gameName(map.game)}`}>All stats and record runs</summary>
|
|
<dl class="additional-stats">
|
|
{#each otherMetrics as metric (metric.key)}
|
|
<div><dt>{metric.label}</dt><dd>{number.format(map[metric.key])}</dd></div>
|
|
{/each}
|
|
</dl>
|
|
<div class="record-runs">
|
|
{#each recordMetrics as key (key)}
|
|
<div class="record-run">
|
|
<h4>{playerStatMetrics.find(metric => metric.key === key)!.label} · {number.format(map[key])}</h4>
|
|
<RecordSource evidence={map.records[key]} />
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</details>
|
|
</article>
|
|
{/each}
|
|
</div>
|
|
|
|
<style>
|
|
.map-cards { min-width: 0; }
|
|
.map-card { min-width: 0; padding: var(--space-4); border-top: 1px solid var(--border-subtle); overflow-wrap: anywhere; }
|
|
h3, h4, p, dl, dd { margin: 0; }
|
|
h3 { margin-top: var(--space-1); font-size: var(--text-md); line-height: 1.5; }
|
|
h4 { font-size: var(--text-sm); line-height: 1.5; }
|
|
a { color: var(--accent-primary-hover); }
|
|
.game, .last-played { color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.5; }
|
|
.last-played { margin-top: var(--space-2); }
|
|
.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); }
|
|
dt { color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.5; }
|
|
dd { margin-top: var(--space-1); font-family: var(--font-mono); font-size: var(--text-sm); 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; }
|
|
.record-runs { margin-top: var(--space-4); }
|
|
.record-run { padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
|
|
.record-run + .record-run { margin-top: var(--space-4); }
|
|
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; border-radius: var(--radius-sm); }
|
|
</style>
|