Begin Wyrm from the game kit

src/lib/components/TableTalk.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import { NAME_MAX, playerName, rememberName, type Room } from '$lib/net/room.svelte';
+
+	let { room }: { room: Room } = $props();
+
+	const lines = $derived(room.view.chat);
+	let draft = $state('');
+	/** The gallery signs its lines; the name is the one the hall remembers. */
+	let galleryName = $state(playerName());
+	let sending = $state(false);
+	let list = $state<HTMLElement | null>(null);
+
+	// New talk scrolls into view, as at any table.
+	$effect(() => {
+		void lines.length;
+		void tick().then(() => {
+			if (list) list.scrollTop = list.scrollHeight;
+		});
+	});
+
+	async function say(e: SubmitEvent) {
+		e.preventDefault();
+		const text = draft.trim();
+		if (!text || sending) return;
+		sending = true;
+		if (await room.say(text)) draft = '';
+		sending = false;
+	}
+
+	async function sayFromGallery(e: SubmitEvent) {
+		e.preventDefault();
+		const text = draft.trim();
+		const name = galleryName.trim();
+		if (!text || !name || sending) return;
+		sending = true;
+		rememberName(name);
+		if (await room.sayFromGallery(name, text)) draft = '';
+		sending = false;
+	}
+</script>
+
+<section class="talk" aria-label="Table talk">
+	<h2>Table talk{#if room.view.audience > 0}<span class="audience">{room.view.audience} in the gallery</span>{/if}</h2>
+	<ul bind:this={list}>
+		{#if lines.length === 0}
+			<li class="muted">Nobody has said a word.</li>
+		{/if}
+		{#each lines as line, i (line.at + ':' + i)}
+			<li class:you={!line.name && line.id === room.me} class:private={!!line.to}>
+				<em>{line.keeper ? `${line.name}, the keeper` : line.name ? `${line.name} (gallery)` : line.id === room.me ? 'You' : room.nameOf(line.id)}{#if line.to}<span class="to">, to {line.to.map((id) => (id === room.me ? 'you' : room.nameOf(id))).join(', ')} alone</span>{/if}</em>
+				{line.text}
+			</li>
+		{/each}
+	</ul>
+	{#if room.spectating && room.view.galleryTalk}
+		<form onsubmit={sayFromGallery}>
+			<input type="text" class="name" bind:value={galleryName} maxlength={NAME_MAX} placeholder="Your name" aria-label="Your name in the gallery" autocomplete="nickname" />
+			<input type="text" bind:value={draft} maxlength="300" placeholder="Say something from the gallery" aria-label="Say something from the gallery" autocomplete="off" />
+			<button type="submit" class="quiet" disabled={!draft.trim() || !galleryName.trim() || sending}>Say</button>
+		</form>
+	{:else if room.spectating}
+		<p class="muted small note">The host has not let the gallery talk at this table.</p>
+	{:else}
+		<form onsubmit={say}>
+			<input type="text" bind:value={draft} maxlength="300" placeholder="Say something to the table" aria-label="Say something to the table" autocomplete="off" />
+			<button type="submit" class="quiet" disabled={!draft.trim() || sending}>Say</button>
+		</form>
+	{/if}
+</section>
+
+<style>
+	.talk {
+		padding: 0.75rem 0;
+		border-top: 1px solid var(--rule);
+	}
+
+	h2 {
+		font-size: 1.1rem;
+		font-style: italic;
+		margin-bottom: 0.4rem;
+		display: flex;
+		justify-content: space-between;
+		align-items: baseline;
+		gap: 0.75rem;
+	}
+
+	.audience {
+		font-size: 0.8rem;
+		font-style: normal;
+		color: var(--bone-faint);
+	}
+
+	ul {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		max-height: 12rem;
+		overflow-y: auto;
+		font-size: 0.9rem;
+		line-height: 1.4;
+	}
+
+	li + li {
+		margin-top: 0.2rem;
+	}
+
+	li em {
+		color: var(--bone-dim);
+	}
+
+	li.you em {
+		color: var(--frost);
+	}
+
+	li.private {
+		font-style: italic;
+	}
+
+	form {
+		display: flex;
+		gap: 0.4rem;
+		margin-top: 0.5rem;
+	}
+
+	input {
+		flex: 1;
+		min-width: 0;
+	}
+
+	input.name {
+		flex: 0 1 8rem;
+	}
+
+	.note {
+		margin-top: 0.4rem;
+	}
+</style>