82 lines
2.5 KiB
Svelte
82 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import RelativeTime from '$ui/components/RelativeTime.svelte';
|
|
import type { PlayerMatch } from '$lib/leaderboard.js';
|
|
import { serverTitle } from '$ui/server-labels.js';
|
|
import { contextHref } from '$lib/navigation-context.js';
|
|
import { playerCompletionLabel } from '$ui/player-match.js';
|
|
let { matches, returnTo }: { matches: PlayerMatch[]; returnTo?: string } = $props();
|
|
const number = new Intl.NumberFormat('en-US');
|
|
</script>
|
|
|
|
<div class="match-cards">
|
|
{#each matches as match (match.id)}
|
|
<article>
|
|
<h3>
|
|
{#if match.status === 'completed'}<a
|
|
href={contextHref(`/matches/${match.id}`, returnTo ?? '/leaderboard')}
|
|
>{match.mapName} · Match #{match.id}</a
|
|
>{:else}{match.mapName} · Match #{match.id}{/if}
|
|
</h3>
|
|
<p>{serverTitle(match.server)}{match.server_deleted_at ? ' · Removed server' : ''}</p>
|
|
<p><RelativeTime value={match.startedAt} /> · {playerCompletionLabel(match)}</p>
|
|
<dl>
|
|
<div>
|
|
<dt>Round</dt>
|
|
<dd>{number.format(match.highestRound)}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Kills</dt>
|
|
<dd>{number.format(match.kills)}</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Revives</dt>
|
|
<dd>{number.format(match.revives)}</dd>
|
|
</div>
|
|
</dl>
|
|
</article>
|
|
{/each}
|
|
</div>
|
|
|
|
<style>
|
|
article {
|
|
min-width: 0;
|
|
padding: var(--space-4);
|
|
border-top: 1px solid var(--border-subtle);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
h3,
|
|
p,
|
|
dl,
|
|
dd {
|
|
margin: 0;
|
|
}
|
|
h3 {
|
|
font-size: var(--text-sm);
|
|
line-height: var(--leading-body);
|
|
}
|
|
h3 a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
min-height: 44px;
|
|
color: var(--accent-primary-hover);
|
|
}
|
|
p,
|
|
dt {
|
|
color: var(--text-secondary);
|
|
font-size: var(--text-xs);
|
|
line-height: var(--leading-body);
|
|
}
|
|
dl {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: var(--space-2);
|
|
margin-top: var(--space-3);
|
|
}
|
|
dd {
|
|
margin-top: var(--space-1);
|
|
font-family: var(--font-numeric);
|
|
font-size: var(--text-lg);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
</style>
|