Forward rides above the glass, back below it
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:
co-authored by
Claude Fable 5
parent
3bd7e3c81d
commit
2206982c05
@@ -419,28 +419,36 @@
|
||||
<!-- The bezel: instruments live in the frame, never on the glass —
|
||||
every canvas pixel is target. -->
|
||||
<div class="bezel-top">
|
||||
{#if possessed}
|
||||
<span class="ride-label">riding the {possessed.kind.replace(/-/g, " ")}</span>
|
||||
<span class="ride-stats">{Math.max(0, possessed.movesPerTurn - possessed.movementUsed)} moves{possessed.attackUsed ? "" : " · claws ready"}</span>
|
||||
<button class="stamp tiny" onclick={dismount}>back to your eyes</button>
|
||||
{:else if rideable.length > 0 && (onCreatureMove || onCreatureAttack)}
|
||||
{#each rideable as c (c.id)}
|
||||
<button class="stamp tiny" onclick={() => { possessedId = c.id; manualUntil = performance.now() + RIDE_HOLD_MS; }}>
|
||||
👁 ride the {c.kind.replace(/-/g, " ")}
|
||||
</button>
|
||||
{/each}
|
||||
{/if}
|
||||
<span class="bezel-spacer"></span>
|
||||
{#if withYou.length > 0}
|
||||
<span class="feet-label">sharing your square</span>
|
||||
{#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 class="bezel-zone">
|
||||
{#if possessed}
|
||||
<span class="ride-label">riding the {possessed.kind.replace(/-/g, " ")}</span>
|
||||
<span class="ride-stats">{Math.max(0, possessed.movesPerTurn - possessed.movementUsed)} moves{possessed.attackUsed ? "" : " · claws ready"}</span>
|
||||
<button class="stamp tiny" onclick={dismount}>back to your eyes</button>
|
||||
{:else if rideable.length > 0 && (onCreatureMove || onCreatureAttack)}
|
||||
{#each rideable as c (c.id)}
|
||||
<button class="stamp tiny" onclick={() => { possessedId = c.id; manualUntil = performance.now() + RIDE_HOLD_MS; }}>
|
||||
👁 ride the {c.kind.replace(/-/g, " ")}
|
||||
</button>
|
||||
{/each}
|
||||
{/if}
|
||||
</span>
|
||||
<span class="bezel-zone bezel-center">
|
||||
{#if canStride}
|
||||
<button class="drive stride" onclick={() => manualStride(false)} aria-label="step forward">︿ forward</button>
|
||||
{/if}
|
||||
</span>
|
||||
<span class="bezel-zone bezel-right">
|
||||
{#if withYou.length > 0}
|
||||
<span class="feet-label">sharing your square</span>
|
||||
{#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 class="bezel-mid">
|
||||
<button class="drive" onclick={() => manualTurn(-1)} aria-label="turn left">‹</button>
|
||||
@@ -476,7 +484,6 @@
|
||||
</span>
|
||||
<span class="bezel-zone bezel-center">
|
||||
{#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>
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
Reference in New Issue
Block a user