small css changes

app.vue

@@ -23,4 +23,8 @@ let username = ref<string>('legonzaur')
 html {
   text-align: center;
 }
+
+body {
+  margin: 0;
+}
 </style>

components/CardPreview.vue

@@ -110,6 +110,7 @@ watch(
 }
 
 #contextMenu {
+    z-index: 5;
     position: fixed;
     height: 100%;
     width: 100%;

components/CardSlot.vue

@@ -28,4 +28,10 @@ const unwrapped = ref(false)
 
 </template>
 
-<style scoped></style>
+<style scoped>
+.cards_container {
+    position: relative;
+    max-width: 30vw;
+    grid-auto-columns: auto;
+}
+</style>

components/GameBoard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import goStore, { buy, endTurn, useEffect } from '@/netcode';
+import goStore, { buy, useEffect } from '@/netcode';
 import { CardEffects } from '@/netcode/Effect'
 import { CardType } from '@/netcode/Card'
 
@@ -9,7 +9,6 @@ const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.
 
 <template>
     <div @contextmenu.prevent="false">
-        <button v-if="isTurn" @click="endTurn">END TURN</button>
         <div v-if="!goStore.self"><b>SPECTATOR MODE</b></div>
         <div>
             market_amount = {{ goStore.game?.market_stack?.length }}
@@ -31,8 +30,7 @@ const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.
                         </button>
                     </template>
                 </CardSlot>
-                <div class="separator"></div>
+                <CardPreview :data="c" v-for="c in goStore.game?.market" @click="c && buy(c)">
-                <CardPreview :data="c" v-for=" c  in  goStore.game?.market " @click="c && buy(c)">
                     <template v-if="isTurn && c">
                         <button @click="buy(c)"
                             :disabled="goStore.self === undefined || c.cost === undefined || (goStore.self?.turn.gold_reserve ?? 0) < c.cost">BUY</button>

components/PlayerStats.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { Player } from '~/netcode/Player';
+
+
+export interface Props {
+    player: Player
+}
+
+const props = defineProps<Props>()
+
+</script>
+
+<template>
+
+    <div class="turn_icon">
+        <img src="/images/heal.png" />
+        <span class="turn_icon_number">
+            {{ player.turn.heal_reserve }}
+        </span>
+    </div>
+    <div class="turn_icon">
+        <img src="/images/damage.png" />
+        <span class="turn_icon_number">
+            {{ player.turn.damage_reserve }}
+        </span>
+    </div>
+    <div class="turn_icon">
+        <img src="/images/gold.png" />
+        <span class="turn_icon_number">
+            {{ player.turn.gold_reserve }}
+        </span>
+    </div>
+    <div class="turn_icon">
+        <img src="/images/champion-shield.png" />
+        <span class="turn_icon_number">
+            {{ player.team.health }}
+        </span>
+    </div>
+
+</template>
+
+<style scoped>
+.turn_icon {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.turn_icon img {
+    height: 50px;
+}
+
+.turn_icon_number {
+    position: absolute;
+    text-shadow: white 0 0 1px;
+}
+</style>

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">
-
+            <button id="end_turn" v-if="isTurn" @click="endTurn">END TURN</button>
-            <div class="turn_icon">
+            <PlayerStats v-if="goStore.self" :player='goStore.self'></PlayerStats>
-                <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>
         </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;
+    bottom: 10px;
-    right: 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;
+    left: 70px;
-    right: 60px;
     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;
 }