From 78cfc6cf3220fca109471ea415de6c6c19a363d6 Mon Sep 17 00:00:00 2001
From: Ken Eucker <keneucker@gmail.com>
Date: Tue, 9 Jan 2024 17:17:45 -0800
Subject: [PATCH 1/3] feat(library): refactor of the store and the published
 library to be a Vue Plugin

includes other fixes, including reducing the amount of time before the service worker checks for
updates
---
 .vscode/settings.json            |   4 -
 package.json                     |  11 ++-
 publish.config.ts                |   4 +-
 src/app.ts                       |  11 ++-
 src/common/constants.ts          |  52 ++++++++++++-
 src/common/types.ts              |   2 +-
 src/common/utils.ts              |  18 ++++-
 src/components/BikeTagMap.vue    |  13 +++-
 src/components/BikeTagQueue.vue  |  19 +----
 src/components/QueueView.vue     |  12 ++-
 src/components/ServiceWorker.vue |   2 +-
 src/index.ts                     |  47 +++++++++++-
 src/store/index.ts               | 122 +++++++++++++++++--------------
 src/views/Play.vue               |   8 +-
 vite.config.ts                   |  52 +------------
 15 files changed, 230 insertions(+), 147 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 478a8ee2..b34c3577 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -5,10 +5,6 @@
     "source.fixAll.eslint": "explicit",
     "source.sortImports": "explicit"
   },
-  "i18n-ally.localesPaths": [
-    "src/i18n",
-    "src/i18n/locales"
-  ],
   "[vue]": {
     "editor.defaultFormatter": "Vue.volar"
   }
diff --git a/package.json b/package.json
index 2fa9fa5f..5d88002a 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "lint:js": "eslint --ext .ts,.js,.vue src --fix",
     "lint:style": "stylelint \"./src/**/*.vue\" \"./src/**/*.scss\" --fix",
     "serve": "vite",
-    "pub:expose": "mv dist/index.d.ts ./index.d.ts && mv dist/biketag-vue.* ./ && mv dist/components ./components && mv dist/common ./common && mv dist/store ./store",
+    "pub:expose": "mv dist/index.d.ts ./index.d.ts && mv dist/biketag-vue.* ./ && mv dist/components ./components && mv dist/common ./common && mv dist/store ./store && mv dist/directives ./directives",
     "pub:clear": "rm -f ./index.d.ts ./biketag-vue.es.js ./biketag-vue.css && rm -rf dist ./components ./common ./store",
     "pub:build": "vue-tsc && vite build --config publish.config.ts",
     "build": "vite build",
@@ -64,7 +64,10 @@
     "vue3-markdown-it": "^1.0.10"
   },
   "peerDependencies": {
-    "vue": "^3.0.0"
+    "biketag": "^3.0.0",
+    "pinia": "^2.0.0",
+    "vue": "^3.0.0",
+    "vue-router": "^4.0.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^16.1.0",
@@ -144,10 +147,12 @@
   "exports": {
     ".": {
       "import": "./biketag-vue.es.js",
+      "require": "./biketag-vue.umd.js",
       "types": "./index.d.ts"
     },
     "./biketag-vue.css": {
-      "import": "./biketag-vue.css"
+      "import": "./biketag-vue.css",
+      "require": "./biketag-vue.css"
     }
   }
 }
diff --git a/publish.config.ts b/publish.config.ts
index a97b216c..faf75ef5 100644
--- a/publish.config.ts
+++ b/publish.config.ts
@@ -9,11 +9,11 @@ export default defineConfig({
     lib: {
       entry: path.resolve(__dirname, 'src/index.ts'),
       name: 'BikeTag',
-      formats: ['es'],
+      formats: ['es', 'umd'],
       fileName: (format) => `biketag-vue.${format}.js`,
     },
     rollupOptions: {
-      external: ['vue'],
+      external: ['vue', 'vue-router', 'pinia', 'biketag'],
       output: {
         assetFileNames: (assetInfo) => {
           if (assetInfo.name === 'style.css') return 'biketag-vue.css'
diff --git a/src/app.ts b/src/app.ts
index 2994dc6e..78af5f93 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -1,15 +1,16 @@
 import i18n from '@/i18n'
 import BootstrapVueNext from 'bootstrap-vue-next'
 import mitt from 'mitt'
+import { createPinia } from 'pinia'
 import { createApp } from 'vue'
 import VueGoogleMaps from 'vue-google-maps-community-fork'
 import VueSocials from 'vue-socials'
 import { useToast } from 'vue-toast-notification'
 import VueCookies from 'vue3-cookies'
+import { createBikeTag } from '.'
 import App from './App.vue'
 import { dynamicFontDirective } from './directives'
 import router from './router'
-import { biketagStore } from './store'
 
 // eslint-disable-next-line
 // @ts-ignore
@@ -50,7 +51,12 @@ class BikeTagApp {
     this.app.use(VueCookies)
   }
   router() {
-    this.app.use(router).use(biketagStore)
+    this.app.use(router)
+  }
+  store() {
+    this.app
+      .use(createPinia())
+      .use(createBikeTag({ includeComponents: false, includeDirectives: false }))
   }
   authentication() {
     if (isAuthenticationEnabled()) {
@@ -101,6 +107,7 @@ class BikeTagApp {
     this.directives()
     this.components()
     this.router()
+    this.store()
     this.mount()
   }
 }
diff --git a/src/common/constants.ts b/src/common/constants.ts
index 11e3ac78..22290bcc 100644
--- a/src/common/constants.ts
+++ b/src/common/constants.ts
@@ -5,9 +5,10 @@ export const BikeTagDefaults = {
   gameName: '',
   host: 'biketag.org',
   hostKey: 'ItsABikeTagGame',
-  source: 'sanity',
   logo: '/images/BikeTag.svg',
   jingle: 'media/biketag-jingle-1.mp3',
+  imageSource: 'imgur',
+  gameSource: 'sanity',
   store: 'biketag',
   manifest: {
     name: 'BikeTag',
@@ -22,6 +23,55 @@ export const BikeTagDefaults = {
   sanityAmbassadorRoleID: 'rol_iET51vzIn8z6Utz0',
 }
 
+export const BikeTagEnv = {
+  APP_ID: process.env.APP_ID ?? BikeTagDefaults.appId,
+  ACCESS_TOKEN: process.env.ACCESS_TOKEN ?? BikeTagDefaults.accessToken,
+  CONTEXT: process.env.CONTEXT ?? null,
+  ADMIN_EMAIL: process.env.ADMIN_EMAIL ?? BikeTagDefaults.admingEmail,
+  AMBASSADOR_ROLE: process.env.AMBASSADOR_ROLE ?? BikeTagDefaults.sanityAmbassadorRoleID,
+  PLAYER_ROLE: process.env.PLAYER_ROLE ?? BikeTagDefaults.sanityPlayerRoleID,
+  /* Auth0 Configuration */
+  A_AUDIENCE: process.env.A_AUDIENCE ?? null,
+  A_CID: process.env.A_CID ?? null,
+  A_DOMAIN: process.env.A_DOMAIN ?? null,
+  A_M_CS: process.env.A_M_CS ?? null,
+  A_M_CID: process.env.A_M_CID ?? null,
+  /* Bugs Configuration */
+  B_AKEY: process.env.B_AKEY ?? null,
+  /* BikeTag Configuration */
+  GAME_NAME: process.env.GAME_NAME ?? 'null',
+  GAME_SOURCE: process.env.GAME_SOURCE ?? null,
+  HOST: process.env.HOST ?? BikeTagDefaults.host,
+  HOST_KEY: process.env.HOST_KEY ?? BikeTagDefaults.hostKey,
+  /* Google Configuration */
+  G_AKEY: process.env.G_AKEY ?? process.env.GOOGLE_ACCESS_TOKEN ?? null,
+  G_CID: process.env.G_CID ?? process.env.GOOGLE_CLIENT_ID ?? null,
+  G_CSECRET: process.env.G_CSECRET ?? process.env.GOOGLE_CLIENT_SECRET ?? null,
+  G_EMAIL: process.env.G_EMAIL ?? process.env.GOOGLE_EMAIL_ADDRESS ?? null,
+  G_PASS: process.env.G_PASS ?? process.env.GOOGLE_PASSWORD ?? null,
+  G_RTOKEN: process.env.G_RTOKEN ?? process.env.GOOGLE_REFRESH_TOKEN ?? null,
+  /* Imgur Admin Configuration */
+  IA_CID: process.env.IA_CID ?? process.env.IMGUR_ADMIN_CLIENT_ID ?? null,
+  IA_CSECRET: process.env.IA_CSECRET ?? process.env.IMGUR_ADMIN_CLIENT_SECRET ?? null,
+  IA_RTOKEN: process.env.IA_RTOKEN ?? process.env.IMGUR_ADMIN_REFRESH_TOKEN ?? null,
+  IA_TOKEN: process.env.IA_TOKEN ?? process.env.IMGUR_ADMIN_ACCESS_TOKEN ?? null,
+  /* Imgur Configuration */
+  I_CID: process.env.I_CID ?? process.env.IMGUR_CLIENT_ID ?? null,
+  I_CSECRET: process.env.I_CSECRET ?? process.env.IMGUR_CLIENT_SECRET ?? null,
+  I_RTOKEN: process.env.I_RTOKEN ?? process.env.IMGUR_REFRESH_TOKEN ?? null,
+  I_TOKEN: process.env.I_TOKEN ?? process.env.IMGUR_ACCESS_TOKEN ?? null,
+  /* Sanity Admin Configuration */
+  SA_CDN_URL: process.env.SA_CDN_URL ?? BikeTagDefaults.sanityImagesCDNUrl,
+  SA_DSET: process.env.SA_DSET ?? process.env.SANITY_ADMIN_DATASET ?? null,
+  SA_PID: process.env.SA_PID ?? process.env.SANITY_ADMIN_PROJECT_ID ?? null,
+  SA_TOKEN: process.env.SA_TOKEN ?? process.env.SANITY_ADMIN_ACCESS_TOKEN ?? null,
+  /* Sanity Configuration */
+  S_CURL: process.env.S_CURL ?? BikeTagDefaults.sanityImagesCDNUrl,
+  S_DSET: process.env.S_DSET ?? process.env.SANITY_DATASET ?? null,
+  S_PID: process.env.S_PID ?? process.env.SANITY_PROJECT_ID ?? null,
+  S_TOKEN: process.env.S_TOKEN ?? process.env.SANITY_ACCESS_TOKEN ?? null,
+}
+
 export const special = [
   'zeroth',
   'first',
diff --git a/src/common/types.ts b/src/common/types.ts
index 6bbdc620..ddf9d79c 100644
--- a/src/common/types.ts
+++ b/src/common/types.ts
@@ -73,7 +73,7 @@ export interface AmbassadorProfile extends Profile {
 }
 export type BikeTagProfile = Partial<Profile> & Partial<AmbassadorProfile>
 export interface BikeTagStoreState {
-  dataInitialized: boolean
+  dataLoaded: boolean
   game: Game
   allGames: Game[]
   achievements: Achievement[]
diff --git a/src/common/utils.ts b/src/common/utils.ts
index de92e51a..0f716551 100644
--- a/src/common/utils.ts
+++ b/src/common/utils.ts
@@ -337,9 +337,15 @@ export const getSanityImageUrl = (
 }
 
 export const getApiUrl = (path = '') => {
+  if (!window) {
+    return process.env.CONTEXT === 'dev'
+      ? `http://localhost:7200/.netlify/functions/${path}`
+      : `/api/${path}`
+  }
+
   const url =
     process.env.CONTEXT === 'dev'
-      ? `${window.location.protocol}//${window.location.hostname}:7200/.netlify/functions/${path}`
+      ? `${window?.location?.protocol}//${window?.location?.hostname}:7200/.netlify/functions/${path}`
       : `/api/${path}`
 
   return url
@@ -412,3 +418,13 @@ export const isOnline = async (checkExternally = false) => {
 
 export const isAuthenticationEnabled = () => !!process.env.A_DOMAIN?.length
 export const isGmapsEnabled = () => !!process.env.G_AKEY?.length
+
+export const dequeueErrorNotify = (toast: any) => (error: string) => {
+  return toast.open({
+    message: `dequeue tag error: ${error}`,
+    type: 'error',
+    duration: 10000,
+    timeout: false,
+    position: 'bottom',
+  })
+}
diff --git a/src/components/BikeTagMap.vue b/src/components/BikeTagMap.vue
index 32061975..504d4f2b 100644
--- a/src/components/BikeTagMap.vue
+++ b/src/components/BikeTagMap.vue
@@ -26,7 +26,12 @@
             />
             <b-popover :target="`marker_${i}`" triggers="hover focus" placement="top">
               <template #title> {{ `#${i}` }} by {{ tag.mysteryPlayer }}</template>
-              <bike-tag-queue class="world-map__popover" :tag="tag" :show-number="false" />
+              <bike-tag-queue
+                class="world-map__popover"
+                :tag="tag"
+                :show-number="false"
+                @dequeue-error="dequeueErrorNotify(toast)"
+              />
             </b-popover>
           </template>
         </template>
@@ -64,10 +69,11 @@
 </template>
 
 <script setup name="BikeTagMap">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, inject } from 'vue'
 import { useBikeTagStore } from '@/store/index'
-import { isGmapsEnabled } from '@/common/utils'
+import { isGmapsEnabled, dequeueErrorNotify } from '@/common/utils'
 import Pin from '@/assets/images/pin.svg'
+const toast = inject('toast')
 
 // components
 import BikeTagQueue from '@/components/BikeTagQueue.vue'
@@ -91,6 +97,7 @@ const props = defineProps({
 // data
 const emit = defineEmits(['dragend'])
 const data = ref({})
+
 const store = useBikeTagStore()
 
 switch (props.variant) {
diff --git a/src/components/BikeTagQueue.vue b/src/components/BikeTagQueue.vue
index 7adeba40..2dde3ebb 100644
--- a/src/components/BikeTagQueue.vue
+++ b/src/components/BikeTagQueue.vue
@@ -123,8 +123,8 @@ const props = defineProps({
 // data
 const store = useBikeTagStore()
 const router = useRouter()
-const toast = inject('toast')
 const { t } = useI18n()
+const emit = defineEmits(['dequeue-error'])
 
 // computed
 const getQueuedTags = computed(() => store.getQueuedTags)
@@ -143,13 +143,8 @@ async function resetToFound() {
   await store.fetchCredentials()
   return store.dequeueFoundTag().then((dequeueSuccessful) => {
     if (!dequeueSuccessful || typeof dequeueSuccessful === 'string') {
-      return toast.open({
-        message: `dequeue tag error: ${dequeueSuccessful}`,
-        type: 'error',
-        duration: 10000,
-        timeout: false,
-        position: 'bottom',
-      })
+      /// TODO: this notification needs to be removed before publishing v3.0.0
+      return emit('dequeue-error', dequeueSuccessful)
     } else {
       nextTick(() => {
         router.go()
@@ -161,13 +156,7 @@ async function resetToMystery() {
   await store.fetchCredentials()
   return store.dequeueMysteryTag().then((dequeueSuccessful) => {
     if (!dequeueSuccessful || typeof dequeueSuccessful === 'string') {
-      return toast.open({
-        message: `dequeue tag error: ${dequeueSuccessful}`,
-        type: 'error',
-        duration: 10000,
-        timeout: false,
-        position: 'bottom',
-      })
+      return emit('dequeue-error', dequeueSuccessful)
     } else {
       nextTick(() => {
         router.go()
diff --git a/src/components/QueueView.vue b/src/components/QueueView.vue
index 7e6980fa..30bff9b9 100644
--- a/src/components/QueueView.vue
+++ b/src/components/QueueView.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="container align-center">
-    <bike-tag-queue :pagination-ref="controlledSwiper" size="m" />
+    <bike-tag-queue
+      :pagination-ref="controlledSwiper"
+      size="m"
+      @dequeue-error="dequeueErrorNotify(toast)"
+    />
   </div>
   <div class="container queue-view">
     <swiper
@@ -44,13 +48,13 @@
 </template>
 
 <script setup name="QueueView">
-import { ref, computed } from 'vue'
+import { ref, computed, inject } from 'vue'
 import { useRouter } from 'vue-router'
 import { useBikeTagStore } from '@/store/index'
 import SwiperCore, { Controller, Pagination } from 'swiper'
 import 'swiper/css/bundle'
-import { stringifyNumber } from '@/common/utils'
-import { BiketagQueueFormSteps } from '@/common/types'
+import { stringifyNumber, BiketagQueueFormSteps, dequeueErrorNotify } from '@/common'
+const toast = inject('toast')
 
 // components
 import { Swiper, SwiperSlide } from 'swiper/vue'
diff --git a/src/components/ServiceWorker.vue b/src/components/ServiceWorker.vue
index 59e5c453..49fc9dd4 100644
--- a/src/components/ServiceWorker.vue
+++ b/src/components/ServiceWorker.vue
@@ -35,7 +35,7 @@ const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW({
         setInterval(async () => {
           debug('Checking for sw update')
           await r.update()
-        }, 20000 /* 20s for testing purposes */)
+        }, 1000 /* 20s for testing purposes */)
     } else {
       debug('app::service worker registered', r?.active)
     }
diff --git a/src/index.ts b/src/index.ts
index 90de45e0..bd8f2058 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,12 @@
+import { App, Plugin } from 'vue'
+
+import { BikeTagDefaults, BikeTagEnv } from './common/constants'
 import * as Types from './common/types'
+import { getBikeTagClientOpts } from './common/utils'
+import { BikeTagStore, initBikeTagStore, useBikeTagStore } from './store'
+
+import { dynamicFontDirective } from './directives'
+
 // import BikeDex from './components/BikeDex.vue'
 // import BikeTag from './components/BikeTag.vue'
 // import BikeTagAchievement from './components/BikeTagAchievement.vue'
@@ -16,20 +24,50 @@ import BikeTagHeader from './components/BikeTagHeader.vue'
 // import BikeTagMenu from './components/BikeTagMenu.vue'
 // import BikeTagPlayer from './components/BikeTagPlayer.vue'
 // import BikeTagQueue from './components/BikeTagQueue.vue'
-import { biketagStore, useBikeTagStore } from './store'
+
+export interface BikeTagPlugin {
+  install: (app: App) => void
+  useBikeTagStore: () => BikeTagStore
+}
+
+const createBikeTag = (
+  options = {
+    includeComponents: true,
+    includeDirectives: true,
+  },
+): BikeTagPlugin => {
+  initBikeTagStore()
+
+  const install: Plugin = (app: App) => {
+    if (options.includeComponents) {
+      app
+        .component('BikeTagBlurb', BikeTagBlurb)
+        .component('BikeTagHeader', BikeTagHeader)
+        .component('BikeTagButton', BikeTagButton)
+    }
+    if (options.includeDirectives) {
+      app.directive('dynamic-font', dynamicFontDirective)
+    }
+  }
+
+  return { install, useBikeTagStore }
+}
 
 export {
   // ExpandableImage
   BikeTagBlurb,
-  // BikeTag,
-  // BikeDex,
   // BikeTagAchievement,
   BikeTagButton,
+  BikeTagDefaults,
+  // BikeTag,
+  // BikeDex,
+  BikeTagEnv,
   // BikeTagCamera,
   // BikeTagFooter,
   // BikeTagGames,
   BikeTagHeader,
   Types,
+  createBikeTag,
   // BikeTagInput,
   // BikeTagLabel,
   // BikeTagLoader,
@@ -37,7 +75,8 @@ export {
   // BikeTagMenu,
   // BikeTagPlayer,
   // BikeTagQueue,
-  biketagStore,
+  getBikeTagClientOpts,
+  initBikeTagStore,
   useBikeTagStore
 }
 
diff --git a/src/store/index.ts b/src/store/index.ts
index 0a3cebce..94275533 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,6 +1,6 @@
 import BikeTagClient from 'biketag'
 import { Achievement, Game, Player, Tag } from 'biketag/lib/common/schema'
-import { createPinia, defineStore } from 'pinia'
+import { defineStore } from 'pinia'
 import { BikeTagDefaults, BikeTagStoreState, BiketagQueueFormSteps } from '../common'
 import {
   debug,
@@ -18,48 +18,51 @@ import {
   setProfileCookie,
 } from '../common/utils'
 
-const domain = getDomainInfo(window)
-const profile = getProfileFromCookie()
-const mostRecentlyViewedTagnumber = getMostRecentlyViewedBikeTagTagnumber(0)
-const gameName = domain.subdomain ?? process.env.GAME_NAME ?? BikeTagDefaults.gameName
-/// TODO: move these options to a method for FE use only
-const biketagClientOptions: any = {
-  // biketag: {
-  cached: true,
-  host: process.env.CONTEXT === 'dev' ? getApiUrl() : `https://${gameName}.biketag.org/api`,
-  // game: gameName,
-  clientKey: getBikeTagHash(window.location.hostname),
-  // clientToken: process.env.ACCESS_TOKEN,
-  // },
-  ...getBikeTagClientOpts(window),
+let client: BikeTagClient
+let gameName: string
+let biketagClientOpts: any
+let biketagGameOpts: any
+let storedRegionPolygon: any
+let bikeTagInitialized = false
+
+export const initBikeTagStore = () => {
+  if (!bikeTagInitialized) {
+    bikeTagInitialized = true
+    biketagGameOpts = { source: BikeTagDefaults.gameSource }
+
+    const domain = getDomainInfo(window)
+    gameName = domain.subdomain ?? process.env.GAME_NAME ?? BikeTagDefaults.gameName
+    biketagClientOpts = {
+      // biketag: {
+      cached: true,
+      host: process.env.CONTEXT === 'dev' ? getApiUrl() : `https://${gameName}.biketag.org/api`,
+      // game: gameName,
+      clientKey: getBikeTagHash(window?.location?.hostname),
+      // clientToken: process.env.ACCESS_TOKEN,
+      // },
+      ...getBikeTagClientOpts(window),
+    }
+
+    debug(`init::${BikeTagDefaults.store}`, {
+      subdomain: domain.subdomain,
+      domain,
+      gameName,
+    })
+
+    /// TODO: create a helper for the instantiation of the biketag client (use singleton?)
+    client = new BikeTagClient(biketagClientOpts)
+    storedRegionPolygon = localStorage.getItem(`${gameName}::regionPolygon`)
+    try {
+      storedRegionPolygon = JSON.parse(storedRegionPolygon)
+    } catch (e) {
+      storedRegionPolygon = null
+    }
+  }
 }
-const gameOpts = { source: BikeTagDefaults.source }
-/// TODO: move these constants to common
-const defaultLogo = BikeTagDefaults.logo
-const defaultJingle = BikeTagDefaults.jingle
-const sanityBaseCDNUrl = `${process.env.S_CURL}${biketagClientOptions.sanity?.projectId}/${biketagClientOptions.sanity?.dataset}/`
-
-debug(`init::${BikeTagDefaults.store}`, {
-  subdomain: domain.subdomain,
-  domain,
-  gameName,
-  profile,
-})
-
-/// TODO: create a helper for the instantiation of the biketag client (use singleton?)
-const client = new BikeTagClient(biketagClientOptions)
-/// TODO: move this to an init method
-let storedRegionPolygon: any = localStorage.getItem(`${gameName}::regionPolygon`)
-try {
-  storedRegionPolygon = JSON.parse(storedRegionPolygon)
-} catch (e) {
-  storedRegionPolygon = null
-}
-export const biketagStore = createPinia()
 
 export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
   state: (): BikeTagStoreState => ({
-    dataInitialized: false,
+    dataLoaded: false,
     gameName,
     gameNameProper: gameName[0].toUpperCase() + gameName.slice(1),
     game: {} as Game,
@@ -74,8 +77,8 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
     formStep: BiketagQueueFormSteps.addFoundImage,
     // queuedTag: getQueuedTagFromCookie() ?? ({} as Tag),
     playerTag: {} as Tag,
-    profile,
-    mostRecentlyViewedTagnumber,
+    profile: getProfileFromCookie(),
+    mostRecentlyViewedTagnumber: getMostRecentlyViewedBikeTagTagnumber(0),
     credentialsFetched: false,
     regionPolyon: storedRegionPolygon,
   }),
@@ -157,14 +160,16 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
 
       return this.SET_PROFILE(profile)
     },
-    async setGame() {
-      if (!this.game?.mainhash) {
-        return client.game(this.gameName, gameOpts as any).then(async (d) => {
+    async setGame(gameName?: string) {
+      gameName = gameName || this.gameName
+      if (this.game.name !== gameName || this.game?.mainhash) {
+        this.dataLoaded = false
+        return client.game(gameName, biketagGameOpts as any).then(async (d) => {
           if (d) {
             const game = d as Game
-            biketagClientOptions.imgur.hash = game.mainhash
-            biketagClientOptions.imgur.queuehash = game.queuehash
-            client.config(biketagClientOptions)
+            biketagClientOpts.imgur.hash = game.mainhash
+            biketagClientOpts.imgur.queuehash = game.queuehash
+            client.config(biketagClientOpts)
 
             return this.SET_GAME(game)
           }
@@ -183,7 +188,7 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
         // console.log('fetching credentials')
         try {
           await client.config(
-            { ...biketagClientOptions, ...getBikeTagClientOpts(window, true) },
+            { ...biketagClientOpts, ...getBikeTagClientOpts(window, true) },
             false,
             true,
           )
@@ -196,12 +201,13 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
       }
     },
     fetchAllGames(cached = true) {
-      const biketagClient = new BikeTagClient({ ...biketagClientOptions, game: undefined, cached })
+      this.dataLoaded = false
+      const biketagClient = new BikeTagClient({ ...biketagClientOpts, game: undefined, cached })
       return biketagClient
         .getGame(
           { game: '' },
           {
-            source: 'sanity',
+            source: BikeTagDefaults.gameSource,
           },
         )
         .then((d) => {
@@ -279,7 +285,7 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
     },
     async fetchLeaderboardPlayersProfiles(cached = true) {
       const names = this.leaderboard.map((p) => p.name)
-      return client.players({ names, cached }, gameOpts as any).then(async (d) => {
+      return client.players({ names, cached }, biketagGameOpts as any).then(async (d) => {
         if (Array.isArray(d)) {
           d.forEach((p) => this.SET_PLAYER(p))
         }
@@ -562,6 +568,7 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
     SET_GAME(game: any) {
       const oldState = this.game
       this.game = game
+      this.dataLoaded = true
 
       if (oldState?.name !== game?.name) {
         debug(`${BikeTagDefaults.store}::game`, { game })
@@ -572,6 +579,7 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
     SET_ALL_GAMES(allGames: any) {
       const oldState = this.allGames
       this.allGames = allGames
+      this.dataLoaded = true
 
       if (oldState?.length !== allGames?.length) {
         debug(`${BikeTagDefaults.store}::allGames`, { allGames })
@@ -837,6 +845,9 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
     getQueuedTagState: (state) => {
       return getQueuedTagState(state.playerTag)
     },
+    getDataLoaded(state) {
+      return state.dataLoaded
+    },
     getGame(state) {
       return state.game
     },
@@ -869,7 +880,7 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
         }
       }
 
-      return `https://biketag.org/${defaultJingle}`
+      return `https://biketag.org/${BikeTagDefaults.jingle}`
     },
     getGameTitle(state) {
       return `${state.gameName.toUpperCase()}.BIKETAG`
@@ -885,12 +896,12 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
         logo = logo ? logo : state.game?.logo?.length ? state.game?.logo : undefined
 
         if (!logo) {
-          return defaultLogo
+          return BikeTagDefaults.logo
         }
 
         return logo.indexOf('imgur.com') !== -1
           ? logo
-          : getSanityImageUrl(logo, size, sanityBaseCDNUrl, squared)
+          : getSanityImageUrl(logo, size, BikeTagDefaults.sanityBaseCDNUrl, squared)
       }
     },
     getCurrentHint(state) {
@@ -931,3 +942,6 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
     },
   },
 })
+
+/// TODO: check to see if we can automatically call initBikeTagStore
+export interface BikeTagStore extends ReturnType<typeof useBikeTagStore> {}
diff --git a/src/views/Play.vue b/src/views/Play.vue
index 342319eb..29d073e7 100644
--- a/src/views/Play.vue
+++ b/src/views/Play.vue
@@ -23,7 +23,11 @@
         getCurrentBikeTag?.tagnumber + (getFormStep > BiketagQueueFormSteps.queueFound ? 1 : 0)
       }}</span
     >
-    <bike-tag-queue :only-mine="true" :show-number="false" />
+    <bike-tag-queue
+      :only-mine="true"
+      :show-number="false"
+      @dequeue-error="dequeueErrorNotify(toast)"
+    />
     <div
       v-if="BiketagQueueFormSteps[getFormStep] >= 1 && BiketagQueueFormSteps[getFormStep] < 4"
       class="step"
@@ -108,7 +112,7 @@ import { ref, inject, computed, watchEffect, onMounted } from 'vue'
 import { useBikeTagStore } from '@/store/index'
 import { BiketagQueueFormSteps } from '@/common/types'
 import { useTimer } from 'vue-timer-hook'
-import { sendNetlifyForm, sendNetlifyError } from '@/common/utils'
+import { sendNetlifyForm, sendNetlifyError, dequeueErrorNotify } from '@/common/utils'
 import { useI18n } from 'vue-i18n'
 import LineSvg from '@/assets/images/line.svg'
 import ArrowSvg from '@/assets/images/arrow.svg'
diff --git a/vite.config.ts b/vite.config.ts
index b22ac10e..ec8abbf3 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,7 +6,7 @@ import envCompatible from 'vite-plugin-env-compatible'
 import EnvironmentPlugin from 'vite-plugin-environment'
 import { createHtmlPlugin } from 'vite-plugin-html'
 import { VitePWA } from 'vite-plugin-pwa'
-import { BikeTagDefaults } from './src/common/constants'
+import { BikeTagDefaults, BikeTagEnv } from './src/common/constants'
 
 const host = process.env.HOST ?? BikeTagDefaults.host
 // https://vitejs.dev/config/
@@ -28,55 +28,7 @@ export default defineConfig({
   },
   plugins: [
     vue(),
-    EnvironmentPlugin({
-      /* Application Configuration */
-      APP_ID: process.env.APP_ID ?? BikeTagDefaults.appId,
-      ACCESS_TOKEN: process.env.ACCESS_TOKEN ?? BikeTagDefaults.accessToken,
-      CONTEXT: process.env.CONTEXT ?? null,
-      ADMIN_EMAIL: process.env.ADMIN_EMAIL ?? BikeTagDefaults.admingEmail,
-      AMBASSADOR_ROLE: process.env.AMBASSADOR_ROLE ?? BikeTagDefaults.sanityAmbassadorRoleID,
-      PLAYER_ROLE: process.env.PLAYER_ROLE ?? BikeTagDefaults.sanityPlayerRoleID,
-      /* Auth0 Configuration */
-      A_AUDIENCE: process.env.A_AUDIENCE ?? null,
-      A_CID: process.env.A_CID ?? null,
-      A_DOMAIN: process.env.A_DOMAIN ?? null,
-      A_M_CS: process.env.A_M_CS ?? null,
-      A_M_CID: process.env.A_M_CID ?? null,
-      /* Bugs Configuration */
-      B_AKEY: process.env.B_AKEY ?? null,
-      /* BikeTag Configuration */
-      GAME_NAME: process.env.GAME_NAME ?? 'null',
-      GAME_SOURCE: process.env.GAME_SOURCE ?? null,
-      HOST: host,
-      HOST_KEY: process.env.HOST_KEY ?? BikeTagDefaults.hostKey,
-      /* Google Configuration */
-      G_AKEY: process.env.G_AKEY ?? process.env.GOOGLE_ACCESS_TOKEN ?? null,
-      G_CID: process.env.G_CID ?? process.env.GOOGLE_CLIENT_ID ?? null,
-      G_CSECRET: process.env.G_CSECRET ?? process.env.GOOGLE_CLIENT_SECRET ?? null,
-      G_EMAIL: process.env.G_EMAIL ?? process.env.GOOGLE_EMAIL_ADDRESS ?? null,
-      G_PASS: process.env.G_PASS ?? process.env.GOOGLE_PASSWORD ?? null,
-      G_RTOKEN: process.env.G_RTOKEN ?? process.env.GOOGLE_REFRESH_TOKEN ?? null,
-      /* Imgur Admin Configuration */
-      IA_CID: process.env.IA_CID ?? process.env.IMGUR_ADMIN_CLIENT_ID ?? null,
-      IA_CSECRET: process.env.IA_CSECRET ?? process.env.IMGUR_ADMIN_CLIENT_SECRET ?? null,
-      IA_RTOKEN: process.env.IA_RTOKEN ?? process.env.IMGUR_ADMIN_REFRESH_TOKEN ?? null,
-      IA_TOKEN: process.env.IA_TOKEN ?? process.env.IMGUR_ADMIN_ACCESS_TOKEN ?? null,
-      /* Imgur Configuration */
-      I_CID: process.env.I_CID ?? process.env.IMGUR_CLIENT_ID ?? null,
-      I_CSECRET: process.env.I_CSECRET ?? process.env.IMGUR_CLIENT_SECRET ?? null,
-      I_RTOKEN: process.env.I_RTOKEN ?? process.env.IMGUR_REFRESH_TOKEN ?? null,
-      I_TOKEN: process.env.I_TOKEN ?? process.env.IMGUR_ACCESS_TOKEN ?? null,
-      /* Sanity Admin Configuration */
-      SA_CDN_URL: process.env.SA_CDN_URL ?? BikeTagDefaults.sanityImagesCDNUrl,
-      SA_DSET: process.env.SA_DSET ?? process.env.SANITY_ADMIN_DATASET ?? null,
-      SA_PID: process.env.SA_PID ?? process.env.SANITY_ADMIN_PROJECT_ID ?? null,
-      SA_TOKEN: process.env.SA_TOKEN ?? process.env.SANITY_ADMIN_ACCESS_TOKEN ?? null,
-      /* Sanity Configuration */
-      S_CURL: process.env.S_CURL ?? BikeTagDefaults.sanityImagesCDNUrl,
-      S_DSET: process.env.S_DSET ?? process.env.SANITY_DATASET ?? null,
-      S_PID: process.env.S_PID ?? process.env.SANITY_PROJECT_ID ?? null,
-      S_TOKEN: process.env.S_TOKEN ?? process.env.SANITY_ACCESS_TOKEN ?? null,
-    }),
+    EnvironmentPlugin(BikeTagEnv),
     VitePWA({
       srcDir: 'src',
       filename: 'worker.ts',

From 5b0ececcbfc4d81382471e3566657ac073d9ae93 Mon Sep 17 00:00:00 2001
From: Ken Eucker <keneucker@gmail.com>
Date: Tue, 9 Jan 2024 17:21:28 -0800
Subject: [PATCH 2/3] Another update to trigger the deploy to dev.

---
 src/index.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index bd8f2058..a0a49fef 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -18,7 +18,7 @@ import BikeTagButton from './components/BikeTagButton.vue'
 // import BikeTagGames from './components/BikeTagGames.vue'
 import BikeTagHeader from './components/BikeTagHeader.vue'
 // import BikeTagInput from './components/BikeTagInput.vue'
-// import BikeTagLabel from './components/BikeTagLabel.vue'
+import BikeTagLabel from './components/BikeTagLabel.vue'
 // import BikeTagLoader from './components/BikeTagLoader.vue'
 // import BikeTagMap from './components/BikeTagMap.vue'
 // import BikeTagMenu from './components/BikeTagMenu.vue'
@@ -66,15 +66,15 @@ export {
   // BikeTagFooter,
   // BikeTagGames,
   BikeTagHeader,
-  Types,
-  createBikeTag,
   // BikeTagInput,
-  // BikeTagLabel,
+  BikeTagLabel,
   // BikeTagLoader,
   // BikeTagMap,
   // BikeTagMenu,
   // BikeTagPlayer,
   // BikeTagQueue,
+  Types,
+  createBikeTag,
   getBikeTagClientOpts,
   initBikeTagStore,
   useBikeTagStore

From e16d5213866d242e44e555a120ddf3b2044293f0 Mon Sep 17 00:00:00 2001
From: Ken Eucker <keneucker@gmail.com>
Date: Tue, 9 Jan 2024 17:26:45 -0800
Subject: [PATCH 3/3] style(src): runs the linter

---
 src/common/index.ts            | 1 -
 src/components/QueueSubmit.vue | 8 ++++++--
 src/index.ts                   | 3 +--
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/common/index.ts b/src/common/index.ts
index 65bbcf27..9d6416e1 100644
--- a/src/common/index.ts
+++ b/src/common/index.ts
@@ -2,4 +2,3 @@ export * from './constants'
 export * from './types'
 export * from './utils'
 export * from './uuid'
-
diff --git a/src/components/QueueSubmit.vue b/src/components/QueueSubmit.vue
index 37b560f2..4caa6dab 100644
--- a/src/components/QueueSubmit.vue
+++ b/src/components/QueueSubmit.vue
@@ -137,8 +137,12 @@ const getPlayerId = computed(() => store.getPlayerId)
 const getGameNameProper = computed(() => store.getGameNameProper)
 const getGame = computed(() => store.getGame)
 const supportsReddit = computed(() => !!getGame.value?.settings[BikeTagSettingsKeys.SupportsReddit])
-const supportsTwitter = computed(() => !!getGame.value?.settings[BikeTagSettingsKeys.SupportsTwitter])
-const supportsInstagram = computed(() => !!getGame.value?.settings[BikeTagSettingsKeys.SupportsInstagram])
+const supportsTwitter = computed(
+  () => !!getGame.value?.settings[BikeTagSettingsKeys.SupportsTwitter],
+)
+const supportsInstagram = computed(
+  () => !!getGame.value?.settings[BikeTagSettingsKeys.SupportsInstagram],
+)
 const redditPostText = computed(
   () => `
 [#${getPlayerTag.value.tagnumber} tag by ${getPlayerTag.value.foundPlayer}](https://biketag.org/${getPlayerTag.value.tagnumber})
diff --git a/src/index.ts b/src/index.ts
index a0a49fef..32fdefd7 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -77,6 +77,5 @@ export {
   createBikeTag,
   getBikeTagClientOpts,
   initBikeTagStore,
-  useBikeTagStore
+  useBikeTagStore,
 }
-