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

Forward rides above the glass, back below it

Browse Source 
The strides map to the space they move you through: step-forward
centered in the top bezel, step-back centered in the bottom, matching
the hand's instinct from the old edge chevrons.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015RCWSTnb1KYTPyL4GmhGnF
This commit is contained in:
Eric Wagoner
2026-08-27 15:45:26 -04:00
co-authored by Claude Fable 5
parent 3bd7e3c81d
commit 2206982c05
1 changed files with 30 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/LiveFirstPerson.svelte
+30 -23
View File
@@ -419,28 +419,36 @@
<!-- The bezel: instruments live in the frame, never on the glass — <!-- The bezel: instruments live in the frame, never on the glass —
every canvas pixel is target. --> every canvas pixel is target. -->
<div class="bezel-top"> <div class="bezel-top">
{#if possessed} <span class="bezel-zone">
<span class="ride-label">riding the {possessed.kind.replace(/-/g, " ")}</span> {#if possessed}
<span class="ride-stats">{Math.max(0, possessed.movesPerTurn - possessed.movementUsed)} moves{possessed.attackUsed ? "" : " · claws ready"}</span> <span class="ride-label">riding the {possessed.kind.replace(/-/g, " ")}</span>
<button class="stamp tiny" onclick={dismount}>back to your eyes</button> <span class="ride-stats">{Math.max(0, possessed.movesPerTurn - possessed.movementUsed)} moves{possessed.attackUsed ? "" : " · claws ready"}</span>
{:else if rideable.length > 0 && (onCreatureMove || onCreatureAttack)} <button class="stamp tiny" onclick={dismount}>back to your eyes</button>
{#each rideable as c (c.id)} {:else if rideable.length > 0 && (onCreatureMove || onCreatureAttack)}
<button class="stamp tiny" onclick={() => { possessedId = c.id; manualUntil = performance.now() + RIDE_HOLD_MS; }}> {#each rideable as c (c.id)}
👁 ride the {c.kind.replace(/-/g, " ")} <button class="stamp tiny" onclick={() => { possessedId = c.id; manualUntil = performance.now() + RIDE_HOLD_MS; }}>
</button> 👁 ride the {c.kind.replace(/-/g, " ")}
{/each} </button>
{/if} {/each}
<span class="bezel-spacer"></span> {/if}
{#if withYou.length > 0} </span>
<span class="feet-label">sharing your square</span> <span class="bezel-zone bezel-center">
{#each withYou as body (body.id)} {#if canStride}
<button class="feet-item" title={body.label} <button class="drive stride" onclick={() => manualStride(false)} aria-label="step forward">︿ forward</button>
onclick={() => handleTarget(body.kind === "player" ? { kind: "player", id: body.id } : { kind: "creature", id: body.id })}> {/if}
<img src={body.art} alt={body.label} /> </span>
</button> <span class="bezel-zone bezel-right">
{/each} {#if withYou.length > 0}
{/if} <span class="feet-label">sharing your square</span>
<button class="live-fp-hide" onclick={onhide} title="hide (re-enable in preferences)">✕</button> {#each withYou as body (body.id)}
<button class="feet-item" title={body.label}
onclick={() => handleTarget(body.kind === "player" ? { kind: "player", id: body.id } : { kind: "creature", id: body.id })}>
<img src={body.art} alt={body.label} />
</button>
{/each}
{/if}
<button class="live-fp-hide" onclick={onhide} title="hide (re-enable in preferences)">✕</button>
</span>
</div> </div>
<div class="bezel-mid"> <div class="bezel-mid">
<button class="drive" onclick={() => manualTurn(-1)} aria-label="turn left">‹</button> <button class="drive" onclick={() => manualTurn(-1)} aria-label="turn left">‹</button>
@@ -476,7 +484,6 @@
</span> </span>
<span class="bezel-zone bezel-center"> <span class="bezel-zone bezel-center">
{#if canStride} {#if canStride}
<button class="drive stride" onclick={() => manualStride(false)} aria-label="step forward">︿ forward</button>
<button class="drive stride" onclick={() => manualStride(true)} aria-label="step back">﹀ back</button> <button class="drive stride" onclick={() => manualStride(true)} aria-label="step back">﹀ back</button>
{/if} {/if}
</span> </span>