Merge pull request #247 from KenEucker/develop

3.3.4

.github/workflows/release.yaml

@@ -18,7 +18,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
       - name: Reconfigure git to use HTTP authentication
         run: >
           git config --global url."https://github.com/".insteadOf

package.json

@@ -1,6 +1,6 @@
 {
   "name": "biketag-vue",
-  "version": "3.3.3",
+  "version": "3.3.4",
   "license": "AGPL-3.0-or-later",
   "author": "Ken Eucker",
   "bugs": {
@@ -31,7 +31,7 @@
     "@vueuse/head": "^2.0.0",
     "ajv": "^8.12.0",
     "autoprefixer": "^10.4.17",
-    "biketag": "^3.3.3",
+    "biketag": "^3.3.4",
     "bootstrap": "^5.3.2",
     "bootstrap-vue-next": "^0.15.5",
     "crypto-js": "^4.2.0",
@@ -119,7 +119,7 @@
     "workbox-window": "^7.0.0"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "lint-staged": {
     "*.ts": [

src/App.vue

@@ -136,7 +136,6 @@ function checkForNewBikeTagPost() {
 
 // created
 async function created() {
-  const initResults = []
   /// Set it first thing
   await router.isReady()
   const _gameIsSet = store.gameName?.length !== 0
@@ -151,8 +150,6 @@ async function created() {
     gameIsSet.value = true
     const routeIsHome = routeIsRoot ? true : router.currentRoute.value?.name === 'Home'
 
-    initResults.push(await store.fetchCurrentBikeTag())
-
     if (game && routeIsHome) {
       const tagnumber =
         router.currentRoute.value.path.length > 1
@@ -161,15 +158,7 @@ async function created() {
       const params = { tagnumber }
       await router.push({ name: 'Home', params })
     }
-
-    initResults.push(store.fetchTags())
-    initResults.push(store.fetchPlayers())
-    initResults.push(store.fetchLeaderboard())
-    initResults.push(await store.fetchCredentials())
-    initResults.push(store.fetchQueuedTags())
-    initResults.push(store.fetchAllGames())
-
-    await Promise.allSettled(initResults)
+    await store.FetchAllData({ currentBikeTagSync: true, credentialsSync: true })
 
     checkForNewBikeTagPost()
   } else if (!_gameIsSet) {

src/common/types.ts

@@ -73,7 +73,8 @@ export interface AmbassadorProfile extends Profile {
 }
 export type BikeTagProfile = Partial<Profile> & Partial<AmbassadorProfile>
 export interface BikeTagStoreState {
-  dataLoaded: boolean
+  fetchingData: boolean
+  dataFetched: boolean
   game: Game
   allGames: Game[]
   achievements: Achievement[]

src/store/index.ts

@@ -62,7 +62,8 @@ export const initBikeTagStore = () => {
 
 export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
   state: (): BikeTagStoreState => ({
-    dataLoaded: false,
+    fetchingData: false,
+    dataFetched: false,
     gameName,
     gameNameProper: gameName?.length ? gameName[0].toUpperCase() + gameName.slice(1) : '',
     game: {} as Game,
@@ -83,6 +84,22 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
   }),
 
   actions: {
+    async isReady() {
+      if (this.dataFetched) {
+        return Promise.resolve() // Data is already loaded, resolve immediately
+      }
+
+      return new Promise((resolve) => {
+        const checkIsDataLoaded = () => {
+          if (this.dataFetched) {
+            clearInterval(intervalId) // Stop checking when isDataLoaded becomes true
+            resolve(true)
+          }
+        }
+        const intervalId = setInterval(checkIsDataLoaded, 100) // Check every 100 milliseconds (adjust as needed)
+        checkIsDataLoaded() // Check immediately
+      })
+    },
     // eslint-disable-next-line no-empty-pattern
     async getRegionPolygon(region: any) {
       try {
@@ -162,7 +179,7 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
     async setGame(newGameName?: string) {
       newGameName = newGameName ?? this.gameName
       if (this.game?.name !== newGameName || !this.game?.mainhash) {
-        this.dataLoaded = false
+        this.fetchingData = false
         return client.getGame({ game: newGameName }, biketagGameOpts as any).then(async (r) => {
           if (r.success) {
             const game = r.data as Game
@@ -204,8 +221,65 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
         this.credentialsFetched = true
       }
     },
+    async FetchAllData(
+      opts: {
+        currentBikeTagSync?: boolean
+        skipCurrentBikeTag?: boolean
+        tagsSync?: boolean
+        skipTags?: boolean
+        playersSync?: boolean
+        skipPlayers?: boolean
+        leaderboardSync?: boolean
+        skipLeaderboard?: boolean
+        credentialsSync?: boolean
+        skipCredentials?: boolean
+        queuedTagsSync?: boolean
+        skipQueuedTags?: boolean
+        allGamesSync?: boolean
+        skipAllGames?: boolean
+      } = {},
+    ) {
+      const initResults: any[] = []
+      this.fetchingData = true
+
+      if (!opts.skipCurrentBikeTag) {
+        if (opts.currentBikeTagSync) initResults.push(await this.fetchCurrentBikeTag())
+        else initResults.push(this.fetchCurrentBikeTag())
+      }
+      if (!opts.skipTags) {
+        if (opts.tagsSync) initResults.push(await this.fetchTags())
+        else initResults.push(this.fetchTags())
+      }
+      if (!opts.skipPlayers) {
+        if (opts.playersSync) initResults.push(await this.fetchPlayers())
+        else initResults.push(this.fetchPlayers())
+      }
+      if (!opts.skipLeaderboard) {
+        if (opts.leaderboardSync) initResults.push(await this.fetchLeaderboard())
+        else initResults.push(this.fetchLeaderboard())
+      }
+      if (!opts.skipCredentials) {
+        if (opts.credentialsSync) initResults.push(await this.fetchCredentials())
+        else initResults.push(await this.fetchCredentials())
+      }
+      if (!opts.skipQueuedTags) {
+        if (opts.queuedTagsSync) initResults.push(await this.fetchQueuedTags())
+        else initResults.push(this.fetchQueuedTags())
+      }
+      if (!opts.skipAllGames) {
+        if (opts.allGamesSync) initResults.push(await this.fetchAllGames())
+        else initResults.push(this.fetchAllGames())
+      }
+
+      Promise.allSettled(initResults).then((results) => {
+        this.dataFetched = true
+        this.fetchingData = false
+      })
+
+      return initResults
+    },
     fetchAllGames(cached = true) {
-      this.dataLoaded = false
+      this.fetchingData = false
       const biketagClient = new BikeTagClient({ ...biketagClientOpts, game: undefined, cached })
       return biketagClient
         .getGame(
@@ -572,7 +646,7 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
     SET_GAME(game: any) {
       const oldState = this.game
       this.game = game
-      this.dataLoaded = true
+      this.fetchingData = true
 
       if (oldState?.name !== game?.name) {
         debug(`${BikeTagDefaults.store}::game`, { game })
@@ -583,7 +657,7 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
     SET_ALL_GAMES(allGames: any) {
       const oldState = this.allGames
       this.allGames = allGames
-      this.dataLoaded = true
+      this.fetchingData = true
 
       if (oldState?.length !== allGames?.length) {
         debug(`${BikeTagDefaults.store}::allGames`, { allGames })
@@ -849,9 +923,6 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
     getQueuedTagState: (state) => {
       return getQueuedTagState(state.playerTag)
     },
-    getDataLoaded(state) {
-      return state.dataLoaded
-    },
     getGame(state) {
       return state.game
     },

src/views/Approve.vue

@@ -159,6 +159,7 @@ async function onApproveSubmit(newTagSubmission) {
 
 // mounted
 onMounted(async () => {
+  await store.isReady()
   await store.fetchQueuedTags(true)
   await store.fetchCredentials()
 

src/views/Leaderboard.vue

@@ -2,7 +2,7 @@
 <template>
   <div class="container">
     <div class="player-list">
-      <div v-for="player in playersList" :key="player.name" class="p-lg-1 p-md-1 mb-1">
+      <div v-for="player in playersList" :key="player.name" class="mb-1 p-lg-1 p-md-1">
         <player size="md" :player="player" />
       </div>
     </div>
@@ -19,7 +19,7 @@ import Player from '@/components/BikeTagPlayer.vue'
 // data
 const store = useBikeTagStore()
 
-store.fetchLeaderboardPlayersProfiles()
+store.isReady().then(() => store.fetchLeaderboardPlayersProfiles())
 
 // computed
 const playersList = computed(() => store.getLeaderboard)

src/views/Play.vue

@@ -236,6 +236,7 @@ async function onQueueSubmit(newTagSubmission) {
 
 // created
 const created = async () => {
+  await store.isReady()
   await store.fetchCurrentBikeTag()
   await store.fetchQueuedTags(true)
 }

src/views/Player.vue

@@ -16,7 +16,7 @@
     </div>
   </b-modal>
   <div v-if="player" class="container biketag-player">
-    <div class="social mb-2">
+    <div class="mb-2 social">
       <div class="mt-5 mr-2" @click="showBikeDex">
         <img
           v-if="bikedex?.length"
@@ -67,7 +67,7 @@
         </div>
       </div>
       <b-form-group>
-        <select v-model="perPage" class="form-select mb-2 m-auto" @change="resetCurrentPage">
+        <select v-model="perPage" class="m-auto mb-2 form-select" @change="resetCurrentPage">
           <option v-for="i in 3" :key="Math.pow(10, i)" :value="Math.pow(10, i)">
             {{ Math.pow(10, i) }}
           </option>
@@ -130,8 +130,6 @@ const modal = ref(false)
 const playerName = ref(decodeURIComponent(encodeURIComponent(route.params.name)))
 const player = computed(() => store.getPlayers.find((p) => p.name === playerName.value))
 
-store.fetchAllAchievements()
-
 // computed
 const bikedex = computed(() => [])
 const achievements = computed(() => player.value?.achievements?.map(store.getBikeTagAchievement))
@@ -180,6 +178,8 @@ watch(
 
 // mounted
 onMounted(async () => {
+  await store.isReady()
+  store.fetchAllAchievements()
   await store.fetchPlayers() // ensure the players are set before fetching THIS player's additional profile info
   store.fetchPlayerProfile(playerName.value)
 })

src/views/Round.vue

@@ -49,7 +49,6 @@ const props = defineProps({
 const time = new Date()
 time.setSeconds(time.getSeconds() + 900) // 10 minutes timer
 const timer = ref(useTimer(time.getSeconds()))
-const uploadInProgress = ref(false)
 const store = useBikeTagStore()
 const { t } = useI18n()
 
@@ -61,16 +60,11 @@ function isViewingQueue() {
   return getFormStep.value === BiketagQueueFormSteps[BiketagQueueFormSteps.viewRound]
 }
 
-// created
-const created = async () => {
+// mounted
+onMounted(async () => {
+  await store.isReady()
   await store.fetchCurrentBikeTag()
   await store.fetchQueuedTags()
-}
-created()
-
-// mounted
-onMounted(() => {
-  uploadInProgress.value = false
 })
 </script>