TabbedDialog and the boxed tab strip, as Dip has them; the tally's comment describes the tally
TabbedDialog keeps its own backdrop here, since the template has no shared one; a game that has one may drop it. The template's hall still opens its about panel with About.svelte. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG
This commit is contained in:
Eric Wagoner
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
6039b6c248
commit
c3fca6c5c7
@@ -0,0 +1,140 @@
|
||||
<script lang="ts">
|
||||
// A dialog of tabs: the about panel, how to play, the rules. The address
|
||||
// names it, so a plain link opens it: #rules opens the rules, #guide/notation
|
||||
// how to play at its notation. It closes with its button, a click outside
|
||||
// it, or Escape. The tab last read is the one it reopens on. `open` tells
|
||||
// the page whether it is showing.
|
||||
import { untrack, type Snippet } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import { page } from '$app/state';
|
||||
import Tabs, { type Tab } from './Tabs.svelte';
|
||||
|
||||
let {
|
||||
address,
|
||||
title,
|
||||
label = title,
|
||||
tabs,
|
||||
intro,
|
||||
open = $bindable(false)
|
||||
}: { address: string; title: string; label?: string; tabs: Tab[]; intro?: Snippet; open?: boolean } = $props();
|
||||
|
||||
let current = $state('');
|
||||
|
||||
// The router holds the address, and the dialog is open exactly while the address names it.
|
||||
// Every change goes through the router too, so it never loses track of where the page is.
|
||||
const [named, tab] = $derived.by(() => {
|
||||
const [name, t] = page.url.hash.slice(1).split('/');
|
||||
return [name === address, t] as const;
|
||||
});
|
||||
$effect(() => {
|
||||
open = named;
|
||||
});
|
||||
$effect(() => {
|
||||
if (named && tabs.some((t) => t.id === tab)) untrack(() => (current = tab));
|
||||
});
|
||||
// The address follows the chosen tab, so what is being read can be linked to.
|
||||
$effect(() => {
|
||||
if (named && current && current !== untrack(() => tab)) show(current);
|
||||
});
|
||||
|
||||
const bare = () => `${location.pathname}${location.search}`;
|
||||
const quietly = { replaceState: true, noScroll: true, keepFocus: true };
|
||||
function show(id: string) {
|
||||
goto(`${bare()}#${address}/${id}`, quietly);
|
||||
}
|
||||
function close() {
|
||||
goto(bare(), quietly);
|
||||
}
|
||||
|
||||
function onKey(e: KeyboardEvent) {
|
||||
if (named && e.key === 'Escape') close();
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window onkeydown={onKey} />
|
||||
|
||||
{#if named}
|
||||
<div class="scrim" role="presentation" onclick={(ev) => ev.target === ev.currentTarget && close()}>
|
||||
<div class="panel" role="dialog" aria-modal="true" aria-labelledby="{address}-title">
|
||||
<header>
|
||||
<h2 id="{address}-title">{title}</h2>
|
||||
<button type="button" class="close" aria-label="Close" onclick={close}>×</button>
|
||||
</header>
|
||||
<div class="body">
|
||||
{#if intro}<div class="intro">{@render intro()}</div>{/if}
|
||||
<Tabs {tabs} {label} bind:current />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
/* Its own backdrop: not every game has another dialog to share one with. */
|
||||
.scrim {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 20;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 16px;
|
||||
}
|
||||
/* min-width 0 all the way down, so wide content (the notation's table) scrolls in place instead of widening the dialog past a phone's screen. */
|
||||
.panel {
|
||||
width: min(100%, 44rem);
|
||||
min-width: 0;
|
||||
max-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--slate);
|
||||
border: 1px solid var(--rule-strong);
|
||||
border-radius: 6px;
|
||||
padding: 1rem 1.4rem 1.2rem;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 1.3rem;
|
||||
margin: 0 0 0.6rem;
|
||||
}
|
||||
.close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: inherit;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
padding: 0.2rem 0.4rem;
|
||||
}
|
||||
.body {
|
||||
overflow: auto;
|
||||
min-height: 12rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.intro {
|
||||
color: var(--bone-dim);
|
||||
}
|
||||
.body :global(a) {
|
||||
color: var(--frost);
|
||||
}
|
||||
.body :global(h3) {
|
||||
font-size: 1rem;
|
||||
font-style: italic;
|
||||
margin: 0.9rem 0 0.2rem;
|
||||
color: var(--bone);
|
||||
}
|
||||
.body :global(h3:first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
/* The tab strip stays in view while a long tab scrolls beneath it. */
|
||||
.body :global([role='tablist']) {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
background: var(--slate);
|
||||
}
|
||||
</style>
|
||||
@@ -10,40 +10,22 @@
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
// A strip of tabs over one panel, for a page or a dialog that would
|
||||
// otherwise be one long read. Arrow keys walk the tabs, Home and End go to
|
||||
// the ends. With `address`, the page's #fragment names the open tab, so a
|
||||
// link to /rules#syntax opens that tab and choosing a tab can be linked to.
|
||||
// A strip of tabs over one panel, for a dialog that would otherwise be one
|
||||
// long read. Arrow keys walk the tabs, Home and End go to the ends.
|
||||
import { tick } from 'svelte';
|
||||
|
||||
let { tabs, label, current = $bindable(''), address = false }: { tabs: Tab[]; label: string; current?: string; address?: boolean } = $props();
|
||||
let { tabs, label, current = $bindable('') }: { tabs: Tab[]; label: string; current?: string } = $props();
|
||||
|
||||
const uid = $props.id();
|
||||
const shown = $derived(tabs.find((t) => t.id === current) ?? tabs[0]);
|
||||
let tabButtons: HTMLButtonElement[] = $state([]);
|
||||
|
||||
$effect(() => {
|
||||
if (!address) return;
|
||||
const fromHash = () => {
|
||||
const id = location.hash.slice(1);
|
||||
if (tabs.some((t) => t.id === id)) current = id;
|
||||
};
|
||||
fromHash();
|
||||
window.addEventListener('hashchange', fromHash);
|
||||
return () => window.removeEventListener('hashchange', fromHash);
|
||||
});
|
||||
|
||||
function choose(id: string) {
|
||||
current = id;
|
||||
if (address) history.replaceState(history.state, '', `${location.pathname}${location.search}#${id}`);
|
||||
}
|
||||
|
||||
async function onKey(e: KeyboardEvent, i: number) {
|
||||
const to = e.key === 'ArrowRight' ? i + 1 : e.key === 'ArrowLeft' ? i - 1 : e.key === 'Home' ? 0 : e.key === 'End' ? tabs.length - 1 : null;
|
||||
if (to === null) return;
|
||||
e.preventDefault();
|
||||
const next = (to + tabs.length) % tabs.length;
|
||||
choose(tabs[next].id);
|
||||
current = tabs[next].id;
|
||||
await tick();
|
||||
tabButtons[next]?.focus();
|
||||
}
|
||||
@@ -60,7 +42,7 @@
|
||||
tabindex={shown.id === t.id ? 0 : -1}
|
||||
class:on={shown.id === t.id}
|
||||
bind:this={tabButtons[i]}
|
||||
onclick={() => choose(t.id)}
|
||||
onclick={() => (current = t.id)}
|
||||
onkeydown={(e) => onKey(e, i)}>{t.label}</button
|
||||
>
|
||||
{/each}
|
||||
@@ -70,35 +52,36 @@
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* Small capitals in a row that may wrap, the open tab boxed: a second row reads as more buttons, not a broken line. */
|
||||
.tabs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.2rem 0.4rem;
|
||||
gap: 0.3rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid var(--rule-strong);
|
||||
margin: 0.6rem 0 0.8rem;
|
||||
}
|
||||
.tabs button {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.74rem;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 3px solid transparent;
|
||||
color: inherit;
|
||||
opacity: 0.75;
|
||||
font: inherit;
|
||||
padding: 0.35rem 0.5rem 0.4rem;
|
||||
border: 1.5px solid transparent;
|
||||
border-radius: 3px;
|
||||
color: var(--bone-dim);
|
||||
padding: 0.3rem 0.6rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tabs button:hover {
|
||||
color: var(--bone);
|
||||
}
|
||||
.tabs button.on {
|
||||
opacity: 1;
|
||||
border-bottom-color: currentColor;
|
||||
border-color: var(--bone);
|
||||
color: var(--bone);
|
||||
background: var(--slate-deep);
|
||||
}
|
||||
.panel :global(p + p) {
|
||||
margin-top: 0.7rem;
|
||||
}
|
||||
.panel :global(h3) {
|
||||
font-size: 1.05rem;
|
||||
margin: 1rem 0 0.4rem;
|
||||
}
|
||||
.panel :global(h3:first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -7,9 +7,9 @@
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
// What the ledgers add up to, told as Wiz-War tells it: a few counts that
|
||||
// are the game's own story, large, on cards; then the rest in a column of
|
||||
// figures; then the fine print. Each game chooses its counts and words.
|
||||
// What the ledgers add up to: a few counts that are the game's own story,
|
||||
// large, on cards; then the rest in a column of figures; then the fine
|
||||
// print. Each game chooses its counts and words.
|
||||
let { headline, details, note, title = 'How much love the table is getting' }: { headline: TallyLine[]; details: TallyLine[]; note?: string; title?: string } =
|
||||
$props();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user