3 files changed, 13 insertions, 3 deletions
diff --git a/public/app.css b/public/app.css
index ef32380..8a1b201 100644
--- a/public/app.css
+++ b/public/app.css
@@ -50,6 +50,7 @@ html, body {
   box-shadow: 0 0 0 2px rgba(125, 211, 252, .65);
 }
 .dropzone { position: absolute; cursor: pointer; }
+.dropzone.hidden { visibility: hidden; }
 .dropzone .preview {
   width: 100%;
   height: 100%;
diff --git a/public/app.js b/public/app.js
index b0a0db4..a80623f 100644
--- a/public/app.js
+++ b/public/app.js
@@ -210,7 +210,6 @@ function renderNav(id) {
     if (!TOUCH) {
       zone.addEventListener("pointermove", () => {
         if (adjacentTile(id, ex.dir)) return
-        if (cur && cur.id === id) return
         cancelHideGhost()
         showGhost(choosePlacement(id, ex.dir))
       })
@@ -344,6 +343,13 @@ function traverseFrom(id, dir) {
 
 let ghost = null
 let ghostKey = ""
+let ghostVisible = false
+function setPreviewHidden(hidden) {
+  ghostVisible = hidden
+  if (!cur) return
+  const zs = zones.get(cur.id)
+  if (zs) for (const z of zs) z.classList.toggle("hidden", hidden)
+}
 function showGhost(p) {
   if (!p) return
   const key = p.id + "|" + p.rect.x + "," + p.rect.y
@@ -362,6 +368,7 @@ function showGhost(p) {
   el.appendChild(img)
   world.appendChild(el)
   ghost = el
+  setPreviewHidden(true)
 }
 
 function hideGhost() {
@@ -370,6 +377,7 @@ function hideGhost() {
     ghost = null
   }
   ghostKey = ""
+  setPreviewHidden(false)
 }
 
 let hideGhostTimer = 0
@@ -435,6 +443,7 @@ function renderTileZones(id) {
   z.addEventListener("click", () => traverseFrom(id, bestDir))
   world.appendChild(z)
   zones.set(id, [z])
+  setPreviewHidden(ghostVisible)
 }
 
 function refreshPreviews() {
diff --git a/public/index.html b/public/index.html
index e4f77d5..2e4f8c1 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=24">
+  <link rel="stylesheet" href="/app.css?v=25">
 </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=24"></script>
+  <script src="/app.js?v=25"></script>
 </body>
 </html>