feat : lobby

components/conceptHeader.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { GameResponseDTO } from "~/netcode/events/dto/gameresponse.dto";
+import { useLobbyStore } from "~/store/lobby.store";
+import { useUserStore } from "~/store/user.store";
+
+const userStore = useUserStore();
+const lobbyStore = useLobbyStore();
+
+const currentGames = computed(() => {
+  const games = Object.values(lobbyStore.games).filter((g) =>
+    g.players.some((p) => p.user.id == userStore.self?.id)
+  );
+  console.log(games);
+  return games;
+});
+</script>
+
+<template>
+  <header>
+    <div id="self">
+      <template v-if="userStore.has_contacted">
+        <ClientOnly>
+          <template v-if="userStore.self && userStore.self.id">
+            <User :id="userStore.self.id"></User>
+            <button>Logout</button>
+          </template>
+          <button v-else>Login</button>
+        </ClientOnly>
+      </template>
+
+      <template v-else> Contacting server... </template>
+    </div>
+
+    <div id="links">
+      <NuxtLink to="/">Home</NuxtLink>
+      <NuxtLink to="/words">Words</NuxtLink>
+    </div>
+
+    <div id="games">
+      <NuxtLink v-for="game of currentGames" :to="'/game/' + game.id"
+        ><div>Back to Current Game</div></NuxtLink
+      >
+    </div>
+  </header>
+</template>
+
+<style lang="css" scoped>
+header,
+header * {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+}
+header > * {
+  flex: 1 1 0px;
+}
+
+div#self {
+  gap: 10px;
+  height: 32px;
+}
+
+div#links {
+  flex-grow: 4;
+  gap: 1%;
+}
+
+div#links {
+}
+</style>

components/header.vue

@@ -1,52 +0,0 @@
-<script setup lang="ts">
-
-import { useUserStore } from '~/store/user.store';
-
-const userStore = useUserStore();
-
-</script>
-
-<template>
-    <header>
-        <div id="self">
-            <template v-if="userStore.has_contacted">
-                <ClientOnly>
-                    <template v-if="userStore.self && userStore.self.id">
-                        <User :id="userStore.self.id"></User>
-                        <button>Logout</button>
-                    </template>
-                    <button v-else>Login</button>
-                </ClientOnly>
-            </template>
-
-            <template v-else>
-                Contacting server...
-            </template>
-        </div>
-
-        <div id="links">
-            <NuxtLink to="/">Home</NuxtLink>
-            <NuxtLink to="/words">Words</NuxtLink>
-        </div>
-
-    </header>
-</template>
-
-<style lang="css" scoped>
-header,
-header * {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: nowrap;
-}
-
-div#self {
-    height: 32px
-}
-
-div#links {
-    width: 100%;
-    gap: 1%;
-}
-</style>

components/lobby/game.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useLobbyStore } from "~/store/lobby.store";
+import { useUserStore } from "~/store/user.store";
+
+export interface Props {
+  id: number;
+}
+
+const loading = ref(false);
+
+const lobbyStore = useLobbyStore();
+const userStore = useUserStore();
+const props = defineProps<Props>();
+
+const game = lobbyStore.games[props.id];
+</script>
+
+<template>
+  {{ game }}
+  <NuxtLink :to="'/game/' + id"
+    ><input type="button" value="open" :disabled="!userStore.self || loading"
+  /></NuxtLink>
+</template>
+
+<style lang="css" scoped>
+input:disabled {
+  cursor: wait;
+}
+</style>