From b396469beaa17719f32aae4b01854e6bacc0822b Mon Sep 17 00:00:00 2001
From: Eric Wagoner <ewagoner@gmail.com>
Date: Wed, 26 Aug 2026 13:53:56 -0400
Subject: [PATCH] The facing needle surfaces from under the token
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The keymap's facing wedge rendered BENEATH the wizard's own art, its
tips a pixel past the portrait's edge — present in the DOM, invisible
at the table. It now draws above the token as a proper compass
needle, tip half a cell out, dark-stroked for contrast. Verified in
rendered pixels this time, not element existence.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015RCWSTnb1KYTPyL4GmhGnF
---
 packages/web/src/Board.svelte | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/web/src/Board.svelte b/packages/web/src/Board.svelte
index 44f14df..1a68b1f 100644
--- a/packages/web/src/Board.svelte
+++ b/packages/web/src/Board.svelte
@@ -543,14 +543,6 @@
     {@const cx = p.position.x * CELL + CELL / 2 + (group.length > 1 ? (gi - (group.length - 1) / 2) * 14 : 0)}
     {@const cy = p.position.y * CELL + CELL * 0.36}
     <g class="mover" class:snap={snapsTo(`w:${p.id}`, cx, cy)} style={`transform: translate(${cx}px, ${cy}px)`}>
-      {#if povFacing && p.id === view.you}
-        {@const fr = CELL * 0.34}
-        {@const fa = povFacing === "E" ? 0 : povFacing === "S" ? Math.PI / 2 : povFacing === "W" ? Math.PI : -Math.PI / 2}
-        <polygon
-          points={`${Math.cos(fa) * fr},${Math.sin(fa) * fr} ${Math.cos(fa + 2.6) * fr * 0.55},${Math.sin(fa + 2.6) * fr * 0.55} ${Math.cos(fa - 2.6) * fr * 0.55},${Math.sin(fa - 2.6) * fr * 0.55}`}
-          class="pov-wedge"
-        />
-      {/if}
       <g
         role="button" tabindex="-1"
         onclick={(ev) => { ev.stopPropagation(); if (peekFired) { peekFired = false; return; } onPlayerClick?.(p.id); }}
@@ -600,6 +592,15 @@
           {/if}
         {/if}
       </g>
+      {#if povFacing && p.id === view.you}
+        {@const fa = povFacing === "E" ? 0 : povFacing === "S" ? Math.PI / 2 : povFacing === "W" ? Math.PI : -Math.PI / 2}
+        {@const tipX = Math.cos(fa) * CELL * 0.52}
+        {@const tipY = Math.sin(fa) * CELL * 0.52}
+        <polygon
+          points={`${tipX},${tipY} ${Math.cos(fa + 2.35) * CELL * 0.3},${Math.sin(fa + 2.35) * CELL * 0.3} ${Math.cos(fa - 2.35) * CELL * 0.3},${Math.sin(fa - 2.35) * CELL * 0.3}`}
+          class="pov-wedge"
+        />
+      {/if}
     </g>
   {/each}
 
@@ -779,7 +780,9 @@
   }
   .pov-wedge {
     fill: #c9a72a;
-    opacity: 0.85;
+    stroke: #43331f;
+    stroke-width: 1.2;
+    opacity: 0.95;
     pointer-events: none;
   }
   .peekable { cursor: pointer; pointer-events: all; }