Add trainer sprites peeking from screen edges on battle animation to show Pokemon ownership
This commit is contained in:
@@ -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();
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user