diff --git a/game.js b/game.js index ec506d6..59df3f8 100644 --- a/game.js +++ b/game.js @@ -21,8 +21,8 @@ function setNPC(el, val) { if (val && val.endsWith('.png')) { el.innerHTML = ''; const img = document.createElement('img'); - img.src = val; - img.style.cssText = 'height:1em;width:auto;image-rendering:pixelated;vertical-align:middle;'; + img.src = val.includes('/') ? val : './' + val; + img.style.cssText = 'width:auto;image-rendering:pixelated;vertical-align:middle;display:block;'; el.appendChild(img); } else { el.textContent = val || '🧑'; @@ -30,11 +30,11 @@ function setNPC(el, val) { } const NPC = { - 'Professor Oak': './oak.png', - 'Rival Gary': '😤', + 'Professor Oak': 'oak.png', + 'Rival Gary': 'gary.png', 'Old Man Bob': '🧓', - 'Nurse Joy': '👩‍⚕️', - 'Officer Jenny': '👮‍♀️', + 'Nurse Joy': 'joy.png', + 'Officer Jenny': 'jenny.png', 'Brock': '🧑‍🍳', 'Misty': '🧜‍♀️', 'Giovanni': '😈', @@ -52,7 +52,7 @@ const NPC = { 'Agatha': '👻', 'Lance': '🐉', 'Champion': '🏆', - 'Gary': '😤', + 'Gary': 'gary.png', }; const INTRO_MSGS = CONFIG.introLines.map(text => ({ speaker:'PROFESSOR OAK', npc:'Professor Oak', text })); @@ -1194,7 +1194,7 @@ class Game { this.state.answering=false; this.state.cursor=0; - document.getElementById('battle-npc-sprite').textContent = NPC[q.npc]||'🧑'; + setNPC(document.getElementById('battle-npc-sprite'), NPC[q.npc]||'🧑'); document.getElementById('battle-npc-name').textContent = q.npc.toUpperCase(); document.getElementById('battle-speaker').textContent = q.npc.toUpperCase(); document.getElementById('battle-player-name').textContent= (this.state.playerName||'ASH').toUpperCase(); diff --git a/style.css b/style.css index 56570de..9d6451c 100644 --- a/style.css +++ b/style.css @@ -495,8 +495,8 @@ html, body { .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; } .map-npc { font-size:clamp(36px,10vw,52px); filter:drop-shadow(2px 3px 0 rgba(0,0,0,.35)); cursor:pointer; animation:npcFloat 2s ease-in-out infinite; } -.intro-npc img { height:clamp(44px,13vw,64px); width:auto; image-rendering:pixelated; display:block; } -.map-npc img { height:clamp(36px,10vw,52px); width:auto; image-rendering:pixelated; display:block; } +.intro-npc img { height:clamp(56px,16vw,80px); width:auto; image-rendering:pixelated; display:block; } +.map-npc img { height:clamp(56px,16vw,80px); width:auto; image-rendering:pixelated; display:block; } /* Player is fixed to the viewport centre horizontally; only Y moves */ /* "..." bubble above player when pressing talk away from NPC */ .player-bubble { @@ -592,6 +592,7 @@ html, body { .battle-scene::after { content:''; position:absolute; top:55%; left:0; right:0; height:2px; background:rgba(0,0,0,.18); } .battle-npc-side, .battle-player-side { display:flex; flex-direction:column; align-items:center; gap:4px; } .battle-sprite { font-size:clamp(38px,11vw,56px); filter:drop-shadow(2px 3px 0 rgba(0,0,0,.3)); animation:npcFloat 2s ease-in-out infinite; } +.battle-sprite img { height:clamp(56px,16vw,80px); width:auto; image-rendering:pixelated; display:block; } .battle-player-side .battle-sprite { animation:bounce 1s ease-in-out infinite; } /* Player sprite on battle screen — use sprite sheet facing down-idle */ .battle-player-sprite {