eric/wyrm
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

The told game on a phone leaves room beneath the boards for the Back and Next bar, measured, plus the screen's safe-area inset; the underworld's file letters were under it

Browse Source 
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01CCLa2PaEeCj8njQZSWGqHx
This commit is contained in:
Eric WagonerandClaude Fable 5.1 committed 2026-10-27 21:10:13 -04:00
1 parent 36508f29ca
commit b88c57f350
1 file changed
+6 -4
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/learn/game/+page.svelte
+6 -4
View File
@@ -38,6 +38,8 @@
const calm = $derived(reducedMotion()); const calm = $derived(reducedMotion());
const showCoords = $derived(prefs.coordinates !== false); const showCoords = $derived(prefs.coordinates !== false);
const marks = Object.keys(CALLOUTS).map(Number).filter((n) => n > 0); const marks = Object.keys(CALLOUTS).map(Number).filter((n) => n > 0);
/** The height of the Back and Next bar, which on a phone is fixed at the foot of the screen and must leave room beneath the boards. */
let barHeight = $state(0);
/** A piece tapped to read about it and to see where it could go from here, before the game shows what it did. */ /** A piece tapped to read about it and to see where it could go from here, before the game shows what it did. */
let inspected = $state<number | null>(null); let inspected = $state<number | null>(null);
@@ -80,7 +82,7 @@
<svelte:window onkeydown={key} /> <svelte:window onkeydown={key} />
<main class="reading wide"> <main class="reading wide" style:--bar="{barHeight}px">
<header> <header>
<a class="back" href="/">Back to the hall</a> · <a class="back" href="/learn">Learn the pieces</a> · <a class="back" href="/guide">How to play</a> · <a class="back" href="/rules">The rules</a> <a class="back" href="/">Back to the hall</a> · <a class="back" href="/learn">Learn the pieces</a> · <a class="back" href="/guide">How to play</a> · <a class="back" href="/rules">The rules</a>
<h1>A game told</h1> <h1>A game told</h1>
@@ -104,7 +106,7 @@
</ul> </ul>
{/if} {/if}
{#if callout}<p class="callout">{callout}</p>{/if} {#if callout}<p class="callout">{callout}</p>{/if}
<div class="ways"> <div class="ways" bind:clientHeight={barHeight}>
<button type="button" class="quiet" disabled={ply === 0} onclick={() => go(ply - 1)}>Back</button> <button type="button" class="quiet" disabled={ply === 0} onclick={() => go(ply - 1)}>Back</button>
<button type="button" class="commit small" disabled={ply === TOLD_MOVES.length} onclick={() => go(ply + 1)}>Next move</button> <button type="button" class="commit small" disabled={ply === TOLD_MOVES.length} onclick={() => go(ply + 1)}>Next move</button>
{#if ply === TOLD_MOVES.length}<a class="quiet" href="/">Play a drake</a>{/if} {#if ply === TOLD_MOVES.length}<a class="quiet" href="/">Play a drake</a>{/if}
@@ -160,7 +162,7 @@
bottom: 0; bottom: 0;
z-index: 4; z-index: 4;
margin: 0; margin: 0;
padding: 0.55rem var(--gutter); padding: 0.55rem var(--gutter) calc(0.55rem + env(safe-area-inset-bottom, 0px));
background: var(--slate-deep); background: var(--slate-deep);
border-top: 1px solid var(--rule); border-top: 1px solid var(--rule);
} }
@@ -175,7 +177,7 @@
} }
main { main {
padding-bottom: 4.5rem; padding-bottom: calc(var(--bar, 6rem) + 1.5rem);
} }
} }