Use compact player record cards on mobile

2026-10-01 12:26:35 -04:00
parent eac9ad4fbc
commit f10345ae79
4 changed files with 148 additions and 6 deletions
@@ -0,0 +1,64 @@
+<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>