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

Refine chat layout and collapse consecutive match events

Browse Source
This commit is contained in:
josh
2026-10-02 13:44:44 -04:00
parent d7b3e124e6
commit a2e2311aa9
4 changed files with 172 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/ui/components/ChatPanel.svelte
+95 -41
View File
@@ -2,24 +2,31 @@
import { onMount, tick } from 'svelte';
import type { ChatContext, ContextualChatEntry } from '$lib/game-chat.js';
import { formatDuration } from '$ui/duration.js';
import { groupChatTimeline, type ChatBoundaryEntry } from '$ui/chat-timeline.js';
import { pollVisible } from '$ui/poll.js';
import { timeFormat } from '$ui/stores/time-zone.js';
import Button from './primitives/Button.svelte';
let { server }: { server: string } = $props();
let entries = $state<ContextualChatEntry[]>([]);
let timeline = $derived(groupChatTimeline(entries));
let hasMessages = $derived(entries.some(entry => entry.type === 'message'));
let loaded = $state(false);
let loading = $state(false);
let manualRefreshing = $state(false);
let error = $state('');
let missing = $state(false);
let body = $state<HTMLDivElement | null>(null);
let follow = $state(true);
let controller: AbortController | null = null;
async function refresh() {
if (loading) return;
async function refresh(manual = false) {
if (loading) {
if (manual) manualRefreshing = true;
return;
}
loading = true;
manualRefreshing = manual;
const request = new AbortController();
controller = request;
try {
@@ -35,7 +42,7 @@
if (follow && body) body.scrollTop = body.scrollHeight;
} catch (err) {
if (!request.signal.aborted) error = err instanceof Error ? err.message : 'Could not refresh chat.';
} finally { loading = false; }
} finally { loading = false; manualRefreshing = false; }
}
function onScroll() {
@@ -47,28 +54,43 @@
if (body) body.scrollTop = body.scrollHeight;
}
onMount(() => {
const stop = pollVisible(refresh, 5000);
const stop = pollVisible(() => refresh(), 5000);
return () => { stop(); controller?.abort(); };
});
</script>
{#snippet unavailable()}
<span aria-hidden="true">—</span><span class="sr-only">Unavailable</span>
{/snippet}
{#snippet clockTime(value: string)}
<time datetime={value} title={$timeFormat.dateTime(value)} aria-label={$timeFormat.dateTime(value)}>{$timeFormat.clockTime(value)}</time>
{/snippet}
{#snippet chatContext(context: ChatContext)}
<dl class="context" aria-label="Message context">
<div>
<dt>Real time</dt>
<dd>{#if context.realTime}<time datetime={context.realTime} title={`Estimated real time: ${$timeFormat.dateTime(context.realTime)}`}>≈ {$timeFormat.time(context.realTime)}</time>{:else}—{/if}</dd>
</div>
<div><dt>Match</dt><dd>{context.matchElapsedMs === null ? '—' : formatDuration(context.matchElapsedMs)}</dd></div>
<div><dt>Round</dt><dd>{context.round ?? '—'}</dd></div>
<div><dt>Match</dt><dd>{#if context.matchElapsedMs === null}{@render unavailable()}{:else}{formatDuration(context.matchElapsedMs)}{/if}</dd></div>
<div><dt>Round</dt><dd>{#if context.round === null}{@render unavailable()}{:else}{context.round}{/if}</dd></div>
</dl>
{/snippet}
{#snippet matchBoundary(entry: ChatBoundaryEntry)}
<div class="match-divider">
<div class="match-label">
<span>{entry.event === 'start' ? 'Match started' : entry.event === 'end' ? 'Match ended' : 'New match'}</span>
{#if entry.context.realTime}<span class="boundary-context">{@render clockTime(entry.context.realTime)}</span>{/if}
{#if entry.context.matchElapsedMs !== null}<span class="boundary-context">Match <span class="number">{formatDuration(entry.context.matchElapsedMs)}</span></span>{/if}
{#if entry.context.round !== null}<span class="boundary-context">Round <span class="number">{entry.context.round}</span></span>{/if}
</div>
</div>
{/snippet}
<section aria-label="Player chat">
<div class="chat-head">
<div><h2>Chat</h2><p>Recent messages from the game log · refreshes every 5 seconds</p></div>
<div class="chat-title"><h2>Chat</h2><span class="update-cadence">Updates every 5s</span></div>
<div class="actions">
{#if !follow}<Button size="sm" onclick={latest}>Latest messages</Button>{/if}
<Button size="sm" onclick={refresh} disabled={loading}>{loading ? 'Refreshing…' : 'Refresh'}</Button>
{#if !follow}<Button size="sm" variant="ghost" onclick={latest}>Latest messages</Button>{/if}
<Button size="sm" onclick={() => refresh(true)} loading={manualRefreshing} ariaLabel={manualRefreshing ? 'Refreshing chat' : 'Refresh chat'}>Refresh</Button>
</div>
</div>
{#if error}<p class="ui-error" role="alert">{error} {loaded ? 'Showing the last loaded messages.' : ''}</p>{/if}
@@ -80,46 +102,78 @@
<!-- svelte-ignore a11y_no_noninteractive_tabindex (The scrollable chat region must support keyboard scrolling.) -->
<div class="messages" bind:this={body} onscroll={onScroll} tabindex="0" role="region" aria-label="Chat messages">
<ol>
{#each entries as entry}
{#if entry.type === 'boundary'}
<li class="match-divider" class:match-end={entry.event === 'end'}>
<div class="match-label">
<span>{entry.event === 'start' ? 'Match started' : entry.event === 'end' ? 'Match ended' : 'New match · timer reset'}</span>
{@render chatContext(entry.context)}
</div>
{#each timeline as item}
{#if item.type === 'boundaries'}
<li class="match-events">
{#if item.entries.length > 1}
{#key JSON.stringify(item.entries)}
<details class="earlier-events" ontoggle={(event) => { if (event.currentTarget.open) follow = false; }}>
<summary>{item.entries.length - 1} earlier match {item.entries.length === 2 ? 'event' : 'events'}</summary>
<ol aria-label="Earlier match events">
{#each item.entries.slice(0, -1) as entry}
<li>{@render matchBoundary(entry)}</li>
{/each}
</ol>
</details>
{/key}
{/if}
{@render matchBoundary(item.entries[item.entries.length - 1])}
</li>
{:else}
<li class="message">
<div class="message-head"><strong>{entry.message.player}</strong>{@render chatContext(entry.context)}</div>
<p>{entry.message.message}</p>
<span class="message-clock">
{#if item.entry.context.realTime}{@render clockTime(item.entry.context.realTime)}{:else}<span class="sr-only">Time: </span>{@render unavailable()}{/if}
</span>
<div class="message-content">
<div class="message-head"><strong>{item.entry.message.player}</strong>{@render chatContext(item.entry.context)}</div>
<p>{item.entry.message.message}</p>
</div>
</li>
{/if}
{/each}
</ol>
</div>
{/if}
<p class="note">Real times are estimated from log writes. — means context is unavailable. Older messages may fall outside the recent log window.</p>
</section>
<style>
.chat-head, .actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
section { container-type: inline-size; }
.chat-head, .actions, .chat-title { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.chat-head { justify-content: space-between; }
.chat-title { gap: var(--space-2) var(--space-3); }
h2 { margin: 0; font-size: var(--text-lg); }
.chat-head p, .note, .empty { color: var(--text-secondary); font-size: var(--text-sm); }
.messages { max-height: 60vh; overflow: auto; margin-top: 16px; }
.update-cadence { color: var(--text-secondary); font-size: var(--text-xs); }
.empty { color: var(--text-secondary); font-size: var(--text-sm); padding: var(--space-6) 0; }
.messages { max-height: 60vh; overflow: auto; margin-top: var(--space-4); }
.messages:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-primary); border-radius: var(--radius-sm); }
ol { list-style: none; padding: 0; margin: 0; }
.message { padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.message-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px; }
.context { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: var(--text-sm); font-weight: 400; }
.context > div { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.context dt { color: var(--text-tertiary); }
.context dd { margin: 0; color: var(--text-secondary); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.match-divider { display: flex; align-items: center; gap: 12px; padding: 20px 0; color: var(--text-primary); font-size: var(--text-sm); }
.match-divider::before, .match-divider::after { content: ''; height: 1px; flex: 1; background: var(--border-subtle); }
.match-label { display: flex; align-items: center; flex-direction: column; gap: 6px; max-width: 100%; padding: 8px 14px; border: 1px solid var(--border-subtle); border-radius: 12px; font-weight: 600; text-align: center; }
.match-label .context { justify-content: center; }
.match-end { color: var(--text-secondary); }
strong { color: var(--text-primary); overflow-wrap: anywhere; }
li p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.empty { padding: 24px 0; }
.note { margin-bottom: 0; }
.message { display: grid; grid-template-columns: 6rem minmax(0, 1fr); align-items: baseline; column-gap: var(--space-4); padding: var(--space-3) 0; }
.message-clock, .number { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.message-clock { font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; }
.message-content { min-width: 0; }
.message-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
strong { min-width: 0; color: var(--text-primary); font-size: var(--text-base); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.context { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; color: var(--text-secondary); font-size: var(--text-xs); font-weight: var(--weight-regular); }
.context > div { display: flex; align-items: baseline; gap: var(--space-1); white-space: nowrap; }
.context > div + div::before { content: '·'; margin-right: var(--space-1); color: var(--text-tertiary); }
.context dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.message p { margin: var(--space-1) 0 0; font-size: var(--text-base); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.match-events { padding: var(--space-1) 0; }
.match-divider { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; color: var(--text-secondary); font-size: var(--text-xs); }
.match-divider::before, .match-divider::after { content: ''; height: 1px; flex: 1; min-width: var(--space-3); background: var(--border-subtle); }
.match-label { min-width: 0; display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.boundary-context { white-space: nowrap; }
.boundary-context::before { content: '·'; margin-right: var(--space-2); color: var(--text-tertiary); }
.earlier-events summary { width: fit-content; max-width: 100%; box-sizing: border-box; min-height: 32px; margin-inline: auto; padding: var(--space-2); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--text-xs); cursor: pointer; }
.earlier-events summary:hover { color: var(--text-primary); background: var(--surface-raised); }
.earlier-events summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@container (max-width: 560px) {
.message { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); }
.message-clock { grid-column: 2; grid-row: 1; }
.message-content, .message-head { display: contents; }
strong { grid-column: 1; grid-row: 1; }
.context { grid-column: 1 / -1; grid-row: 2; }
.message p { grid-column: 1 / -1; grid-row: 3; margin-top: 0; }
}
</style>