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