Preferences: a panel of what the browser remembers about its player, with the kit's motion and confirm-move settings, a game's own declarations, and the host's last table options as defaults

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG

template/src/lib/components/Preferences.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	// The preferences panel: every declared setting, kit and game, as a
+	// control. Opened from the masthead; closes with its button or Escape.
+	import { PREFERENCES, prefs, setPref } from '$lib/prefs.svelte';
+
+	let { open = $bindable(false) }: { open?: boolean } = $props();
+
+	function onKey(e: KeyboardEvent) {
+		if (e.key === 'Escape') open = false;
+	}
+</script>
+
+<svelte:window onkeydown={onKey} />
+
+{#if open}
+	<div class="scrim" role="presentation" onclick={() => (open = false)}></div>
+	<div class="panel" role="dialog" aria-modal="true" aria-labelledby="prefs-title">
+		<h2 id="prefs-title">Preferences</h2>
+		<p class="muted small">Kept in this browser, and nowhere else.</p>
+		{#each PREFERENCES as p (p.key)}
+			<div class="pref">
+				{#if p.kind === 'toggle'}
+					<label class="row">
+						<input type="checkbox" checked={prefs[p.key] === true} onchange={(e) => setPref(p.key, e.currentTarget.checked)} />
+						<span>{p.label}</span>
+					</label>
+				{:else}
+					<label class="row">
+						<span>{p.label}</span>
+						<select value={prefs[p.key]} onchange={(e) => setPref(p.key, e.currentTarget.value)}>
+							{#each p.choices ?? [] as c (c.value)}<option value={c.value}>{c.label}</option>{/each}
+						</select>
+					</label>
+				{/if}
+				{#if p.note}<p class="muted small note">{p.note}</p>{/if}
+			</div>
+		{/each}
+		<button type="button" class="quiet" onclick={() => (open = false)}>Done</button>
+	</div>
+{/if}
+
+<style>
+	.scrim {
+		position: fixed;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.45);
+		z-index: 20;
+	}
+
+	.panel {
+		position: fixed;
+		z-index: 21;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: min(92vw, 26rem);
+		max-height: 90vh;
+		overflow: auto;
+		background: var(--slate);
+		border: 1px solid var(--rule-strong);
+		border-radius: 8px;
+		padding: 1.2rem 1.4rem 1.4rem;
+	}
+
+	h2 {
+		font-size: 1.3rem;
+		margin: 0 0 0.2rem;
+	}
+
+	.pref {
+		padding: 0.55rem 0;
+		border-top: 1px solid var(--rule);
+	}
+
+	.row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.8rem;
+	}
+
+	.row input[type='checkbox'] {
+		order: 2;
+	}
+
+	.note {
+		margin-top: 0.3rem;
+	}
+
+	.small {
+		font-size: 0.85rem;
+	}
+
+	.quiet {
+		margin-top: 0.8rem;
+	}
+</style>