Feat : add return to lobby button

app.vue

@@ -44,6 +44,24 @@ body {
   height: 100vh;
 }
 
+button {
+  background-color: #4caf50;
+  border: none;
+  color: white;
+  text-align: center;
+  text-decoration: none;
+  font-family: "Roboto", sans-serif;
+  font-size: 16px;
+  width: max-content;
+  cursor: pointer;
+  border-radius: 12px;
+  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;
+}
+
 #__nuxt {
   height: 100%;
   user-select: none;

components/game/overlay/options/Dialog.client.vue

@@ -8,7 +8,9 @@ const _window = computed(() => window);
 </script>
 
 <template>
-  <div @click="isVisible = true" class="dialog-open-button">Open Settings</div>
+  <button @click="isVisible = true" class="dialog-open-button">
+    Open Settings
+  </button>
   <div
     :class="{ visible: isVisible }"
     class="dialog dialog-background"
@@ -125,10 +127,6 @@ const _window = computed(() => window);
   transition: 0.3s all var(--animation-curve);
 }
 .dialog-open-button {
-  position: fixed;
-  top: 0;
-  left: 0;
-  filter: drop-shadow(2px 2px 1px);
   cursor: pointer;
 }
 .dialog-open-button:active {

components/game/player/Slot.vue

@@ -150,33 +150,6 @@ function discardCardClick(card: Card) {
 
 <template>
   <div class="player" :class="{ turn: isPlayerTurn, self: isSelf }">
-    <div id="turn_buttons">
-      <button
-        id="end_turn"
-        class="end_turn_button turn_icon"
-        :class="{ hidden: !isSelfTurn }"
-        @click="checkEndTurn"
-      >
-        END TURN
-      </button>
-      <button class="end_turn_button turn_icon" @click="startGame(game._id)">
-        Start game
-      </button>
-      <button class="end_turn_button turn_icon" @click="joinGame(game._id)">
-        Join game
-      </button>
-
-      <div
-        class="warning"
-        :class="{
-          'warning-fire-gem': warningText == 'P\'tite Fire gem?',
-          visible: warning,
-        }"
-      >
-        /!\<br />{{ warningText }}
-      </div>
-    </div>
-
     <div id="current_player_board">
       <!-- <div class="other_player_buttons_container">
                 <button @click.stop="damage_team(props.player.team)"

pages/game.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import LoadingScreen from "~/components/game/overlay/LoadingScreen.vue";
-import { endTurn, subscribe, useToken } from "~/netcode";
+import { endTurn, subscribe, useToken, startGame, joinGame } from "~/netcode";
 import { delay } from "~/netcode/events";
 import {
   type Container,
@@ -314,7 +314,6 @@ onUnmounted(() => {
       @ready="loaded = true"
       :isTurn="isTurn ?? false"
     ></AnimatedBackground>
-    <GameOverlayOptionsDialog></GameOverlayOptionsDialog>
     <ClientOnly>
       <template v-if="game && focusedPlayer && playerList">
         <Transition name="slide-left" mode="out-in">
@@ -404,10 +403,62 @@ onUnmounted(() => {
     </ClientOnly>
 
     <!-- <LoadingScreen v-if="!loaded"></LoadingScreen> -->
+    <footer>
+      <GameOverlayOptionsDialog></GameOverlayOptionsDialog>
+      <div id="turn_buttons" v-if="game">
+        <button
+          id="end_turn"
+          class="end_turn_button turn_icon"
+          :class="{ hidden: !isTurn }"
+          @click="endTurn(game._id)"
+          v-if="game.started && isTurn"
+        >
+          END TURN
+        </button>
+        <button
+          class="end_turn_button turn_icon"
+          @click="startGame(game._id)"
+          v-if="!game.started && game.owner.userId == authStore.selfUser.userId"
+        >
+          Start game
+        </button>
+        <button
+          class="end_turn_button turn_icon"
+          @click="joinGame(game._id)"
+          v-if="
+            game.started &&
+            authStore.logged &&
+            playerList?.every((p) => p.user.userId != authStore.selfUser.userId)
+          "
+        >
+          Join game
+        </button>
+
+        <!-- <div
+          class="warning"
+          :class="{
+            'warning-fire-gem': warningText == 'P\'tite Fire gem?',
+            visible: warning,
+          }"
+        >
+          /!\<br />{{ warningText }}
+        </div> -->
+      </div>
+      <button @click="navigateTo('/lobby')">Return to lobby</button>
+    </footer>
   </div>
 </template>
 
 <style scoped>
+footer {
+  margin: 10px;
+  display: flex;
+  flex-direction: row;
+  grid-area: footer;
+  height: 50px;
+  /* background: red; */
+  justify-content: space-between;
+}
 #game_status {
   position: fixed;
   z-index: 10;
@@ -420,11 +471,12 @@ onUnmounted(() => {
 #game_board {
   display: grid;
   grid-template-columns: 1fr min-content 1fr;
-  grid-template-rows: min-content min-content 1fr;
+  grid-template-rows: min-content min-content 1fr min-content;
   grid-template-areas:
     "stack_discard market turn_stats"
     "player_list player_list player_list"
-    "current_player current_player current_player";
+    "current_player current_player current_player"
+    "footer footer footer";
   height: 100%;
 }
 

pages/lobby.vue

@@ -211,23 +211,6 @@ header {
 .create-game-zone button {
   background-color: #4caf50;
 }
-button {
-  background-color: #4caf50;
-  border: none;
-  color: white;
-  text-align: center;
-  text-decoration: none;
-  font-family: "Roboto", sans-serif;
-  font-size: 16px;
-  width: max-content;
-  cursor: pointer;
-  border-radius: 12px;
-  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 {
   display: flex;