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

components/LobbyView.vue

@@ -16,19 +16,27 @@ function killErika() {
         <div class="title">
             Entrez dans le Royaume de Héron !
         </div>
-        
+
         <div class="middle-row">
             <div class="create-game-zone">
                 <button @click="netcode_create_game">Create Game</button>
             </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>
@@ -39,11 +47,11 @@ function killErika() {
                 <button class="kill-erika-button" @click="killErika()">Tuer Erika</button>
             </div>
         </div>
-        
-        
+
+
     </div>
-    
-    
+
+
 </template>
 
 <style scoped>
@@ -95,8 +103,8 @@ function killErika() {
         height: 50px;
         transition-duration: 0.4s;
         text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
-        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
-    
+        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+
     }
 }
 
@@ -121,8 +129,8 @@ function killErika() {
         height: 120px;
         transition-duration: 0.4s;
         text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
-        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
-    
+        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+
     }
 }
 
@@ -177,7 +185,7 @@ function killErika() {
         height: 50px;
         transition-duration: 0.4s;
         text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
-        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
+        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     }
 }
 

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) {
@@ -148,12 +155,12 @@ export const setup_websocket = () =>
         goStore.context = data.data;
         // console.log(data.data);
       } else if (data.type === "set") {
-        if(data.data_type == "self"){
+        if (data.data_type == "self") {
           goStore.set_self(data.data);
-        } else if (data.data_type == "current_game"){
-          goStore.set_current_game(data.data)
-        } else if (data.data_type == "session_cookie"){
-          heron_session.value = data.data
+        } else if (data.data_type == "current_game") {
+          goStore.set_current_game(data.data);
+        } else if (data.data_type == "session_cookie") {
+          heron_session.value = data.data;
         }
       } else {
         // console.log(data.type, data.data_type, data.data);
@@ -161,7 +168,7 @@ export const setup_websocket = () =>
     };
   });
 
-export async function heron_cookie_login(cookie:string){
+export async function heron_cookie_login(cookie: string) {
   await setup_websocket();
   socket.send(
     JSON.stringify({
@@ -184,7 +191,7 @@ export async function oauth2_register_discord(code: string) {
 }
 
 export async function register(username: string) {
-    await setup_websocket();
+  await setup_websocket();
 
   socket.send(
     JSON.stringify({
@@ -196,7 +203,7 @@ export async function register(username: string) {
 }
 
 export async function login(username: string) {
-    await setup_websocket();
+  await setup_websocket();
   socket.send(
     JSON.stringify({
       type: "login",
@@ -207,7 +214,7 @@ export async function login(username: string) {
 }
 
 export async function setReady(value: boolean) {
-    await setup_websocket();
+  await setup_websocket();
   socket.send(
     JSON.stringify({
       type: "ready",
@@ -218,7 +225,7 @@ export async function setReady(value: boolean) {
 }
 
 export async function buy(card: Card) {
-    await setup_websocket();
+  await setup_websocket();
   socket.send(
     JSON.stringify({
       type: "action",
@@ -229,7 +236,7 @@ export async function buy(card: Card) {
 }
 
 export async function endTurn() {
-    await setup_websocket();
+  await setup_websocket();
   socket.send(
     JSON.stringify({
       type: "action",
@@ -246,7 +253,7 @@ export function playAllCards(cards: Card[]) {
 }
 
 export async function playCard(card: Card) {
-//   console.log(card.uuid);
+  //   console.log(card.uuid);
   await setup_websocket();
   socket.send(
     JSON.stringify({
@@ -258,7 +265,7 @@ export async function playCard(card: Card) {
 }
 
 export async function lockCard(card: Card) {
-    await setup_websocket();
+  await setup_websocket();
   socket.send(
     JSON.stringify({
       type: "action",
@@ -272,7 +279,7 @@ export async function useEffect(
   effect: Effect,
   target?: Effect | Card | Player | Team
 ) {
-    await setup_websocket();
+  await setup_websocket();
   socket.send(
     JSON.stringify({
       type: "action",
@@ -283,7 +290,7 @@ export async function useEffect(
 }
 
 export async function discard(card: Card) {
-    await setup_websocket();
+  await setup_websocket();
   socket.send(
     JSON.stringify({
       type: "action",
@@ -294,7 +301,7 @@ export async function discard(card: Card) {
 }
 h;
 export async function heal() {
-    await setup_websocket();
+  await setup_websocket();
   socket.send(
     JSON.stringify({
       type: "action",
@@ -305,7 +312,7 @@ export async function heal() {
 }
 
 export async function damage_team(target: Team) {
-    await setup_websocket();
+  await setup_websocket();
   socket.send(
     JSON.stringify({
       type: "action",
@@ -316,7 +323,7 @@ export async function damage_team(target: Team) {
 }
 
 export async function damage_champion(target: Card) {
-    await setup_websocket();
+  await setup_websocket();
   socket.send(
     JSON.stringify({
       type: "action",
@@ -326,21 +333,25 @@ export async function damage_champion(target: Card) {
   );
 }
 
-export async function netcode_create_game(){
-  await setup_websocket()
-  socket.send(JSON.stringify({
-    type: "create",
-    data_type: "game",
-    data: "bite"
-  }))
+export async function netcode_create_game() {
+  await setup_websocket();
+  socket.send(
+    JSON.stringify({
+      type: "create",
+      data_type: "game",
+      data: "bite",
+    })
+  );
 }
 
-export async function join_game(game_uuid: string){
-  await setup_websocket()
-  socket.send(JSON.stringify({
-    type: "join",
-    data_type: "game",
-    data: game_uuid
-  }))
+export async function join_game(game_uuid: string) {
+  await setup_websocket();
+  socket.send(
+    JSON.stringify({
+      type: "join",
+      data_type: "game",
+      data: game_uuid,
+    })
+  );
 }
 export default goStore;