Link personal bests to their recorded matches

2026-10-01 12:12:21 -04:00
parent 13963cba1c
commit c7d71c63ba
13 changed files with 304 additions and 14 deletions
@@ -0,0 +1,35 @@
+<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>