Add AFK account and session overview (Refs #151)

2026-10-17 17:52:03 -04:00
parent d723f23d67
commit 59f88ac33d
22 changed files with 2035 additions and 6 deletions
@@ -0,0 +1,68 @@
+<script lang="ts">
+    import type { AfkLedgerEntry } from '$lib/afk.js';
+    import { contextHref } from '$lib/navigation-context.js';
+    import { formatDuration } from '$ui/duration.js';
+    import { timeFormat } from '$ui/stores/time-zone.js';
+    import ServerIdentity from '../ServerIdentity.svelte';
+
+    let { entries, source }: { entries: AfkLedgerEntry[]; source: URL } = $props();
+    const duration = (seconds: number) => formatDuration(seconds * 1000);
+    const change = (seconds: number) =>
+        `${seconds > 0 ? '+' : seconds < 0 ? '−' : ''}${duration(Math.abs(seconds))}`;
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex (Keyboard users need to scroll wide tables.) -->
+<div class="afk-table-scroll" role="region" aria-label="AFK time ledger" tabindex="0">
+    <table class="afk-table">
+        <caption class="sr-only">AFK grants, purchases, reservations and consumption</caption>
+        <thead
+            ><tr
+                ><th scope="col">Player</th><th scope="col">Received / event</th><th scope="col"
+                    >Free change</th
+                ><th scope="col">Saved change</th><th scope="col">Balances after</th><th scope="col"
+                    >Server / match</th
+                ></tr
+            ></thead
+        >
+        <tbody>
+            {#each entries as entry (entry.id)}
+                <tr>
+                    <td
+                        ><a
+                            class="afk-player"
+                            href={contextHref(
+                                `/leaderboard/players/${encodeURIComponent(entry.guid)}`,
+                                source
+                            )}>{entry.name ?? entry.guid}</a
+                        ><small class="afk-id">{entry.guid}</small></td
+                    >
+                    <td
+                        ><time datetime={entry.createdAt}
+                            >{$timeFormat.dateTime(entry.createdAt)}</time
+                        ><small>{entry.kind.replaceAll('_', ' ')}</small
+                        >{#if entry.eventAt !== entry.createdAt}<small
+                                >Reported {$timeFormat.dateTime(entry.eventAt)}</small
+                            >{/if}<small class="afk-id">{entry.operationId}</small></td
+                    >
+                    <td class="afk-number">{change(entry.freeDelta)}</td><td class="afk-number"
+                        >{change(entry.savedDelta)}</td
+                    >
+                    <td class="afk-number"
+                        >{duration(entry.freeSeconds)} free<small
+                            >{duration(entry.savedSeconds)} saved</small
+                        ></td
+                    >
+                    <td
+                        ><ServerIdentity name={entry.server} /><small
+                            >{#if entry.matchAvailable && entry.matchId}<a
+                                    href={contextHref(`/matches/${entry.matchId}`, source)}
+                                    >Match #{entry.matchId}</a
+                                >{:else if entry.matchId}Match #{entry.matchId} · History expired{:else}No
+                                match history{/if}</small
+                        ></td
+                    >
+                </tr>
+            {/each}
+        </tbody>
+    </table>
+</div>