justin/pokesql
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix diagonal line in top-left — arrow animation now only runs when visible, hidden by default

Browse Source
This commit is contained in:
justin committed 2026-05-20 12:16:42 -07:00
1 parent a3dfc5f822
commit b314882018
2 files changed
+6 -4
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

game.js
+2 -1
View File
@@ -440,11 +440,12 @@ class Game {
_updateDirArrow(nearNPC) { _updateDirArrow(nearNPC) {
const arrow = document.getElementById('map-dir-arrow'); const arrow = document.getElementById('map-dir-arrow');
if (!arrow) return; if (!arrow) return;
if (nearNPC) { arrow.style.display = 'none'; return; } if (nearNPC) { arrow.style.display = 'none'; arrow.style.animation = 'none'; return; }
const world = document.getElementById('map-inner'); const world = document.getElementById('map-inner');
const viewH = world ? world.parentElement.offsetHeight : 300; const viewH = world ? world.parentElement.offsetHeight : 300;
arrow.textContent = '▶'; arrow.textContent = '▶';
arrow.style.display = 'block'; arrow.style.display = 'block';
arrow.style.animation = 'arrowPulse .7s ease-in-out infinite';
arrow.style.removeProperty('left'); arrow.style.removeProperty('left');
arrow.style.bottom = (viewH * 0.28) + 'px'; arrow.style.bottom = (viewH * 0.28) + 'px';
} }
style.css
+4 -3
View File
@@ -474,9 +474,10 @@ html, body {
text-shadow: 0 0 6px rgba(248,192,48,.8), 2px 2px 0 rgba(0,0,0,.5); text-shadow: 0 0 6px rgba(248,192,48,.8), 2px 2px 0 rgba(0,0,0,.5);
pointer-events: none; pointer-events: none;
z-index: 50; z-index: 50;
animation: arrowPulse .7s ease-in-out infinite;
filter: drop-shadow(0 0 4px rgba(248,192,48,.6)); filter: drop-shadow(0 0 4px rgba(248,192,48,.6));
right: 12px; /* pinned to right edge of map viewport */ right: 12px;
display: none;
bottom: -9999px; /* ensure off-screen when hidden */
} }
/* NPC lives inside .map-inner, positioned in world-px via JS */ /* NPC lives inside .map-inner, positioned in world-px via JS */
.map-npc-wrap { position:absolute; text-align:center; z-index: 30; } .map-npc-wrap { position:absolute; text-align:center; z-index: 30; }
@@ -525,7 +526,7 @@ html, body {
background-position: 0 0; background-position: 0 0;
image-rendering: pixelated; image-rendering: pixelated;
filter: drop-shadow(2px 3px 0 rgba(0,0,0,.4)); filter: drop-shadow(2px 3px 0 rgba(0,0,0,.4));
z-index: 999; z-index: 10;
font-size: 0; font-size: 0;
color: transparent; color: transparent;
} }