josh/electric-cherry
1
0
Fork 0
Code Issues 18 Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify instance details and clarify diagnostics

Browse Source
This commit is contained in:
josh
2026-10-06 17:42:05 -04:00
parent f4094b7f5d
commit b8cccc5a98
15 changed files with 329 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/ui/components/PlayerScoreboard.svelte
+18 -15
View File
@@ -10,10 +10,12 @@
import Badge from './primitives/Badge.svelte';
import EmptyState from './primitives/EmptyState.svelte';
let { report, mapLabel, current = true, after = null }: { report: GameTelemetry | undefined; mapLabel?: string; current?: boolean; after?: string | null } = $props();
let { report, mapLabel, current = true, after = null, matchElapsed = null, activity }: { report: GameTelemetry | undefined; mapLabel?: string; current?: boolean; after?: string | null; matchElapsed?: string | null; activity?: string } = $props();
const fresh = $derived(current && freshTelemetry(report, $uiNow, after));
const timingNow = $derived(report && (report.event === 'game_end' || !fresh)
? Date.parse(report.receivedAt) : $uiNow);
const displayElapsed = $derived(fresh ? matchElapsed : report?.timing?.server?.gameStartedAt && !report.timing.server.gameEndedAt
? elapsedSince(report.timing.server.gameStartedAt, timingNow) : null);
const columns = [
{ key: 'score', label: 'Score' },
{ key: 'kills', label: 'Kills' },
@@ -24,6 +26,8 @@
type StatKey = typeof columns[number]['key'];
let sortBy = $state<StatKey>('score');
let descending = $state(true);
let expanded = $state<string[]>([]);
const uid = $props.id();
const number = new Intl.NumberFormat('en-US');
const players = $derived(report?.event === 'game_start'
? report.players.map(player => ({ ...player, score: null, kills: null, headshots: null, downs: null, revives: null }))
@@ -48,12 +52,13 @@
<div class="match-title">
<h2 title={report.map}>{mapLabel ?? mapTitle(report.map)}</h2>
{#if report.event !== 'game_start'}<Badge variant="accent" size="md">Round {report.round}</Badge>{/if}
{#if displayElapsed}<span class="match-time">Match {displayElapsed}{fresh ? '' : ' at last report'}</span>{/if}
{#if report.event === 'game_end'}<Badge>Game ended</Badge>
{:else if report.event === 'game_start'}<Badge>Game started</Badge>{/if}
</div>
</div>
<div class="report-meta">
<span>{players.length} {players.length === 1 ? 'player' : 'players'} in this report</span>
<span>{players.length} {players.length === 1 ? 'player' : 'players'}{fresh ? '' : ' in last report'}</span>
{#if !fresh}<Badge variant="warning">Historical report</Badge>{/if}
<time datetime={report.receivedAt} title={$timeFormat.dateTime(report.receivedAt)}>
Updated {elapsedSince(report.receivedAt, $uiNow)} ago
@@ -71,9 +76,6 @@
<thead>
<tr>
<th scope="col" class="player">Player</th>
<th scope="col" class="stat">Time on server</th>
<th scope="col" class="stat">Time in match</th>
<th scope="col" class="stat">Round started</th>
{#each columns as column (column.key)}
<th scope="col" class="stat" aria-sort={sortBy === column.key ? descending ? 'descending' : 'ascending' : 'none'}>
<button type="button" onclick={() => sort(column.key)}
@@ -90,11 +92,8 @@
<tr>
<th scope="row" class="player">
<a class="player-name" href={playerProfileHref(player.guid)}>{player.name}</a>
<div class="guid"><span>GUID</span><CopyValue value={player.guid} label={`GUID for ${player.name}`} /></div>
<button class="player-details" aria-label={`Details for ${player.name}`} aria-expanded={expanded.includes(player.guid)} aria-controls={`${uid}-${player.guid}`} onclick={() => expanded = expanded.includes(player.guid) ? expanded.filter(guid => guid !== player.guid) : [...expanded, player.guid]}>Details</button>
</th>
<td class="stat">{timing ? elapsedSince(timing.serverJoinedAt, timingNow) : '—'}</td>
<td class="stat">{timing ? elapsedSince(timing.matchJoinedAt, timingNow) : '—'}</td>
<td class="stat">{timing?.roundStarted ?? '—'}</td>
{#each columns as column (column.key)}
<td class="stat" class:score={column.key === 'score'}>
{#if player[column.key] === null}<span class="unreported" aria-label="Not yet reported">—</span>
@@ -102,20 +101,24 @@
</td>
{/each}
</tr>
<tr id={`${uid}-${player.guid}`} hidden={!expanded.includes(player.guid)}><td colspan="6"><div class="player-metadata"><div class="guid"><span>GUID</span><CopyValue value={player.guid} label={`GUID for ${player.name}`} /></div><span>Time on instance: {timing ? elapsedSince(timing.serverJoinedAt, timingNow) : '—'}</span><span>Time in match: {timing ? elapsedSince(timing.matchJoinedAt, timingNow) : '—'}</span><span>Joined round: {timing?.roundStarted ?? '—'}</span></div></td></tr>
{/each}
</tbody>
</table>
</div>
{/if}
<div class="scoreboard-footer">
<p class="note">{report.event === 'game_start' ? 'Player stats arrive with the next round report or heartbeat.' : report.event === 'game_end' ? 'Final stats from this game. The scoreboard resets when the next game starts.' : 'Stats update at each round change, heartbeat, and game end.'}</p>
<details><summary>About these stats</summary><p class="note">{report.event === 'game_start' ? 'Player stats arrive with the next round report or heartbeat.' : report.event === 'game_end' ? 'Final stats from this game. The scoreboard resets when the next game starts.' : 'Stats update at each round change, heartbeat, and game end.'}</p><p class="timing-note">Times and joining rounds are estimated from player reports. Time on instance carries across matches; ended or stale reports freeze at the last update.</p>{#if activity}<p class="timing-note">{activity}</p>{/if}</details>
<a href="/leaderboard">View lifetime leaderboard →</a>
</div>
<p class="timing-note">Times and joining rounds are estimated from player reports. Server time carries across consecutive matches; ended or stale reports show time at the last update.</p>
{/if}
<style>
.scoreboard-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-5); }
.player-metadata { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: var(--text-xs); color: var(--text-secondary); }
summary { cursor: pointer; color: var(--text-secondary); }
.match-time { font-size: var(--text-sm); color: var(--text-secondary); }
button.player-details { font-size: var(--text-xs); color: var(--text-secondary); }
.scoreboard-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-3); }
.match { display: grid; gap: var(--space-2); min-width: 0; }
.eyebrow { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-tertiary); }
.match-title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
@@ -124,11 +127,11 @@
time { font-size: var(--text-xs); color: var(--text-tertiary); }
.table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.table-scroll:focus-visible { outline: none; box-shadow: var(--focus-ring); }
table { width: 100%; min-width: 1000px; border-collapse: separate; border-spacing: 0; }
table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; }
th, td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); }
thead th { font-size: var(--text-xs); color: var(--text-secondary); font-weight: var(--weight-semibold); background: var(--surface-sunken); }
.player { text-align: left; position: sticky; left: 0; z-index: 1; }
thead .player { min-width: 230px; }
thead .player { min-width: 160px; }
tbody .player { background: var(--surface); font-weight: var(--weight-medium); }
.player-name { display: block; max-width: 320px; overflow-wrap: anywhere; font-size: var(--text-sm); color: var(--text-primary); }
.player-name { text-decoration: none; }
@@ -154,7 +157,7 @@
@media (max-width: 640px) {
.report-meta { text-align: left; }
th, td { padding: var(--space-3); }
thead .player { min-width: 190px; }
thead .player { min-width: 150px; }
.player-name { max-width: 220px; }
}
</style>