experimental css changes

app.vue

@@ -18,3 +18,9 @@ let username = ref<string>('legonzaur')
     <GameBoard></GameBoard>
   </div>
 </template>
+
+<style>
+html {
+  text-align: center;
+}
+</style>

components/CardPreview.vue

@@ -3,7 +3,7 @@ import type { Card } from '~/netcode/Card';
 
 
 export interface Props {
-    data?: Card | null
+    data: Card | null | undefined
     locked?: boolean
 }
 
@@ -15,7 +15,7 @@ const buttonsElement = ref<HTMLElement | null>(null)
 const rightClicked = ref(false)
 
 function cardClick() {
-    if (props.data == null) return
+    if (!props.data) return
     emit("click")
 }
 

components/CardSlot.vue

@@ -9,20 +9,19 @@ const props = withDefaults(defineProps<Props>(), {
     stack: () => [],
 })
 
-const wrapped = ref(false)
+const unwrapped = ref(false)
 
 </script>
 
 <template>
     {{ props.stack?.length }}
-    <input type="checkbox" v-model="wrapped" />
+    <input type="checkbox" v-model="unwrapped" />
     <div class="cards_container">
-
+        <CardPreview v-if="!unwrapped && props.stack.length > 0" :data="props.stack.at(-1) ?? null">
-        <CardPreview v-if="!wrapped && props.stack.length > 0" :data="props.stack.at(-1) ?? null">
             <slot></slot>
         </CardPreview>
 
-        <template v-if="wrapped" v-for="c in props.stack">
+        <template v-if="unwrapped" v-for="c in props.stack">
             <CardPreview :data="c">
                 <slot></slot>
             </CardPreview>
@@ -31,11 +30,4 @@ const wrapped = ref(false)
 
 
 
-</template>
+</template>
-
-<style scoped>
-.cards_container {
-    display: flex;
-    flex-direction: row;
-}
-</style>

components/GameBoard.vue

@@ -71,5 +71,6 @@ const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.
 .cards_container {
     display: flex;
     flex-direction: row;
+    justify-content: center;
 }
 </style>

components/PlayerSlot.vue

@@ -112,7 +112,46 @@ const discard_unwrapped = ref(false)
             </CardPreview>
         </div>
 
+        stack =
+        <CardSlot :stack="props.player.stack_pile">
+            <!-- <button v-if="isSelf && isTurn" @click="draw">DRAW</button> -->
+        </CardSlot>
+        <br>
+        discard =
 
+        {{ props.player.discard_pile.length }}
+        <input type="checkbox" v-model="discard_unwrapped" />
+
+        <CardPreview v-if="!discard_unwrapped && props.player.discard_pile.length > 0"
+            :data="props.player.discard_pile.at(-1)">
+            <!-- <button v-if="isSelf && isTurn" @click="play_from_discard(props.player.discard_pile.at(-1))">DRAW</button>
+            <button v-if="isSelf && isTurn" @click="put_on_stack_from_discard(props.player.discard_pile.at(-1))">PUT ON
+                STACK</button> -->
+
+            <button v-if="isSelf && isTurn"
+                :disabled="!goStore.self || !props.player.discard_pile.at(-1) || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.SACRIFICE) && e.usable) || props.player.discard_pile.at(-1)!.uuid in props.player.turn.cards_locked"
+                @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.SACRIFICE) && e.usable)!, props.player.discard_pile.at(-1))">SACRIFICE</button>
+        </CardPreview>
+
+        <template v-if="discard_unwrapped" v-for=" c  in  props.player.discard_pile  ">
+            <CardPreview :data="c">
+                <!-- <button v-if="isSelf && isTurn" @click="play_from_discard(c)">DRAW</button>
+                <button v-if="isSelf && isTurn" @click="put_on_stack_from_discard(c)">PUT ON STACK</button>
+                -->
+                <button v-if="isSelf && isTurn && c.card_type == CardType.CHAMPION"
+                    :disabled="!goStore.self || !c || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.RESTACK_DISCARDED_CHAMPION) && e.usable)"
+                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.RESTACK_DISCARDED_CHAMPION) && e.usable)!, c)">RESTACK
+                    (champion)</button>
+
+                <button v-if="isSelf && isTurn"
+                    :disabled="!goStore.self || !c || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.RESTACK_DISCARDED_CARD) && e.usable)"
+                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.RESTACK_DISCARDED_CARD) && e.usable)!, c)">RESTACK
+                    (card)</button>
+                <button v-if="isSelf && isTurn"
+                    :disabled="!goStore.self || !c || !props.player.turn.effects_availables.some(e => (e.effect == CardEffects.SACRIFICE) && e.usable)"
+                    @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.SACRIFICE) && e.usable)!, c)">SACRIFICE</button>
+            </CardPreview>
+        </template>
 
     </div>
 </template>
@@ -134,6 +173,7 @@ const discard_unwrapped = ref(false)
     display: flex;
     flex-direction: row;
     align-items: flex-start;
+    justify-content: center;
 }
 
 .turn_icon img {

components/SelfView.vue

@@ -61,16 +61,15 @@ const discard_unwrapped = ref(false)
             </div>
         </div>
         <div class="cards_container" id="self_hand">
+            <button v-if="isSelf && isTurn && props.player.hand.length > 1"
+                @click="playAllCards(props.player.hand as Card[])">
+                PLAY ALL
+            </button>
             <CardPreview :data="c" v-for="  c  in  props.player.hand  " @click="c && playCard(c)">
                 <button v-if="c && isSelf && isTurn" @click="playCard(c)">PLAY</button>
                 <button v-if="c && isSelf && isTurn && props.player.turn.discard_markers > 0"
                     @click="discard(c)">DISCARD</button>
             </CardPreview>
-
-            <button v-if="isSelf && isTurn && props.player.hand.length > 1"
-                @click="playAllCards(props.player.hand as Card[])">
-                PLAY ALL
-            </button>
         </div>
 
         <span>discard_markers = {{ props.player.turn.discard_markers }} <br></span>
@@ -118,7 +117,7 @@ const discard_unwrapped = ref(false)
         {{ props.player.discard_pile.length }}
         <input type="checkbox" v-model="discard_unwrapped" />
 
-        <CardPreview v-if="!discard_unwrapped" :data="props.player.discard_pile.at(-1) ?? null">
+        <CardPreview v-if="!discard_unwrapped" :data="props.player.discard_pile.at(-1)">
             <!-- <button v-if="isSelf && isTurn" @click="play_from_discard(props.player.discard_pile.at(-1))">DRAW</button>
             <button v-if="isSelf && isTurn" @click="put_on_stack_from_discard(props.player.discard_pile.at(-1))">PUT ON
                 STACK</button> -->
@@ -128,7 +127,7 @@ const discard_unwrapped = ref(false)
                 @click="useEffect(goStore.self!.turn.effects_availables.find(e => (e.effect == CardEffects.SACRIFICE) && e.usable)!, props.player.discard_pile.at(-1))">SACRIFICE</button>
         </CardPreview>
 
-        <template v-if="discard_unwrapped" v-for=" c  in  props.player.discard_pile  ">
+        <template v-if="discard_unwrapped" v-for="c in props.player.discard_pile  ">
             <CardPreview :data="c">
                 <!-- <button v-if="isSelf && isTurn" @click="play_from_discard(c)">DRAW</button>
                 <button v-if="isSelf && isTurn" @click="put_on_stack_from_discard(c)">PUT ON STACK</button>