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
This commit is contained in:
Eric Wagoner
co-authored by
Claude Fable 5.1
Claude Fable 5.1
parent
de430c3794
commit
3825dfb44c
@@ -4,6 +4,8 @@
|
||||
// about panel with the rules, the guide and a way to reach the keeper.
|
||||
import { goto } from '$app/navigation';
|
||||
import { otherGames, type FamilyGame } from '$lib/family';
|
||||
import Preferences from './Preferences.svelte';
|
||||
import { prefs, setPref } from '$lib/prefs.svelte';
|
||||
import { allSeats, doubtSeat, forgetSeat, rememberSeat, ServerError, trustSeat, type Report, type Tally } from '$lib/net/client';
|
||||
import { api, NAME_MAX, playerName, rememberName, Room } from '$lib/net/room.svelte';
|
||||
import { unreadTalk } from '$lib/net/talk';
|
||||
@@ -14,7 +16,14 @@
|
||||
let name = $state(playerName());
|
||||
let code = $state('');
|
||||
/** The host's choices for the next table, from the game's declared options. */
|
||||
let options = $state<Record<string, string>>(Object.fromEntries((game.options ?? []).map((o) => [o.key, o.default])));
|
||||
// The host's last choices come back as the defaults; a regular does not re-pick them each visit.
|
||||
let options = $state<Record<string, string>>(
|
||||
Object.fromEntries((game.options ?? []).map((o) => [o.key, o.choices.some((c) => c.value === prefs[`table.${o.key}`]) ? String(prefs[`table.${o.key}`]) : o.default]))
|
||||
);
|
||||
$effect(() => {
|
||||
for (const o of game.options ?? []) if (prefs[`table.${o.key}`] !== options[o.key]) setPref(`table.${o.key}`, options[o.key]);
|
||||
});
|
||||
let prefsOpen = $state(false);
|
||||
let busy = $state(false);
|
||||
let error = $state('');
|
||||
let seats = $state(allSeats());
|
||||
@@ -157,7 +166,8 @@
|
||||
<h1>__NAME__</h1>
|
||||
<p class="pitch">One line that says what the game is.</p>
|
||||
<p class="tag">Two or three sentences for someone who has never heard of it: what you do on a turn, what makes it fun, and that it is free to play here against the bot or with friends.</p>
|
||||
<p class="links"><a href="/guide">how to play</a> · <a href="/rules">the rules</a> · <a class="about-link" href="#about" onclick={() => (aboutOpen = true)}>about this game — a labor of love</a></p>
|
||||
<p class="links"><a href="/guide">how to play</a> · <a href="/rules">the rules</a> · <a class="about-link" href="#about" onclick={() => (aboutOpen = true)}>about this game — a labor of love</a> · <button type="button" class="link-like" onclick={() => (prefsOpen = true)}>preferences</button></p>
|
||||
<Preferences bind:open={prefsOpen} />
|
||||
</div>
|
||||
|
||||
<div class="lid-play">
|
||||
@@ -625,4 +635,13 @@
|
||||
.tally dd {
|
||||
margin: 0;
|
||||
}
|
||||
.link-like {
|
||||
background: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user