diff --git a/game.js b/game.js index 4a6d419..13d39df 100644 --- a/game.js +++ b/game.js @@ -385,13 +385,15 @@ class Game { /* Player sprite stays horizontally centred; only Y shifts */ const p = document.getElementById('map-player'); - const pw = document.getElementById('map-player-wrap'); - if (p && pw) { + const bub = document.getElementById('player-bubble'); + if (p) { const centreX = viewW / 2 - 16; const centreY = viewH * 0.65 + this.state.worldY; - pw.style.left = centreX + 'px'; - pw.style.bottom = (viewH - centreY - 40) + 'px'; + const bottomPx = viewH - centreY - 40; + p.style.left = centreX + 'px'; + p.style.bottom = bottomPx + 'px'; p.className = `map-player walk-${dir}`; + if (bub) { bub.style.left = (centreX - 4) + 'px'; bub.style.bottom = (bottomPx + 64) + 'px'; } } this._checkNPCProximity(); @@ -416,12 +418,12 @@ class Game { } _checkNPCProximity() { - const world = document.getElementById('map-inner'); - const viewW = world ? world.parentElement.offsetWidth : 420; - const viewH = world ? world.parentElement.offsetHeight : 300; + const world = document.getElementById('map-world'); + const viewW = (world && world.offsetWidth) ? world.offsetWidth : 420; + const viewH = (world && world.offsetHeight) ? world.offsetHeight : 300; const playerWorldX = this.state.worldX + viewW / 2; const dx = Math.abs(playerWorldX - this.state.npcWorldX); - const near = dx < 60; + const near = this.state.npcWorldX > 0 && dx < 60; const hint = document.getElementById('map-talk-hint'); const bub = document.getElementById('npc-bubble'); @@ -447,8 +449,9 @@ class Game { } _nearNPC() { - const world = document.getElementById('map-inner'); - const viewW = world ? world.parentElement.offsetWidth : 420; + if (!this.state.npcWorldX) return false; + const world = document.getElementById('map-world'); + const viewW = (world && world.offsetWidth) ? world.offsetWidth : 420; const playerWorldX = this.state.worldX + viewW / 2; return Math.abs(playerWorldX - this.state.npcWorldX) < 60; } @@ -480,11 +483,14 @@ class Game { const viewH = world ? world.parentElement.offsetHeight : 300; const p = document.getElementById('map-player'); - const pw = document.getElementById('map-player-wrap'); - if (p && pw) { - pw.style.left = (viewW / 2 - 16) + 'px'; - pw.style.bottom = (viewH * 0.28) + 'px'; - p.className = 'map-player idle'; + const bub = document.getElementById('player-bubble'); + if (p) { + const left = viewW / 2 - 16; + const bottom = viewH * 0.28; + p.style.left = left + 'px'; + p.style.bottom = bottom + 'px'; + p.className = 'map-player idle'; + if (bub) { bub.style.left = (left - 4) + 'px'; bub.style.bottom = (bottom + 64) + 'px'; } } this._applyCamera(); const hint = document.getElementById('map-talk-hint'); diff --git a/index.html b/index.html index a052f6f..b09800f 100644 --- a/index.html +++ b/index.html @@ -93,7 +93,6 @@
0/100 - 💾 🎵
@@ -108,11 +107,9 @@
!
- -
-
...
-
-
+ \ +
...
+
diff --git a/style.css b/style.css index 453e63b..8e88fff 100644 --- a/style.css +++ b/style.css @@ -483,8 +483,7 @@ html, body { .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; } .map-npc { font-size:clamp(36px,10vw,52px); filter:drop-shadow(2px 3px 0 rgba(0,0,0,.35)); cursor:pointer; } /* Player is fixed to the viewport centre horizontally; only Y moves */ -.map-player-wrap { position:absolute; text-align:center; z-index:99; width:32px; height:64px; } -.player-bubble { font-size:11px; font-family:var(--font); color:var(--black); background:#fff; border:2px solid var(--black); padding:0 4px; height:20px; display:none; align-items:center; justify-content:center; border-radius:2px; white-space:nowrap; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:4px; } +.player-bubble { font-size:11px; font-family:var(--font); color:var(--black); background:#fff; border:2px solid var(--black); padding:0 4px; height:20px; display:none; align-items:center; justify-content:center; border-radius:2px; white-space:nowrap; position:absolute; z-index:100; } .player-bubble.visible { display:flex; animation:bounce .5s ease-in-out 3; } .map-player { position: absolute;