Fix market not showing for spectators

app.vue

@@ -2,7 +2,7 @@
 
 import { ref } from 'vue';
 
-import goStore, { GameObjectRegister, register, setReady } from '@/netcode';
+import goStore, { register, setReady } from '@/netcode';
 
 let username = ref<string>('legonzaur')
 
@@ -15,6 +15,6 @@ let username = ref<string>('legonzaur')
     type="checkbox" id="ready">
   <label v-if="goStore.self && !goStore.game?.started" for="scales">Ready</label>
   <div>
-    <GameBoard :game="goStore.game"></GameBoard>
+    <GameBoard></GameBoard>
   </div>
 </template>

netcode/index.ts

@@ -6,6 +6,8 @@ import { type Player, create_player, type PlayerNetcode } from "./Player"
 import { type Team, create_team, type TeamNetcode } from "./Team"
 import { type Turn, create_turn } from "./Turn"
 
+import { type Ref } from "vue"
+
 export const socket = new WebSocket("ws://127.0.0.1:8765")
 
 export class GameObjectRegister {
@@ -18,8 +20,8 @@ export class GameObjectRegister {
 
     context: 'login' | 'pregame' | 'game' = "login"
     private readonly objects: Map<string, GameObjectNetcode>
-    game?: Game
-    self?: Player
+    game: Ref<Game | null>
+    self: Ref<Player | null>
     constructor() {
         this.effects = reactive(new Map())
         this.cards = reactive(new Map())
@@ -28,6 +30,9 @@ export class GameObjectRegister {
         this.turns = reactive(new Map())
 
         this.objects = reactive(new Map())
+
+        this.game = ref(null)
+        this.self = ref(null)
     }
 
     update_object(obj: GameObjectNetcode) {
@@ -57,8 +62,8 @@ export class GameObjectRegister {
             this.objects.set(data.uuid, team)
         },
         "game": (data: GameNetcode) => {
-            this.game = create_game(data, this)
-            this.objects.set(data.uuid, this.game)
+            this.game.value = create_game(data, this)
+            this.objects.set(data.uuid, this.game.value)
         },
         "turn": (data: any) => {
             const turn = create_turn(data, this)
@@ -68,7 +73,7 @@ export class GameObjectRegister {
     } as { [id: string]: (data: any) => any }
 
     set_self(uuid: string) {
-        this.self = this.players.get(uuid)
+        this.self.value = this.players.get(uuid) ?? null
     }
 }