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>