From ffd2cc7a829a1b9bddd87a058e064d2315f756d7 Mon Sep 17 00:00:00 2001
From: Eric Wagoner <ewagoner@gmail.com>
Date: Mon, 24 Aug 2026 00:14:16 -0400
Subject: [PATCH] The helm grows tappable: chevron strips ride the pane's edges
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Milestone two opens with touch. Faint chevrons live along the pane's
four edges — left and right strips quarter-turn the camera (always),
top and bottom stride forward and back (your turn only, through the
same commands, cautions, and wall-bounces as the keys). Quiet under a
resting eye, brighter under a pointer, generous under a thumb.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 packages/web/src/LiveFirstPerson.svelte | 32 +++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/packages/web/src/LiveFirstPerson.svelte b/packages/web/src/LiveFirstPerson.svelte
index 66a6b3f..6e917bb 100644
--- a/packages/web/src/LiveFirstPerson.svelte
+++ b/packages/web/src/LiveFirstPerson.svelte
@@ -235,7 +235,12 @@
       x={cam.x} y={cam.y} facing={cam.facing} width={960} height={400}
       fx={fpFx} posOverride={actorPos} />
     <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>
     {#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>
       <div class="live-fp-hint">← → turn · ↑ ↓ walk</div>
     {/if}
   </div>
@@ -268,4 +273,31 @@
     font-size: 0.7rem;
     pointer-events: none;
   }
+  /* The helm: faint chevron strips along the pane's edges — always
+   * there for a thumb, louder under a pointer. */
+  .drive {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: rgba(233, 225, 203, 0.35);
+    font-size: 2.2rem;
+    line-height: 1;
+    padding: 0;
+    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
+  }
+  .drive:hover {
+    color: rgba(233, 225, 203, 0.95);
+    background: linear-gradient(to right, rgba(0, 0, 0, 0.22), transparent);
+  }
+  .drive-left { left: 0; top: 15%; bottom: 15%; width: 13%; }
+  .drive-right { right: 0; top: 15%; bottom: 15%; width: 13%; }
+  .drive-right:hover { background: linear-gradient(to left, rgba(0, 0, 0, 0.22), transparent); }
+  .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%; }
+  .drive-back:hover { background: linear-gradient(to top, rgba(0, 0, 0, 0.22), transparent); }
 </style>