Add trainer sprites peeking from screen edges on battle animation to show Pokemon ownership
This commit is contained in:
1 parent
a4afb18946
commit
15d124d550
3 files changed
+42
No files matched your search
@@ -1789,6 +1789,14 @@ class Game {
|
|||||||
const playerPoke = this._getActivePokemon();
|
const playerPoke = this._getActivePokemon();
|
||||||
const npcPoke = this.state.currentNPCPokemon || { name:'???', emoji:'❓', level:1 };
|
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-name').textContent = playerPoke.name.toUpperCase();
|
||||||
document.getElementById('anim-player-pokemon').textContent = playerPoke.emoji;
|
document.getElementById('anim-player-pokemon').textContent = playerPoke.emoji;
|
||||||
document.getElementById('anim-npc-pokemon-name').textContent = npcPoke.name.toUpperCase();
|
document.getElementById('anim-npc-pokemon-name').textContent = npcPoke.name.toUpperCase();
|
||||||
|
|||||||
@@ -215,6 +215,8 @@
|
|||||||
|
|
||||||
<!-- BATTLE RESULT ANIMATION -->
|
<!-- BATTLE RESULT ANIMATION -->
|
||||||
<div id="screen-battle-anim" class="screen">
|
<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-scene">
|
||||||
<div class="battle-anim-npc">
|
<div class="battle-anim-npc">
|
||||||
<div class="battle-anim-npc-name" id="anim-npc-pokemon-name"></div>
|
<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; }
|
40% { transform:scale(2.5); opacity:.9; }
|
||||||
100% { transform:scale(4); opacity:0; }
|
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