Fix reactive with new system

app.vue

@@ -1,118 +1,20 @@
 <script setup lang="ts">
+
 import { ref } from 'vue';
-const cards = useState<{ [key: string]: any }>('cards', () => ({}))
-const effects = useState<{ [key: string]: any }>('effects', () => ({}))
-const players = useState<{ [key: string]: any }>('players', () => ({}))
-const teams = useState<{ [key: string]: any }>('teams', () => ({}))
-const turns = useState<{ [key: string]: any }>('turns', () => ({}))
-const self = useState<string>('self')
-const gameObjects = useState<{ [key: string]: any }>('gameObject', () => ({}))
 
-const socket = useState<WebSocket>('socket', () => new WebSocket("ws://127.0.0.1:8765"))
+import goStore, { GameObjectRegister, register, setReady } from '@/netcode';
 
-let game = ref<any>({ started: true })
-let context = ref<string>('login')
 let username = ref<string>('legonzaur')
 
 
-const createObject = {
-  "effect": (data: any) => {
-    effects.value[data.uuid] = data
-    gameObjects.value[data.uuid] = data
-  },
-  "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
-  },
-  "team": (data: any) => {
-    teams.value[data.uuid] = data
-    gameObjects.value[data.uuid] = data
-  },
-  "turn": (data: any) => {
-    turns.value[data.uuid] = data
-    gameObjects.value[data.uuid] = data
-  }
-} as { [id: string]: (data: Object) => any }
-
-socket.value.onopen = function (e) {
-  console.log("[open] Connection established");
-};
-
-socket.value.onclose = function (event) {
-  if (event.wasClean) {
-    console.warn(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
-  } else {
-    // e.g. server process killed or network down
-    // event.code is usually 1006 in this case
-    console.error('[close] Connection died');
-  }
-};
-
-socket.value.onerror = function (error) {
-  console.error(error);
-};
-
-socket.value.onmessage = function (event) {
-  const data = JSON.parse(event.data)
-
-
-  if (data.type == "create" && data.data_type == "object") {
-    if (!(data.data.object_type in createObject)) {
-      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 = data.data
-  } else {
-    console.log(data.type, data.data_type, data.data);
-  }
-
-  // if (data.type == "context" && data.data_type == "game_context_id" && data.data == "pregame") {
-  //   setTimeout(() => socket.send(JSON.stringify({ type: "ready", data_type: "ready_state", data: true })), 1000)
-  // }
-};
-
-
-async function register(username: string) {
-  socket.value.send(JSON.stringify({
-    type: "register",
-    data_type: "username",
-    data: username
-  }))
-}
-
-async function setReady(value: Event) {
-  socket.value.send(JSON.stringify({
-    type: "ready",
-    data_type: "ready_state",
-    data: ((value.target as HTMLInputElement).checked)
-  }))
-}
 </script>
-
 <template>
-  <input v-if="!self && !game.started" type="text" v-model="username">
-  <button v-if="!self && !game.started" @click="register(username)">LOGIN</button>
-  <input @change="setReady" v-if="self && !game.started" type="checkbox" id="ready">
-  <label v-if="self && !game.started" for="scales">Ready</label>
+  <input v-if="!goStore.self && !goStore.game?.started" type="text" v-model="username">
+  <button v-if="!goStore.self && !goStore.game?.started" @click="register(username)">LOGIN</button>
+  <input @change="setReady(($event.target as HTMLInputElement).checked)" v-if="goStore.self && !goStore.game?.started"
+    type="checkbox" id="ready">
+  <label v-if="goStore.self && !goStore.game?.started" for="scales">Ready</label>
   <div>
-    <GameBoard :game="game"></GameBoard>
+    <GameBoard :game="goStore.game"></GameBoard>
   </div>
 </template>