@@ -655,4 +665,13 @@
.tally dd {
margin: 0;
}
+ .link-like {
+ background: none;
+ border: 0;
+ padding: 0;
+ font: inherit;
+ color: inherit;
+ text-decoration: underline;
+ cursor: pointer;
+ }
diff --git a/src/lib/components/Preferences.svelte b/src/lib/components/Preferences.svelte
new file mode 100644
index 0000000..952d0ae
--- /dev/null
+++ b/src/lib/components/Preferences.svelte
@@ -0,0 +1,97 @@
+
+
+
+
+{#if open}
+
(open = false)}>
+
+
Preferences
+
Kept in this browser, and nowhere else.
+ {#each PREFERENCES as p (p.key)}
+
+ {#if p.kind === 'toggle'}
+
+ {:else}
+
+ {/if}
+ {#if p.note}
{p.note}
{/if}
+
+ {/each}
+
+
+{/if}
+
+
diff --git a/src/lib/game/index.ts b/src/lib/game/index.ts
index b204311..212879f 100644
--- a/src/lib/game/index.ts
+++ b/src/lib/game/index.ts
@@ -397,6 +397,7 @@ export const game: GameSpec
= {
},
{ key: 'side', label: 'You play', choices: SIDES, default: 'defenders' }
],
+ preferences: [{ key: 'coordinates', label: 'Coordinates on the board', kind: 'toggle', default: true }],
create: createGame,
resolve: resolveRound,
needsInput: (state, seat) => !state.over && state.players[seat]?.side === state.toMove,
diff --git a/src/lib/game/spec.ts b/src/lib/game/spec.ts
index dd5c4fe..a7636b6 100644
--- a/src/lib/game/spec.ts
+++ b/src/lib/game/spec.ts
@@ -39,6 +39,8 @@ export interface GameSpec {
seatIds: SeatId[];
/** What the host may choose when opening a table; empty for a game with one way to play. */
options?: TableOption[];
+ /** The game's own settings for the preferences panel, kept in the player's browser (see $lib/prefs.svelte). */
+ preferences?: { key: string; label: string; kind: 'toggle' | 'choice'; choices?: { value: string; label: string }[]; default: boolean | string; note?: string }[];
minSeats: number;
/** Names the server draws for bots, in preference order. */
botNames: string[];
diff --git a/src/lib/prefs.svelte.ts b/src/lib/prefs.svelte.ts
new file mode 100644
index 0000000..6c126cf
--- /dev/null
+++ b/src/lib/prefs.svelte.ts
@@ -0,0 +1,65 @@
+// Preferences: what this browser remembers about how its player likes to
+// play. The kit's own settings are motion and whether a move is confirmed
+// before it is sent; a game declares more in GameSpec.preferences, and the
+// panel renders every declaration. Nothing here leaves the browser.
+
+import { game } from '$lib/game';
+
+export interface Preference {
+ key: string;
+ label: string;
+ /** A toggle holds a boolean; a choice holds one of its choices' values. */
+ kind: 'toggle' | 'choice';
+ choices?: { value: string; label: string }[];
+ default: boolean | string;
+ note?: string;
+}
+
+/** The settings every game in the kit shares. */
+export const KIT_PREFERENCES: Preference[] = [
+ { key: 'motion', label: 'Motion', kind: 'choice', choices: [{ value: 'full', label: 'pieces move and fade' }, { value: 'reduced', label: 'changes appear at once' }], default: 'full' },
+ { key: 'confirmMoves', label: 'Confirm a move before it is sent', kind: 'toggle', default: false }
+];
+
+export const PREFERENCES: Preference[] = [...KIT_PREFERENCES, ...(game.preferences ?? [])];
+
+const KEY = 'hnefatafl:prefs';
+
+function defaults(): Record {
+ return Object.fromEntries(PREFERENCES.map((p) => [p.key, p.default]));
+}
+
+function load(): Record {
+ const base = defaults();
+ try {
+ const saved = JSON.parse(localStorage.getItem(KEY) ?? '{}') as Record;
+ for (const p of PREFERENCES) {
+ const v = saved[p.key];
+ if (p.kind === 'toggle' && typeof v === 'boolean') base[p.key] = v;
+ if (p.kind === 'choice' && typeof v === 'string' && p.choices?.some((c) => c.value === v)) base[p.key] = v;
+ }
+ // The hall's last table options ride along under table., undeclared.
+ for (const [k, v] of Object.entries(saved)) if (k.startsWith('table.') && typeof v === 'string') base[k] = v;
+ } catch {
+ // Without storage the defaults apply for this visit.
+ }
+ return base;
+}
+
+/** The live preferences; read them where they matter, set them through setPref. */
+export const prefs = $state>(typeof localStorage === 'undefined' ? defaults() : load());
+
+export function setPref(key: string, value: boolean | string): void {
+ prefs[key] = value;
+ try {
+ localStorage.setItem(KEY, JSON.stringify(prefs));
+ } catch {
+ // The change still applies for this visit.
+ }
+}
+
+/** The reduced-motion preference, or the system's, whichever asks for calm. */
+export function reducedMotion(): boolean {
+ if (prefs.motion === 'reduced') return true;
+ return typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
diff --git a/src/routes/join/[code]/+page.svelte b/src/routes/join/[code]/+page.svelte
index 6bbb509..60378ce 100644
--- a/src/routes/join/[code]/+page.svelte
+++ b/src/routes/join/[code]/+page.svelte
@@ -4,6 +4,7 @@
import Board from '$lib/components/Board.svelte';
import Lobby from '$lib/components/Lobby.svelte';
import ReportSlip from '$lib/components/ReportSlip.svelte';
+ import Preferences from '$lib/components/Preferences.svelte';
import { seatFor } from '$lib/net/client';
import { NAME_MAX, playerName, rememberName, Room } from '$lib/net/room.svelte';
@@ -16,6 +17,7 @@
let error = $state('');
let copied = $state(false);
let reporting = $state(false);
+ let prefsOpen = $state(false);
/** A phrase minted to carry this seat to another device, while it lasts. */
let phrase = $state<{ phrase: string; expiresAt: number } | null>(null);
let rematching = $state(false);
@@ -120,6 +122,7 @@
{/if}
{/if}
+
How to play
Rules
{#if room}
@@ -129,6 +132,7 @@
+
{#if room}
{/if}