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

2021-10-31 02:51:58 +01:00
parent c346dd13e8
commit 9e8c840024
2 changed files with 128 additions and 45 deletions
--- a/src/views/Home.vue
+++ b/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}
  }
--- a/src/views/Player.vue
+++ b/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({
-            type: 'changePlayerDetails',
-            data: resData
-          })
+          if (resData.steamid64 !== store.state.playerDetails.steamid64) {
+            store.commit('resetPlayerDetails')
+            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(() => {
-      store.commit('resetPlayerDetails')
-    })
-
-    onMounted(() => {
+    onMounted(async () => {
      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;
-          align-items: end;
+          justify-content: flex-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) {