From f0a618680ff22b6e875982cb87364d64f863a722 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Mon, 13 May 2024 17:42:48 +0200
Subject: [PATCH] Fix: Wraps player stats and remove bottom margin for active
 player Mitigates #7

---
 components/PlayerSlot.vue  | 14 +++++++-------
 components/PlayerStats.vue | 21 ++++++++++++---------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/components/PlayerSlot.vue b/components/PlayerSlot.vue
index 562a5c4..6b1db1f 100644
--- a/components/PlayerSlot.vue
+++ b/components/PlayerSlot.vue
@@ -88,11 +88,15 @@ const prepare_champion = (target: Card) => run_effect(CardEffects.PREPARE, targe
         </template>
         <div id="player_banner">
             <div id="player_info">
-                <img v-if="props.player.image" :src="props.player.image">
-                <b>{{ props.player.username }}</b>
+
+
             </div>
             <div id="player_stats">
+                <img v-if="props.player.image" :src="props.player.image">
+                <b>{{ props.player.username }}</b>
                 <PlayerStats :player="props.player"></PlayerStats>
+
+
             </div>
             <div v-if="props.player.ready && !goStore.current_game?.started">READY</div>
         </div>
@@ -201,10 +205,6 @@ const prepare_champion = (target: Card) => run_effect(CardEffects.PREPARE, targe
     transition: all 1s;
 }
 
-.player.turn {
-    margin-bottom: 75px;
-}
-
 .player.discard_unwrapped {
     grid-template-areas:
         "player_stats   player_stats"
@@ -240,7 +240,7 @@ const prepare_champion = (target: Card) => run_effect(CardEffects.PREPARE, targe
 #player_stats {
     display: flex;
     grid-area: player_stats;
-    flex-direction: row-reverse;
+    flex-direction: row;
     align-items: center;
     justify-content: center;
 }
diff --git a/components/PlayerStats.vue b/components/PlayerStats.vue
index 14f1e09..24c6525 100644
--- a/components/PlayerStats.vue
+++ b/components/PlayerStats.vue
@@ -12,14 +12,9 @@ const props = defineProps<Props>()
 
 <template>
     <div class="turn_icon">
-        <span class="icon_img">🖕</span>
-        <span class="turn_icon_number">{{ (player.turn?.discard_markers ?? 0) + (player.turn?.fuck_u_markers ?? 0)
-            }}</span>
-    </div>
-    <div class="turn_icon">
-        <img src="/images/damage.png" class="icon_img" draggable="false" />
+        <img src="/images/champion-shield.png" class="icon_img" draggable="false" />
         <span class="turn_icon_number">
-            {{ player.turn?.damage_reserve }}
+            {{ player.team?.health }}
         </span>
     </div>
     <div class="turn_icon">
@@ -29,11 +24,19 @@ const props = defineProps<Props>()
         </span>
     </div>
     <div class="turn_icon">
-        <img src="/images/champion-shield.png" class="icon_img" draggable="false" />
+        <img src="/images/damage.png" class="icon_img" draggable="false" />
         <span class="turn_icon_number">
-            {{ player.team?.health }}
+            {{ player.turn?.damage_reserve }}
         </span>
     </div>
+    <div class="turn_icon">
+        <span class="icon_img">🖕</span>
+        <span class="turn_icon_number">{{ (player.turn?.discard_markers ?? 0) + (player.turn?.fuck_u_markers ?? 0)
+            }}</span>
+    </div>
+
+
+
 
 
 </template>