Files
electric-cherry/src/lib/ui/components/afk/AfkLedger.svelte
T
2026-10-17 17:52:03 -04:00

69 lines
3.2 KiB
Svelte
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<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>