chore : working on game

components/conceptHeader.vue

@@ -21,9 +21,13 @@ const currentGames = computed(() => {
         <ClientOnly>
           <template v-if="userStore.self && userStore.self.id">
             <User :id="userStore.self.id"></User>
-            <button>Logout</button>
+            <NuxtLink :to="$config.public.endpoint + '/logout'"
+              ><button>Logout</button></NuxtLink
+            >
           </template>
-          <button v-else>Login</button>
+          <NuxtLink v-else :to="$config.public.discordLoginEndpoint">
+            <button>Login</button>
+          </NuxtLink>
         </ClientOnly>
       </template>
 

components/lobby/game.vue

@@ -16,10 +16,14 @@ const game = lobbyStore.games[props.id];
 </script>
 
 <template>
+  {{ game.id }}
+  {{ game.players.map((p) => p.user.username) }}
   {{ game }}
+
   <NuxtLink :to="'/game/' + id"
     ><input type="button" value="open" :disabled="!userStore.self || loading"
   /></NuxtLink>
+  <br />
 </template>
 
 <style lang="css" scoped>

netcode/handlers/lobby.handler.ts

@@ -1,28 +1,34 @@
 import { useLobbyStore } from "~/store/lobby.store";
-import type { LobbyCreateEvent, LobbyDeleteEvent, LobbyJoinEvent, LobbyLeaveEvent, LobbyStartEvent } from "../events/lobby.events";
-
-
+import type {
+  LobbyCreateEvent,
+  LobbyDeleteEvent,
+  LobbyJoinEvent,
+  LobbyLeaveEvent,
+  LobbyStartEvent,
+} from "../events/lobby.events";
 
 export const handlers = {
   create: (event: LobbyCreateEvent) => {
     const lobbyStore = useLobbyStore();
-    lobbyStore.games[event.game.id] = event.game
+    lobbyStore.games[event.game.id] = event.game;
   },
   start: (event: LobbyStartEvent) => {
-    const lobbyStore = useLobbyStore()
-    lobbyStore.games[event.game.id].started = true
+    const lobbyStore = useLobbyStore();
+    lobbyStore.games[event.game.id].started = true;
   },
   delete: (event: LobbyDeleteEvent) => {
-    const lobbyStore = useLobbyStore()
-    delete lobbyStore.games[event.id]
+    const lobbyStore = useLobbyStore();
+    delete lobbyStore.games[event.id];
   },
-  join:(event: LobbyJoinEvent)=>{
-    const lobbyStore = useLobbyStore()
-    lobbyStore.games[event.game.id].players.push(event.player)
+  joingame: (event: LobbyJoinEvent) => {
+    const lobbyStore = useLobbyStore();
+    lobbyStore.games[event.game.id].players.push(event.player);
+  },
+  leavegame: (event: LobbyLeaveEvent) => {
+    const lobbyStore = useLobbyStore();
+    const playerIndex = lobbyStore.games[event.game.id].players.findIndex(
+      (p) => p.user.id == event.player.user.id
+    );
+    lobbyStore.games[event.game.id].players.splice(playerIndex, 1);
   },
-  leave:(event: LobbyLeaveEvent)=>{
-    const lobbyStore = useLobbyStore()
-    const playerIndex = lobbyStore.games[event.game.id].players.findIndex(p=>p.user.id == event.player.user.id)
-    lobbyStore.games[event.game.id].players.splice(playerIndex,1)
-  }
 };

pages/index.vue

@@ -11,7 +11,12 @@ async function createGame() {
     return;
   }
   loading.value = true;
-  await lobbyStore.createGame().catch((e) => {
+  await lobbyStore
+    .createGame()
+    .then(() => {
+      loading.value = false;
+    })
+    .catch((e) => {
       if (e.data.statusCode == 400) {
         console.error("Owned game limit reached");
       } else {
@@ -27,7 +32,7 @@ async function createGame() {
     type="button"
     value="Create Game"
     @click="createGame"
-    :disabled="!userStore.self"
+    :disabled="!userStore.self || loading"
   />
 </template>