diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/app.css | 45 | ||||
| -rw-r--r-- | public/app.js | 23 | ||||
| -rw-r--r-- | public/index.html | 4 |
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> |