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

Move direction arrow inside game on right edge, always points right toward NPC

Browse Source
This commit is contained in:
Justin Oros
2026-05-14 10:47:27 -07:00
parent 9802427340
commit e354ddc224
2 changed files with 7 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
game.js
+3 -5
View File
@@ -256,13 +256,11 @@ class Game {
if (!arrow) return; if (!arrow) return;
if (nearNPC) { arrow.style.display = 'none'; return; } if (nearNPC) { arrow.style.display = 'none'; return; }
const world = document.getElementById('map-inner'); const world = document.getElementById('map-inner');
const viewW = world ? world.parentElement.offsetWidth : 420;
const viewH = world ? world.parentElement.offsetHeight : 300; const viewH = world ? world.parentElement.offsetHeight : 300;
const npcScreenX = this.state.npcWorldX - this.state.worldX; arrow.textContent = '▶';
arrow.textContent = npcScreenX >= viewW / 2 ? '▶' : '◀';
arrow.style.display = 'block'; arrow.style.display = 'block';
arrow.style.left = (viewW / 2 + 30) + 'px'; arrow.style.removeProperty('left');
arrow.style.bottom = (viewH * 0.48) + 'px'; arrow.style.bottom = (viewH * 0.42) + 'px';
} }
_nearNPC() { _nearNPC() {
style.css
+4 -3
View File
@@ -427,14 +427,15 @@ html, body {
} }
/* Directional nudge arrow */ /* Directional nudge arrow */
.map-dir-arrow { .map-dir-arrow {
position: fixed; position: absolute;
font-size: clamp(20px, 6vw, 28px); font-size: clamp(24px, 7vw, 34px);
color: var(--yellow); color: var(--yellow);
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: 20; z-index: 50;
animation: arrowPulse .7s ease-in-out infinite; 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 */
} }
/* 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; }