Fix diagonal corner artifact by stopping arrow animation via inline style when hidden

This commit is contained in:
Justin Oros
2026-05-20 12:45:02 -07:00
parent ac0db62420
commit a304b97fe8
2 changed files with 7 additions and 9 deletions
+7 -5
View File
@@ -447,12 +447,14 @@ 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.classList.remove('visible'); return; } if (nearNPC) { arrow.style.display = 'none'; arrow.style.animation = 'none'; return; }
const world = document.getElementById('map-world'); const world = document.getElementById('map-world');
const viewH = (world && world.offsetHeight) ? world.offsetHeight : 300; const viewH = (world && world.offsetHeight) ? world.offsetHeight : 300;
arrow.textContent = '▶'; arrow.textContent = '▶';
arrow.style.bottom = (viewH * 0.28) + 'px'; arrow.style.display = 'block';
arrow.classList.add('visible'); arrow.style.animation = 'arrowPulse .7s ease-in-out infinite';
arrow.style.removeProperty('left');
arrow.style.bottom = (viewH * 0.28) + 'px';
} }
_nearNPC() { _nearNPC() {
@@ -476,7 +478,7 @@ class Game {
return; return;
} }
const arrow = document.getElementById('map-dir-arrow'); const arrow = document.getElementById('map-dir-arrow');
if (arrow) arrow.classList.remove('visible'); if (arrow) { arrow.style.display = 'none'; arrow.style.animation = 'none'; }
const bub = document.getElementById('player-bubble'); const bub = document.getElementById('player-bubble');
if (bub) bub.classList.remove('visible'); if (bub) bub.classList.remove('visible');
SFX.encounter(); SFX.encounter();
-4
View File
@@ -480,10 +480,6 @@ html, body {
display: none; display: none;
bottom: -9999px; bottom: -9999px;
} }
.map-dir-arrow.visible {
display: block;
animation: arrowPulse .7s ease-in-out infinite;
}
/* 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; }
.npc-bubble { font-size:14px; font-family:var(--font); color:var(--black); background:var(--yellow); border:2px solid var(--black); width:20px; height:20px; display:flex; align-items:center; justify-content:center; margin:0 auto 2px; animation:bounce .7s ease-in-out infinite; } .npc-bubble { font-size:14px; font-family:var(--font); color:var(--black); background:var(--yellow); border:2px solid var(--black); width:20px; height:20px; display:flex; align-items:center; justify-content:center; margin:0 auto 2px; animation:bounce .7s ease-in-out infinite; }