Feat : add login button

components/game/player/Icon.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import type { Player } from "~/netcode/interfaces";
+import type { User } from "~/netcode/interfaces";
 
 export interface Props {
-  player: Player;
+  user: User;
 }
 
 const props = defineProps<Props>();
@@ -12,11 +12,11 @@ const props = defineProps<Props>();
   <div class="player-icon-container">
     <img
       class="avatar"
-      v-if="props.player.user.avatar"
+      v-if="props.user.avatar"
-      :src="`https://cdn.discordapp.com/avatars/${props.player.user.userId}/${props.player.user.avatar}.webp`"
+      :src="`https://cdn.discordapp.com/avatars/${props.user.userId}/${props.user.avatar}.webp`"
       draggable="false"
     />
-    <b class="player-name">{{ props.player.user.username }}</b>
+    <b class="player-name">{{ props.user.username }}</b>
   </div>
 </template>
 

components/game/player/ListElement.vue

@@ -60,7 +60,7 @@ function damage() {
         Prêt!
       </div> -->
       <div id="player_info">
-        <GamePlayerIcon :player="props.player"></GamePlayerIcon>
+        <GamePlayerIcon :user="props.player.user"></GamePlayerIcon>
       </div>
       <div id="player_stats">
         <!-- <template v-if="goStore.current_game?.started"> -->

netcode/index.ts

@@ -9,29 +9,12 @@ export function subscribe(endpoint: string) {
   return evtSource;
 }
 
-export async function getLobby() {
+export async function whoami() {
   const config = useRuntimeConfig();
-  const req = await useFetch<Array<Game>>(config.public.endpoint + "/games", {
+  const req = await useFetch<User>(config.public.endpoint + "/whoami", {
     credentials: "include",
     server: false,
   });
-  // await req.execute();
-  await req.execute();
-  if (req.data.value == null) {
-    throw new Error("Lobby answer is empty");
-  }
-  return req.data as Ref<Game[]>;
-}
-
-export async function whoami() {
-  const config = useRuntimeConfig();
-  const req = await useFetch<User>(
-    config.public.endpoint + "/whoami",
-    {
-      credentials: "include",
-      server: false,
-    }
-  );
   await req.execute();
   if (req.error.value && req.error.value.statusCode == 401) {
     // await navigateTo(config.public.discordLoginEndpoint, {

pages/game.vue

@@ -28,7 +28,7 @@ const {
   server: false,
 });
 
-const awaitGameReady = execute();
+await execute();
 
 const containers = computed<Record<string, Container>>(() => ({
   [game.value!.fireGems._id]: game.value!.fireGems,
@@ -226,25 +226,22 @@ const handlers = {
   },
 };
 
-onMounted(async () => {
+onBeforeMount(async () => {
-  awaitGameReady.then(() => {
+  if (game.value == null) {
-    console.log(game.value);
+    navigateTo("/lobby");
-    if (game.value == null) {
+    throw new Error("game not found");
-      navigateTo("/lobby");
+  }
+  focusedPlayer.value = selfPlayer.value ?? playerList.value![0];
+
+  eventSource = subscribe(`/games/${gameId}/subscribe`);
+  eventSource.addEventListener("message", async (message) => {
+    const current_game = game.value;
+    if (!current_game) {
       throw new Error("game not found");
     }
-    focusedPlayer.value = selfPlayer.value ?? playerList.value![0];
+    const data = JSON.parse(message.data);
-
+    queueAction(async () => {
-    eventSource = subscribe(`/games/${gameId}/subscribe`);
+      await handlers[data.type as keyof typeof handlers](data, current_game);
-    eventSource.addEventListener("message", async (message) => {
-      const current_game = game.value;
-      if (!current_game) {
-        throw new Error("game not found");
-      }
-      const data = JSON.parse(message.data);
-      queueAction(async () => {
-        await handlers[data.type as keyof typeof handlers](data, current_game);
-      });
     });
   });
 });
@@ -294,24 +291,10 @@ function showWinnerScreen() {
   isWinner.value = true;
 }
 
-// const clientStore = useClientSideStore()
-// const restack_discarded_champion = (target: Card) => clientStore.findUseEffect(CardEffects.RESTACK_DISCARDED_CHAMPION, target)
-// const restack_discarded_card = (target: Card) => clientStore.findUseEffect(CardEffects.RESTACK_DISCARDED_CARD, target)
-// const sacrifice = (target: Card) => clientStore.findUseEffect(CardEffects.SACRIFICE, target);
-
 function focusPlayer(p: Player) {
   focusedPlayer.value = p;
 }
 
-// watch<Team>(() => goStore.current_game!.current_turn, (new_team, old_team) => {
-//     if (focusedPlayer.value.team != old_team) { return }
-//     const first_player = goStore.current_game?.players.find(p => p.team == goStore.current_game?.current_turn)
-//     if (!first_player) {
-//         return
-//     }
-//     focusPlayer(first_player)
-// })
-
 function useTokenClick(t: Effect) {
   console.log(t);
   useToken(game.value!._id, t._id);
@@ -332,91 +315,94 @@ onUnmounted(() => {
       :isTurn="isTurn ?? false"
     ></AnimatedBackground>
     <GameOverlayOptionsDialog></GameOverlayOptionsDialog>
-    <template v-if="game && focusedPlayer && playerList">
+    <ClientOnly>
-      <Transition name="slide-left" mode="out-in">
+      <template v-if="game && focusedPlayer && playerList">
-        <div id="stack_discard" :key="focusedPlayer?._id">
-          <div id="stack">
-            <GameCardGrouped
-              :container="focusedPlayer.stack"
-              :wrapped="true"
-              :hidden="true"
-            >
-            </GameCardGrouped>
-          </div>
-
-          <div
-            id="discard"
-            :class="{ invisible: discard_unwrapped }"
-            @click="() => (discard_unwrapped = true)"
-          >
-            <GameCardGrouped
-              :container="focusedPlayer.discard"
-              :wrapped="true"
-              @card-click="showDiscard"
-              :no-effects="true"
-            >
-            </GameCardGrouped>
-          </div>
-        </div>
-      </Transition>
-
-      <GameMarket
-        :game="game"
-        :market="game.market"
-        :fire_gems="game.fireGems"
-        :marketStack="game.marketStack"
-      >
-      </GameMarket>
-      <div>
-        <GameToken
-          :token="t"
-          v-for="t in game.currentTurn.tokens"
-          @useToken="useTokenClick"
-        ></GameToken>
-      </div>
-      <div id="player_list_container">
-        <div id="player_list">
-          <GamePlayerListElement
-            v-for="p in playerList"
-            :player="p"
-            :game="game"
-            @click="focusPlayer(p)"
-            :focused="focusedPlayer == p"
-            :self="selfPlayer == p"
-          >
-          </GamePlayerListElement>
-        </div>
-      </div>
-
-      <div id="current_player">
         <Transition name="slide-left" mode="out-in">
-          <GamePlayerSlot
+          <div id="stack_discard" :key="focusedPlayer?._id">
-            v-if="focusedPlayer"
+            <div id="stack">
-            :player="focusedPlayer"
+              <GameCardGrouped
-            :game="game"
+                :container="focusedPlayer.stack"
-            :key="focusedPlayer._id"
+                :wrapped="true"
-          ></GamePlayerSlot>
+                :hidden="true"
+              >
+              </GameCardGrouped>
+            </div>
+
+            <div
+              id="discard"
+              :class="{ invisible: discard_unwrapped }"
+              @click="() => (discard_unwrapped = true)"
+            >
+              <GameCardGrouped
+                :container="focusedPlayer.discard"
+                :wrapped="true"
+                @card-click="showDiscard"
+                :no-effects="true"
+              >
+              </GameCardGrouped>
+            </div>
+          </div>
         </Transition>
-      </div>
+
-      <GameOverlayDiscard
+        <GameMarket
-        v-show="discard_unwrapped"
+          :game="game"
-        :game="game"
+          :market="game.market"
-        :player="focusedPlayer"
+          :fire_gems="game.fireGems"
-        :discard="focusedPlayer.discard"
+          :marketStack="game.marketStack"
-        @close="discard_unwrapped = false"
+        >
-      ></GameOverlayDiscard>
+        </GameMarket>
-      <GameOverlayResultDialog
+        <div>
-        :isVisible="showResults"
+          <GameToken
-        :won="isWinner"
+            :token="t"
-        :players="playerList"
+            v-for="t in game.currentTurn.tokens"
-        @close="showResults = false"
+            @useToken="useTokenClick"
-      >
+          ></GameToken>
-      </GameOverlayResultDialog>
+        </div>
-      <GamePlayerSelf
+        <div id="player_list_container">
-        v-if="selfPlayer"
+          <div id="player_list">
-        :container="selfPlayer.hand"
+            <GamePlayerListElement
-      ></GamePlayerSelf>
+              v-for="p in playerList"
-    </template>
+              :player="p"
+              :game="game"
+              @click="focusPlayer(p)"
+              :focused="focusedPlayer == p"
+              :self="selfPlayer == p"
+            >
+            </GamePlayerListElement>
+          </div>
+        </div>
+
+        <div id="current_player">
+          <Transition name="slide-left" mode="out-in">
+            <GamePlayerSlot
+              v-if="focusedPlayer"
+              :player="focusedPlayer"
+              :game="game"
+              :key="focusedPlayer._id"
+            ></GamePlayerSlot>
+          </Transition>
+        </div>
+        <GameOverlayDiscard
+          v-show="discard_unwrapped"
+          :game="game"
+          :player="focusedPlayer"
+          :discard="focusedPlayer.discard"
+          @close="discard_unwrapped = false"
+        ></GameOverlayDiscard>
+        <GameOverlayResultDialog
+          :isVisible="showResults"
+          :won="isWinner"
+          :players="playerList"
+          @close="showResults = false"
+        >
+        </GameOverlayResultDialog>
+        <GamePlayerSelf
+          v-if="selfPlayer"
+          :container="selfPlayer.hand"
+        ></GamePlayerSelf>
+      </template>
+    </ClientOnly>
+
     <!-- <LoadingScreen v-if="!loaded"></LoadingScreen> -->
   </div>
 </template>

pages/lobby.vue

@@ -1,14 +1,22 @@
 <script setup lang="ts">
 // import { playSound } from '~/helpers/audioHelpers';
 import { playSound } from "~/helpers/audioHelpers";
-import { createGame, getLobby, subscribe } from "~/netcode";
+import { createGame, subscribe } from "~/netcode";
-import type { Game, Player } from "~/netcode/interfaces";
+import type { Game, Player, User } from "~/netcode/interfaces";
 
 const authStore = useAuthStore();
 
 let eventSource: EventSource;
 
-let games = ref<Game[]>([]);
+const config = useRuntimeConfig();
+const req = await useFetch<Array<Game>>(config.public.endpoint + "/games", {
+  credentials: "include",
+  server: false,
+});
+
+await req.execute();
+
+let games = req.data;
 
 const erika_alive = ref(true);
 const router = useRouter();
@@ -19,22 +27,21 @@ function killErika() {
 }
 
 onBeforeMount(async () => {
-  games.value = (await getLobby()).value;
   eventSource = subscribe("/games/subscribe");
   eventSource.addEventListener("message", (message) => {
     const data = JSON.parse(message.data);
     if (data.type == "create") {
-      games.value.push(data);
+      games.value?.push(data);
     } else if (data.type == "delete") {
-      const index = games.value.findIndex((g) => g._id == data._id);
+      const index = games.value?.findIndex((g) => g._id == data._id);
-      if (index == -1) {
+      if (index == -1 || !index) {
         throw new Error("Couldn't delete game");
       }
-      games.value.splice(index, 1);
+      games.value?.splice(index, 1);
     } else if (data.type == "joinGame") {
-      games.value.find((g) => g._id == data.game)?.teams.push(data.team);
+      games.value?.find((g) => g._id == data.game)?.teams.push(data.team);
     } else if (data.type == "start") {
-      const targetGame = games.value.find((g) => g._id == data.game);
+      const targetGame = games.value?.find((g) => g._id == data.game);
       if (targetGame) {
         targetGame.started = true;
       }
@@ -49,58 +56,77 @@ onUnmounted(() => {
 
 <template>
   <div class="background">
-    <div class="title">Entrez dans le Royaume de Héron !</div>
+    <header>
-
+      <ClientOnly>
-    <div class="middle-row">
+        <GamePlayerIcon
-      <div class="create-game-zone">
+          v-if="authStore.logged"
-        <button @click="createGame">Create Game</button>
+          :user="(authStore.selfUser as User)"
-      </div>
+        />
-
+        <button v-else @click="navigateTo('/login')">Login</button>
-      <div class="games-list-zone">
+      </ClientOnly>
-        <div v-for="g in games">
+    </header>
-          <button
+    <main>
-            v-if="g"
+      <div class="title">Entrez dans le Royaume de Héron !</div>
-            @click="router.push({ path: `/game`, query: { id: g._id } })"
+      <ClientOnly>
-            :class="
+        <template v-if="authStore.logged">
-              authStore.selfUser.userId == g.owner.userId ? 'own_game' : ''
+          <div class="create-game-zone">
-            "
+            <button
-          >
+              @click="createGame"
-            <template
               v-if="
-                g.teams.every((t) =>
+                games?.some((g) => g.owner.userId !== authStore.selfUser.userId)
-                  t.players.every(
-                    (p) => p.user.userId !== authStore.selfUser.userId
-                  )
-                )
               "
             >
-              SPECTATE
+              Create Game
-            </template>
+            </button>
-            <template v-else>
+          </div>
-              <template v-if="!g.started"> JOIN BACK </template>
+        </template>
-              <template v-else> CONTINUE </template>
-            </template>
 
-            <br />
+        <div class="games-list-zone">
-            {{
+          <div v-for="g in games">
-              g.teams.reduce(
+            <button
-                (prev, curr) => prev.concat(curr.players),
+              v-if="g"
-                [] as Player[]
+              @click="router.push({ path: `/game`, query: { id: g._id } })"
-              ).length
+              :class="
-            }}
+                authStore.selfUser.userId == g.owner.userId ? 'own_game' : ''
-            current players:<br /><span>{{
+              "
-              g.teams
+            >
-                .reduce(
+              <template
+                v-if="
+                  g.teams.every((t) =>
+                    t.players.every(
+                      (p) => p.user.userId !== authStore.selfUser.userId
+                    )
+                  )
+                "
+              >
+                SPECTATE
+              </template>
+              <template v-else>
+                <template v-if="!g.started"> JOIN BACK </template>
+                <template v-else> CONTINUE </template>
+              </template>
+
+              <br />
+              {{
+                g.teams.reduce(
                   (prev, curr) => prev.concat(curr.players),
                   [] as Player[]
-                )
+                ).length
-                .map((p) => p.user.username)
+              }}
-                .join(",")
+              current players:<br /><span>{{
-            }}</span>
+                g.teams
-          </button>
+                  .reduce(
+                    (prev, curr) => prev.concat(curr.players),
+                    [] as Player[]
+                  )
+                  .map((p) => p.user.username)
+                  .join(",")
+              }}</span>
+            </button>
+          </div>
         </div>
-      </div>
+      </ClientOnly>
-    </div>
+    </main>
 
     <div class="overlay" v-if="erika_alive">
       <div class="erika-zone">
@@ -141,9 +167,9 @@ onUnmounted(() => {
   background-color: #f0f0f0;
   background-image: url("https://www.pockettactics.com/wp-content/sites/pockettactics/2023/01/fire-emblem-engage-review-29.jpg");
   background-size: cover;
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  grid-template-rows: 100px 1fr;
-  justify-content: center;
+  grid-template-columns: 1fr;
   align-items: center;
   height: 100vh;
   width: 100vw;
@@ -154,39 +180,53 @@ onUnmounted(() => {
   font-size: 64px;
   color: white;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
-  margin-bottom: 100px;
 }
 
-.middle-row {
+main {
   display: flex;
   flex-direction: column;
   gap: 100px;
   margin-bottom: 100px;
 }
 
-.create-game-zone {
+.create-game-zone,
+header {
   display: flex;
-  flex-direction: column;
+  align-items: center;
+  align-content: center;
+  justify-content: flex-start;
   gap: 10px;
 }
 
+header {
+  flex-direction: row;
+  backdrop-filter: blur(50px);
+  height: 100%;
+}
+
+.create-game-zone {
+  flex-direction: column;
+}
+
 .create-game-zone button {
   background-color: #4caf50;
+}
+button {
+  background-color: #4caf50;
   border: none;
   color: white;
   text-align: center;
   text-decoration: none;
-  display: inline-block;
   font-family: "Roboto", sans-serif;
   font-size: 16px;
-  margin: auto;
+  width: max-content;
   cursor: pointer;
   border-radius: 12px;
-  padding: 10px 24px;
-  height: 50px;
   transition-duration: 0.4s;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  padding: 10px 24px;
+  height: 50px;
 }
 
 .games-list-zone {
@@ -197,21 +237,8 @@ onUnmounted(() => {
 
 .games-list-zone button {
   background-color: rgba(0, 0, 0, 0.8);
-  border: none;
-  color: white;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-family: "Roboto", sans-serif;
-  font-size: 16px;
-  margin: auto;
-  cursor: pointer;
-  border-radius: 12px;
   padding: 20px 24px;
   height: 120px;
-  transition-duration: 0.4s;
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
 .games-list-zone button.own_game {