From 0c2642df412cceba34a4981d066d157351a7d65f Mon Sep 17 00:00:00 2001
From: dax <me@dax.ist>
Date: Tue, 4 Aug 2026 09:42:16 +0000
Subject: pathways: replace small circle nav buttons with big free-floating
 edge chevrons (option 1); whole edge band is the hover + click target

---
 public/app.js | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

(limited to 'public/app.js')

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"
-- 
cgit v1.3.1