Implement global alert for system messages.

README.md

@@ -9,7 +9,7 @@ A single page web app that helps Gods Unchained players share their challenge co
 - View [roadmap](https://github.com/Soleone/gunchained/blob/master/ROADMAP.md) for potential future changes.
 - Built using Vue, Vuetify, Vuex, DayJS.
 - Backed by Firebase for authentication and storage
-- Hosted for free using
+- Hosted for free using Github pages
 - Might be extended eventually to have more than the Arena features for challenge codes.
 
 ## Contributing

ROADMAP.md

@@ -54,6 +54,8 @@ None of this is guaranteed to be worked on by anyone.
 
 ## Ideas
 
+### User facing
+
 - Users can send comments to available challenges' players to ask for status updates
   - Requires inbox for players to receive these comments
 - Player profile fields:
@@ -68,3 +70,7 @@ None of this is guaranteed to be worked on by anyone.
 - Announcement post? Voice?
 - Mark challenge as connected to help other players to try to queue with you anymore
 - Quick copy button
+
+### Implementation details
+
+- Add test suite

src/App.vue

@@ -54,6 +54,15 @@
     </v-app-bar>
 
     <v-main>
+      <v-alert
+        v-if="appStatus.visible"
+        :color="appStatus.color"
+        :type="appStatus.type"
+        dismissible
+        class="ma-3"
+      >
+        {{ appStatus.message }}
+      </v-alert>
       <router-view></router-view>
 
       <v-snackbar
@@ -105,7 +114,8 @@ export default {
     ...mapGetters({
       userName: 'userName',
       isAvailableEnabled: 'isAvailableEnabled',
-      player: 'playerObject'
+      player: 'playerObject',
+      appStatus: 'appStatus'
     })
   },
   created() {
@@ -153,7 +163,8 @@ export default {
       handler() {
         if (!this.user) return
 
-        console.log('[Player] User was set. Trying to bind Player ref')
+        console.log('[Player] User was set. Trying to bind App and Player ref')
+        this.$store.dispatch('bindAppRef')
         this.$store.dispatch('bindPlayerRef')
       }
     }

src/components/ChallengeList.vue

@@ -3,7 +3,7 @@
     <v-row>
       <v-spacer></v-spacer>
       <v-col cols="12" :lg="columnSizeLg">
-        <v-alert v-if="!user" type="info">
+        <v-alert v-if="!user" type="info" text>
           Sign in on the top right
           <span class="d-none d-sm-inline">
             to share your challenge code.

src/store/index.js

@@ -17,7 +17,8 @@ export default new Vuex.Store({
       message: null,
       color: 'success'
     },
-    reloadKey: 0
+    reloadKey: 0,
+    app: {}
   },
   mutations: {
     ...vuexfireMutations,
@@ -48,7 +49,6 @@ export default new Vuex.Store({
       // create a copy that excludes id
       const newPlayer = { ...player }
       newPlayer.challenge = player.challenge.toFire()
-      console.log('new player: ', newPlayer)
       return store
         .collection('players')
         .doc(state.user.uid)
@@ -67,7 +67,6 @@ export default new Vuex.Store({
     },
     updateAvailability({ dispatch, state }, player) {
       const newPlayer = { challenge: player.challenge.toFire() }
-      console.log('new player: ', newPlayer)
       return store
         .collection('players')
         .doc(state.user.uid)
@@ -105,6 +104,12 @@ export default new Vuex.Store({
           reset: false
         }
       )
+    }),
+    bindAppRef: firestoreAction(({ bindFirestoreRef }) => {
+      console.log('[Vuex] Binding app instance from Firestore')
+      return bindFirestoreRef('app', store.collection('app').doc('instance'), {
+        reset: false
+      })
     })
   },
   getters: {
@@ -128,17 +133,10 @@ export default new Vuex.Store({
         })
     },
     isAvailableEnabled(state) {
-      if (!state.player) {
-        return false
-      } else if (!state.player.challenge) {
-        return false
-      } else if (!state.player.challenge.code) {
-        return false
-      } else if (state.player.challenge.code === '') {
-        return false
-      } else {
-        return true
-      }
+      return !!state.player.challenge?.code
+    },
+    appStatus(state) {
+      return state.app.status || {}
     }
   },
   modules: {}

src/views/Player.vue

@@ -4,7 +4,7 @@
       <v-row>
         <v-spacer></v-spacer>
         <v-col cols="12" :lg="columnSizeLg * 2">
-          <v-alert v-if="!isAvailableEnabled" type="info">
+          <v-alert v-if="!isAvailableEnabled" type="info" text>
             Once you entered a challenge code you can set yourself to available
             using the switch in the top menu bar.
           </v-alert>