127 lines
10 KiB
Svelte
127 lines
10 KiB
Svelte
<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 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';
|
||
|
||
let { data }: { data: { profile: PlayerProfile } } = $props();
|
||
const profile = $derived(data.profile);
|
||
const stats = $derived(profile.stats);
|
||
const number = new Intl.NumberFormat('en-US', { maximumFractionDigits: 1 });
|
||
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('');
|
||
async function refresh() {
|
||
refreshing = true;
|
||
refreshError = '';
|
||
try { await invalidateAll(); }
|
||
catch { refreshError = 'Unable to refresh player stats. Please try again.'; }
|
||
finally { refreshing = false; }
|
||
}
|
||
</script>
|
||
|
||
<svelte:head><title>{profile.name} · Player stats · Electric Cherry</title></svelte:head>
|
||
|
||
<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 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 aria-labelledby="totals-title">
|
||
<h2 id="totals-title">Lifetime stats</h2>
|
||
<div class="stats">
|
||
{#each playerStatMetrics as metric (metric.key)}
|
||
<div class="stat" class:record={metric.key === 'highestRound'}><span>{metric.label}</span><strong>{number.format(stats[metric.key])}</strong>{#if metric.key === 'highestRound' || metric.key === 'bestKills' || metric.key === 'bestScore'}<RecordSource evidence={profile.records[metric.key]} />{/if}</div>
|
||
{/each}
|
||
</div>
|
||
</section>
|
||
|
||
<section aria-labelledby="metrics-title">
|
||
<h2 id="metrics-title">Player metrics</h2>
|
||
<div class="stats metrics">
|
||
{#each efficiencyMetrics as metric (metric.key)}
|
||
<div class="stat"><span>{metric.label}</span><strong>{formatEfficiencyValue(efficiencyValue(stats, metric.key), metric.key)}</strong><small>{efficiencySample(stats, metric.key)}</small><small>{efficiencyEligible(stats, metric.key) ? 'Qualifies for lifetime ranking' : `${efficiencyRequirement(metric.key)} to rank`}</small></div>
|
||
{/each}
|
||
</div>
|
||
<p class="note">Only completed games contribute. Completion rate measures how often the player appeared in the final report. A dash means there is no denominator for that metric.</p>
|
||
</section>
|
||
|
||
<section class="panel" aria-labelledby="maps-title">
|
||
<div class="panel-heading"><h2 id="maps-title">Per-map records</h2><p>Personal best rounds and every tracked stat across both games, ordered by highest round.</p></div>
|
||
<!-- svelte-ignore a11y_no_noninteractive_tabindex (Scrollable table for keyboard users.) -->
|
||
<div class="table-scroll" role="region" aria-label="Per-map player records" tabindex="0">
|
||
<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>
|
||
{#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>
|
||
</div>
|
||
</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>
|
||
<!-- 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>
|
||
<thead><tr><th scope="col">Map / server</th><th scope="col">Match started</th><th scope="col">Match status</th>{#each historyColumns as key}<th scope="col">{playerStatMetrics.find(metric => metric.key === key)!.label}</th>{/each}</tr></thead>
|
||
<tbody>{#each profile.matches as match (match.id)}
|
||
<tr><th scope="row">{#if match.status === 'completed'}<a href={`/matches/${match.id}`} aria-label={`View ${match.mapName} match from ${date(match.startedAt)}`}>{match.mapName}</a>{:else}{match.mapName}{/if}<small>{gameName(match.game)}</small><small>{match.server} {#if match.server_deleted_at}<Badge>Deleted</Badge>{/if}</small></th><td>{date(match.startedAt)}</td>
|
||
<td class="status">{match.status}<small>{match.completed ? 'Completion credited' : 'No completion credit'}</small></td>
|
||
{#each historyColumns as key}<td class:best={key === 'highestRound'}>{number.format(match[key])}</td>{/each}
|
||
</tr>
|
||
{/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>
|
||
</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>
|
||
<p>Highest reported score is the largest observed points balance, not total points earned. Completion requires the player to appear in the final report. Records stay with the same GUID across both games when a player changes names, and the latest reported name is displayed.</p>
|
||
</details>
|
||
</section>
|
||
|
||
<style>
|
||
.profile { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
|
||
.identity { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); color: var(--text-tertiary); font-size: var(--text-xs); }
|
||
h2 { font-size: var(--text-lg); margin: 0 0 var(--space-3); }
|
||
a { color: var(--accent-primary-hover); }
|
||
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
|
||
.stat { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface); }
|
||
.stat span { color: var(--text-secondary); font-size: var(--text-xs); }
|
||
.stat strong { font-family: var(--font-mono); font-size: var(--text-2xl); }
|
||
.record { border-color: var(--accent-primary); }
|
||
.record strong, .best { color: var(--accent-primary-hover); }
|
||
.metrics strong { font-size: var(--text-xl); }
|
||
.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; }
|
||
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); }
|
||
th, td { padding: var(--space-4); border-bottom: 1px solid var(--border-subtle); text-align: right; white-space: nowrap; }
|
||
thead th { background: var(--surface-sunken); color: var(--text-secondary); font-size: var(--text-xs); }
|
||
th:first-child { text-align: left; min-width: 200px; white-space: normal; overflow-wrap: anywhere; }
|
||
td { font-variant-numeric: tabular-nums; }
|
||
small { display: block; margin-top: 4px; font-size: var(--text-xs); color: var(--text-tertiary); font-weight: normal; }
|
||
.status { text-transform: capitalize; }
|
||
.pagination, .pagination > div { display: flex; gap: var(--space-3); align-items: center; }
|
||
.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); } }
|
||
</style>
|