fix attempt on buggy player search

src/components/Nav.vue

@@ -104,12 +104,7 @@ export default {
           })
         }
 
-        if (vanityPattern.test(store.state.vanityUrl)) {
-          store.commit({
-            type: 'changeVanityUrl',
-            id: input
-          })
-        } else {
+        if (store.state.vanityUrl && !vanityPattern.test(store.state.vanityUrl)) {
           data.error = 'Only alphanumeric symbols, "_", and "-", between 3-32 characters'
           store.commit({
             type: 'changeVanityUrl',
@@ -202,9 +197,9 @@ nav {
   max-width: 100vw;
   height: 70px;
   width: 100vw;
-  background: rgba(16, 18, 26, 1);
+  background: rgba(16, 18, 26, .9);
+  box-shadow: 0 1px 10px 0 #111;
   z-index: 2;
-
   ul {
     display: flex;
 

src/router/index.js

@@ -75,7 +75,14 @@ const routes = [
           score: lazyLoadComponent('DamageSite')
         }
       }
-    ]
+    ],
+    scrollBehavior(to, from, savedPosition) {
+      if (savedPosition) {
+        return savedPosition
+      } else {
+        return {x: 0, y: 0}
+      }
+    }
   },
   {
     path: '/:pathMatch(.*)*',

src/views/Explore.vue

@@ -7,7 +7,7 @@
       <MatchesTable v-if="data.matches" :key="data.matches" :explore="true" :matches="data.matches"/>
 
       <div class="load-more text-center">
-        <button class="btn border-2 btn-outline-info"
+        <button :key="scrollToPos(store.state.scroll_state)" class="btn border-2 btn-outline-info"
                 @click="setMoreMatches">Load More
         </button>
       </div>
@@ -16,9 +16,11 @@
 </template>
 
 <script>
-import {onMounted, reactive} from "vue";
-import {GetMatches, LoadImage, MatchNotParsedTime, LoadMoreMatchesExplore} from "@/utils";
+import {onBeforeUnmount, onMounted, reactive} from "vue";
+import {GetMatches, LoadImage, LoadMoreMatchesExplore, MatchNotParsedTime, scrollToPos} from "@/utils";
 import MatchesTable from "@/components/MatchesTable";
+import {useStore} from "vuex";
+import router from "@/router";
 
 export default {
   name: 'Explore',
@@ -27,6 +29,8 @@ export default {
   setup() {
     document.title = "Matches | csgoWTF"
 
+    const store = useStore()
+
     const data = reactive({
       matches: []
     })
@@ -36,6 +40,8 @@ export default {
 
       res.forEach(e => data.matches.push(e))
 
+      scrollToPos(window.scrollY)
+
       console.log(data.matches)
     }
 
@@ -50,10 +56,23 @@ export default {
         await LoadImage('random')
       }
 
+      scrollToPos(store.state.scroll_state)
+
       console.log(data.matches)
     })
 
-    return {data, setMoreMatches}
+    onBeforeUnmount(() => {
+      store.commit('changeScrollState', window.scrollY)
+
+      router.beforeEach((to, from, next) => {
+        if (!to.fullPath.match('/match/') && !from.fullPath.match('/match/')) {
+          store.commit('changeScrollState', 0)
+        }
+        next()
+      })
+    })
+
+    return {data, setMoreMatches, store, scrollToPos}
   }
 }
 </script>

src/views/Player.vue

@@ -226,13 +226,15 @@ import {
   LoadImage,
   LoadMoreMatches,
   MatchNotParsedTime,
-  SaveLastVisitedToLocalStorage, scrollToPos,
+  SaveLastVisitedToLocalStorage,
+  scrollToPos,
   setTitle,
   sortObjectValue,
   TrackMe
 } from "../utils";
 import {FOOTER_HEIGHT, NAV_HEIGHT} from "@/constants";
 import MatchesTable from "@/components/MatchesTable";
+import router from "@/router";
 
 export default {
   name: 'Player',
@@ -276,8 +278,6 @@ export default {
     )
 
     const SetPlayerData = async () => {
-      await store.commit('changeScrollState', 0)
-
       data.tracked = store.state.playerDetails.tracked
       if (store.state.playerDetails.matches)
         data.matches = store.state.playerDetails.matches
@@ -360,6 +360,7 @@ export default {
       refreshButton.classList.add('fa-fw')
       refreshButton.classList.remove('fa-refresh')
       refreshButton.classList.add('fa-spinner')
+      scrollToPos(0)
 
       await GetPlayer(true).then(() => {
         setTimeout(() => {
@@ -455,10 +456,19 @@ export default {
 
       await GetPlayer()
       data.playerMeta = await GetPlayerMeta(props.id, displayCounter)
+
+      scrollToPos(store.state.scroll_state)
     })
 
     onBeforeUnmount(() => {
       store.commit('changeScrollState', window.scrollY)
+
+      router.beforeEach((to, from, next) => {
+        if (to.fullPath.match('/player/') && from.fullPath.match('/player/')) {
+          store.commit('changeScrollState', 0)
+        }
+        next()
+      })
     })
 
     return {
@@ -475,9 +485,9 @@ export default {
       FixMapName,
       GoToPlayer,
       MatchNotParsedTime,
+      scrollToPos,
       setMoreMatches,
-      setDmgGraphWidth,
-      scrollToPos
+      setDmgGraphWidth
     }
   }
 }