36 lines
2.0 KiB
Svelte
36 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import type { RecordEvidence } from '$lib/leaderboard.js';
|
|
import { timeFormat } from '$ui/stores/time-zone.js';
|
|
|
|
let { evidence }: { evidence: RecordEvidence } = $props();
|
|
const gameName = $derived(evidence.game === 't5' ? 'Black Ops I' : 'Black Ops II');
|
|
</script>
|
|
|
|
<div class="record-source">
|
|
<a href={`/matches/${evidence.matchId}`}>{evidence.mapName} · {gameName}</a>
|
|
<span>{#if evidence.endedAt}Completed <time datetime={evidence.endedAt}>{$timeFormat.dateTime(evidence.endedAt)}</time>{:else}Completed · End time unknown{/if}</span>
|
|
<details>
|
|
<summary>Run details</summary>
|
|
<dl>
|
|
<div><dt>Server</dt><dd>{evidence.server}</dd></div>
|
|
<div><dt>{evidence.startObserved ? 'Match started' : 'Match first observed'}</dt><dd><time datetime={evidence.startedAt}>{$timeFormat.dateTime(evidence.startedAt)}</time></dd></div>
|
|
<div><dt>Player participation</dt><dd>{evidence.presentAtStart ? 'Present at recorded start' : evidence.firstObservedRound === null ? 'Participation start unknown' : `First observed at round ${evidence.firstObservedRound}`}</dd></div>
|
|
</dl>
|
|
<p>Recorded presence does not establish continuous survival.</p>
|
|
</details>
|
|
</div>
|
|
|
|
<style>
|
|
.record-source { margin-top: var(--space-2); max-width: 24rem; white-space: normal; overflow-wrap: anywhere; font-family: var(--font-body); font-size: var(--text-xs); font-weight: normal; line-height: 1.5; color: var(--text-secondary); }
|
|
a { color: var(--accent-primary-hover); }
|
|
span { display: block; margin-top: 3px; color: var(--text-tertiary); }
|
|
details { margin-top: var(--space-1); }
|
|
summary { cursor: pointer; }
|
|
dl { margin: var(--space-2) 0; }
|
|
dl > div + div { margin-top: var(--space-2); }
|
|
dt { color: var(--text-tertiary); }
|
|
dd { margin: 0; }
|
|
p { margin: var(--space-2) 0 0; color: var(--text-tertiary); }
|
|
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; border-radius: var(--radius-sm); }
|
|
</style>
|