trainer sprite alignment

3 files changed, 28 insertions, 12 deletions

diff --git a/index.html b/index.html
index 329be97..486c5fd 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,6 @@
       <div id="battle">
         <div id="battle__opponent">
           <img class="battle__technique-animation" src="" draggable="false" />
-          <img class="battle__opponent__trainer-sprite" src="" draggable="false" />
         </div>
 
         <div id="battle__player"></div>
@@ -101,6 +100,7 @@
         <div class="battle__monster-visual">
           <div class="battle__monster-sprite">
             <img data-template-slot="sprite" class="battle__monster-img" src="" draggable="false" />
+            <img data-template-slot="trainerSprite" class="battle__monster__trainer-sprite" src="" draggable="false" />
           </div>
         </div>
       </div>
diff --git a/resources/css/battle.css b/resources/css/battle.css
index 0052072..1e52802 100644
--- a/resources/css/battle.css
+++ b/resources/css/battle.css
@@ -69,12 +69,13 @@
 .battle__monster-visual {
   flex-grow: 1;
   flex-basis: 50%;
-  text-align: center;
+  position: relative;
 }
 
 .battle__monster-sprite {
-  margin-bottom: 0.25rem;
+  text-align: center;
 }
+
 .battle__monster-img {
   cursor: pointer;
   transition-property: filter;
@@ -90,11 +91,12 @@
   z-index: 10;
 }
 
-.battle__opponent__trainer-sprite {
+.battle__monster__trainer-sprite {
   position: absolute;
   top: 0;
   right: 0;
-  height: 120px;
+  width: 120px;
+  max-width: 25vw;
 }
 
 .battle__monster-technique {
@@ -120,6 +122,18 @@
   display: none;
 }
 
+@media (max-width: 600px) {
+  .battle__monster--has-trainer-sprite .battle__monster-sprite {
+    width: 30vw;
+  }
+}
+@media (max-width: 450px) {
+  .battle__monster--has-trainer-sprite .battle__monster-sprite {
+    width: auto;
+    text-align: left;
+  }
+}
+
 .battle__monster--player {
   flex-direction: row-reverse;
   align-items: flex-end;
diff --git a/resources/js/ui.js b/resources/js/ui.js
index 820a49c..06e55ed 100644
--- a/resources/js/ui.js
+++ b/resources/js/ui.js
@@ -37,7 +37,6 @@ const UI = {
     battle: document.querySelector('#battle'),
     battleOpponent: document.querySelector('#battle__opponent'),
     battleOpponentSprite: null,
-    battleOpponentTrainerSprite: document.querySelector('.battle__opponent__trainer-sprite'),
     battleOpponentAnimation: document.querySelector('.battle__technique-animation'),
     battlePlayer: document.querySelector('#battle__player'),
 
@@ -298,6 +297,15 @@ const UI = {
 
     battleMonsterNode.classList.add('battle__monster--opponent');
 
+    if (Game.isBattleType('trainer')) {
+      battleMonsterNode.classList.add('battle__monster--is-trainer');
+
+      if (Memory.state.opponent.sprite) {
+        battleMonsterNode.classList.add('battle__monster--has-trainer-sprite');
+        battleMonsterNode.querySelector('[data-template-slot="trainerSprite"]').src = `/modules/tuxemon/mods/tuxemon/gfx/sprites/player/${Memory.state.opponent.sprite}`;
+      }
+    }
+
     return battleMonsterNode;
   },
 
@@ -372,12 +380,6 @@ const UI = {
     UI.elements.battleOpponentSprite = battleMonsterNode.querySelector('[data-template-slot="sprite"]');
     UI.elements.battleOpponentSprite.style.transitionDuration = `${UI.damageHighlightClickDuration}s`;
 
-    if (Game.isBattleType('trainer') && Memory.state.opponent.sprite) {
-      UI.elements.battleOpponentTrainerSprite.src = `/modules/tuxemon/mods/tuxemon/gfx/sprites/player/${Memory.state.opponent.sprite}`;
-    } else {
-      UI.elements.battleOpponentTrainerSprite.src = '';
-    }
-
     // en/disable catch
     UI.drawActiveBall();