Hand player update

components/CardPreview.vue

@@ -1,17 +1,27 @@
 <script setup lang="ts">
-const props = defineProps(['data'])
+const props = defineProps({
+    data: {
+        type: String as PropType<string>,
+        required: false,
+    },
+})
 const cards = useState<{ [key: string]: any }>('cards')
 
 function cardClick() {
+    if (!props.data) return
     console.log(JSON.parse(JSON.stringify(cards.value[props.data].effects)))
 }
 </script>
 
 <template>
-    <span @click="cardClick">
+    <span v-if="props.data" @click="cardClick">
         {{ cards[props.data].name }}
     </span>
 
+    <span v-if="!props.data">
+        HIDDEN
+    </span>
+
     |
 </template>
 

components/CardSlot.vue

@@ -4,6 +4,6 @@ const props = defineProps(['stack'])
 
 <template>
     <span>
-        <CardPreview v-for="c in props.stack" :data="c" :key="c.uuid" />
+        <CardPreview v-for="c in props.stack" :data="c" />
     </span>
 </template>

components/GameBoard.vue

@@ -7,7 +7,7 @@ const gameObject = useState<{ [key: string]: any }>('gameObject')
 <template>
     <div>
         <div>
-            self = {{ self?.username }}
+            self = {{ gameObject[self]?.username }}
             <br>
             market_amount = {{ props.game.market_stack?.length }}
             <br>
@@ -18,6 +18,8 @@ const gameObject = useState<{ [key: string]: any }>('gameObject')
             <CardSlot :stack="props.game.gem_stack" />
         </div>
         <div>
+            <PlayerSlot :player="self"></PlayerSlot>
+            <br>
             players = {{ props.game.players?.map((e: any) => gameObject[e].username) }}
         </div>
     </div>

components/PlayerSlot.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const props = defineProps(['player'])
+const gameObject = useState<{ [key: string]: any }>('gameObject')
+</script>
+
+<template>
+    <span>
+        hand =
+        <CardSlot :stack="gameObject[props.player]?.hand" />
+        <br>
+        stack =
+        <CardSlot :stack="gameObject[props.player]?.stack_pile" />
+        <br>
+        discard =
+        <CardSlot :stack="gameObject[props.player]?.discard_pile" />
+    </span>
+</template>