load players

app.vue

@@ -1,15 +1,26 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 const cards = useState<{ [key: string]: any }>('cards', () => ({}))
+const players = useState<{ [key: string]: any }>('players', () => ({}))
+const self = useState<any>('self', () => (null))
+let gameObjects = useState<{ [key: string]: any }>('gameObject', () => ({}))
 let game = ref<any>({})
+let context = ref<string>('login')
 const socket = new WebSocket("ws://127.0.0.1:8765")
 
 const createObject = {
   "card": (data: any) => {
     cards.value[data.uuid] = data
+    gameObjects.value[data.uuid] = data
+  },
+  "player": (data: any) => {
+    players.value[data.uuid] = data
+    gameObjects.value[data.uuid] = data
+  },
+  "game": (data: any) => {
+    game.value = data
+    gameObjects.value[data.uuid] = data
   },
-  "player": () => { },
-  "game": (data: any) => { game.value = data },
   "team": () => { }
 } as { [id: string]: (data: Object) => any }
 
@@ -40,6 +51,18 @@ socket.onmessage = function (event) {
       throw new Error(`Object ${data.data.object_type} couldn't be created`)
     }
     createObject[data.data.object_type](data.data)
+  } else if (data.type == "update" && data.data_type == "object") {
+    if (!(data.data.uuid in gameObjects.value)) {
+      throw new Error(`Object ${data.data.uuid} doesn't exists`)
+    }
+    gameObjects.value[data.data.uuid] = data.data
+    createObject[data.data.object_type](data.data)
+  } else if (data.type === "context") {
+    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)
   } else {
     console.log(data.type, data.data_type, data.data);
   }
@@ -51,11 +74,26 @@ socket.onmessage = function (event) {
 
 
 async function register(username: string) {
-  socket.send(JSON.stringify({ type: "register", data_type: "username", data: username }))
+  socket.send(JSON.stringify({
+    type: "register",
+    data_type: "username",
+    data: username
+  }))
+}
+
+async function setReady(value: Event) {
+  socket.send(JSON.stringify({
+    type: "ready",
+    data_type: "ready_state",
+    data: ((value.target as HTMLInputElement).checked)
+  }))
 }
 </script>
 
 <template>
+  <button v-if="!self" @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>
     <GameBoard :game="game"></GameBoard>
   </div>

components/CardPreview.vue

@@ -1,9 +1,23 @@
 <script setup lang="ts">
 const props = defineProps(['data'])
 const cards = useState<{ [key: string]: any }>('cards')
+
+function cardClick() {
+    console.log(JSON.parse(JSON.stringify(cards.value[props.data].effects)))
+}
 </script>
 
 <template>
+    <span @click="cardClick">
         {{ cards[props.data].name }}
+    </span>
+
     |
 </template>
+
+<style scoped>
+span {
+    border: 1px solid black;
+    cursor: pointer
+}
+</style>

components/GameBoard.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 const props = defineProps(['game'])
-
+const self = useState<any>('self')
+const gameObject = useState<{ [key: string]: any }>('gameObject')
 </script>
 
 <template>
     <div>
         <div>
+            self = {{ self?.username }}
+            <br>
             market_amount = {{ props.game.market_stack?.length }}
             <br>
             market =
@@ -15,7 +18,7 @@ const props = defineProps(['game'])
             <CardSlot :stack="props.game.gem_stack" />
         </div>
         <div>
-            players = {{ props.game.players }}
+            players = {{ props.game.players?.map((e: any) => gameObject[e].username) }}
         </div>
     </div>
 </template>