Preserve leaderboard context in player profiles

2026-10-01 12:23:30 -04:00
parent 47ebe83106
commit eac9ad4fbc
10 changed files with 326 additions and 24 deletions
@@ -3,7 +3,8 @@
    import { onMount, untrack } from 'svelte';
    import { goto } from '$app/navigation';
    import { page } from '$app/stores';
-    import { leaderboardMetrics, playerProfileHref, type LeaderboardMetric, type PlayerStatMetric, type LeaderboardEntry, type LeaderboardMap, type LeaderboardResponse } from '$lib/leaderboard.js';
+    import { leaderboardMetrics, type LeaderboardMetric, type PlayerStatMetric, type LeaderboardEntry, type LeaderboardMap, type LeaderboardResponse } from '$lib/leaderboard.js';
+    import { playerContextHref } from '$lib/leaderboard-navigation.js';
    import { efficiencyMetrics, isEfficiencyMetric, efficiencyRequirement, efficiencySample, formatEfficiencyValue } from '$lib/leaderboard-efficiency.js';
    import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
    import Button from '$ui/components/primitives/Button.svelte';
@@ -215,7 +216,7 @@
                                <tr>
                                    <td class="rank"><span class:podium={entry.rank <= 3}>{number.format(entry.rank)}</span></td>
                                    <th scope="row" class="player">
-                                        <a class="player-name" href={playerProfileHref(entry.guid)}>{entry.name}</a>
+                                        <a class="player-name" href={playerContextHref(entry.guid, `${$page.url.pathname}${$page.url.search}`)}>{entry.name}</a>
                                        <div class="identity"><CopyValue value={entry.guid} label={`GUID for ${entry.name}`} /></div>
                                    </th>
                                    {#each columns as key (key)}<td class="stat" class:selected={key === metric}>{formatValue(entry, key)}{#if isEfficiencyMetric(key)}<small class="sample">{efficiencySample(entry, key)} · {number.format(entry.gamesPlayed)} games</small>{/if}{#if key === 'highestRound' || key === 'bestKills' || key === 'bestScore'}<RecordSource evidence={entry.records[key]} />{/if}</td>{/each}
@@ -1,8 +1,20 @@
 import { error } from '@sveltejs/kit';
 import { getPlayerProfile } from '$lib/server/fleet/player-profile.js';
+import { getPlayerLeaderboardEntry, isLeaderboardMetric } from '$lib/server/fleet/leaderboard.js';
+import { leaderboardReturnHref } from '$lib/leaderboard-navigation.js';

 export function load({ params, url }: { params: { guid: string }; url: URL }) {
-    const profile = getPlayerProfile(params.guid, Number(url.searchParams.get('offset') ?? 0));
+    const game = url.searchParams.get('game');
+    const map = url.searchParams.get('map');
+    const requestedMetric = url.searchParams.get('metric');
+    if ((game !== null && game !== 't5' && game !== 't6') || (map !== null && map.length > 1024)
+        || (requestedMetric !== null && !isLeaderboardMetric(requestedMetric))) {
+        error(400, 'Use game t5 or t6, a supported metric, and a map key up to 1024 characters.');
+    }
+    const metric = requestedMetric !== null && isLeaderboardMetric(requestedMetric) ? requestedMetric : 'highestRound';
+    const options = { game: game || undefined, map: map || undefined, metric };
+    const profile = getPlayerProfile(params.guid, Number(url.searchParams.get('offset') ?? 0), options);
    if (!profile) error(404, 'No recorded stats found for this player');
-    return { profile };
+    return { profile, returnTo: leaderboardReturnHref(url.searchParams.get('returnTo')),
+        scope: { game: game ?? '', map: map ?? '', metric, entry: getPlayerLeaderboardEntry(params.guid, options) } };
 }
@@ -1,23 +1,51 @@
 <script lang="ts">
    import { timeFormat } from '$ui/stores/time-zone.js';
-    import { invalidateAll } from '$app/navigation';
-    import { playerStatMetrics, type PlayerProfile, type PlayerStatMetric } from '$lib/leaderboard.js';
-    import { efficiencyMetrics, efficiencyValue, efficiencyEligible, efficiencyRequirement, efficiencySample, formatEfficiencyValue } from '$lib/leaderboard-efficiency.js';
+    import { goto, invalidateAll } from '$app/navigation';
+    import { page } from '$app/stores';
+    import { leaderboardMetrics, playerStatMetrics, type PlayerProfile, type PlayerStatMetric, type LeaderboardMetric, type LeaderboardEntry } from '$lib/leaderboard.js';
+    import { efficiencyMetrics, efficiencyValue, efficiencyEligible, efficiencyRequirement, efficiencySample, formatEfficiencyValue, isEfficiencyMetric } from '$lib/leaderboard-efficiency.js';
+    import { profileViewHref } from '$lib/leaderboard-navigation.js';
    import SectionHeader from '$ui/components/primitives/SectionHeader.svelte';
    import Button from '$ui/components/primitives/Button.svelte';
    import CopyValue from '$ui/components/CopyValue.svelte';
    import Badge from '$ui/components/primitives/Badge.svelte';
    import RecordSource from '$ui/components/RecordSource.svelte';
+    import EmptyState from '$ui/components/primitives/EmptyState.svelte';

-    let { data }: { data: { profile: PlayerProfile } } = $props();
+    let { data }: { data: { profile: PlayerProfile; returnTo: string;
+        scope: { game: string; map: string; metric: LeaderboardMetric; entry: LeaderboardEntry | null } } } = $props();
+    const number = new Intl.NumberFormat('en-US', { maximumFractionDigits: 1 });
    const profile = $derived(data.profile);
    const stats = $derived(profile.stats);
-    const number = new Intl.NumberFormat('en-US', { maximumFractionDigits: 1 });
+    const scope = $derived(data.scope);
+    const filteredMaps = $derived(profile.maps.filter(map => !scope.game || map.game === scope.game));
+    const selectedMetric = $derived(leaderboardMetrics.find(metric => metric.key === scope.metric)!);
+    const selectedValue = $derived(scope.entry ? isEfficiencyMetric(scope.metric)
+        ? formatEfficiencyValue(scope.entry[scope.metric], scope.metric) : number.format(scope.entry[scope.metric]) : '—');
+    const scopedLeaderboard = $derived.by(() => {
+        const params = new URLSearchParams({ metric: scope.metric });
+        if (scope.game) params.set('game', scope.game);
+        if (scope.map) params.set('map', scope.map);
+        return `/leaderboard?${params}`;
+    });
    const date = (value: string) => $timeFormat.dateTime(value);
    const gameName = (game: string) => game === 't5' ? 'Black Ops I' : game === 't6' ? 'Black Ops II' : game.toUpperCase();
    const historyColumns = ['highestRound', 'kills', 'roundsSurvived', 'headshots', 'revives', 'downs', 'bestScore'] as const satisfies readonly PlayerStatMetric[];
    let refreshing = $state(false);
    let refreshError = $state('');
+    let filtering = $state(false);
+    let pendingUrl: URL | undefined;
+    let navigationId = 0;
+    async function updateScope(changes: Record<string, string>) {
+        const url = new URL(profileViewHref(pendingUrl ?? $page.url, changes), $page.url);
+        pendingUrl = url;
+        const id = ++navigationId;
+        filtering = true;
+        refreshError = '';
+        try { await goto(`${url.pathname}${url.search}`, { keepFocus: true, noScroll: true }); }
+        catch { refreshError = 'Unable to update the player filters. Please try again.'; }
+        finally { if (id === navigationId) { pendingUrl = undefined; filtering = false; } }
+    }
    async function refresh() {
        refreshing = true;
        refreshError = '';
@@ -31,12 +59,27 @@

 <section class="profile">
    <SectionHeader title={profile.name} eyebrow="Player profile" subtitle="Black Ops I & Black Ops II · Lifetime Zombies stats">
-        {#snippet crumbs()}<a href="/leaderboard">← Leaderboard</a>{/snippet}
+        {#snippet crumbs()}<a href={data.returnTo}>← Leaderboard</a>{/snippet}
        {#snippet actions()}<Button size="sm" loading={refreshing} onclick={refresh}>Refresh stats</Button>{/snippet}
    </SectionHeader>
    <div class="identity"><CopyValue value={profile.guid} label="Player GUID" /><span>First seen {date(profile.firstSeen)}</span><span>Last seen {date(profile.lastSeen)}</span></div>
    {#if refreshError}<p role="alert">{refreshError}</p>{/if}

+    <section class="panel selection" aria-labelledby="selection-title" aria-busy={filtering}>
+        <div class="panel-heading"><h2 id="selection-title">Selected leaderboard</h2><p>Choose the competition and match history to explore. Lifetime stats below always cover all games and maps.</p></div>
+        <div class="scope-controls">
+            <label>Game<select value={scope.game} onchange={event => void updateScope({ game: event.currentTarget.value, map: '' })}><option value="">All games</option><option value="t5">Black Ops I</option><option value="t6">Black Ops II</option></select></label>
+            <label>Map<select value={scope.map} onchange={event => void updateScope({ map: event.currentTarget.value })}><option value="">All maps</option>{#if scope.map && !filteredMaps.some(map => map.key === scope.map)}<option value={scope.map}>{scope.map}</option>{/if}{#each filteredMaps as map (`${map.game}:${map.key}`)}<option value={map.key}>{map.name}{!scope.game ? ` · ${gameName(map.game)}` : ''}</option>{/each}</select></label>
+            <label>Rank by<select value={scope.metric} onchange={event => void updateScope({ metric: event.currentTarget.value })}>{#each leaderboardMetrics as metric (metric.key)}<option value={metric.key}>{metric.label}</option>{/each}</select></label>
+        </div>
+        <div class="scope-rank">
+            {#if scope.entry}<p><strong>Rank #{number.format(scope.entry.rank)}</strong> · {selectedMetric.label}: <strong>{selectedValue}</strong>{#if isEfficiencyMetric(scope.metric)}<small>{efficiencySample(scope.entry, scope.metric)} · {number.format(scope.entry.gamesPlayed)} games</small>{/if}</p>
+            {:else if profile.matchesTotal === 0}<p>No completed matches in this selection.</p>
+            {:else if isEfficiencyMetric(scope.metric)}<p>Not yet qualified for this ranking.<small>{efficiencyRequirement(scope.metric)} in this selection.</small></p>{/if}
+            <a href={scopedLeaderboard}>Open selected leaderboard</a>
+        </div>
+    </section>
+
    <section aria-labelledby="totals-title">
        <h2 id="totals-title">Lifetime stats</h2>
        <div class="stats">
@@ -63,7 +106,7 @@
            <table>
                <thead><tr><th scope="col">Map</th>{#each playerStatMetrics as metric}<th scope="col">{metric.label}</th>{/each}</tr></thead>
                <tbody>{#each profile.maps as map (`${map.game}:${map.key}`)}
-                    <tr><th scope="row"><a href={`/leaderboard?${new URLSearchParams({ game: map.game, map: map.key })}`}>{map.name}</a><small>{gameName(map.game)}</small><small>Last played {date(map.lastSeen)}</small></th>
+                    <tr><th scope="row"><a href={`/leaderboard?${new URLSearchParams({ game: map.game, map: map.key, metric: scope.metric })}`}>{map.name}</a><small>{gameName(map.game)}</small><small>Last played {date(map.lastSeen)}</small></th>
                    {#each playerStatMetrics as metric}<td class:best={metric.key === 'highestRound'}>{number.format(map[metric.key])}{#if metric.key === 'highestRound' || metric.key === 'bestKills' || metric.key === 'bestScore'}<RecordSource evidence={map.records[metric.key]} />{/if}</td>{/each}</tr>
                {/each}</tbody>
            </table>
@@ -71,7 +114,8 @@
    </section>

    <section class="panel" aria-labelledby="history-title">
-        <div class="panel-heading"><h2 id="history-title">Match history</h2><p>Completed matches from both games, most recently observed first. Stats reflect this player's participation.</p></div>
+        <div class="panel-heading"><h2 id="history-title">Match history</h2><p>Completed matches in the selected game and map, most recently observed first. Stats reflect this player's participation.</p></div>
+        {#if profile.matches.length}
        <!-- svelte-ignore a11y_no_noninteractive_tabindex (Scrollable table for keyboard users.) -->
        <div class="table-scroll" role="region" aria-label="Player match history" tabindex="0">
            <table>
@@ -84,9 +128,10 @@
                {/each}</tbody>
            </table>
        </div>
-        <div class="pagination"><span>{number.format(profile.offset + 1)}–{number.format(profile.offset + profile.matches.length)} of {number.format(stats.gamesPlayed)} games</span>
-            <div><Button size="sm" href={`?offset=${Math.max(0, profile.offset - profile.limit)}`} disabled={profile.offset === 0}>Previous</Button><Button size="sm" href={`?offset=${profile.offset + profile.limit}`} disabled={profile.offset + profile.limit >= stats.gamesPlayed}>Next</Button></div>
+        <div class="pagination"><span>{number.format(profile.offset + 1)}–{number.format(profile.offset + profile.matches.length)} of {number.format(profile.matchesTotal)} games</span>
+            <div><Button size="sm" href={profileViewHref($page.url, { offset: String(Math.max(0, profile.offset - profile.limit)) })} disabled={profile.offset === 0}>Previous</Button><Button size="sm" href={profileViewHref($page.url, { offset: String(profile.offset + profile.limit) })} disabled={profile.offset + profile.limit >= profile.matchesTotal}>Next</Button></div>
        </div>
+        {:else}<EmptyState title="No completed matches in this selection" description="Choose another game or map to explore this player's history.">{#snippet actions()}<Button size="sm" onclick={() => void updateScope({ game: '', map: '' })}>Show all completed matches</Button>{/snippet}</EmptyState>{/if}
    </section>
    <details class="note"><summary>How these stats work</summary>
        <p>Lifetime stats combine completed games from Black Ops I and Black Ops II. Games in progress and interrupted games do not contribute. Highest round includes mid-game joins; total rounds only counts observed round progression. Kills, headshots, revives and downs use each match's highest reported counters.</p>
@@ -109,6 +154,11 @@
    .panel { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
    .panel-heading { padding: var(--space-5); }
    .panel-heading p, .note { margin: 0; color: var(--text-tertiary); font-size: var(--text-xs); line-height: 1.7; }
+    .scope-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); padding: 0 var(--space-5) var(--space-4); }
+    .scope-controls label { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; color: var(--text-secondary); font-size: var(--text-xs); }
+    .scope-controls select { width: 100%; min-width: 0; padding: var(--space-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-primary); font: inherit; }
+    .scope-rank { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); font-size: var(--text-sm); }
+    .scope-rank p { margin: 0; }
    section > .note { margin-top: var(--space-3); }
    .table-scroll { max-width: 100%; overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
@@ -122,5 +172,5 @@
    .pagination { padding: var(--space-4); justify-content: space-between; flex-wrap: wrap; font-size: var(--text-xs); color: var(--text-secondary); }
    summary { cursor: pointer; color: var(--text-secondary); }
    @media (max-width: 1000px) { .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
-    @media (max-width: 640px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat { padding: var(--space-3); } .stat strong { font-size: var(--text-xl); } }
+    @media (max-width: 640px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat { padding: var(--space-3); } .stat strong { font-size: var(--text-xl); } .scope-controls { grid-template-columns: minmax(0, 1fr); } .scope-rank { align-items: flex-start; flex-direction: column; } }
 </style>