Fix reactive with new system

components/GameBoard.vue

@@ -1,41 +1,20 @@
 <script setup lang="ts">
-const props = defineProps(['game'])
-const self = useState<string>('self')
-const gameObject = useState<{ [key: string]: any }>('gameObject')
-const cards = useState<{ [key: string]: any }>('cards')
-const socket = useState<WebSocket>('socket')
+import goStore, { buy, endTurn } from '@/netcode';
 
-const isTurn = computed(() => self.value && props.game?.started && (gameObject.value[self.value]?.team == props.game.current_turn))
-
-async function buy(cardId: string) {
-    socket.value.send(JSON.stringify({
-        type: "action",
-        data_type: "buy",
-        data: cardId
-    }))
-}
-
-async function endTurn() {
-    socket.value.send(JSON.stringify({
-        type: "action",
-        data_type: "end_turn",
-        data: true
-    }))
-}
+const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.self.team == goStore.game.current_turn))
 
 </script>
 
 <template>
     <div @contextmenu.prevent="false">
         <button v-if="isTurn" @click="endTurn">END TURN</button>
-        <div v-if="!self"><b>SPECTATOR MODE</b></div>
+        <div v-if="!goStore.self"><b>SPECTATOR MODE</b></div>
         <div>
-            market_amount = {{ props.game.market_stack?.length }}
+            market_amount = {{ goStore.game?.market_stack?.length }}
             <br>
             market =
             <div class="cards_container">
-
-                <CardPreview :data="c" v-for="c in props.game.market">
+                <CardPreview :data="c" v-for="c in goStore.game?.market">
                     <template v-if="isTurn && c">
                         <button @click="buy(c)">BUY</button>
                         <!-- <button @click="buy_in_hand(c)">
@@ -50,9 +29,9 @@ async function endTurn() {
 
             <br>
             gems =
-            <CardSlot :stack="props.game.gem_stack">
-                <template v-if="isTurn && props.game.gem_stack.length > 0">
-                    <button @click="buy(props.game.gem_stack.at(-1))">
+            <CardSlot :stack="goStore.game?.gem_stack">
+                <template v-if="isTurn && goStore.game?.gem_stack.length && goStore.game?.gem_stack.length > 0">
+                    <button @click="buy(goStore.game.gem_stack.at(-1)!)">
                         BUY
                     </button>
                     <!-- <button @click="buy_in_hand(props.game.gem_stack.at(-1))">
@@ -65,7 +44,8 @@ async function endTurn() {
             </CardSlot>
         </div>
         <div>
-            <PlayerList :players="props.game?.players" :current_team="game.current_turn"></PlayerList>
+            <PlayerList>
+            </PlayerList>
         </div>
     </div>
 </template>