Hand player update

app.vue

@@ -2,9 +2,9 @@
 import { ref } from 'vue';
 const cards = useState<{ [key: string]: any }>('cards', () => ({}))
 const players = useState<{ [key: string]: any }>('players', () => ({}))
-const self = useState<any>('self', () => (null))
+const self = useState<string>('self')
 let gameObjects = useState<{ [key: string]: any }>('gameObject', () => ({}))
-let game = ref<any>({})
+let game = ref<any>({ started: true })
 let context = ref<string>('login')
 const socket = new WebSocket("ws://127.0.0.1:8765")
 
@@ -61,8 +61,7 @@ socket.onmessage = function (event) {
     context.value = data.data
     console.log(context.value)
   } else if (data.type === "set" && data.data_type == "self") {
-    self.value = players.value[data.data]
-    console.log(self.value)
+    self.value = data.data
   } else {
     console.log(data.type, data.data_type, data.data);
   }
@@ -91,7 +90,7 @@ async function setReady(value: Event) {
 </script>
 
 <template>
-  <button v-if="!self" @click="register('legonzaur')">LOGIN</button>
+  <button v-if="!self && !game.started" @click="register('legonzaur')">LOGIN</button>
   <input @change="setReady" v-if="self && !game.started" type="checkbox" id="ready">
   <label v-if="self && !game.started" for="scales">Ready</label>
   <div>

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>