Some game actions work

components/PlayerSlot.vue

@@ -1,17 +1,85 @@
 <script setup lang="ts">
-const props = defineProps(['player'])
-const gameObject = useState<{ [key: string]: any }>('gameObject')
+const props = defineProps(['player', 'current_team'])
+const teams = useState<{ [key: string]: any }>('teams')
+const self = useState<string>('self')
+const socket = useState<WebSocket>('socket')
+const isTurn = computed(() => props.player.team == props.current_team)
+const isSelf = computed(() => props.player.uuid == self.value)
+
+
+async function playAllCards() {
+    socket.value.send(JSON.stringify({
+        type: "action",
+        data_type: "play_cards",
+        data: props.player.hand
+    }))
+}
+
+async function playCard(cardId: string) {
+    socket.value.send(JSON.stringify({
+        type: "action",
+        data_type: "play_cards",
+        data: [cardId]
+    }))
+}
+
+async function draw() {
+    socket.value.send(JSON.stringify({
+        type: "action",
+        data_type: "draw",
+        data: 1
+    }))
+}
+
+async function discard(cardId: string) {
+    socket.value.send(JSON.stringify({
+        type: "action",
+        data_type: "discard",
+        data: [cardId]
+    }))
+}
 </script>
 
 <template>
-    <span>
+    <div :class="'player ' + (isTurn ? 'turn' : '')">
+        <div v-if="isSelf"><b>YOU</b></div>
+        username = <b>{{ props.player.username }}</b>
+        <br>
+        health = {{ teams[player.team].health }}
+        <br>
         hand =
-        <CardSlot :stack="gameObject[props.player]?.hand" />
+        <template v-for="c in props.player.hand">
+            <CardPreview :data="c">
+                <button v-if="isSelf && isTurn" @click="playCard(c)">PLAY</button>
+                <button v-if="isSelf && isTurn" @click="discard(c)">DISCARD</button>
+            </CardPreview> |
+        </template>
+        <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">
+                <button v-if="isSelf && isTurn" @click="discard(c)">DISCARD</button>
+            </CardPreview> |
+        </template>
         <br>
         stack =
-        <CardSlot :stack="gameObject[props.player]?.stack_pile" />
+        <CardSlot :stack="props.player.stack_pile">
+            <button v-if="isSelf && isTurn" @click="draw">DRAW</button>
+        </CardSlot>
         <br>
         discard =
-        <CardSlot :stack="gameObject[props.player]?.discard_pile" />
-    </span>
-</template>
+        <CardSlot :stack="props.player.discard_pile"></CardSlot>
+    </div>
+</template>
+
+<style scoped>
+.player {
+    border-top: 5px solid black;
+}
+
+.turn {
+    background: lightgreen;
+}
+</style>