discord login

components/PlayerSlot.vue

@@ -82,9 +82,14 @@ const restack_discarded_card = (target: Card) => run_effect(CardEffects.RESTACK_
                 </CardPreview>
             </div>
         </template>
-        <div id="player_stats">
-            <PlayerStats :player="props.player"></PlayerStats>
-            <b>{{ props.player.username }}</b>
+        <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">
+                <PlayerStats :player="props.player"></PlayerStats>
+            </div>
         </div>
         <div id="current_player_board">
             <button @click.stop="damage_team(props.player.team)" v-if="isSelfTurn && isPlayerEnemy"
@@ -162,6 +167,7 @@ const restack_discarded_card = (target: Card) => run_effect(CardEffects.RESTACK_
 .discard {
     margin-top: 50px;
     grid-area: discard;
+    justify-content: start;
 }
 
 .player {
@@ -173,6 +179,11 @@ const restack_discarded_card = (target: Card) => run_effect(CardEffects.RESTACK_
         "player_stats   player_stats"
         "stack          player"
         "discard        player";
+    transition: all 1s;
+}
+
+.player.turn {
+    margin-bottom: 75px;
 }
 
 .player.discard_unwrapped {
@@ -190,10 +201,10 @@ const restack_discarded_card = (target: Card) => run_effect(CardEffects.RESTACK_
     position: relative;
 }
 
-#player_stats {
+#player_banner {
     display: flex;
     grid-area: player_stats;
-    flex-direction: row-reverse;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
     position: sticky;
@@ -202,6 +213,24 @@ const restack_discarded_card = (target: Card) => run_effect(CardEffects.RESTACK_
     z-index: 1;
 }
 
+#player_info {
+    display: flex;
+    align-items: center;
+}
+
+#player_stats {
+    display: flex;
+    grid-area: player_stats;
+    flex-direction: row-reverse;
+    align-items: center;
+    justify-content: center;
+}
+
+#player_banner img {
+    height: 50px;
+    border-radius: 25px;
+}
+
 .turn_icon img {
     height: 50px;
 }