some more refactoring

src/store/index.js

@@ -4,9 +4,22 @@ export default createStore({
   state: {
     id64: '',
     vanityUrl: '',
-    matchDetails: {}
+    matchDetails: {},
+    playerDetails: {}
   },
   mutations: {
+    changeId64(state, payload) {
+      state.id64 = payload.id
+    },
+    changeVanityUrl(state, payload) {
+      state.vanityUrl = payload.id
+    },
+    changeMatchDetails(state, payload) {
+      state.matchDetails = payload.data
+    },
+    changePlayerDetails(state, payload) {
+      state.playerDetails = payload.data
+    },
   },
   actions: {
   },

src/utils/Utils.js

@@ -45,3 +45,24 @@ export const getPlayerArr = (stats, team, color) => {
   return arr
 }
 
+export const constructAvatarUrl = (hash, size) => {
+  const base = 'https://steamcdn-a.akamaihd.net/steamcommunity/public/images/avatars'
+  const imgSize = size ? `_${size}` : ''
+  const hashDir = hash.substring(0, 2)
+
+  return `${base}/${hashDir}/${hash}${imgSize}.jpg`
+}
+
+export const GetAvgRank = (stats) => {
+  let count = 0
+  let fullRank = 0
+
+  stats.map(player => {
+    if (player.rank?.old) {
+      fullRank += player.rank?.old
+      count += 1
+    }
+  })
+
+  return count === 0 ? 0 : Math.floor(fullRank / count)
+}

src/utils/index.js

@@ -4,7 +4,7 @@ import {SaveLastVisitedToLocalStorage} from "./LocalStorage";
 import {GetHLTV_1} from "./HLTV";
 import {DisplayRank, LoadImage} from "./Display";
 import {GetUser, TrackMe} from "./ApiRequests";
-import {setTitle, GetWinLoss, truncate, checkStatEmpty, getPlayerArr} from "./Utils";
+import {setTitle, GetWinLoss, truncate, checkStatEmpty, getPlayerArr, constructAvatarUrl, GetAvgRank} from "./Utils";
 
 export {
   FormatDate, FormatFullDuration, FormatFullDate, FormatDuration,
@@ -13,5 +13,5 @@ export {
   GetHLTV_1,
   DisplayRank, LoadImage,
   GetUser, TrackMe,
-  setTitle, GetWinLoss, truncate, checkStatEmpty, getPlayerArr
+  setTitle, GetWinLoss, truncate, checkStatEmpty, getPlayerArr, constructAvatarUrl, GetAvgRank
 }

src/views/Match.vue

@@ -79,9 +79,9 @@
 </template>
 
 <script>
-import {onBeforeMount, onMounted, reactive, watch} from "vue";
+import {onBeforeMount, onBeforeUnmount, onMounted, reactive, watch} from "vue";
 import axios from 'axios'
-import {DisplayRank, FormatFullDate, GetHLTV_1, GoToLink, GoToPlayer, LoadImage} from "../utils";
+import {DisplayRank, FormatFullDate, GetAvgRank, GoToLink, LoadImage} from "../utils";
 import {useStore} from "vuex";
 import {useRoute} from 'vue-router'
 
@@ -92,7 +92,7 @@ export default {
     const store = useStore()
     const route = useRoute()
 
-    store.state.matchDetails = {}
+    const matchIdPattern = /^\d{19}$/
 
     // Refs
     const data = reactive({
@@ -105,56 +105,57 @@ export default {
 
     // Functions
     const GetMatch = () => {
+      if (matchIdPattern.test(props.match_id))
         axios
             .get(`${process.env.VUE_APP_API_URL}/match/${props.match_id}`)
             .then((response) => {
               document.title = `${response.data.map} | csgoWTF`
-            data.matchDetails = response.data
+              store.commit({
-            data.stats = response.data.stats
+                type: 'changeMatchDetails',
-            data.score = response.data.score
+                data: response.data
+              })
 
-            store.state.matchDetails = response.data
+              data.matchDetails = store.state.matchDetails
+              data.stats = data.matchDetails.stats
+              data.score = data.matchDetails.score
 
               LoadImage(data.matchDetails.map ? data.matchDetails.map : 'random')
 
-            console.log(response.data)
+              GetAvgRank(data.stats)
+
+              console.log(data.matchDetails)
             })
             .catch((e) => {
               console.log(e)
+              // TODO: needs 404
             })
+      else {
+        console.log('Match not found')
+        // TODO: needs 404
       }
-
-    const GetAvgRank = () => {
-      let count = 0
-      let fullRank = 0
-
-      data.stats?.map(player => {
-        if (player.rank?.old) {
-          fullRank += player.rank?.old
-          count += 1
-        }
-      })
-
-      if (count === 0)
-        data.avgRank = 0
-      else
-        data.avgRank = Math.floor(fullRank / count)
     }
 
     const checkRoute = () => {
       if (route.fullPath.split('/')[3]) {
         const sub = route.fullPath.split('/')[3]
+        if (matchIdPattern.test(props.match_id))
           GoToLink(`/match/${props.match_id}/${sub}`)
+        else {
+          console.log('Match not found')
+          // TODO: needs 404
+        }
       } else if (route.fullPath.split('/')[3] === undefined) {
-        // setTimeout(() => {
+        if (matchIdPattern.test(props.match_id))
           GoToLink(`/match/${props.match_id}/overview`)
-        // }, 200)
+        else {
+          console.log('Match not found')
+          // TODO: needs 404
+        }
       }
     }
 
     // Watchers
     watch(() => props.match_id, GetMatch)
-    watch(() => data.stats, GetAvgRank)
 
     // Run on create
     onBeforeMount(() => {
@@ -165,8 +166,15 @@ export default {
       checkRoute()
     })
 
+    onBeforeUnmount(() => {
+      store.commit({
+        type: 'changeMatchDetails',
+        data: {}
+      })
+    })
+
     return {
-      GetMatch, GetAvgRank, data, GoToPlayer, GetHLTV_1, DisplayRank, FormatFullDate, LoadImage
+      data, DisplayRank, FormatFullDate
     }
   }
 }
@@ -241,6 +249,9 @@ export default {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
+
+  padding-left: 70px;
+
   z-index: 1;
   height: 100%;
   width: 100%;
@@ -252,4 +263,11 @@ export default {
       rgba(0, 0, 0, .6) 100%
   );
 }
+
+@media screen and (max-width: 991px) {
+  #scoreWrapper {
+    overflow-x: scroll;
+    overflow-y: hidden;
+  }
+}
 </style>

src/views/Player.vue

@@ -6,10 +6,16 @@
         <div class="row g-0">
           <div class="img-container col-md-2 pt-3">
             <img
-                :class="data.tracked ? 'tracked' : ''" :src="data.playerDetails.avatar"
+                :class="data.tracked ? 'tracked' : ''" :src="store.state.playerDetails.avatar"
                 :title="data.tracked ? 'Tracked' : ''"
                 alt="Player avatar"
                 class="img-fluid avatar">
+            <!--            <img-->
+            <!--                :class="data.tracked ? 'tracked' : ''"-->
+            <!--                :src="constructAvatarUrl(store.state.playerDetails.avatar, 'full')"-->
+            <!--                :title="data.tracked ? 'Tracked' : ''"-->
+            <!--                alt="Player avatar"-->
+            <!--                class="img-fluid avatar">-->
           </div>
           <div class="col-md-8 d-flex">
             <div class="card-body">
@@ -18,7 +24,7 @@
                   class="text-decoration-none text-white"
                   target="_blank"
                   title="Open steam profile">{{
-                  data.playerDetails.name
+                  store.state.playerDetails.name
                 }}
                 <i class="fas fa-link"></i>
               </a></h3>
@@ -100,7 +106,8 @@
           </div>
         </div>
       </div>
-      <div class="matches m-auto">
+      <div class="match-container">
+        <div class="matches">
           <table v-if="data.matches" class="table table-borderless">
             <thead class="border-bottom">
             <tr>
@@ -196,12 +203,55 @@
           </table>
           <h5 v-else>No matches on record</h5>
         </div>
+        <div class="side-info">
+          <div class="side-info-box best-mate">
+            <div class="heading">
+              <h5>Best Mate</h5>
+            </div>
+            <hr>
+            <ul class="list-unstyled">
+              <li>Mate 1</li>
+              <li>Mate 2</li>
+              <li>Mate 3</li>
+              <li>Mate 4</li>
+              <li>Mate 5</li>
+            </ul>
+          </div>
+          <div class="side-info-box best-mate">
+            <div class="heading">
+              <h5>Most played with</h5>
+            </div>
+            <hr>
+            <ul class="list-unstyled">
+              <li>Player 1</li>
+              <li>Player 2</li>
+              <li>Player 3</li>
+              <li>Player 4</li>
+              <li>Player 5</li>
+            </ul>
+          </div>
+          <div class="side-info-box best-mate">
+            <div class="heading">
+              <h5>Preferred Weapons</h5>
+            </div>
+            <hr>
+            <ul class="list-unstyled">
+              <li>Weapon 1</li>
+              <li>Weapon 2</li>
+              <li>Weapon 3</li>
+              <li>Weapon 4</li>
+              <li>Weapon 5</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
     </div>
   </div>
 </template>
 
 <script>
-import {onMounted, reactive, watch} from "vue";
+import {onBeforeUnmount, onMounted, reactive, watch} from "vue";
 import {useStore} from "vuex";
 import {
   DisplayRank,
@@ -215,7 +265,8 @@ import {
   GoToLink,
   GoToMatch,
   LoadImage,
-  SaveLastVisitedToLocalStorage, setTitle,
+  SaveLastVisitedToLocalStorage,
+  setTitle,
   TrackMe
 } from "../utils";
 
@@ -231,7 +282,6 @@ export default {
         authcode: '',
         sharecode: ''
       },
-      playerDetails: {},
       tracked: false,
       matches: [],
       statusError: '',
@@ -243,43 +293,63 @@ export default {
       }
     })
 
-    const GetPlayer = async () => {
+    const SetPlayerData = () => {
-      if (props.id) {
+      data.tracked = store.state.playerDetails.tracked
-        const [res, resData] = await GetUser(props.id)
+      data.matches = store.state.playerDetails.matches
+      data.match_stats.loss = store.state.playerDetails.match_stats.loss || 0
+      data.match_stats.win = store.state.playerDetails.match_stats.win || 0
+      data.match_stats.tie = store.state.playerDetails.match_stats.tie || 0
 
-        if (res === 200 && resData) {
+      store.commit({
-          data.playerDetails = resData
+        type: 'changeId64',
-          data.tracked = resData.tracked
+        id: store.state.playerDetails.steamid64
-          data.matches = data.playerDetails.matches
+      })
-          data.match_stats.loss = data.playerDetails.match_stats.loss || 0
+      store.commit({
-          data.match_stats.win = data.playerDetails.match_stats.win || 0
+        type: 'changeVanityUrl',
-          data.match_stats.tie = data.playerDetails.match_stats.tie || 0
+        id: store.state.playerDetails.vanity_url || ''
+      })
 
       if (data.matches)
         LoadImage(data.matches[0].map ? data.matches[0].map : 'random')
 
       let player = {
-            'steamid64': data.playerDetails.steamid64,
+        'steamid64': store.state.playerDetails.steamid64,
-            'vanity_url': data.playerDetails.vanity_url || '',
+        'vanity_url': store.state.playerDetails.vanity_url || '',
-            'name': data.playerDetails.name,
+        'name': store.state.playerDetails.name,
-            'avatar': data.playerDetails.avatar
+        'avatar': store.state.playerDetails.avatar
+        // 'avatar': constructAvatarUrl(store.state.playerDetails.avatar, 'medium')
       }
       SaveLastVisitedToLocalStorage(player)
 
-          setTitle(data.playerDetails.name)
+      setTitle(store.state.playerDetails.name)
+    }
 
-          console.log(data.playerDetails)
+    const GetPlayer = async () => {
+      if (props.id) {
+        const [res, resData] = await GetUser(props.id)
+
+        if (res === 200 && resData) {
+          store.commit({
+            type: 'changePlayerDetails',
+            data: resData
+          })
+
+          SetPlayerData()
+
+          console.log(store.state.playerDetails)
         } else {
           GoToLink('/')
+          // TODO: needs 404
         }
       } else {
         GoToLink('/')
+        // TODO: needs 404
       }
     }
 
     const TrackPlayer = async () => {
       if (data.userData.authcode !== '') {
-        [data.statusErrorCode, data.statusError] = await TrackMe(data.playerDetails.steamid64, data.userData.authcode, data.userData.sharecode)
+        [data.statusErrorCode, data.statusError] = await TrackMe(store.state.playerDetails.steamid64, data.userData.authcode, data.userData.sharecode)
 
         if (data.statusErrorCode === 202) {
           data.statusErrorCode = 0
@@ -298,11 +368,22 @@ export default {
 
     onMounted(() => {
           setTimeout(() => {
+            if (Object.entries(store.state.playerDetails).length === 0) {
               GetPlayer()
+            } else {
+              SetPlayerData()
+            }
           }, 200)
         }
     )
 
+    onBeforeUnmount(() => {
+      store.commit({
+        type: 'changePlayerDetails',
+        data: {}
+      })
+    })
+
     return {
       data,
       store,
@@ -406,6 +487,59 @@ export default {
   }
 }
 
+.match-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 1rem;
+
+  .matches {
+    width: 75%;
+  }
+
+  .side-info {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    width: 25%;
+    height: auto;
+    margin-top: 30px;
+
+    .side-info-box {
+      width: 100%;
+      height: auto;
+      background: rgba(20, 20, 20, .8);
+      border: 1px solid rgba(white, .3);
+      border-radius: 5px;
+    }
+
+    .best-mate {
+      .heading {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        height: 40px;
+
+        h5 {
+          margin: 0;
+          padding: 0;
+        }
+      }
+
+      hr {
+        margin: 0;
+        border-color: rgba(white, .3);
+      }
+
+      ul {
+        padding: 10px;
+      }
+    }
+  }
+}
+
 table {
   margin-bottom: 0;
 
@@ -490,21 +624,10 @@ table {
 }
 
 @media screen and (max-width: 768px) {
-  .win {
-    background: linear-gradient(90deg, rgba(0, 255, 0, .2) 0%, rgba(0, 255, 0, .1) 5%, var(--bs-body-bg) 30%, var(--bs-body-bg) 100%);
-  }
-
-  .loss {
-    background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.1) 5%, var(--bs-body-bg) 30%, var(--bs-body-bg) 100%);
-  }
-
-  .draw {
-    background: linear-gradient(90deg, rgba(255, 255, 0, 0.2) 0%, rgba(255, 255, 0, 0.1) 5%, var(--bs-body-bg) 30%, var(--bs-body-bg) 100%);
-  }
   .card {
     .avatar {
-      height: 75px;
+      height: 75px !important;
-      width: 75px;
+      width: 75px !important;
     }
   }
   .trackme-btn {
@@ -550,4 +673,26 @@ table {
     display: none;
   }
 }
+
+@media screen and (max-width: 991px) {
+  .matches {
+    width: 100% !important;
+  }
+  .side-info {
+    display: none !important;
+  }
+  .avatar {
+    width: 100px !important;
+    height: 100px !important;
+  }
+  .trackme-btn {
+    top: 25px;
+  }
+}
+
+@media screen and (max-width: 1199px) {
+  .td-plus, .kdiff {
+    display: none;
+  }
+}
 </style>