Contextual menu for cards

components/PlayerSlot.vue

@@ -6,24 +6,25 @@ const socket = useState<WebSocket>('socket')
 const isTurn = computed(() => props.player.team == props.current_team)
 const isSelf = computed(() => props.player.uuid == self.value)
 
+const discard_wrapped = ref(false)
 
-async function playAllCards() {
+
+function playAllCards() {
+    props.player.hand.forEach((c: any) => {
+        playCard(c)
+    });
+
+}
+
+function playCard(cardId: string) {
     socket.value.send(JSON.stringify({
         type: "action",
         data_type: "play_cards",
-        data: props.player.hand
+        data: cardId
     }))
 }
 
-async function playCard(cardId: string) {
-    socket.value.send(JSON.stringify({
-        type: "action",
-        data_type: "play_cards",
-        data: [cardId]
-    }))
-}
-
-async function draw() {
+function draw() {
     socket.value.send(JSON.stringify({
         type: "action",
         data_type: "draw",
@@ -31,11 +32,42 @@ async function draw() {
     }))
 }
 
-async function discard(cardId: string) {
+function play_from_discard(cardId: string) {
+    socket.value.send(JSON.stringify({
+        type: "temp_action",
+        data_type: "play_from_discard",
+        data: cardId
+    }))
+}
+
+function discard(cardId: string) {
     socket.value.send(JSON.stringify({
         type: "action",
         data_type: "discard",
-        data: [cardId]
+        data: cardId
+    }))
+}
+
+function sacrifice(cardId: any) {
+    socket.value.send(JSON.stringify({
+        type: "action",
+        data_type: "sacrifice",
+        data: cardId
+    }))
+}
+
+function put_on_stack_from_discard(cardId: any) {
+    socket.value.send(JSON.stringify({
+        type: "temp_action",
+        data_type: "put_on_stack_from_discard",
+        data: cardId
+    }))
+}
+function setHealth(event: Event) {
+    socket.value.send(JSON.stringify({
+        type: "temp_action",
+        data_type: "set_health",
+        data: (event.target as HTMLInputElement).value
     }))
 }
 </script>
@@ -45,24 +77,27 @@ async function discard(cardId: string) {
         <div v-if="isSelf"><b>YOU</b></div>
         username = <b>{{ props.player.username }}</b>
         <br>
-        health = {{ teams[player.team].health }}
+        health =
+        <template v-if="!isSelf">{{ teams[player.team].health }}</template>
+        <input type="number" :value="teams[player.team].health" v-if="isSelf" @change="setHealth" />
         <br>
         hand =
-        <template v-for="c in props.player.hand">
-            <CardPreview :data="c">
+        <div class="cards_container">
+            <CardPreview :data="c" v-for="c in props.player.hand">
                 <button v-if="isSelf && isTurn" @click="playCard(c)">PLAY</button>
                 <button v-if="isSelf && isTurn" @click="discard(c)">DISCARD</button>
-            </CardPreview> |
-        </template>
+            </CardPreview>
+        </div>
         <button v-if="isSelf && isTurn && props.player.hand.length > 1" @click="playAllCards">PLAY
             ALL</button>
         <br>
         board =
-        <template v-for="c in props.player.board">
-            <CardPreview :data="c">
+        <div class="cards_container">
+            <CardPreview :data="c" v-for="c in props.player.board">
                 <button v-if="isSelf && isTurn" @click="discard(c)">DISCARD</button>
-            </CardPreview> |
-        </template>
+                <button v-if="isSelf && isTurn" @click="sacrifice(c)">SACRIFICE</button>
+            </CardPreview>
+        </div>
         <br>
         stack =
         <CardSlot :stack="props.player.stack_pile">
@@ -70,7 +105,26 @@ async function discard(cardId: string) {
         </CardSlot>
         <br>
         discard =
-        <CardSlot :stack="props.player.discard_pile"></CardSlot>
+
+        {{ props.player.discard_pile.length }}
+        <input type="checkbox" v-model="discard_wrapped" />
+
+        <CardPreview v-if="!discard_wrapped" :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" @click="sacrifice(props.player.discard_pile.at(-1))">SACRIFICE</button>
+        </CardPreview>
+
+        <template v-if="discard_wrapped" 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" @click="sacrifice(c)">SACRIFICE</button>
+            </CardPreview>
+        </template>
+
+
     </div>
 </template>