stuff wip

components/CardSlot.vue

@@ -18,7 +18,7 @@ const wrapped = ref(false)
     <input type="checkbox" v-model="wrapped" />
     <div class="cards_container">
 
-        <CardPreview v-if="!wrapped" :data="props.stack.at(-1) ?? null">
+        <CardPreview v-if="!wrapped && props.stack.length > 0" :data="props.stack.at(-1) ?? null">
             <slot></slot>
         </CardPreview>
 
@@ -32,3 +32,10 @@ const wrapped = ref(false)
 
 
 </template>
+
+<style scoped>
+.cards_container {
+    display: flex;
+    flex-direction: row;
+}
+</style>

components/PlayerSlot.vue

@@ -33,17 +33,32 @@ const discard_unwrapped = ref(false)
             @click="useEffect(goStore.self?.turn.effects_availables.find(e => (e.effect == CardEffects.DISCARD) && e.usable)!, props.player)"
             :disabled="!goStore.self?.turn.effects_availables.some(e => (e.effect == CardEffects.DISCARD) && e.usable)">
             make Discard</button>
-        <div id="turn" v-if="props.player.turn">
+        <div id="turn_data" v-if="props.player.turn && isTurn && isSelf">
-            heal_reserve = {{ props.player.turn.heal_reserve }} <br>
+            <span id="turn_heal">{{ props.player.turn.heal_reserve }} </span>
-            damage_reserve = {{ props.player.turn.damage_reserve }} <br>
+            <span id="turn_damage">{{ props.player.turn.damage_reserve }} </span>
-            gold_reserve = {{ props.player.turn.gold_reserve }} <br>
+            <span>{{ props.player.turn.gold_reserve }}</span>
-            discard_markers = {{ props.player.turn.discard_markers }} <br>
+            <span>discard_markers = {{ props.player.turn.discard_markers }} <br></span>
-            effects_availables = <div v-for="e in props.player.turn.effects_availables">
+            <span>effects_availables = <div v-for="e in props.player.turn.effects_availables">
-                <button v-if="e" @click="useEffect(e)">
+                    <button v-if="e && ![CardEffects.DAMAGE, CardEffects.GOLD, CardEffects.HEAL].includes(e.effect)"
+                        @click="useEffect(e)" :disabled="!e.usable">
                         {{ e.effect + ' ' + e.effect_type }}
                     </button>
 
+                </div></span>
         </div>
+
+        <div id="turn_data" v-if="props.player.turn">
+            <span id=" turn_heal">heal_reserve = {{ props.player.turn.heal_reserve }} <br></span>
+            <span id="turn_damage">damage_reserve = {{ props.player.turn.damage_reserve }} <br></span>
+            <span>gold_reserve = {{ props.player.turn.gold_reserve }} <br></span>
+            <span>discard_markers = {{ props.player.turn.discard_markers }} <br></span>
+            <span>effects_availables = <div v-for=" e  in  props.player.turn.effects_availables ">
+                    <button v-if="e && ![CardEffects.DAMAGE, CardEffects.GOLD, CardEffects.HEAL].includes(e.effect)"
+                        @click="useEffect(e)" :disabled="!e.usable">
+                        {{ e.effect + ' ' + e.effect_type }}
+                    </button>
+
+                </div></span>
         </div>
 
 
@@ -143,4 +158,12 @@ const discard_unwrapped = ref(false)
 .turn {
     background: lightgreen;
 }
+
+#turn_data {
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    flex-direction: row;
+}
 </style>