Fixes #4; Show game stats instead of UUIDs in lobby

components/LobbyView.vue

@@ -23,12 +23,20 @@ function killErika() {
             </div>
 
             <div class="games-list-zone">
-                <div v-for="g in goStore.lobby?.games"><button @click="join_game(g)">{{ g }}</button></div>
+                <div v-for="g in goStore.lobby?.games">
+                    <button v-if="g" @click="join_game(g.uuid)">
+                        started:{{ g.started }}
+                        ended:{{ g.ended }}
+                        players:<span v-for="p in g.players">{{ p.username }},</span>
+                    </button>
+                </div>
             </div>
         </div>
 
         <div class="overlay" v-if="erika_alive">
-            <img class="overlay-image" src="https://static.wikia.nocookie.net/umineko/images/9/9d/PC_Erika.Casual.Sprite_36.png" alt="pétasse" />
+            <img class="overlay-image"
+                src="https://static.wikia.nocookie.net/umineko/images/9/9d/PC_Erika.Casual.Sprite_36.png"
+                alt="pétasse" />
             <div class="speech-bubble">
                 <p>Ohoho!<br>Je suis Erika Furudo, la détective la plus forte du monde !</p>
                 <p>Je vais vous montrer comment jouer à Héron Realms !</p>

components/PlayerStats.vue

@@ -13,24 +13,25 @@ const props = defineProps<Props>()
 <template>
     <div class="turn_icon">
         <span class="icon_img">🖕</span>
-        <span class="turn_icon_number">{{ player.turn.discard_markers + player.turn.fuck_u_markers }}</span>
+        <span class="turn_icon_number">{{ (player.turn?.discard_markers ?? 0) + (player.turn?.fuck_u_markers ?? 0)
+            }}</span>
     </div>
     <div class="turn_icon">
         <img src="/images/damage.png" class="icon_img" draggable="false" />
         <span class="turn_icon_number">
-            {{ player.turn.damage_reserve }}
+            {{ player.turn?.damage_reserve }}
         </span>
     </div>
     <div class="turn_icon">
         <img src="/images/gold.png" class="icon_img" draggable="false" />
         <span class="turn_icon_number">
-            {{ player.turn.gold_reserve }}
+            {{ player.turn?.gold_reserve }}
         </span>
     </div>
     <div class="turn_icon">
         <img src="/images/champion-shield.png" class="icon_img" draggable="false" />
         <span class="turn_icon_number">
-            {{ player.team.health }}
+            {{ player.team?.health }}
         </span>
     </div>
 

netcode/Game.ts

@@ -2,6 +2,7 @@ import { type GameObjectRegister } from "."
 import { type Team } from "./Team"
 import { type GameObjectNetcode } from "./GameObject"
 import type { Card } from "./Card"
+import type { Player } from "./Player"
 
 export interface GameNetcode extends GameObjectNetcode {
     market_stack: Array<string>
@@ -9,14 +10,17 @@ export interface GameNetcode extends GameObjectNetcode {
     gem_stack: Array<string>
     started: boolean
     current_turn: string
+    players: Array<string>
+    ended: boolean
 }
 
 
-export type Game = Omit<GameNetcode, 'market_stack' | 'market' | 'gem_stack' | 'current_turn'> & {
+export type Game = Omit<GameNetcode, 'market_stack' | 'market' | 'gem_stack' | 'current_turn' | 'player'> & {
     market_stack: Array<Card>
     market: Array<Card | null>
     gem_stack: Array<Card>
     current_turn: Team
+    players: Array<Player>
 }
 export function create_game(input: GameNetcode, register: GameObjectRegister) {
     return new Proxy<any>(input, {
@@ -34,6 +38,9 @@ export function create_game(input: GameNetcode, register: GameObjectRegister) {
             if (prop == "current_turn") {
                 return register.teams.get(input.current_turn)
             }
+            if (prop == "players") {
+                return target.players.map(e => register.players.get(e))
+            }
             return Reflect.get(target, prop, reciever);
         },
         set(target, prop, val, receiver) {

netcode/Lobby.ts

@@ -7,15 +7,15 @@ export interface LobbyNetcode extends GameObjectNetcode {
 }
 
 
-export type Lobby = LobbyNetcode & {
+export type Lobby = Omit<LobbyNetcode, 'games'> & {
     games: Array<Game>
 }
 export function create_lobby(input: LobbyNetcode, register: GameObjectRegister) {
     return new Proxy<any>(input, {
         get(target: LobbyNetcode, prop, reciever) {
-            // if (prop == "games") {
-            //     return target.games.map(e => register.games.get(e))
-            // }
+            if (prop == "games") {
+                return target.games.map(e => register.games.get(e))
+            }
             return Reflect.get(target, prop, reciever);
         },
         set(target, prop, val, receiver) {

netcode/Player.ts

@@ -21,8 +21,8 @@ export type Player = Omit<PlayerNetcode, 'discard_pile' | 'stack_pile' | 'hand'
     discard_pile: Array<Card>
     hand: Array<Card | null>
     board: Array<Card>
-    team: Team
-    turn: Turn
+    team: Team | undefined
+    turn: Turn | undefined
 }
 export function create_player(input: PlayerNetcode, register: GameObjectRegister) {
     return new Proxy<any>(input, {

netcode/index.ts

@@ -23,11 +23,11 @@ export class GameObjectRegister {
   readonly teams: Map<string, Team>;
   readonly players: Map<string, Player>;
   readonly turns: Map<string, Turn>;
-  readonly games: Map<string, Game>
+  readonly games: Map<string, Game>;
 
   context: "lobby" | "login" | "pregame" | "game" = "login";
   private readonly objects: Map<string, GameObjectNetcode>;
-  current_game: Ref<Game | null>
+  current_game: Ref<Game | null>;
   lobby: Ref<Lobby | null>;
   self: Ref<Player | null>;
   constructor() {
@@ -36,18 +36,25 @@ export class GameObjectRegister {
     this.teams = reactive(new Map());
     this.players = reactive(new Map());
     this.turns = reactive(new Map());
-    this.games = reactive(new Map())
+    this.games = reactive(new Map());
 
     this.objects = reactive(new Map());
-    this.current_game = ref(null)
+    this.current_game = ref(null);
     this.lobby = ref(null);
     this.self = ref(null);
   }
 
   update_object(obj: GameObjectNetcode) {
-    console.log(obj)
-    console.log(obj.uuid)
-    console.log(this.objects.get(obj.uuid))
+    if (unref(this.current_game)?.uuid === obj.uuid) {
+      Object.assign(this.current_game as any, obj);
+    } else if (unref(this.lobby)?.uuid === obj.uuid) {
+      Object.assign(this.lobby as any, obj);
+    } else if (unref(this.self)?.uuid === obj.uuid) {
+      Object.assign(this.self as any, obj);
+    }
+    console.log(obj);
+    console.log(obj.uuid);
+    console.log(this.objects.get(obj.uuid));
     Object.assign(this.objects.get(obj.uuid) as GameNetcode, obj);
   }
 
@@ -105,7 +112,7 @@ export const setup_websocket = () =>
       return resolve();
     }
     const config = useRuntimeConfig();
-    const heron_session = useCookie('heron_session')
+    const heron_session = useCookie("heron_session");
     socket = new WebSocket(config.public.websocketEndpoint);
 
     socket.onopen = function (e) {
@@ -151,9 +158,9 @@ export const setup_websocket = () =>
         if (data.data_type == "self") {
           goStore.set_self(data.data);
         } else if (data.data_type == "current_game") {
-          goStore.set_current_game(data.data)
+          goStore.set_current_game(data.data);
         } else if (data.data_type == "session_cookie") {
-          heron_session.value = data.data
+          heron_session.value = data.data;
         }
       } else {
         // console.log(data.type, data.data_type, data.data);
@@ -327,20 +334,24 @@ export async function damage_champion(target: Card) {
 }
 
 export async function netcode_create_game() {
-  await setup_websocket()
-  socket.send(JSON.stringify({
+  await setup_websocket();
+  socket.send(
+    JSON.stringify({
       type: "create",
       data_type: "game",
-    data: "bite"
-  }))
+      data: "bite",
+    })
+  );
 }
 
 export async function join_game(game_uuid: string) {
-  await setup_websocket()
-  socket.send(JSON.stringify({
+  await setup_websocket();
+  socket.send(
+    JSON.stringify({
       type: "join",
       data_type: "game",
-    data: game_uuid
-  }))
+      data: game_uuid,
+    })
+  );
 }
 export default goStore;