Add trainer sprites peeking from screen edges on battle animation to show Pokemon ownership

This commit is contained in:
Sterling Archer
2026-05-27 14:45:16 -07:00
parent a4afb18946
commit 15d124d550
3 changed files with 42 additions and 0 deletions
+8
View File
@@ -1789,6 +1789,14 @@ class Game {
const playerPoke = this._getActivePokemon();
const npcPoke = this.state.currentNPCPokemon || { name:'???', emoji:'❓', level:1 };
const npcTrainer = document.getElementById('anim-npc-trainer');
if (npcTrainer) {
const npcQ = this.state.questions[this.state.currentQ];
setNPC(npcTrainer, NPC[npcQ?.npc] || '🧑');
}
const playerTrainer = document.getElementById('anim-player-trainer');
if (playerTrainer) playerTrainer.innerHTML = '<div class="anim-player-sprite-sheet"></div>';
document.getElementById('anim-player-pokemon-name').textContent = playerPoke.name.toUpperCase();
document.getElementById('anim-player-pokemon').textContent = playerPoke.emoji;
document.getElementById('anim-npc-pokemon-name').textContent = npcPoke.name.toUpperCase();
+2
View File
@@ -215,6 +215,8 @@
<!-- BATTLE RESULT ANIMATION -->
<div id="screen-battle-anim" class="screen">
<div class="battle-anim-trainer-npc" id="anim-npc-trainer"></div>
<div class="battle-anim-trainer-player" id="anim-player-trainer"></div>
<div class="battle-anim-scene">
<div class="battle-anim-npc">
<div class="battle-anim-npc-name" id="anim-npc-pokemon-name"></div>
+32
View File
@@ -1301,3 +1301,35 @@ html, body {
40% { transform:scale(2.5); opacity:.9; }
100% { transform:scale(4); opacity:0; }
}
/* ─── BATTLE ANIM TRAINER PEEK ───────────────────────────── */
.battle-anim-trainer-npc,
.battle-anim-trainer-player {
position:absolute;
top:50%;
transform:translateY(-50%);
z-index:5;
opacity:.7;
font-size:clamp(50px,15vw,72px);
}
.battle-anim-trainer-npc {
left:-28px;
}
.battle-anim-trainer-npc img {
height:clamp(72px,20vw,100px);
width:auto;
image-rendering:pixelated;
display:block;
}
.battle-anim-trainer-player {
right:-28px;
}
.anim-player-sprite-sheet {
width:48px;
height:96px;
background-image:url('./player.png');
background-repeat:no-repeat;
background-size:1152px 96px;
background-position:-48px 0;
image-rendering:pixelated;
}