small css changes

components/SelfView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import goStore, { useEffect, playCard, playAllCards, discard, lockCard, heal, damage_champion, damage_team } from '~/netcode';
+import goStore, { useEffect, playCard, playAllCards, discard, lockCard, heal, damage_champion, damage_team, endTurn } from '~/netcode';
 import type { Card } from '~/netcode/Card';
 import { CardEffects } from '@/netcode/Effect'
 import { CardType } from '~/netcode/Card';
@@ -21,39 +21,12 @@ const discard_unwrapped = ref(false)
             :disabled="!goStore.self!.turn.find_effect(CardEffects.DISCARD)">
             make Discard</button>
         <div id="turn_data">
-
-            <div class="turn_icon">
-                <img src="/images/heal.png" />
-                <span class="turn_icon_number">
-                    {{ goStore.self?.turn.heal_reserve }}
-                </span>
-            </div>
-            <div class="turn_icon">
-                <img src="/images/damage.png" />
-                <span class="turn_icon_number">
-                    {{ goStore.self?.turn.damage_reserve }}
-                </span>
-            </div>
-            <div class="turn_icon">
-                <img src="/images/gold.png" />
-                <span class="turn_icon_number">
-                    {{ goStore.self?.turn.gold_reserve }}
-                </span>
-            </div>
-            <div class="turn_icon">
-                <img src="/images/champion-shield.png" />
-                <span class="turn_icon_number">
-                    {{ goStore.self?.team.health }}
-                </span>
-            </div>
+            <button id="end_turn" v-if="isTurn" @click="endTurn">END TURN</button>
+            <PlayerStats v-if="goStore.self" :player='goStore.self'></PlayerStats>
         </div>
+
         <div class="cards_container" id="self_hand">
-            <button v-if="isTurn && (goStore.self?.hand.length ?? 0) > 1"
-                @click="playAllCards(goStore.self?.hand as Card[])">
-                PLAY ALL
-            </button>
             <CardPreview :data="c" v-for="  c  in  goStore.self?.hand  " @click="c && playCard(c)">
-                <button v-if="c && isTurn" @click="playCard(c)">PLAY</button>
                 <button v-if="c && isTurn && (goStore.self?.turn.discard_markers ?? 0) > 0"
                     @click="discard(c!)">DISCARD</button>
             </CardPreview>
@@ -145,53 +118,66 @@ const discard_unwrapped = ref(false)
     background: lightgreen;
 }
 
+#play_all {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-size: 10em;
+}
+
 #turn_data {
     position: fixed;
-    bottom: 0;
-    right: 10px;
+    bottom: 10px;
+    left: 10px;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
 }
 
-.turn_icon {
-    position: relative;
-}
-
-.turn_icon img {
-    height: 50px;
-}
-
-.turn_icon_number {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
 
 #self_hand {
+    position: fixed;
     z-index: 1;
     display: flex;
-    flex-direction: row-reverse;
+    align-items: stretch;
+    flex-direction: row;
     flex-wrap: nowrap;
-    position: fixed;
-    right: 60px;
+    left: 70px;
     bottom: -50px;
     max-width: 100vw;
+    justify-content: flex-start;
+    transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
+    transform: translateY(150px)
+}
+
+#self_hand:hover {
+    transform: translateY(0px);
+}
+
+#end_turn {
+    width: 50px;
+    height: 50px;
 }
 </style>
 
 <style>
+#turn_data * {
+    margin: 2.5px 0 2.5px 0;
+}
+
 #self_hand .card {
     transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
     overflow: visible;
 }
 
+
 #self_hand .card:hover {
     transform: translateY(-40px);
 
 }
 
+
+
 .cards_container {
     min-width: 250px;
 }