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

Replace hat emoji on level-up screen with player.png sprite sheet

Browse Source
This commit is contained in:
justin committed 2026-05-20 20:42:25 -07:00
1 parent f5c3cb9145
commit 0db0049caa
2 files changed
+16 -4
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+1 -1
View File
@@ -164,7 +164,7 @@
<div id="screen-levelup" class="screen">
<div class="levelup-box">
<div class="lu-stars blink" id="lu-stars">★ BADGE EARNED! ★</div>
<div class="lu-sprite">🧢</div>
<div class="lu-sprite"><div class="lu-player-sprite"></div></div>
<div class="lu-text"><span id="lu-name">ASH</span> gained SQL EXP!</div>
<div class="lu-badge" id="lu-badge">🏅 SQL TRAINEE</div>
<div class="lu-prog-wrap">
style.css
+15 -3
View File
@@ -480,7 +480,7 @@ html, body {
bottom: -9999px; /* ensure off-screen when hidden */
}
/* 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: 10; }
.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 */
@@ -526,7 +526,7 @@ html, body {
background-position: 0 0;
image-rendering: pixelated;
filter: drop-shadow(2px 3px 0 rgba(0,0,0,.4));
z-index: 40;
z-index: 10;
font-size: 0;
color: transparent;
}
@@ -643,7 +643,19 @@ html, body {
#screen-levelup { background:linear-gradient(135deg,#0f0630,#220e5e,#0a0a34); align-items:center; justify-content:center; }
.levelup-box { text-align:center; padding:clamp(16px,4vw,28px) clamp(14px,3.5vw,22px); width:90%; max-width:360px; display:flex; flex-direction:column; gap:12px; animation:fadeIn .5s ease; }
.lu-stars { font-size:clamp(7px,2vw,9px); color:var(--yellow); text-shadow:0 0 8px var(--yellow); letter-spacing:1px; }
.lu-sprite { font-size:clamp(52px,15vw,74px); animation:bounce 1s ease-in-out infinite; }
.lu-sprite { animation:bounce 1s ease-in-out infinite; display:flex; justify-content:center; }
.lu-player-sprite {
width: 32px;
height: 64px;
background-image: url('./player.png');
background-repeat: no-repeat;
background-size: 768px 64px;
background-position: -32px 0;
image-rendering: pixelated;
filter: drop-shadow(2px 3px 0 rgba(0,0,0,.4));
transform: scale(1.5);
transform-origin: center bottom;
}
.lu-text { font-size:clamp(7.5px,2.2vw,9px); color:var(--white); line-height:2; }
.lu-badge { font-size:clamp(7px,2vw,9px); color:var(--yellow); background:rgba(255,255,255,.08); border:2px solid var(--yellow); padding:clamp(8px,2.5vw,12px); }
.lu-prog-wrap{ display:flex; flex-direction:column; gap:5px; align-items:center; }