fixed #26 + loaded matches now still loaded after visiting match

src/views/Home.vue

@@ -43,11 +43,13 @@
 <script>
 import {GoToPlayer, SaveLastVisitedToLocalStorage, setTitle} from "../utils";
 import {onBeforeMount, ref} from "vue";
+import {useStore} from "vuex";
 
 export default {
   name: 'Home',
   setup() {
     setTitle('Home')
+    const store = useStore()
 
     const recentVisited = ref([])
 
@@ -78,7 +80,10 @@ export default {
       loadRecentVisited()
     }
 
-    onBeforeMount(() => loadRecentVisited())
+    onBeforeMount(() => {
+      loadRecentVisited()
+      store.commit('resetPlayerDetails')
+    })
 
     return {recentVisited, GoToPlayer, removeRecentVisited}
   }

src/views/Player.vue

@@ -138,9 +138,11 @@
             <tbody>
             <tr v-for="match in data.matches"
                 :key="match.match_id"
-                :class="GetWinLoss(match.match_result, match.stats.team_id)"
+                :class="GetWinLoss(match.match_result, match.stats.team_id) + (match.vac || match.game_ban ? ' ban' : '')"
+                :title="match.vac ? 'VAC-banned player in this game' : match.game_ban ? 'Game-banned player in this game' : ''"
                 class="match"
-                @click="GoToMatch(match.match_id)">
+                @click="GoToMatch(match.match_id)"
+            >
               <td class="td-map text-center">
                 <i v-if="match.parsed" class="far fa-chart-bar parsed" style="cursor: help"
                    title="Demo has been parsed for additional data"></i>
@@ -299,7 +301,7 @@
 </template>
 
 <script>
-import {onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, watch} from "vue";
+import {onBeforeMount, onMounted, reactive, ref, watch} from "vue";
 import {useStore} from "vuex";
 import {
   constructAvatarUrl,
@@ -366,7 +368,7 @@ export default {
         }
     )
 
-    const SetPlayerData = () => {
+    const SetPlayerData = async () => {
       data.tracked = store.state.playerDetails.tracked
       if (store.state.playerDetails.matches)
         data.matches = store.state.playerDetails.matches
@@ -387,7 +389,7 @@ export default {
       })
 
       if (store.state.playerDetails.matches)
-        LoadImage(data.matches[0].map ? data.matches[0].map : 'random')
+        await LoadImage(data.matches[0].map ? data.matches[0].map : 'random')
 
       let player = {
         'steamid64': store.state.playerDetails.steamid64,
@@ -406,12 +408,15 @@ export default {
         data.playerMeta = await getPlayerMeta(props.id, displayCounter)
 
         if (res === 200 && resData) {
-          store.commit({
+          if (resData.steamid64 !== store.state.playerDetails.steamid64) {
-            type: 'changePlayerDetails',
+            store.commit('resetPlayerDetails')
-            data: resData
+            store.commit({
-          })
+              type: 'changePlayerDetails',
+              data: resData
+            })
+          }
 
-          SetPlayerData()
+          await SetPlayerData()
 
           console.log(store.state.playerDetails)
         } else {
@@ -517,14 +522,12 @@ export default {
         data.best_maps.splice(displayCounter, data.best_maps.length - displayCounter)
     })
 
-    onBeforeUnmount(() => {
+    onMounted(async () => {
-      store.commit('resetPlayerDetails')
-    })
-
-    onMounted(() => {
       const height = window.innerHeight - NAV_HEIGHT - FOOTER_HEIGHT
       const wrapper = document.querySelector('.wrapper')
       wrapper.style.minHeight = height + 'px'
+
+      await GetPlayer()
     })
 
     return {
@@ -658,30 +661,6 @@ export default {
   }
 }
 
-.win {
-  background: linear-gradient(90deg, rgba(0, 255, 0, .2) 0%, rgba(0, 255, 0, .1) 5%, rgba(20, 20, 20, .8) 15%, rgba(20, 20, 20, .8) 100%);
-
-  &:hover {
-    background: linear-gradient(90deg, rgba(0, 255, 0, .2) 0%, rgba(0, 255, 0, .1) 5%, rgba(30, 30, 30, .9) 15%, rgba(30, 30, 30, .9) 100%);
-  }
-}
-
-.loss {
-  background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.1) 5%, rgba(20, 20, 20, .8) 15%, rgba(20, 20, 20, .8) 100%);
-
-  &:hover {
-    background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.1) 5%, rgba(30, 30, 30, .9) 15%, rgba(30, 30, 30, .9) 100%);
-  }
-}
-
-.draw {
-  background: linear-gradient(90deg, rgba(255, 255, 0, 0.2) 0%, rgba(255, 255, 0, 0.1) 5%, rgba(20, 20, 20, .8) 15%, rgba(20, 20, 20, .8) 100%);
-
-  &:hover {
-    background: linear-gradient(90deg, rgba(255, 255, 0, 0.2) 0%, rgba(255, 255, 0, 0.1) 5%, rgba(30, 30, 30, .9) 15%, rgba(30, 30, 30, .9) 100%);
-  }
-}
-
 .match-container {
   display: flex;
   flex-direction: row;
@@ -771,8 +750,8 @@ export default {
         .end {
           display: flex;
           width: 45%;
-          justify-content: end;
+          justify-content: flex-end;
-          align-items: end;
+          align-items: flex-end;
         }
       }
     }
@@ -851,9 +830,9 @@ table {
       .parsed {
         position: absolute;
         left: 7px;
-        top: 27px;
+        bottom: 23px;
         color: var(--bs-warning);
-        font-size: 1.5rem;
+        font-size: 1.7rem;
       }
 
       img {
@@ -898,6 +877,106 @@ table {
   }
 
   .match {
+    $first: rgb(0, 0, 0);
+    $last: rgb(0, 0, 0);
+    $win: false;
+    $loss: false;
+    $draw: false;
+    $ban: false;
+
+    &.win {
+      $first: rgb(0, 255, 0);
+      background: linear-gradient(to right,
+          rgba($first, 0.2) 0%,
+          rgba($first, 0.1) 15%,
+          rgba(0, 0, 0, 0.4) 30%,
+          rgba(0, 0, 0, 0.4) 70%,
+          rgba($last, 0.6) 80%,
+          rgba($last, 0.6) 100%
+      );
+
+      &:hover {
+        background: linear-gradient(to right,
+            rgba($first, 0.3) 0%,
+            rgba($first, 0.2) 15%,
+            rgba(0, 0, 0, 0.5) 30%,
+            rgba(0, 0, 0, 0.5) 70%,
+            rgba($last, 0.7) 80%,
+            rgba($last, 0.7) 100%
+        );
+      }
+    }
+
+    &.draw {
+      $first: rgb(255, 255, 0);
+      background: linear-gradient(to right,
+          rgba($first, 0.2) 0%,
+          rgba($first, 0.1) 15%,
+          rgba(0, 0, 0, 0.4) 30%,
+          rgba(0, 0, 0, 0.4) 70%,
+          rgba($last, 0.6) 80%,
+          rgba($last, 0.6) 100%
+      );
+
+      &:hover {
+        background: linear-gradient(to right,
+            rgba($first, 0.3) 0%,
+            rgba($first, 0.2) 15%,
+            rgba(0, 0, 0, 0.5) 30%,
+            rgba(0, 0, 0, 0.5) 70%,
+            rgba($last, 0.7) 80%,
+            rgba($last, 0.7) 100%
+        );
+      }
+    }
+
+    &.loss {
+      $first: rgb(255, 0, 0);
+      background: linear-gradient(to right,
+          rgba($first, 0.2) 0%,
+          rgba($first, 0.1) 15%,
+          rgba(0, 0, 0, 0.4) 30%,
+          rgba(0, 0, 0, 0.4) 70%,
+          rgba($last, 0.6) 80%,
+          rgba($last, 0.6) 100%
+      );
+
+      &:hover {
+        background: linear-gradient(to right,
+            rgba($first, 0.3) 0%,
+            rgba($first, 0.2) 15%,
+            rgba(0, 0, 0, 0.5) 30%,
+            rgba(0, 0, 0, 0.5) 70%,
+            rgba($last, 0.7) 80%,
+            rgba($last, 0.7) 100%
+        );
+      }
+    }
+
+
+    &.ban {
+      $last: rgb(93, 3, 3);
+      background: linear-gradient(to right,
+          rgba($first, 0.2) 0%,
+          rgba($first, 0.1) 15%,
+          rgba(0, 0, 0, 0.4) 30%,
+          rgba(0, 0, 0, 0.4) 70%,
+          rgba($last, 0.6) 80%,
+          rgba($last, 0.6) 100%
+      );
+
+      &:hover {
+        background: linear-gradient(to right,
+            rgba($first, 0.3) 0%,
+            rgba($first, 0.2) 15%,
+            rgba(0, 0, 0, 0.5) 30%,
+            rgba(0, 0, 0, 0.5) 70%,
+            rgba($last, 0.7) 80%,
+            rgba($last, 0.7) 100%
+        );
+      }
+    }
+
     border-bottom: 1px solid rgba(73, 73, 73, 0.73);
 
     &:last-child {
@@ -908,7 +987,6 @@ table {
       cursor: pointer;
     }
   }
-
 }
 
 @media screen and (max-width: 768px) {