From e1784dffcae43979d0a456e47f13c3955d3721a9 Mon Sep 17 00:00:00 2001
From: legonzaur <legonzaur@live.fr>
Date: Sat, 21 Dec 2024 14:56:49 +0100
Subject: [PATCH] fix : render game configuration button only on client

---
 pages/game.vue | 97 ++++++++++++--------------------------------------
 1 file changed, 23 insertions(+), 74 deletions(-)

diff --git a/pages/game.vue b/pages/game.vue
index a8c0194..547f646 100644
--- a/pages/game.vue
+++ b/pages/game.vue
@@ -184,80 +184,43 @@ onUnmounted(() => {
 
 <template>
   <div @contextmenu.prevent="false" id="game_board">
-    <AnimatedBackground
-      @ready="loaded = true"
-      :isTurn="isTurn ?? false"
-    ></AnimatedBackground>
+    <AnimatedBackground @ready="loaded = true" :isTurn="isTurn ?? false"></AnimatedBackground>
     <ClientOnly>
       <template v-if="game && focusedPlayer && playerList">
         <!-- <Transition name="slide-left" mode="out-in"> -->
         <div id="stack_discard" :key="focusedPlayer?._id">
           <div id="stack">
-            <GameCardGrouped
-              :container="focusedPlayer.stack"
-              :wrapped="true"
-              :hidden="true"
-            >
+            <GameCardGrouped :container="focusedPlayer.stack" :wrapped="true" :hidden="true">
             </GameCardGrouped>
           </div>
 
-          <GameOverlayDiscard
-            :game="game"
-            :player="focusedPlayer"
-          ></GameOverlayDiscard>
+          <GameOverlayDiscard :game="game" :player="focusedPlayer"></GameOverlayDiscard>
         </div>
         <!-- </Transition> -->
 
-        <GameMarket
-          :game="game"
-          :market="game.market"
-          :fire_gems="game.fireGems"
-          :marketStack="game.marketStack"
-        >
+        <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>
+          <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"
-              :is-self-turn="isTurn"
-              :self="selfPlayer == p"
-            >
+            <GamePlayerListElement v-for="p in playerList" :player="p" :game="game" @click="focusPlayer(p)"
+              :focused="focusedPlayer == p" :is-self-turn="isTurn" :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>
+            <GamePlayerSlot v-if="focusedPlayer" :player="focusedPlayer" :game="game" :key="focusedPlayer._id">
+            </GamePlayerSlot>
           </Transition>
         </div>
-        <GameModalResultDialog
-          :isVisible="showResults"
-          :won="isWinner"
-          :players="playerList"
-          @close="showResults = false"
-        >
+        <GameModalResultDialog :isVisible="showResults" :won="isWinner" :players="playerList"
+          @close="showResults = false">
         </GameModalResultDialog>
-        <GamePlayerSelf
-          v-if="selfPlayer"
-          :container="selfPlayer.hand"
-        ></GamePlayerSelf>
+        <GamePlayerSelf v-if="selfPlayer" :container="selfPlayer.hand"></GamePlayerSelf>
       </template>
     </ClientOnly>
 
@@ -265,51 +228,36 @@ onUnmounted(() => {
     <footer>
       <div>
         <GameModalOptionsDialog></GameModalOptionsDialog>
-        <GameModalConfigureDialog
-          v-if="game && game.owner.userId == authStore.selfUser.userId"
-          :game="game"
-        ></GameModalConfigureDialog>
+        <ClientOnly>
+          <GameModalConfigureDialog v-if="game && game.owner.userId == authStore.selfUser.userId" :game="game">
+          </GameModalConfigureDialog>
+        </ClientOnly>
+
       </div>
 
       <ClientOnly>
         <div id="turn_buttons" v-if="game">
           <template v-if="game.started">
-            <button
-              id="end_turn"
-              class="end_turn_button turn_icon"
-              :class="{ hidden: !isTurn }"
-              @click="endTurn(game._id)"
-              v-if="isTurn"
-            >
+            <button id="end_turn" class="end_turn_button turn_icon" :class="{ hidden: !isTurn }"
+              @click="endTurn(game._id)" v-if="isTurn">
               END TURN
             </button>
           </template>
           <template v-else-if="authStore.logged">
             <template v-if="game.owner.userId == authStore.selfUser.userId">
-              <button
-                class="end_turn_button turn_icon"
-                @click="startGame(game._id)"
-              >
+              <button class="end_turn_button turn_icon" @click="startGame(game._id)">
                 Start game
               </button>
             </template>
 
-            <button
-              class="end_turn_button turn_icon"
-              @click="joinGame(game._id)"
-              v-else-if="!selfPlayer"
-            >
+            <button class="end_turn_button turn_icon" @click="joinGame(game._id)" v-else-if="!selfPlayer">
               Join game
             </button>
             <button v-else @click="leaveGame(game._id)">Leave game</button>
           </template>
         </div>
         <div>
-          <button
-            v-if="game && game.started && selfPlayer"
-            class="red"
-            @click="surrender(game._id)"
-          >
+          <button v-if="game && game.started && selfPlayer" class="red" @click="surrender(game._id)">
             Surrender
           </button>
           <button @click="navigateTo('/lobby')">Return to lobby</button>
@@ -329,6 +277,7 @@ footer {
   /* background: red; */
   justify-content: space-between;
 }
+
 #game_status {
   position: fixed;
   z-index: 10;