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

3 files changed, 32 insertions, 40 deletions

diff --git a/public/app.css b/public/app.css
index 11b24a0..ea00f29 100644
--- a/public/app.css
+++ b/public/app.css
@@ -70,37 +70,30 @@ html, body {
   position: absolute;
   pointer-events: auto;
 }
-.nav-zone-N { top: 0; left: 0; width: 100%; height: 26%; }
-.nav-zone-S { bottom: 0; left: 0; width: 100%; height: 26%; }
-.nav-zone-E { top: 26%; right: 0; width: 26%; height: 48%; }
-.nav-zone-W { top: 26%; left: 0; width: 26%; height: 48%; }
+.nav-zone-N { top: 0; left: 0; width: 100%; height: 30%; }
+.nav-zone-S { bottom: 0; left: 0; width: 100%; height: 30%; }
+.nav-zone-E { top: 30%; right: 0; width: 30%; height: 40%; }
+.nav-zone-W { top: 30%; left: 0; width: 30%; height: 40%; }
 
-.nav-btn {
+.nav-chev {
   position: absolute;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  border: 1px solid rgba(255, 255, 255, .28);
-  background: rgba(255, 255, 255, .1);
-  color: rgba(255, 255, 255, .85);
-  cursor: pointer;
-  display: grid;
-  place-items: center;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
-  opacity: .18;
-  transition: opacity .15s, background .15s, color .15s, box-shadow .15s;
+  width: 56px;
+  height: 56px;
+  color: rgba(255, 255, 255, .9);
+  opacity: .42;
+  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .65));
+  pointer-events: none;
+  transition: opacity .15s, filter .15s, color .15s;
 }
-.nav-btn svg { width: 18px; height: 18px; display: block; }
-.nav-zone-N .nav-btn { top: 10px; left: 50%; translate: -50% 0; }
-.nav-zone-E .nav-btn { top: 50%; right: 10px; translate: 0 -50%; }
-.nav-zone-S .nav-btn { bottom: 10px; left: 50%; translate: -50% 0; }
-.nav-zone-W .nav-btn { top: 50%; left: 10px; translate: 0 -50%; }
-.nav-zone:hover .nav-btn {
+.nav-chev svg { width: 100%; height: 100%; display: block; }
+.nav-zone-N .nav-chev { top: 0; left: 50%; translate: -50% -50%; }
+.nav-zone-E .nav-chev { top: 50%; right: 0; translate: 50% -50%; }
+.nav-zone-S .nav-chev { bottom: 0; left: 50%; translate: -50% 50%; }
+.nav-zone-W .nav-chev { top: 50%; left: 0; translate: -50% -50%; }
+.nav-zone:hover .nav-chev {
   opacity: 1;
-  background: rgba(255, 255, 255, .22);
   color: #fff;
-  border-color: rgba(255, 255, 255, .5);
-  box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
+  filter: drop-shadow(0 0 9px rgba(125, 211, 252, .6));
 }
 
 #splash {
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"
diff --git a/public/index.html b/public/index.html
index dab2f8a..706de70 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="color-scheme" content="dark">
   <title>pathways</title>
-  <link rel="stylesheet" href="/app.css?v=14">
+  <link rel="stylesheet" href="/app.css?v=15">
 </head>
 <body>
   <main id="stage">
@@ -16,6 +16,6 @@
     <p>four paths, one per direction. walk them.</p>
     <button id="start">start</button>
   </div>
-  <script src="/app.js?v=14"></script>
+  <script src="/app.js?v=15"></script>
 </body>
 </html>