Add server chat tab and show all four players

2026-09-19 23:05:41 -04:00
parent 44b6415821
commit 070e7fe9f7
5 changed files with 155 additions and 2 deletions
@@ -0,0 +1,94 @@
+<script lang="ts">
+    import { onMount, tick } from 'svelte';
+    import { parseGameChat, type ChatMessage } from '$lib/game-chat.js';
+    import { pollVisible } from '$ui/poll.js';
+    import Button from './primitives/Button.svelte';
+
+    let { server, game }: { server: string; game: string | null } = $props();
+    let messages = $state<ChatMessage[]>([]);
+    let loaded = $state(false);
+    let loading = $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;
+        loading = true;
+        const request = new AbortController();
+        controller = request;
+        try {
+            const key = game === 't6' ? 'games_zm' : 'games_sp';
+            const response = await fetch(`/api/servers/${encodeURIComponent(server)}/logs/${key}?lines=2000`, { signal: request.signal });
+            const data = await response.json();
+            if (!response.ok || !data.ok) throw new Error(data.reason ?? 'Could not refresh chat.');
+            if (request.signal.aborted) return;
+            messages = parseGameChat(data.lines ?? []);
+            missing = !!data.missing;
+            loaded = true;
+            error = '';
+            await tick();
+            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; }
+    }
+
+    function onScroll() {
+        if (body) follow = body.scrollHeight - body.scrollTop - body.clientHeight < 40;
+    }
+    async function latest() {
+        follow = true;
+        await tick();
+        if (body) body.scrollTop = body.scrollHeight;
+    }
+    onMount(() => {
+        const stop = pollVisible(refresh, 5000);
+        return () => { stop(); controller?.abort(); };
+    });
+</script>
+
+<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="actions">
+            {#if !follow}<Button size="sm" onclick={latest}>Latest messages</Button>{/if}
+            <Button size="sm" onclick={refresh} disabled={loading}>{loading ? 'Refreshing…' : 'Refresh'}</Button>
+        </div>
+    </div>
+    {#if error}<p class="ui-error" role="alert">{error} {loaded ? 'Showing the last loaded messages.' : ''}</p>{/if}
+    {#if !loaded && !error}
+        <p class="empty" role="status">Loading chat…</p>
+    {:else if loaded && !messages.length}
+        <p class="empty">{missing ? 'Waiting for the game log. Player messages will appear here.' : 'No player messages in the recent game log.'}</p>
+    {:else if messages.length}
+        <!-- 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 messages as message}
+                    <li>
+                        <span class="time" title="Elapsed game-log time">{message.time}</span>
+                        <div><strong>{message.player}</strong><p>{message.message}</p></div>
+                    </li>
+                {/each}
+            </ol>
+        </div>
+    {/if}
+    <p class="note">Times are elapsed game-log times. 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; }
+    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; }
+    ol { list-style: none; padding: 0; margin: 0; }
+    li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
+    .time { font-family: var(--font-mono); color: var(--text-tertiary); font-size: var(--text-sm); }
+    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; }
+</style>
@@ -67,7 +67,7 @@
        (roster ?? [])
            .slice()
            .sort((a, b) => b.score - a.score)
-            .slice(0, 3)
+            .slice(0, 4)
    );
    let showRoster = $derived(health === 'online' || health === 'stale');
    let title = $derived(serverTitle(name));