pathways: replace small circle nav buttons with big free-floating edge chevrons (option 1); whole edge band is the hover + click target

1 files changed, 11 insertions, 12 deletions

diff --git a/public/app.js b/public/app.js
index 7d842b2..269ae51 100644
--- a/public/app.js
+++ b/public/app.js
@@ -13,10 +13,10 @@ const MAX_ZOOM = 5
 const EPS = 0.5
 const MAX_ZONE_TILES = 24
 const ARROW_SVG = {
-  N: '<svg viewBox="0 0 24 24"><path d="M5 15l7-8 7 8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
-  E: '<svg viewBox="0 0 24 24"><path d="M9 5l8 7-8 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
-  S: '<svg viewBox="0 0 24 24"><path d="M5 9l7 8 7-8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
-  W: '<svg viewBox="0 0 24 24"><path d="M15 5l-8 7 8 7" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  N: '<svg viewBox="0 0 24 24" fill="none"><path d="M5 15l7-8 7 8" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  E: '<svg viewBox="0 0 24 24" fill="none"><path d="M9 5l8 7-8 7" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  S: '<svg viewBox="0 0 24 24" fill="none"><path d="M5 9l7 8 7-8" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+  W: '<svg viewBox="0 0 24 24" fill="none"><path d="M15 5l-8 7 8 7" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>',
 }
 
 let U = 300
@@ -211,13 +211,12 @@ function renderNav(id) {
       if (!adjacentTile(id, ex.dir)) showGhost(choosePlacement(id, ex.dir))
     })
     zone.addEventListener("pointerleave", () => hideGhost())
-    const b = document.createElement("button")
-    b.className = "nav-btn"
-    b.dataset.dir = ex.dir
-    b.innerHTML = ARROW_SVG[ex.dir]
-    b.addEventListener("pointerdown", (e) => e.stopPropagation())
-    b.addEventListener("click", (e) => { e.stopPropagation(); traverseFrom(id, ex.dir) })
-    zone.appendChild(b)
+    zone.addEventListener("pointerdown", (e) => e.stopPropagation())
+    zone.addEventListener("click", (e) => { e.stopPropagation(); traverseFrom(id, ex.dir) })
+    const chev = document.createElement("div")
+    chev.className = "nav-chev"
+    chev.innerHTML = ARROW_SVG[ex.dir]
+    zone.appendChild(chev)
     nav.appendChild(zone)
   }
   t.el.appendChild(nav)
@@ -407,7 +406,7 @@ stage.addEventListener("pointerover", (e) => {
 })
 
 stage.addEventListener("pointerdown", (e) => {
-  if (e.target.closest(".nav-btn")) return
+  if (e.target.closest(".nav-zone")) return
   hideGhost()
   drag = { x: e.clientX, y: e.clientY, px: panX, py: panY, moved: false, tile: e.target.closest(".tile") }
   world.style.transition = "none"