added info-modal + updated error handling

src/components/DamageSite.vue

@@ -30,7 +30,7 @@ export default {
     })
 
     const getWeaponDamage = async () => {
-      const resData = await GetWeaponDmg(store.state.matchDetails.match_id)
+      const resData = await GetWeaponDmg(store, store.state.matchDetails.match_id)
       data.equipment_map = resData.equipment_map
       data.stats = resData.stats
     }

src/components/Details.vue

@@ -29,7 +29,7 @@ export default {
     })
 
     const getWeaponDamage = async () => {
-      const resData = await GetWeaponDmg(store.state.matchDetails.match_id)
+      const resData = await GetWeaponDmg(store, store.state.matchDetails.match_id)
       data.spray = resData.spray
     }
 

src/components/EqValueGraph.vue

@@ -54,7 +54,7 @@ export default {
     }
 
     const parseObject = async () => {
-      data.rounds = await GetPlayerValue(store.state.matchDetails.match_id)
+      data.rounds = await GetPlayerValue(store, store.state.matchDetails.match_id)
 
       for (const round in data.rounds) {
         for (const player in data.rounds[round]) {

src/components/InfoModal.vue

@@ -0,0 +1,99 @@
+<template>
+  <div v-if="infos.data" id="modal">
+    <div v-for="(info, id) in infos.data" :key="id" class="custom-modal">
+      <div :class="info.type === 'error'
+              ? 'bg-danger text-white'
+              : info.type === 'warning'
+              ? 'bg-warning text-secondary'
+              : info.type === 'success'
+              ? 'bg-success text-white'
+              : 'bg-secondary text-white'"
+           class="card text-end">
+        <div class="card-header d-flex justify-content-between">
+          <div>
+            <span v-if="info.type !== 'success'">
+              Error <span class="mx-2">-</span> {{ info.statuscode }}
+            </span>
+            <span v-else>
+              Success
+            </span>
+          </div>
+          <button aria-label="Close" class="btn-close" type="button" @click="closeModal(id)"/>
+        </div>
+        <div class="card-body">
+          {{ info.message }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {useStore} from "vuex";
+import {onMounted, reactive} from "vue";
+
+export default {
+  name: "InfoModal",
+  setup() {
+    const store = useStore()
+    const infos = reactive({
+      data: []
+    })
+
+    const closeModal = (id) => {
+      store.commit('removeInfoState', id)
+    }
+
+    onMounted(() => {
+      store.subscribe(((mutation, state) => {
+        if (mutation.type === 'changeInfoState') {
+          infos.data = state.info
+
+          setTimeout(() => {
+            closeModal(store.state.info.length - 1)
+          }, 5000)
+        }
+      }))
+    })
+
+    return {infos, closeModal}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#modal {
+  --height: 100px;
+
+  .card {
+    z-index: 10;
+    position: absolute;
+    right: 1rem;
+    opacity: .8;
+    width: min(100vw - 2rem, 50ch);
+
+    .btn-close {
+      background-color: white;
+      opacity: .5;
+    }
+  }
+
+  @for $i from 1 through 10 {
+    .custom-modal:nth-of-type(#{$i}) {
+      .card {
+        @if $i == 1 {
+          margin: 1rem 0;
+        } @else {
+          margin-top: calc(#{$i}rem + (#{$i} - 1) * var(--height));
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  #modal {
+    --height: 120px;
+  }
+}
+</style>

src/components/Nav.vue

@@ -40,9 +40,6 @@
           >
             Search!
           </button>
-          <div v-if="data.error" class="alert alert-warning" role="alert">
-            {{ data.error }}
-          </div>
         </form>
       </div>
 
@@ -54,6 +51,7 @@
 import {reactive} from "vue";
 import {useStore} from 'vuex'
 import {closeNav, GetUser, GoToPlayer} from '@/utils'
+import {StatusCodes as STATUS} from "http-status-codes";
 
 export default {
   name: 'Nav',
@@ -61,7 +59,6 @@ export default {
     const store = useStore()
     const data = reactive({
       searchInput: '',
-      error: ''
     })
 
     const parseSearch = async () => {
@@ -70,7 +67,6 @@ export default {
       const profileUrlPattern = 'https://steamcommunity.com/profiles/'
       const id64Pattern = /^\d{17}$/
       const vanityPattern = /^[A-Za-z0-9-_]{3,32}$/
-      // const shareCodePattern = /.*CSGO(?:-?[ABCDEFGHJKLMNOPQRSTUVWXYZabcdefhijkmnopqrstuvwxyz23456789]{5}){5}.*/
 
       store.commit({
         type: 'changeVanityUrl',
@@ -108,15 +104,23 @@ export default {
         }
 
         if (store.state.vanityUrl && !vanityPattern.test(store.state.vanityUrl)) {
-          data.error = 'Only alphanumeric symbols, "_", and "-", between 3-32 characters'
+          store.commit({
+            type: 'changeInfoState',
+            data: {
+              statuscode: STATUS.NOT_ACCEPTABLE,
+              message: 'Only alphanumeric symbols, "_", and "-", between 3-32 characters',
+              type: 'warning'
+            }
+          })
           store.commit({
             type: 'changeVanityUrl',
             id: ''
           })
+          data.searchInput = ''
         }
 
         if (store.state.id64 !== '' || store.state.vanityUrl !== '') {
-          const resData = await GetUser(store.state.vanityUrl || store.state.id64)
+          const resData = await GetUser(store, store.state.vanityUrl || store.state.id64)
 
           if (resData) {
             data.searchInput = ''
@@ -136,10 +140,6 @@ export default {
             }
           }
         }
-
-        setTimeout(() => {
-          data.error = ''
-        }, 5000)
       }
     }