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

Add NPC Sprites (Created by my amazing daughter)

Browse Source
This commit is contained in:
Justin Oros
2026-05-21 15:23:47 -07:00
parent 9337dea191
commit 1e53d2b18d
2 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
game.js
+7 -7
View File
@@ -22,8 +22,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 || '🧑';
@@ -31,11 +31,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': '😈',
@@ -53,7 +53,7 @@ const NPC = {
'Agatha': '👻',
'Lance': '🐉',
'Champion': '🏆',
'Gary': '😤',
'Gary': 'gary.png',
};
const INTRO_MSGS = CONFIG.introLines.map(text => ({ speaker:'PROFESSOR OAK', npc:'Professor Oak', text }));
style.css
+6 -4
View File
@@ -414,8 +414,8 @@ html, body {
#screen-intro { flex-direction:column-reverse; }
.intro-dialog { margin:10px; min-height:90px; }
.intro-npc { position:absolute; right:22%; bottom:30%; font-size:clamp(44px,13vw,64px); animation:npcFloat 2s ease-in-out infinite; filter:drop-shadow(2px 3px 0 rgba(0,0,0,.4)); }
.intro-npc img { height:clamp(44px,13vw,64px); width:auto; image-rendering:pixelated; display:block; }
.intro-npc img { height:clamp(44px,13vw,64px); width:auto; image-rendering:pixelated; display:block; }
.intro-npc img { height:clamp(56px,16vw,80px); width:auto; image-rendering:pixelated; display:block; }
.intro-npc img { height:clamp(56px,16vw,80px); width:auto; image-rendering:pixelated; display:block; }
.intro-player {
position: absolute;
left: 22%;
@@ -497,8 +497,10 @@ 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; }
.map-npc img { height:clamp(36px,10vw,52px); width:auto; image-rendering:pixelated; display:block; }
.map-npc img { height:clamp(36px,10vw,52px); width:auto; image-rendering:pixelated; display:block; }
.map-npc img { height:clamp(56px,16vw,80px); width:auto; image-rendering:pixelated; display:block; }
.battle-sprite 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; }
.battle-sprite 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 {