From 0530ecb03987a9f898bd33e15caa06d456a84af1 Mon Sep 17 00:00:00 2001
From: Eric Wagoner <ewagoner@gmail.com>
Date: Thu, 27 Aug 2026 15:21:05 -0400
Subject: [PATCH] The helm yields the glass while a card is aimed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The drive chevrons are buttons over the canvas edges, and the
back-stride strip owns the bottom band — exactly where an adjacent
square's floor renders. With a card selected, hovering there showed
no target and a click would have STEPPED backward instead of casting
(the tacks report: the pane refused what the map allowed). While a
card is aimed the strips now fade and stop catching the pointer, so
every pixel of the pane hovers and clicks as a target; the arrow keys
still steer throughout.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015RCWSTnb1KYTPyL4GmhGnF
---
 packages/web/src/App.svelte             |  3 ++-
 packages/web/src/LiveFirstPerson.svelte | 14 +++++++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/web/src/App.svelte b/packages/web/src/App.svelte
index 2bfe587..405204f 100644
--- a/packages/web/src/App.svelte
+++ b/packages/web/src/App.svelte
@@ -1914,7 +1914,8 @@
             onbody={(id) => (fpvBody = id)}
             onWarpStep={(creatureId) => dispatch(creatureId
               ? { type: "creatureWarpStep", creatureId }
-              : { type: "warpStep" })} />
+              : { type: "warpStep" })}
+            targeting={!!selectedCard && yourMoment} />
         {/if}
         <Board
           {view}
diff --git a/packages/web/src/LiveFirstPerson.svelte b/packages/web/src/LiveFirstPerson.svelte
index e96d9c2..e29b5de 100644
--- a/packages/web/src/LiveFirstPerson.svelte
+++ b/packages/web/src/LiveFirstPerson.svelte
@@ -17,7 +17,7 @@
   import { untrack } from "svelte";
   import type { GameEvent, GameView, Side } from "@wizwar/engine";
 
-  let { view, batch, onhide, onstride = null, canStride = false, ontarget = null, onfacing = null, litCells = null, onpickup = null, onCreatureMove = null, onCreatureAttack = null, onbody = null, onWarpStep = null }: {
+  let { view, batch, onhide, onstride = null, canStride = false, ontarget = null, onfacing = null, litCells = null, onpickup = null, onCreatureMove = null, onCreatureAttack = null, onbody = null, onWarpStep = null, targeting = false }: {
     view: GameView;
     /** The latest live event batch, numbered so each plays once, with
      * the view the server sent alongside it. */
@@ -46,6 +46,9 @@
     /** A dimensional-warp step for whichever body the pane is: the
      * wizard (null) or the ridden creature (its id). */
     onWarpStep?: ((creatureId: string | null) => void) | null;
+    /** A card is aimed: the drive strips yield the glass so every pixel
+     * hovers and clicks as a target (keys still steer). */
+    targeting?: boolean;
   } = $props();
 
   const povId = $derived(view.you);
@@ -430,11 +433,11 @@
       ontarget={handleTarget} {litCells} />
     <button class="live-fp-hide" onclick={onhide} title="hide (re-enable in preferences)">✕</button>
     <!-- The helm, tappable: edge strips turn and stride. -->
-    <button class="drive drive-left" onclick={() => manualTurn(-1)} aria-label="turn left">‹</button>
-    <button class="drive drive-right" onclick={() => manualTurn(1)} aria-label="turn right">›</button>
+    <button class="drive drive-left" class:yielded={targeting} onclick={() => manualTurn(-1)} aria-label="turn left">‹</button>
+    <button class="drive drive-right" class:yielded={targeting} onclick={() => manualTurn(1)} aria-label="turn right">›</button>
     {#if canStride}
-      <button class="drive drive-fwd" onclick={() => manualStride(false)} aria-label="step forward">︿</button>
-      <button class="drive drive-back" onclick={() => manualStride(true)} aria-label="step back">﹀</button>
+      <button class="drive drive-fwd" class:yielded={targeting} onclick={() => manualStride(false)} aria-label="step forward">︿</button>
+      <button class="drive drive-back" class:yielded={targeting} onclick={() => manualStride(true)} aria-label="step back">﹀</button>
       <div class="live-fp-hint">← → turn · ↑ ↓ walk</div>
     {/if}
     {#if possessed}
@@ -608,6 +611,7 @@
   .feet-item img { width: 30px; height: 30px; object-fit: contain; }
   .feet-fallback { font-size: 0.65rem; color: #d8d2c0; padding: 0 4px; }
   .feet-hazard { font-size: 0.7rem; color: #d98a4a; white-space: nowrap; }
+  .yielded { pointer-events: none; opacity: 0.12; }
   .drive-fwd { top: 0; left: 20%; right: 20%; height: 16%; }
   .drive-fwd:hover { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.22), transparent); }
   .drive-back { bottom: 0; left: 20%; right: 20%; height: 15%; }