game-kit/template/src/lib/components/Preferences.svelte

<script lang="ts">
	// The preferences panel: every declared setting, kit and game, as a
	// control. Opened from the masthead; closes with its button, a click
	// outside it, 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={(ev) => ev.target === ev.currentTarget && (open = false)}>
		<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>
	</div>
{/if}

<style>
	.scrim {
		position: fixed;
		inset: 0;
		z-index: 20;
		background: rgba(0, 0, 0, 0.55);
		display: grid;
		/* One row the window's height, so the dialog's max-height: 100% is a real limit and it scrolls within. */
		grid-template-rows: minmax(0, 1fr);
		place-items: center;
		padding: 16px;
	}

	.panel {
		width: min(100%, 26rem);
		max-height: 100%;
		overflow: auto;
		background: var(--slate);
		border: 1px solid var(--rule-strong);
		border-radius: 6px;
		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;
	}

	.quiet {
		margin-top: 0.8rem;
	}
</style>