Merge pull request #235 from KenEucker/develop

2.2.0

.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"
   }

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"
     }
   }
 }

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'

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()
   }
 }

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',

src/common/index.ts

@@ -2,4 +2,3 @@ export * from './constants'
 export * from './types'
 export * from './utils'
 export * from './uuid'
-

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[]

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',
+  })
+}

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) {

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()

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})

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'

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)
     }