Multiples games in parallel

app.vue

@@ -1,18 +1,11 @@
 <script setup lang="ts">
-import { ref } from "vue";
 
-import goStore, { register, setReady, oauth2_register_discord, setup_websocket } from "@/netcode";
+import goStore, { setReady, oauth2_register_discord, setup_websocket } from "@/netcode";
-
-
-
-const config = useRuntimeConfig()
 
 await setup_websocket()
 
 const route = useRoute()
 
-let username = ref<string>("legonzaur");
-
 onMounted(async () => {
   const code = route.query.code
   if (!code) { return }
@@ -26,37 +19,20 @@ onMounted(async () => {
   )
 })
 
-async function discordLogin() {
+
-  await navigateTo(config.public.discordLoginEndpoint, {
-    external: true
-  })
-}
 
 </script>
 <template>
   <div id="game_status">
-    <template v-if="!goStore.self">
 
-      <div v-if="goStore.game?.started">
+    <template v-if="goStore.self && !goStore.current_game?.started">
-        <b>SPECTATOR MODE</b>
-      </div>
-
-      <template v-if="!goStore.game?.started">
-        <input type="text" v-model="username" />
-        <button @click="register(username)">LOGIN</button>
-        <button @click="discordLogin()">DISCORD</button>
-      </template>
-    </template>
-
-
-    <template v-if="goStore.self && !goStore.game?.started">
       <input @change="setReady(($event.target as HTMLInputElement).checked)" type="checkbox" id="ready" />
       <label for="ready">Ready</label>
     </template>
   </div>
-
+  <LoginView v-if="goStore.context === 'login'"></LoginView>
-  <GameBoard></GameBoard>
+  <GameBoard v-if="goStore.context != 'lobby' && goStore.context != 'login'"></GameBoard>
-
+  <LobbyView v-if="goStore.context == 'lobby'"></LobbyView>
 </template>
 
 <style>

components/GameBoard.vue

@@ -2,7 +2,7 @@
 import goStore from '~/netcode';
 import type { Player } from '~/netcode/Player';
 
-const current_players = computed<Array<Player>>(() => Array.from(goStore.players.values()).filter(p => p.team === goStore.game?.current_turn))
+const current_players = computed<Array<Player>>(() => Array.from(goStore.players.values()).filter(p => p.team === goStore.current_game?.current_turn))
 
 const discard_unwrapped = ref<boolean>(false)
 </script>

components/LobbyView.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import goStore, { netcode_create_game, join_game } from '~/netcode';
+</script>
+
+<template>
+    <button @click="netcode_create_game">Create Game</button>
+    <div v-for="g in goStore.lobby?.games"><button @click="join_game(g)">{{ g }}</button></div>
+</template>
+
+<style scoped></style>

components/LoginView.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import goStore, { netcode_create_game, join_game } from '~/netcode';
+
+const config = useRuntimeConfig()
+
+
+async function discordLogin() {
+    await navigateTo(config.public.discordLoginEndpoint, {
+        external: true
+    })
+}
+
+</script>
+
+<template>
+    <div v-if="goStore.current_game?.started">
+        <b>SPECTATOR MODE</b>
+    </div>
+
+    <template v-if="!goStore.current_game?.started">
+        <!-- <input type="text" v-model="username" />
+        <button @click="register(username)">LOGIN</button> -->
+        <button @click="discordLogin()">DISCORD</button>
+    </template>
+</template>
+
+<style scoped></style>

components/MarketCards.vue

@@ -3,7 +3,7 @@ import goStore, { buy, useEffect } from '@/netcode';
 import { CardEffects } from '@/netcode/Effect'
 import { CardType } from '@/netcode/Card'
 
-const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.self.team == goStore.game.current_turn))
+const isTurn = computed(() => goStore.self && goStore.current_game?.started && (goStore.self.team == goStore.current_game.current_turn))
 
 </script>
 
@@ -11,7 +11,7 @@ const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.
     <div id="market">
         <CardPreview :data="null"></CardPreview>
         <div class="separator"></div>
-        <CardPreview :data="c" v-for="c in goStore.game?.market" @click="c && buy(c)">
+        <CardPreview :data="c" v-for="c in goStore.current_game?.market" @click="c && buy(c)">
             <template v-if="isTurn && c && c.cost && (goStore.self?.turn.gold_reserve ?? 0) >= c.cost">
                 <button @click.stop="buy(c)">BUY</button>
                 <button @click.stop="useEffect(goStore.self!.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)!, c)"
@@ -28,18 +28,19 @@ const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.
             </template>
         </CardPreview>
         <div class="separator"></div>
-        <CardPreview :data="goStore.game?.gem_stack.at(-1)" @click="buy(goStore.game?.gem_stack.at(-1)!)">
+        <CardPreview :data="goStore.current_game?.gem_stack.at(-1)"
+            @click="buy(goStore.current_game?.gem_stack.at(-1)!)">
             <template
-                v-if="isTurn && goStore.game?.gem_stack.length && goStore.game?.gem_stack.length > 0 && (goStore.self?.turn.gold_reserve ?? 0) >= (goStore.game?.gem_stack.at(-1)?.cost ?? Infinity)">
+                v-if="isTurn && goStore.current_game?.gem_stack.length && goStore.current_game?.gem_stack.length > 0 && (goStore.self?.turn.gold_reserve ?? 0) >= (goStore.current_game?.gem_stack.at(-1)?.cost ?? Infinity)">
-                <button @click.stop="buy(goStore.game.gem_stack.at(-1)!)">
+                <button @click.stop="buy(goStore.current_game.gem_stack.at(-1)!)">
                     BUY
                 </button>
                 <button
-                    @click.stop="useEffect(goStore.self!.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)!, goStore.game.gem_stack.at(-1))"
+                    @click.stop="useEffect(goStore.self!.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)!, goStore.current_game.gem_stack.at(-1))"
                     v-if="goStore.self?.turn.find_effect(CardEffects.PLAY_NEXT_CARD_BOUGHT)">
                     BUY IN HAND</button>
                 <button
-                    @click.stop="useEffect(goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_CARD_BOUGHT)!, goStore.game.gem_stack.at(-1))"
+                    @click.stop="useEffect(goStore.self!.turn.find_effect(CardEffects.STACK_NEXT_CARD_BOUGHT)!, goStore.current_game.gem_stack.at(-1))"
                     v-if="goStore.self?.turn.find_effect(CardEffects.STACK_NEXT_CARD_BOUGHT)">
                     BUY IN STACK(generic)
                 </button>
@@ -60,5 +61,6 @@ const isTurn = computed(() => goStore.self && goStore.game?.started && (goStore.
 }
 
 .separator {
-    width: 50px;}
+    width: 50px;
+}
 </style>

components/PlayerSlot.vue

@@ -25,9 +25,9 @@ const props = withDefaults(defineProps<Props>(), {
     discard_unwrapped: () => false,
 })
 
-const isPlayerTurn = computed(() => props.player.team === goStore.game?.current_turn);
+const isPlayerTurn = computed(() => props.player.team === goStore.current_game?.current_turn);
 const isSelf = computed(() => props.player.uuid === goStore.self?.uuid);
-const isSelfTurn = computed(() => goStore.self?.team === goStore.game?.current_turn)
+const isSelfTurn = computed(() => goStore.self?.team === goStore.current_game?.current_turn)
 const isPlayerEnemy = computed(() => goStore.self?.team !== props.player.team)
 
 function run_effect(

components/SelfView.vue

@@ -2,7 +2,7 @@
 import goStore, { useEffect, playCard, playAllCards, discard, lockCard, heal, damage_champion, damage_team, endTurn } from '~/netcode';
 import { CardEffects } from '@/netcode/Effect'
 
-const isTurn = computed(() => goStore.self?.team == goStore.game?.current_turn)
+const isTurn = computed(() => goStore.self?.team == goStore.current_game?.current_turn)
 
 </script>
 

netcode/Lobby.ts

@@ -0,0 +1,25 @@
+import { type GameObjectRegister } from "."
+import { type GameObjectNetcode } from "./GameObject"
+import type { Game } from "./Game"
+
+export interface LobbyNetcode extends GameObjectNetcode {
+    games: Array<string>
+}
+
+
+export type Lobby = LobbyNetcode & {
+    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))
+            // }
+            return Reflect.get(target, prop, reciever);
+        },
+        set(target, prop, val, receiver) {
+            return Reflect.set(target, prop, val, receiver);
+        }
+    }) as Lobby
+}

netcode/index.ts

@@ -11,6 +11,7 @@ import type { GameObjectNetcode } from "./GameObject";
 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 Lobby, create_lobby, type LobbyNetcode } from "./Lobby";
 
 import { type Ref } from "vue";
 
@@ -22,10 +23,12 @@ export class GameObjectRegister {
   readonly teams: Map<string, Team>;
   readonly players: Map<string, Player>;
   readonly turns: Map<string, Turn>;
+  readonly games: Map<string, Game>
 
-  context: "login" | "pregame" | "game" = "login";
+  context: "lobby" | "login" | "pregame" | "game" = "login";
   private readonly objects: Map<string, GameObjectNetcode>;
-  game: Ref<Game | null>;
+  current_game: Ref<Game | null>
+  lobby: Ref<Lobby | null>;
   self: Ref<Player | null>;
   constructor() {
     this.effects = reactive(new Map());
@@ -33,14 +36,18 @@ export class GameObjectRegister {
     this.teams = reactive(new Map());
     this.players = reactive(new Map());
     this.turns = reactive(new Map());
+    this.games = reactive(new Map())
 
     this.objects = reactive(new Map());
-
+    this.current_game = ref(null)
-    this.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))
     Object.assign(this.objects.get(obj.uuid) as GameNetcode, obj);
   }
 
@@ -66,19 +73,28 @@ export class GameObjectRegister {
       this.objects.set(data.uuid, team);
     },
     game: (data: GameNetcode) => {
-      this.game.value = create_game(data, this);
+      const game = create_game(data, this);
-      this.objects.set(data.uuid, this.game.value);
+      this.games.set(data.uuid, game);
+      this.objects.set(data.uuid, game);
     },
     turn: (data: any) => {
       const turn = create_turn(data, this);
       this.turns.set(data.uuid, turn);
       this.objects.set(data.uuid, turn);
     },
+    lobby: (data: LobbyNetcode) => {
+      this.lobby.value = create_lobby(data, this);
+      this.objects.set(data.uuid, this.lobby.value);
+    },
   } as { [id: string]: (data: any) => any };
 
   set_self = (uuid: string) => {
     this.self.value = this.players.get(uuid) ?? null;
   };
+
+  set_current_game = (uuid: string) => {
+    this.current_game.value = this.games.get(uuid) ?? null;
+  };
 }
 
 const goStore = reactive(new GameObjectRegister());
@@ -130,8 +146,13 @@ export const setup_websocket = () =>
       } else if (data.type === "context") {
         goStore.context = data.data;
         // console.log(data.data);
-      } else if (data.type === "set" && data.data_type == "self") {
+      } else if (data.type === "set") {
+        if(data.data_type == "self"){
           goStore.set_self(data.data);
+        } else if (data.data_type == "current_game"){
+          goStore.set_current_game(data.data)
+        }
+        
       } else {
         // console.log(data.type, data.data_type, data.data);
       }
@@ -292,4 +313,21 @@ 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 join_game(game_uuid: string){
+  await setup_websocket()
+  socket.send(JSON.stringify({
+    type: "join",
+    data_type: "game",
+    data: game_uuid
+  }))
+}
 export default goStore;