frontend auto fetch. mixin improvements. disable btns if !userAddress

frontend/src/App.vue

@@ -14,6 +14,7 @@ import NavbarComponent from "@/components/Layout/NavbarComponent.vue";
 import LoadingComponent from "@/components/Common/LoadingComponent.vue";
 import FooterComponent from "@/components/Layout/FooterComponent.vue";
 import mxGame from "@/mixin/game";
+import {mapGetters} from "vuex";
 
 export default {
   name: "App",
@@ -22,17 +23,32 @@ export default {
 
   components: {FooterComponent, LoadingComponent, NavbarComponent},
 
+  computed: {
+    ...mapGetters(['gameConfig'])
+  },
+
   data() {
     return {
       isBusy: true,
     }
   },
 
   async created() {
-    await this.fetchOnce()
-    this.isBusy = false
+    await this.fetchOnce();
     await this.fetchInterval()
-  }
+    this.isBusy = false;
+
+    // Set auto-fetch interval
+    this.intervalId = setInterval(() => {
+      const isGameEnd = this.timeLeftSeconds < Number(this.gameConfig.game_extend)
+      this.fetchInterval(isGameEnd);
+      console.log(`Auto-fetch!`)
+    }, 5000);
+  },
+
+  unmounted() {
+    if (this.intervalId) clearInterval(this.intervalId)
+  },
 };
 </script>
 

frontend/src/components/Game/BidComponent.vue

@@ -8,7 +8,7 @@
           </div>
         </div>
 
-        <div class="selected-pot">
+        <div class="selected-pot text-white mt-5">
           <p v-if="utils.selectedPot">Selected pot: {{ getPotName(utils.selectedPot) }}</p>
           <p v-else>Select a pot to place a bid.</p>
         </div>
@@ -31,7 +31,7 @@
             <button class="btn btn-outline-secondary" type="button" @click="setMaxBid">Max</button>
           </div>
 
-          <ButtonComponent :isDisabled="!utils.selectedPot || isBusy" text="Place Bid"/>
+          <ButtonComponent :isDisabled="!utils.selectedPot || isBusy || !userAddress" text="Place Bid"/>
           <LoadingComponent v-if="isBusy"/>
         </form>
       </div>
@@ -55,7 +55,7 @@ export default {
   mixins: [mxChain, mxToast, mxPot, mxGame],
 
   computed: {
-    ...mapGetters(['minBid', 'maxBid', 'gameConfig', 'utils'])
+    ...mapGetters(['minBid', 'maxBid', 'gameConfig', 'utils', 'userAddress'])
   },
 
   data() {

frontend/src/components/Info/TimerComponent.vue

@@ -4,17 +4,18 @@
       <div class="card text-center">
         <div class="card-body">
           <h5 class="card-title">Timer</h5>
-          <p v-if="timeLeft" class="card-text text-success">Time Remaining: {{ timeLeft }}</p>
-          <div v-if="timeLeft" class="progress">
+          <p v-if="timeLeftHuman" class="card-text text-success">Time Remaining: {{ timeLeftHuman }}</p>
+          <div v-if="timeLeftHuman" class="progress">
             <div class="progress-bar" role="progressbar" :style="{ width: progressPercentage + '%' }" aria-valuenow="25"
                  aria-valuemin="0" aria-valuemax="100">{{ progressPercentage }}%
             </div>
           </div>
           <p v-else class="card-text text-danger">The game has ended. Please trigger the end game process.</p>
 
           <div class="mb-3">
-            <!-- Button is only shown when timeLeft is falsy, meaning the game has ended -->
-            <ButtonComponent v-if="!timeLeft" :isDisabled="isBusy" text="End Game" @click="onEndGame"/>
+            <!-- Button is only shown when timeLeftHuman is falsy, meaning the game has ended -->
+            <ButtonComponent v-if="!timeLeftHuman" :isDisabled="isBusy || !userAddress" text="End Game"
+                             @click="onEndGame"/>
             <LoadingComponent v-if="isBusy"/>
           </div>
 
@@ -43,20 +44,7 @@ export default {
   mixins: [mxChain, mxToast, mxGame],
 
   computed: {
-    ...mapGetters(['gameState', 'reallocationFeePool']),
-
-    timeLeft() {
-      if (!this.gameState) return null
-      const endTime = this.gameState.end_time * 1000;
-      const timeDiff = endTime - this.currentTime;
-      if (timeDiff <= 0) {
-        return null;
-      }
-      const hours = Math.floor((timeDiff / (1000 * 60 * 60)) % 24);
-      const minutes = Math.floor((timeDiff / (1000 * 60)) % 60);
-      const seconds = Math.floor((timeDiff / 1000) % 60);
-      return `${hours}h ${minutes}m ${seconds}s`;
-    },
+    ...mapGetters(['gameState', 'reallocationFeePool', 'userAddress']),
 
     progressPercentage() {
       if (!this.gameState) return 0;
@@ -68,27 +56,13 @@ export default {
 
   data() {
     return {
-      intervalId: null,
-      currentTime: new Date().getTime(),
       isBusy: false,
     };
   },
 
-  mounted() {
-    this.intervalId = setInterval(this.updateCurrentTime, 1000);
-  },
-
-  unmounted() {
-    clearInterval(this.intervalId);
-  },
-
   methods: {
     ...mapActions(['fetchPlayerAllocations']),
 
-    updateCurrentTime() {
-      this.currentTime = new Date().getTime();
-    },
-
     async onEndGame() {
       this.isBusy = true
       try {

frontend/src/mixin/game.js

@@ -1,27 +1,73 @@
 import {mapActions, mapGetters} from "vuex";
 
 const mxGame = {
+  data() {
+    return {
+      currentTime: new Date().getTime(),
+    };
+  },
+
   computed: {
-    ...mapGetters(['userAddress'])
+    ...mapGetters(['userAddress', 'gameState']),
+
+    timeLeftSeconds() {
+      if (!this.gameState) return null;
+      const endTime = this.gameState.end_time * 1000;
+      const timeDiff = endTime - this.currentTime;
+      return timeDiff > 0 ? Math.floor(timeDiff / 1000) : 0;
+    },
+
+    timeLeftHuman() {
+      const timeDiff = this.timeLeftSeconds * 1000;  // Convert back to milliseconds for calculation
+      if (timeDiff <= 0) {
+        return "0h 0m 0s";
+      }
+      const hours = Math.floor((timeDiff / (1000 * 60 * 60)) % 24);
+      const minutes = Math.floor((timeDiff / (1000 * 60)) % 60);
+      const seconds = Math.floor((timeDiff / 1000) % 60);
+      return `${hours}h ${minutes}m ${seconds}s`;
+    },
   },
 
   methods: {
-    ...mapActions(['initUser', 'fetchGameConfig', 'fetchGameState', 'fetchPots', 'fetchWinningPots', 'fetchBidRange', 'fetchReallocationFeePool', 'fetchPlayerAllocations']),
+    ...mapActions([
+      'initUser',
+      'fetchGameConfig',
+      'fetchGameState',
+      'fetchPots',
+      'fetchWinningPots',
+      'fetchBidRange',
+      'fetchReallocationFeePool',
+      'fetchPlayerAllocations',
+    ]),
 
     async fetchOnce() {
       await this.initUser();
-      if (this.userAddress) await this.fetchPlayerAllocations()
-      await this.fetchGameConfig()
+      if (this.userAddress) await this.fetchPlayerAllocations();
+      await this.fetchGameConfig();
+      await this.fetchGameState();
+    },
+
+    async fetchInterval(gameEnd = false) {
+      await this.fetchPots();
+      await this.fetchWinningPots();
+      await this.fetchBidRange();
+      await this.fetchReallocationFeePool();
+      if (gameEnd) await this.fetchGameState();
     },
 
-    async fetchInterval() {
-      await this.fetchGameState()
-      await this.fetchPots()
-      await this.fetchWinningPots()
-      await this.fetchBidRange()
-      await this.fetchReallocationFeePool()
-    }
-  }
-}
-
-export default mxGame
+    updateCurrentTime() {
+      this.currentTime = new Date().getTime();
+    },
+  },
+
+  created() {
+    this.intervalId = setInterval(this.updateCurrentTime, 1000);
+  },
+
+  unmounted() {
+    clearInterval(this.intervalId);
+  },
+};
+
+export default mxGame;