From f019b61f40cdf3feb15e0ca6ecd47ca436176f03 Mon Sep 17 00:00:00 2001
From: Ken Eucker <keneucker@gmail.com>
Date: Tue, 9 Jan 2024 11:12:17 -0800
Subject: [PATCH] feat(store): cleanup of the store and now all constants are
 in a common/constants.ts file

This update is going to be a major breaking version simply to begin the process of matching the
version numbers of this project with the biketag-api project, and the current version of this
project (3.2.7).

BREAKING CHANGE: The store is now present in the component library.
---
 README.md                           |   2 +-
 package.json                        |   3 +-
 src/App.vue                         |   1 -
 src/app.ts                          |   4 +-
 src/common/constants.ts             |  47 ++++++++
 src/common/index.ts                 |   1 +
 src/common/types.ts                 |  55 +++-------
 src/common/utils.ts                 |  14 +--
 src/components/BikeTagQueue.vue     |   4 +-
 src/components/QueuePostedShare.vue |   2 +-
 src/components/QueueSubmit.vue      |   8 +-
 src/components/QueueView.vue        |   6 +-
 src/index.ts                        |   3 +-
 src/store/index.ts                  | 163 ++++++++++++----------------
 src/views/Play.vue                  |  44 ++++----
 src/views/Round.vue                 |   8 +-
 vite.config.ts                      |  69 ++++++------
 17 files changed, 220 insertions(+), 214 deletions(-)
 create mode 100644 src/common/constants.ts

diff --git a/README.md b/README.md
index 8f209fb0..e82519bf 100644
--- a/README.md
+++ b/README.md
@@ -95,7 +95,7 @@ Below you will find some of the primary settings for testing all features of the
 ```sh
 #.env
 # Used for internal authentication
-SUPER_ADMIN=admin@email.com
+ADMIN_EMAIL=admin@email.com
 HOST_KEY=anythingyouwantititobe
 ACCESS_TOKEN=BIKETAGACCESSTOKEN
 # Used for uploading new BikeTag posts
diff --git a/package.json b/package.json
index b308ea1f..2fa9fa5f 100644
--- a/package.json
+++ b/package.json
@@ -143,7 +143,8 @@
   "module": "./biketag-vue.es.js",
   "exports": {
     ".": {
-      "import": "./biketag-vue.es.js"
+      "import": "./biketag-vue.es.js",
+      "types": "./index.d.ts"
     },
     "./biketag-vue.css": {
       "import": "./biketag-vue.css"
diff --git a/src/App.vue b/src/App.vue
index 9f447bf4..4cadf090 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -140,7 +140,6 @@ function checkForNewBikeTagPost() {
 async function created() {
   const initResults = []
   /// Set it first thing
-  store.SET_DATA_INITIALIZED()
   const game = await store.setGame()
   const _gameIsSet = game?.name?.length !== 0
 
diff --git a/src/app.ts b/src/app.ts
index 0cc13016..2994dc6e 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -9,7 +9,7 @@ import VueCookies from 'vue3-cookies'
 import App from './App.vue'
 import { dynamicFontDirective } from './directives'
 import router from './router'
-import { store } from './store'
+import { biketagStore } from './store'
 
 // eslint-disable-next-line
 // @ts-ignore
@@ -50,7 +50,7 @@ class BikeTagApp {
     this.app.use(VueCookies)
   }
   router() {
-    this.app.use(router).use(store)
+    this.app.use(router).use(biketagStore)
   }
   authentication() {
     if (isAuthenticationEnabled()) {
diff --git a/src/common/constants.ts b/src/common/constants.ts
new file mode 100644
index 00000000..11e3ac78
--- /dev/null
+++ b/src/common/constants.ts
@@ -0,0 +1,47 @@
+export const BikeTagDefaults = {
+  appId: 'com.app.biketag',
+  accessToken: '8b4e2b86a724bf3f39d6766de6e67212',
+  admingEmail: 'biketag@biketag.org',
+  gameName: '',
+  host: 'biketag.org',
+  hostKey: 'ItsABikeTagGame',
+  source: 'sanity',
+  logo: '/images/BikeTag.svg',
+  jingle: 'media/biketag-jingle-1.mp3',
+  store: 'biketag',
+  manifest: {
+    name: 'BikeTag',
+    shortName: 'BikeTag',
+    description: 'BikeTag is a photo mystery tag game played on bicycles. No login required.',
+    themeColor: '#000000',
+  },
+  /// TODO: THIS IS BAD
+  sanityImagesCDNUrl: 'https://cdn.sanity.io/images/',
+  sanityBaseCDNUrl: 'https://cdn.sanity.io/images/x37ikhvs/production/',
+  sanityPlayerRoleID: 'rol_pcbQ68Q9L0yn1o3O',
+  sanityAmbassadorRoleID: 'rol_iET51vzIn8z6Utz0',
+}
+
+export const special = [
+  'zeroth',
+  'first',
+  'second',
+  'third',
+  'fourth',
+  'fifth',
+  'sixth',
+  'seventh',
+  'eighth',
+  'ninth',
+  'tenth',
+  'eleventh',
+  'twelfth',
+  'thirteenth',
+  'fourteenth',
+  'fifteenth',
+  'sixteenth',
+  'seventeenth',
+  'eighteenth',
+  'nineteenth',
+]
+export const deca = ['twent', 'thirt', 'fort', 'fift', 'sixt', 'sevent', 'eight', 'ninet']
diff --git a/src/common/index.ts b/src/common/index.ts
index 903c358e..65bbcf27 100644
--- a/src/common/index.ts
+++ b/src/common/index.ts
@@ -1,3 +1,4 @@
+export * from './constants'
 export * from './types'
 export * from './utils'
 export * from './uuid'
diff --git a/src/common/types.ts b/src/common/types.ts
index e8f7ad90..6bbdc620 100644
--- a/src/common/types.ts
+++ b/src/common/types.ts
@@ -1,6 +1,14 @@
-import { Achievement, Game, Player, Tag } from 'biketag/lib/common/schema'
+import {
+  Achievement,
+  Ambassador,
+  Game,
+  Player,
+  Region,
+  Setting,
+  Tag,
+} from 'biketag/lib/common/schema'
 
-export type { Achievement, Game, Player, Tag }
+export type { Achievement, Ambassador, Game, Player, Region, Setting, Tag }
 
 export type DomainInfo = {
   host: string
@@ -8,40 +16,6 @@ export type DomainInfo = {
   isSubdomain: boolean
 }
 
-export const BikeTagDefaults = {
-  gameName: '',
-  source: 'sanity',
-  logo: '/images/BikeTag.svg',
-  jingle: 'media/biketag-jingle-1.mp3',
-  store: 'biketag',
-  /// TODO: THIS IS BAD
-  sanityBaseCDNUrl: 'https://cdn.sanity.io/images/x37ikhvs/production/',
-}
-
-export const special = [
-  'zeroth',
-  'first',
-  'second',
-  'third',
-  'fourth',
-  'fifth',
-  'sixth',
-  'seventh',
-  'eighth',
-  'ninth',
-  'tenth',
-  'eleventh',
-  'twelfth',
-  'thirteenth',
-  'fourteenth',
-  'fifteenth',
-  'sixteenth',
-  'seventeenth',
-  'eighteenth',
-  'nineteenth',
-]
-export const deca = ['twent', 'thirt', 'fort', 'fift', 'sixt', 'sevent', 'eight', 'ninet']
-
 export interface ProfileMeta {
   name: string
   passcode: string
@@ -56,7 +30,6 @@ export interface ProfileMeta {
     skipSteps: boolean
   }
 }
-
 export interface AmbassadorMeta extends ProfileMeta {
   credentials: {
     imgur: {
@@ -99,7 +72,7 @@ export interface AmbassadorProfile extends Profile {
   zipcode: string
 }
 export type BikeTagProfile = Partial<Profile> & Partial<AmbassadorProfile>
-export interface State {
+export interface BikeTagStoreState {
   dataInitialized: boolean
   game: Game
   allGames: Game[]
@@ -116,11 +89,11 @@ export interface State {
   formStep: number
   playerTag: Tag
   credentialsFetched: boolean
-  mostRecentlyViewedTagnumber: BiketagFormSteps
+  mostRecentlyViewedTagnumber: BiketagQueueFormSteps
   regionPolyon: any
 }
 
-export enum BiketagFormSteps {
+export enum BiketagQueueFormSteps {
   viewRound = 0.5,
   addFoundImage = 1,
   roundJoined = 1.5,
@@ -130,7 +103,7 @@ export enum BiketagFormSteps {
   shareBikeTagPost = 3.5,
 }
 
-export enum Settings {
+export enum BikeTagSettingsKeys {
   AutoPost = 'queue::autoPost',
   Jingle = 'easter::jingle',
   SupportsReddit = 'social::reddit',
diff --git a/src/common/utils.ts b/src/common/utils.ts
index eab64776..de92e51a 100644
--- a/src/common/utils.ts
+++ b/src/common/utils.ts
@@ -9,11 +9,11 @@ import { useCookies } from 'vue3-cookies'
 import {
   BikeTagDefaults,
   BikeTagProfile,
-  BiketagFormSteps,
+  BiketagQueueFormSteps,
   DomainInfo,
   deca,
   special,
-} from '../../src/common/types'
+} from '../../src/common'
 
 export const stringifyNumber = (n: number): string => {
   if (n < 20) return special[n]
@@ -263,16 +263,16 @@ export const GetQueryString = (win: Window, name: string): string | null => {
   return null
 }
 
-export const getQueuedTagState = (queuedTag: Tag): BiketagFormSteps => {
+export const getQueuedTagState = (queuedTag: Tag): BiketagQueueFormSteps => {
   const mysteryImageSet = queuedTag.mysteryImageUrl?.length > 0
   const foundImageSet = queuedTag.foundImageUrl?.length > 0
-  let queuedTagState = BiketagFormSteps.addFoundImage
+  let queuedTagState = BiketagQueueFormSteps.addFoundImage
   if (mysteryImageSet && foundImageSet) {
-    queuedTagState = BiketagFormSteps.roundPosted
+    queuedTagState = BiketagQueueFormSteps.roundPosted
   } else {
     queuedTagState = foundImageSet
-      ? BiketagFormSteps.addMysteryImage
-      : BiketagFormSteps.addFoundImage
+      ? BiketagQueueFormSteps.addMysteryImage
+      : BiketagQueueFormSteps.addFoundImage
   }
 
   return queuedTagState
diff --git a/src/components/BikeTagQueue.vue b/src/components/BikeTagQueue.vue
index bdc8b05c..7adeba40 100644
--- a/src/components/BikeTagQueue.vue
+++ b/src/components/BikeTagQueue.vue
@@ -88,7 +88,7 @@
 import { inject, computed, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
 import { useBikeTagStore } from '../store/index'
-import { BiketagFormSteps } from '../common/types'
+import { BiketagQueueFormSteps } from '../common/types'
 import { useI18n } from 'vue-i18n'
 import VLazyImage from 'v-lazy-image'
 
@@ -137,7 +137,7 @@ const showNumber = computed(() => (props.size !== 's' ? props.showNumber : false
 
 // methods
 function canReset() {
-  return getQueuedTagState.value !== BiketagFormSteps.roundPosted
+  return getQueuedTagState.value !== BiketagQueueFormSteps.roundPosted
 }
 async function resetToFound() {
   await store.fetchCredentials()
diff --git a/src/components/QueuePostedShare.vue b/src/components/QueuePostedShare.vue
index 54be06aa..b8a5479a 100644
--- a/src/components/QueuePostedShare.vue
+++ b/src/components/QueuePostedShare.vue
@@ -87,7 +87,7 @@
 import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useBikeTagStore } from '@/store/index'
-import { Settings } from '@/common/types'
+import { BikeTagSettingsKeys } from '@/common/types'
 
 // components
 import Markdown from 'vue3-markdown-it'
diff --git a/src/components/QueueSubmit.vue b/src/components/QueueSubmit.vue
index ada6c25f..37b560f2 100644
--- a/src/components/QueueSubmit.vue
+++ b/src/components/QueueSubmit.vue
@@ -111,7 +111,7 @@
 <script setup name="QueueSubmit">
 import { ref, computed, onMounted } from 'vue'
 import { useBikeTagStore } from '@/store/index'
-import { Settings } from '@/common/types'
+import { BikeTagSettingsKeys } from '@/common/types'
 
 // components
 import Markdown from 'vue3-markdown-it'
@@ -136,9 +136,9 @@ const getCurrentBikeTag = computed(() => store.getCurrentBikeTag)
 const getPlayerId = computed(() => store.getPlayerId)
 const getGameNameProper = computed(() => store.getGameNameProper)
 const getGame = computed(() => store.getGame)
-const supportsReddit = computed(() => !!getGame.value?.settings[Settings.SupportsReddit])
-const supportsTwitter = computed(() => !!getGame.value?.settings[Settings.SupportsTwitter])
-const supportsInstagram = computed(() => !!getGame.value?.settings[Settings.SupportsInstagram])
+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 redditPostText = computed(
   () => `
 [#${getPlayerTag.value.tagnumber} tag by ${getPlayerTag.value.foundPlayer}](https://biketag.org/${getPlayerTag.value.tagnumber})
diff --git a/src/components/QueueView.vue b/src/components/QueueView.vue
index 3d773756..7e6980fa 100644
--- a/src/components/QueueView.vue
+++ b/src/components/QueueView.vue
@@ -50,7 +50,7 @@ import { useBikeTagStore } from '@/store/index'
 import SwiperCore, { Controller, Pagination } from 'swiper'
 import 'swiper/css/bundle'
 import { stringifyNumber } from '@/common/utils'
-import { BiketagFormSteps } from '@/common/types'
+import { BiketagQueueFormSteps } from '@/common/types'
 
 // components
 import { Swiper, SwiperSlide } from 'swiper/vue'
@@ -82,7 +82,9 @@ const goNextQueueStepButtonText = computed(
           : t('pages.round.join_queue')
     } #${getCurrentBikeTag.value?.tagnumber ?? 1}!`,
 )
-const showGoNextButton = computed(() => getQueuedTagState.value !== BiketagFormSteps.roundPosted)
+const showGoNextButton = computed(
+  () => getQueuedTagState.value !== BiketagQueueFormSteps.roundPosted,
+)
 
 // methods
 function goNextQueueStep() {
diff --git a/src/index.ts b/src/index.ts
index 0f5dae06..90de45e0 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -16,7 +16,7 @@ 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 { useBikeTagStore } from './store'
+import { biketagStore, useBikeTagStore } from './store'
 
 export {
   // ExpandableImage
@@ -37,6 +37,7 @@ export {
   // BikeTagMenu,
   // BikeTagPlayer,
   // BikeTagQueue,
+  biketagStore,
   useBikeTagStore
 }
 
diff --git a/src/store/index.ts b/src/store/index.ts
index ebb2f566..0a3cebce 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,7 +1,7 @@
 import BikeTagClient from 'biketag'
 import { Achievement, Game, Player, Tag } from 'biketag/lib/common/schema'
 import { createPinia, defineStore } from 'pinia'
-import { BikeTagDefaults, BiketagFormSteps, State } from '../common/types'
+import { BikeTagDefaults, BikeTagStoreState, BiketagQueueFormSteps } from '../common'
 import {
   debug,
   encodeBikeTagString,
@@ -48,15 +48,17 @@ debug(`init::${BikeTagDefaults.store}`, {
 
 /// 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 store = createPinia()
+export const biketagStore = createPinia()
+
 export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
-  state: (): State => ({
+  state: (): BikeTagStoreState => ({
     dataInitialized: false,
     gameName,
     gameNameProper: gameName[0].toUpperCase() + gameName.slice(1),
@@ -69,7 +71,7 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
     players: [] as Player[],
     leaderboard: [] as Player[],
     html: '',
-    formStep: BiketagFormSteps.addFoundImage,
+    formStep: BiketagQueueFormSteps.addFoundImage,
     // queuedTag: getQueuedTagFromCookie() ?? ({} as Tag),
     playerTag: {} as Tag,
     profile,
@@ -77,6 +79,7 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
     credentialsFetched: false,
     regionPolyon: storedRegionPolygon,
   }),
+
   actions: {
     // eslint-disable-next-line no-empty-pattern
     async getRegionPolygon(region: any) {
@@ -122,42 +125,6 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
         console.error(e)
       }
     },
-    async fetchCredentials() {
-      if (!this.credentialsFetched) {
-        // console.log('fetching credentials')]
-        try {
-          await client.config(
-            { ...biketagClientOptions, ...getBikeTagClientOpts(window, true) },
-            false,
-            true,
-          )
-        } catch (e) {
-          console.error('error fetching credentials', e)
-        }
-        // const credentials = await client.fetchCredentials()
-        // await client.config(credentials, false, true)
-        this.credentialsFetched = true
-        // if (this.profile?.isBikeTagAmbassador) {
-        //   /// fetch auth token for admin purposes
-        //   const checkAuth = () => {
-        //     if (auth?.isAuthenticated) {
-        //       if (!this.getProfile?.nonce?.length) {
-        //         auth.getIdTokenClaims().then((claims) => {
-        //           if (claims) {
-        //             const token = claims.__raw
-        //             this.$store.dispatch('setProfile', { ...auth.user, token })
-        //           } else {
-        //             debug("what's this? no speaka da mda5hash, brah?")
-        //           }
-        //         })
-        //       }
-        //       return true
-        //     }
-        //     return false
-        //   }
-        // }
-      }
-    },
     async setProfile(profile: any, token?: string) {
       /// Call to backend api GET on /profile with authorization header
       if (profile) {
@@ -211,6 +178,23 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
       await this.fetchCurrentBikeTag(false)
       await this.fetchQueuedTags(true)
     },
+    async fetchCredentials() {
+      if (!this.credentialsFetched) {
+        // console.log('fetching credentials')
+        try {
+          await client.config(
+            { ...biketagClientOptions, ...getBikeTagClientOpts(window, true) },
+            false,
+            true,
+          )
+        } catch (e) {
+          console.error('error fetching credentials', e)
+        }
+        // const credentials = await client.fetchCredentials()
+        // await client.config(credentials, false, true)
+        this.credentialsFetched = true
+      }
+    },
     fetchAllGames(cached = true) {
       const biketagClient = new BikeTagClient({ ...biketagClientOptions, game: undefined, cached })
       return biketagClient
@@ -338,14 +322,11 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
       return this.SET_PLAYER(playerProfile, existingPlayerIndex)
     },
     setFormStepToJoin(d: any) {
-      if (this.formStep === BiketagFormSteps.viewRound || d) {
+      if (this.formStep === BiketagQueueFormSteps.viewRound || d) {
         return this.SET_FORM_STEP_TO_JOIN(d)
       }
       return true
     },
-    setDataInitialized() {
-      return this.SET_DATA_INITIALIZED()
-    },
     async approveTag(d: any) {
       if (this.profile?.isBikeTagAmbassador) {
         d.hash = this.game.queuehash
@@ -529,46 +510,40 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
     // async resetFormStep() {
     //   return this.RESET_FORM_STEP()
     // },
-    async resetFormStepToFound() {
-      await this.SET_QUEUED_TAG()
-      return this.RESET_FORM_STEP_TO_FOUND()
-    },
-    async resetFormStepToMystery() {
-      await this.SET_QUEUED_TAG({
-        foundImage: this.playerTag.foundImage,
-        foundImageUrl: this.playerTag.foundImageUrl,
-        foundLocation: this.playerTag.foundLocation,
-        foundPlayer: this.playerTag.foundPlayer,
-        playerId: this.playerTag.playerId,
-      })
-      return this.RESET_FORM_STEP_TO_MYSTERY()
-    },
-    async resetFormStepToPost() {
-      await this.SET_QUEUED_TAG({
-        foundImage: this.playerTag.foundImage,
-        foundImageUrl: this.playerTag.foundImageUrl,
-        foundLocation: this.playerTag.foundLocation,
-        foundPlayer: this.playerTag.foundPlayer,
-        mysteryImage: this.playerTag.foundImage,
-        playerId: this.playerTag.playerId,
-        mysteryImageUrl: this.playerTag.foundImageUrl,
-        hint: this.playerTag.hint,
-        mysteryPlayer: this.playerTag.mysteryPlayer,
-      })
-      // return this.RESET_FORM_STEP_TO_POST()
-      return undefined
-    },
-    async getAmbassadorPermission() {
-      return this.profile?.isBikeTagAmbassador
-    },
+    // async resetFormStepToFound() {
+    //   await this.SET_QUEUED_TAG()
+    //   return this.RESET_FORM_STEP_TO_FOUND()
+    // },
+    // async resetFormStepToMystery() {
+    //   await this.SET_QUEUED_TAG({
+    //     foundImage: this.playerTag.foundImage,
+    //     foundImageUrl: this.playerTag.foundImageUrl,
+    //     foundLocation: this.playerTag.foundLocation,
+    //     foundPlayer: this.playerTag.foundPlayer,
+    //     playerId: this.playerTag.playerId,
+    //   })
+    //   return this.RESET_FORM_STEP_TO_MYSTERY()
+    // },
+    // async resetFormStepToPost() {
+    //   await this.SET_QUEUED_TAG({
+    //     foundImage: this.playerTag.foundImage,
+    //     foundImageUrl: this.playerTag.foundImageUrl,
+    //     foundLocation: this.playerTag.foundLocation,
+    //     foundPlayer: this.playerTag.foundPlayer,
+    //     mysteryImage: this.playerTag.foundImage,
+    //     playerId: this.playerTag.playerId,
+    //     mysteryImageUrl: this.playerTag.foundImageUrl,
+    //     hint: this.playerTag.hint,
+    //     mysteryPlayer: this.playerTag.mysteryPlayer,
+    //   })
+    //   // return this.RESET_FORM_STEP_TO_POST()
+    //   return undefined
+    // },
 
     // ==================================================================
     // ======= mutations ================================================
     // ==================================================================
 
-    SET_DATA_INITIALIZED() {
-      this.dataInitialized = true
-    },
     SET_PROFILE(profile: any) {
       const oldState = this.profile
 
@@ -710,9 +685,9 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
         this.resetBikeTagCache()
         console.log('SET_QUEUE_FOUND')
         if (oldState?.mysteryPlayer !== data?.foundPlayer) {
-          this.formStep = BiketagFormSteps.roundJoined
+          this.formStep = BiketagQueueFormSteps.roundJoined
         } else {
-          this.formStep = BiketagFormSteps.addFoundImage
+          this.formStep = BiketagQueueFormSteps.addFoundImage
         }
       }
 
@@ -746,9 +721,9 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
           oldState?.discussionUrl !== data?.discussionUrl ||
           oldState?.mentionUrl !== data?.mentionUrl
         ) {
-          this.formStep = BiketagFormSteps.roundPosted
+          this.formStep = BiketagQueueFormSteps.roundPosted
         } else {
-          this.formStep = BiketagFormSteps.addMysteryImage
+          this.formStep = BiketagQueueFormSteps.addMysteryImage
         }
       }
 
@@ -766,7 +741,7 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
       ) {
         debug(`${BikeTagDefaults.store}::submittedTag`, this.playerTag)
         this.resetBikeTagCache()
-        this.formStep = BiketagFormSteps.roundPosted
+        this.formStep = BiketagQueueFormSteps.roundPosted
       }
 
       return this.playerTag
@@ -795,16 +770,16 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
       return this.playerTag
     },
     SET_FORM_STEP_TO_JOIN(force: any) {
-      const setQueudState = this.formStep !== BiketagFormSteps.roundJoined || force
+      const setQueudState = this.formStep !== BiketagQueueFormSteps.roundJoined || force
       const oldState = this.formStep
       if (setQueudState && this.playerTag) {
         this.formStep = getQueuedTagState(this.playerTag)
       } else {
-        this.formStep = BiketagFormSteps.roundJoined
+        this.formStep = BiketagQueueFormSteps.roundJoined
       }
 
       if (oldState !== this.formStep) {
-        debug('state::queue', BiketagFormSteps[this.formStep])
+        debug('state::queue', BiketagQueueFormSteps[this.formStep])
       }
 
       return this.formStep
@@ -816,11 +791,11 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
         (this.profile?.name && this.profile?.name === this.currentBikeTag?.mysteryPlayer) ||
         (this.profile?.sub && this.profile?.sub === this.currentBikeTag?.playerId)
       ) {
-        this.formStep = BiketagFormSteps.shareBikeTagPost
+        this.formStep = BiketagQueueFormSteps.shareBikeTagPost
       } else if (tag) {
         this.formStep = getQueuedTagState(tag)
       } else {
-        this.formStep = BiketagFormSteps.addFoundImage
+        this.formStep = BiketagQueueFormSteps.addFoundImage
       }
 
       return this.formStep
@@ -832,13 +807,13 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
     // },
     RESET_FORM_STEP_TO_FOUND() {
       console.log('RESET_FORM_STEP_TO_FOUND')
-      this.formStep = BiketagFormSteps.addFoundImage
+      this.formStep = BiketagQueueFormSteps.addFoundImage
       // debug('state::queue', BiketagFormSteps[this.formStep])
 
       return this.formStep
     },
     RESET_FORM_STEP_TO_MYSTERY() {
-      this.formStep = BiketagFormSteps.addMysteryImage
+      this.formStep = BiketagQueueFormSteps.addMysteryImage
       // debug('state::queue', BiketagFormSteps[this.formStep])
 
       return this.formStep
@@ -850,6 +825,7 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
       return this.regionPolyon
     },
   },
+
   getters: {
     getAmbassadorId(state) {
       if (state.profile?.isBikeTagAmbassador) {
@@ -939,7 +915,7 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
       return state.leaderboard
     },
     getFormStep(state) {
-      return BiketagFormSteps[state.formStep]
+      return BiketagQueueFormSteps[state.formStep]
     },
     getPlayerTag(state) {
       return state.playerTag
@@ -950,9 +926,6 @@ export const useBikeTagStore = defineStore(BikeTagDefaults.store, {
     getProfile(state) {
       return state.profile
     },
-    isDataInitialized(state) {
-      return state.dataInitialized
-    },
     isBikeTagAmbassador(state) {
       return state.profile?.isBikeTagAmbassador
     },
diff --git a/src/views/Play.vue b/src/views/Play.vue
index 905779db..342319eb 100644
--- a/src/views/Play.vue
+++ b/src/views/Play.vue
@@ -14,34 +14,37 @@
       <span>{{ timer.minutes }}:{{ timer.seconds }}</span>
     </div>
     <span
-      v-if="!uploadInProgress && getFormStep !== BiketagFormSteps[BiketagFormSteps.queueJoined]"
+      v-if="
+        !uploadInProgress &&
+        getFormStep !== BiketagQueueFormSteps[BiketagQueueFormSteps.queueJoined]
+      "
       class="tag-number"
       >#{{
-        getCurrentBikeTag?.tagnumber + (getFormStep > BiketagFormSteps.queueFound ? 1 : 0)
+        getCurrentBikeTag?.tagnumber + (getFormStep > BiketagQueueFormSteps.queueFound ? 1 : 0)
       }}</span
     >
     <bike-tag-queue :only-mine="true" :show-number="false" />
     <div
-      v-if="BiketagFormSteps[getFormStep] >= 1 && BiketagFormSteps[getFormStep] < 4"
+      v-if="BiketagQueueFormSteps[getFormStep] >= 1 && BiketagQueueFormSteps[getFormStep] < 4"
       class="step"
     >
       <bike-tag-button
-        :variant="BiketagFormSteps[getFormStep] == 1 ? 'circle-clean' : 'empty'"
+        :variant="BiketagQueueFormSteps[getFormStep] == 1 ? 'circle-clean' : 'empty'"
         text="1"
       />
       <img
-        v-if="BiketagFormSteps[getFormStep] == 1.5"
+        v-if="BiketagQueueFormSteps[getFormStep] == 1.5"
         class="step__arrow"
         :src="arrowSvg"
         alt="next"
       />
       <span v-else class="step__line" :style="`background-image: url(${lineSvg})`" />
       <bike-tag-button
-        :variant="BiketagFormSteps[getFormStep] == 2 ? 'circle-clean' : 'empty'"
+        :variant="BiketagQueueFormSteps[getFormStep] == 2 ? 'circle-clean' : 'empty'"
         text="2"
       />
       <img
-        v-if="BiketagFormSteps[getFormStep] == 2.5"
+        v-if="BiketagQueueFormSteps[getFormStep] == 2.5"
         class="step__arrow"
         :src="arrowSvg"
         alt="next"
@@ -49,7 +52,7 @@
       <span class="step__line" :style="`background-image: url(${lineSvg})`" />
       <bike-tag-button
         :variant="
-          BiketagFormSteps[getFormStep] >= 3 && BiketagFormSteps[getFormStep] <= 4
+          BiketagQueueFormSteps[getFormStep] >= 3 && BiketagQueueFormSteps[getFormStep] <= 4
             ? 'circle-clean'
             : 'empty'
         "
@@ -58,22 +61,24 @@
     </div>
 
     <div v-if="!uploadInProgress" class="mb-5">
-      <div v-if="getFormStep === BiketagFormSteps[BiketagFormSteps.addFoundImage]">
+      <div v-if="getFormStep === BiketagQueueFormSteps[BiketagQueueFormSteps.addFoundImage]">
         <queue-found :tag="getPlayerTag" @submit="onQueueSubmit" />
       </div>
-      <div v-else-if="getFormStep === BiketagFormSteps[BiketagFormSteps.roundJoined]">
+      <div v-else-if="getFormStep === BiketagQueueFormSteps[BiketagQueueFormSteps.roundJoined]">
         <queue-joined :tag="getPlayerTag" />
       </div>
-      <div v-else-if="getFormStep === BiketagFormSteps[BiketagFormSteps.addMysteryImage]">
+      <div v-else-if="getFormStep === BiketagQueueFormSteps[BiketagQueueFormSteps.addMysteryImage]">
         <queue-mystery :tag="getPlayerTag" @submit="onQueueSubmit" />
       </div>
-      <div v-else-if="getFormStep === BiketagFormSteps[BiketagFormSteps.addNewBikeTag]">
+      <div v-else-if="getFormStep === BiketagQueueFormSteps[BiketagQueueFormSteps.addNewBikeTag]">
         <queue-submit :tag="getPlayerTag" @submit="onQueueSubmit" />
       </div>
-      <div v-else-if="getFormStep === BiketagFormSteps[BiketagFormSteps.roundPosted]">
+      <div v-else-if="getFormStep === BiketagQueueFormSteps[BiketagQueueFormSteps.roundPosted]">
         <queue-posted :tag="getPlayerTag" @submit="onQueueSubmit" />
       </div>
-      <div v-else-if="getFormStep === BiketagFormSteps[BiketagFormSteps.shareBikeTagPost]">
+      <div
+        v-else-if="getFormStep === BiketagQueueFormSteps[BiketagQueueFormSteps.shareBikeTagPost]"
+      >
         <queue-posted-share :tag="getPlayerTag" />
       </div>
       <span v-if="isSubmittingData()" class="player-agree">
@@ -101,7 +106,7 @@
 <script setup name="QueueBikeTagView">
 import { ref, inject, computed, watchEffect, onMounted } from 'vue'
 import { useBikeTagStore } from '@/store/index'
-import { BiketagFormSteps } from '@/common/types'
+import { BiketagQueueFormSteps } from '@/common/types'
 import { useTimer } from 'vue-timer-hook'
 import { sendNetlifyForm, sendNetlifyError } from '@/common/utils'
 import { useI18n } from 'vue-i18n'
@@ -147,12 +152,13 @@ const getGameName = computed(() => store.getGameName)
 const getPlayerId = computed(() => store.getPlayerId)
 
 // methods
-const isViewingQueue = () => getFormStep.value === BiketagFormSteps[BiketagFormSteps.viewPosted]
+const isViewingQueue = () =>
+  getFormStep.value === BiketagQueueFormSteps[BiketagQueueFormSteps.viewPosted]
 const isSubmittingData = () =>
   !(
-    getFormStep.value === BiketagFormSteps[BiketagFormSteps.queueJoined] ||
-    getFormStep.value === BiketagFormSteps[BiketagFormSteps.queuePosted] ||
-    getFormStep.value === BiketagFormSteps[BiketagFormSteps.queuePostedShare]
+    getFormStep.value === BiketagQueueFormSteps[BiketagQueueFormSteps.queueJoined] ||
+    getFormStep.value === BiketagQueueFormSteps[BiketagQueueFormSteps.queuePosted] ||
+    getFormStep.value === BiketagQueueFormSteps[BiketagQueueFormSteps.queuePostedShare]
   )
 async function onQueueSubmit(newTagSubmission) {
   const { tag, formAction, formData, storeAction } = newTagSubmission
diff --git a/src/views/Round.vue b/src/views/Round.vue
index c083e6d7..6686257c 100644
--- a/src/views/Round.vue
+++ b/src/views/Round.vue
@@ -17,7 +17,9 @@
       </p>
     </div>
     <span class="tag-number">
-      #{{ getCurrentBikeTag?.tagnumber + (getFormStep > BiketagFormSteps.addFoundImage ? 1 : 0) }}
+      #{{
+        getCurrentBikeTag?.tagnumber + (getFormStep > BiketagQueueFormSteps.addFoundImage ? 1 : 0)
+      }}
     </span>
     <div>
       <queue-view />
@@ -28,7 +30,7 @@
 <script setup name="QueueBikeTagView">
 import { ref, computed, onMounted } from 'vue'
 import { useBikeTagStore } from '@/store/index'
-import { BiketagFormSteps } from '@/common/types'
+import { BiketagQueueFormSteps } from '@/common/types'
 import { useTimer } from 'vue-timer-hook'
 // import { sendNetlifyForm, sendNetlifyError } from '@/common/utils'
 
@@ -56,7 +58,7 @@ const getCurrentBikeTag = computed(() => store.getCurrentBikeTag)
 const getQueuedTags = computed(() => store.getQueuedTags)
 
 function isViewingQueue() {
-  return getFormStep.value === BiketagFormSteps[BiketagFormSteps.viewRound]
+  return getFormStep.value === BiketagQueueFormSteps[BiketagQueueFormSteps.viewRound]
 }
 
 // created
diff --git a/vite.config.ts b/vite.config.ts
index 3d33cf44..b22ac10e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,8 +6,9 @@ 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'
 
-const host = process.env.HOST ?? 'biketag.org'
+const host = process.env.HOST ?? BikeTagDefaults.host
 // https://vitejs.dev/config/
 export default defineConfig({
   resolve: {
@@ -29,12 +30,12 @@ export default defineConfig({
     vue(),
     EnvironmentPlugin({
       /* Application Configuration */
-      ACCESS_TOKEN: process.env.ACCESS_TOKEN ?? '8b4e2b86a724bf3f39d6766de6e67212',
+      APP_ID: process.env.APP_ID ?? BikeTagDefaults.appId,
+      ACCESS_TOKEN: process.env.ACCESS_TOKEN ?? BikeTagDefaults.accessToken,
       CONTEXT: process.env.CONTEXT ?? null,
-      APP_ID: process.env.APP_ID ?? 'com.app.biketag',
-      ADMIN_EMAIL: process.env.ADMIN_EMAIL ?? 'biketag@biketag.org',
-      AMBASSADOR_ROLE: process.env.AMBASSADOR_ROLE ?? 'rol_iET51vzIn8z6Utz0',
-      PLAYER_ROLE: process.env.PLAYER_ROLE ?? 'rol_pcbQ68Q9L0yn1o3O',
+      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,
@@ -43,38 +44,38 @@ export default defineConfig({
       A_M_CID: process.env.A_M_CID ?? null,
       /* Bugs Configuration */
       B_AKEY: process.env.B_AKEY ?? null,
-      /* Google Configuration */
-      G_AKEY: process.env.G_AKEY ?? null,
-      G_CID: process.env.G_CID ?? null,
-      G_CSECRET: process.env.G_CSECRET ?? null,
-      G_EMAIL: process.env.G_EMAIL ?? null,
-      G_PASS: process.env.G_PASS ?? null,
-      G_RTOKEN: process.env.G_RTOKEN ?? 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 ?? 'ItsABikeTagGame',
+      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 ?? null,
-      IA_CSECRET: process.env.IA_CSECRET ?? null,
-      IA_RTOKEN: process.env.IA_RTOKEN ?? null,
-      IA_TOKEN: process.env.IA_TOKEN ?? null,
+      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 ?? null,
-      I_CSECRET: process.env.I_CSECRET ?? null,
-      I_RTOKEN: process.env.I_RTOKEN ?? null,
-      I_TOKEN: process.env.I_TOKEN ?? null,
+      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 ?? 'https://cdn.sanity.io/images/',
-      SA_DSET: process.env.SA_DSET ?? null,
-      SA_PID: process.env.SA_PID ?? null,
-      SA_TOKEN: process.env.SA_TOKEN ?? null,
+      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 ?? 'https://cdn.sanity.io/images/',
-      S_DSET: process.env.S_DSET ?? null,
-      S_PID: process.env.S_PID ?? null,
-      S_TOKEN: process.env.S_TOKEN ?? null,
+      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,
     }),
     VitePWA({
       srcDir: 'src',
@@ -84,10 +85,10 @@ export default defineConfig({
       includeAssets: ['**/*'],
       // includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'mask-icon.png'],
       manifest: {
-        name: 'BikeTag',
-        short_name: 'BikeTag',
-        description: 'BikeTag is a photo mystery tag game played on bicycles. No login required.',
-        theme_color: '#000000',
+        name: BikeTagDefaults.manifest.name,
+        short_name: BikeTagDefaults.manifest.shortName,
+        description: BikeTagDefaults.manifest.description,
+        theme_color: BikeTagDefaults.manifest.themeColor,
         icons: [
           {
             src: `https://${host}/android-chrome-192x192.png`,