1 files changed, 18 insertions, 5 deletions
diff --git a/public/app.js b/public/app.js
index 8b7c475..4a00387 100644
--- a/public/app.js
+++ b/public/app.js
@@ -8,7 +8,9 @@ const flash = $("#flash")
 const startBtn = $("#start")
 
 const GAP = 10
-let TILE = window.matchMedia("(max-width: 700px)").matches ? 200 : 360
+const MAX_TILE = 900
+let TILE = Math.round(Math.min(window.innerWidth, window.innerHeight) * 0.92)
+if (TILE > MAX_TILE) TILE = MAX_TILE
 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>',
@@ -24,20 +26,27 @@ let curExits = []
 let fetchSeq = 0
 let panX = 0
 let panY = 0
+let scale = 1
 let drag = null
 
 const key = (x, y) => `${x},${y}`
 
+function worldScale() {
+  const n = tiles.size
+  if (n <= 1) return 1
+  return Math.max(0.5, 1 - (n - 1) * 0.015)
+}
+
 function applyPan() {
-  world.style.transform = `translate(${panX}px, ${panY}px)`
+  world.style.transform = `translate(${panX}px, ${panY}px) scale(${scale})`
 }
 
 function center() {
   if (!cur) return
   const cx = cur.x * (TILE + GAP) + TILE / 2
   const cy = cur.y * (TILE + GAP) + TILE / 2
-  panX = window.innerWidth / 2 - cx
-  panY = window.innerHeight / 2 - cy
+  panX = window.innerWidth / 2 - scale * cx
+  panY = window.innerHeight / 2 - scale * cy
   applyPan()
 }
 
@@ -68,6 +77,7 @@ function setCurrent(id, x, y) {
   cur = { id, x, y }
   tiles.get(key(x, y)).el.classList.add("current")
   curExits = []
+  scale = worldScale()
   renderNav()
   center()
   fetchExits(id)
@@ -89,6 +99,8 @@ function renderNav() {
   const nav = document.createElement("div")
   nav.className = "nav"
   for (const ex of curExits) {
+    const zone = document.createElement("div")
+    zone.className = `nav-zone nav-zone-${ex.dir}`
     const b = document.createElement("button")
     b.className = "nav-btn"
     b.dataset.dir = ex.dir
@@ -99,7 +111,8 @@ function renderNav() {
     b.appendChild(lab)
     b.addEventListener("pointerdown", (e) => e.stopPropagation())
     b.addEventListener("click", (e) => { e.stopPropagation(); move(ex.dir) })
-    nav.appendChild(b)
+    zone.appendChild(b)
+    nav.appendChild(zone)
   }
   tileEl.appendChild(nav)
 }