diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/app.css | 37 | ||||
| -rw-r--r-- | public/app.js | 13 | ||||
| -rw-r--r-- | public/index.html | 4 |
3 files changed, 21 insertions, 33 deletions
diff --git a/public/app.css b/public/app.css index 3a8f684..d5f12dc 100644 --- a/public/app.css +++ b/public/app.css @@ -70,32 +70,27 @@ html, body { position: absolute; pointer-events: auto; } -.nav-zone-N { top: -44px; left: 0; width: 100%; height: calc(30% + 44px); } -.nav-zone-S { bottom: -44px; left: 0; width: 100%; height: calc(30% + 44px); } -.nav-zone-E { top: 30%; right: -44px; width: calc(30% + 44px); height: 40%; } -.nav-zone-W { top: 30%; left: -44px; width: calc(30% + 44px); height: 40%; } +.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-chev { +.nav-edge { position: absolute; - width: 44px; - height: 44px; - color: rgba(255, 255, 255, .85); - opacity: .3; - filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .65)); + background: linear-gradient(rgba(255, 255, 255, .9), rgba(125, 211, 252, .55)); + opacity: .35; pointer-events: none; - transition: opacity .15s, filter .15s, color .15s; + transition: opacity .15s, filter .15s; } -.nav-chev svg { width: 100%; height: 100%; display: block; } -.nav-zone-N .nav-chev { top: 0; left: 50%; translate: -50% -100%; } -.nav-zone-E .nav-chev { top: 50%; right: 0; translate: 100% -50%; } -.nav-zone-S .nav-chev { bottom: 0; left: 50%; translate: -50% 100%; } -.nav-zone-W .nav-chev { top: 50%; left: 0; translate: -100% -50%; } -.nav-zone:hover .nav-chev { - opacity: 1; - color: #fff; - filter: drop-shadow(0 0 9px rgba(125, 211, 252, .6)); +.nav-zone-N .nav-edge { top: 4px; left: 6px; right: 6px; height: 3px; border-radius: 2px; } +.nav-zone-S .nav-edge { bottom: 4px; left: 6px; right: 6px; height: 3px; border-radius: 2px; } +.nav-zone-E .nav-edge { right: 4px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; } +.nav-zone-W .nav-edge { left: 4px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; } +.nav-zone:hover .nav-edge { + opacity: .95; + filter: drop-shadow(0 0 7px rgba(125, 211, 252, .8)); } -.nav-zone.preview .nav-chev { +.nav-zone.preview .nav-edge { opacity: 0; } diff --git a/public/app.js b/public/app.js index 35d9898..5034348 100644 --- a/public/app.js +++ b/public/app.js @@ -12,12 +12,6 @@ const MIN_ZOOM = 0.05 const MAX_ZOOM = 5 const EPS = 0.5 const MAX_ZONE_TILES = 24 -const ARROW_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 const tiles = new Map() @@ -222,10 +216,9 @@ function renderNav(id) { zone.addEventListener("pointerdown", (e) => e.stopPropagation()) zone.addEventListener("click", (e) => { e.stopPropagation(); traverseFrom(id, ex.dir) }) if (!adjacentTile(id, ex.dir) && isCurrent) { - const chev = document.createElement("div") - chev.className = "nav-chev" - chev.innerHTML = ARROW_SVG[ex.dir] - zone.appendChild(chev) + const edge = document.createElement("div") + edge.className = `nav-edge nav-edge-${ex.dir}` + zone.appendChild(edge) } nav.appendChild(zone) } diff --git a/public/index.html b/public/index.html index 9c685fd..fb9bbb6 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=17"> + <link rel="stylesheet" href="/app.css?v=18"> </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=17"></script> + <script src="/app.js?v=18"></script> </body> </html> |