Multiples games in parallel

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)">
-                <button @click.stop="buy(goStore.game.gem_stack.at(-1)!)">
+                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.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>