fixed broken elements due to api changes

src/components/FlashChart.vue

@@ -1,6 +1,6 @@
 <template>
   <h3 class="text-center col-12 mt-3">Flash-Duration <small class="text-muted">(in s)</small></h3>
-  <div class="player-dmg d-xxl-flex">
+  <div class="player-flash">
     <div class="team-1 mx-5">
       <h4 class="text-center mt-3 mb-3">Team 1</h4>
       <div id="flash-chart-1"></div>
@@ -120,4 +120,57 @@ export default {
     color: cornflowerblue;
   }
 }
+
+@media screen and (max-width: 768px) {
+  .player-dmg {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    transform: scale(.7);
+    margin-top: -100px;
+
+    .team-1 {
+      margin-top: -50px;
+    }
+
+    .team-2 {
+      margin-bottom: -100px;
+      margin-left: -60px;
+    }
+  }
+}
+
+@media screen and (max-width: 991px) and (min-width: 678px) {
+  .player-dmg {
+    flex-wrap: nowrap;
+    transform: scale(.8);
+    margin-top: -50px;
+    margin-left: -60px;
+
+    .team-1 {
+      margin-left: 0;
+    }
+
+    .team-2 {
+      margin-bottom: -100px;
+    }
+  }
+}
+
+@media screen and (max-width: 1261px) and (min-width: 991px) {
+  .player-dmg {
+    flex-wrap: nowrap;
+    transform: scale(.9);
+    margin-top: -30px;
+    margin-left: -60px;
+
+    .team-1 {
+      margin-left: 0;
+    }
+
+    .team-2 {
+      margin-bottom: -100px;
+    }
+  }
+}
 </style>

src/components/MultiKillsChart.vue

@@ -1,11 +1,11 @@
 <template>
   <h3 class="text-center col-12 mt-3">Multi-Kills</h3>
-  <div class="player-dmg d-xxl-flex">
+  <div class="player-dmg col-12">
-    <div class="team-1 mx-5">
+    <div class="team-1">
       <h4 class="text-center mt-3 mb-3">Team 1</h4>
       <div id="multi-kills-chart-1"></div>
     </div>
-    <div class="team-2 mx-5">
+    <div class="team-2">
       <h4 class="text-center mt-3 mb-3">Team 2</h4>
       <div id="multi-kills-chart-2"></div>
     </div>
@@ -143,13 +143,71 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.multi-kills-chart {
+h3 {
-  flex-direction: column;
+  margin: 0 0 0 -60px;
-  align-items: center;
+}
 
-  h4 {
+.player-dmg {
-    margin-top: 7px;
+  display: flex;
-    color: cornflowerblue;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  .team-1 {
+    margin-left: -60px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .player-dmg {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    transform: scale(.7);
+    margin-top: -100px;
+
+    .team-1 {
+      margin-top: -50px;
+    }
+
+    .team-2 {
+      margin-bottom: -100px;
+      margin-left: -60px;
+    }
+  }
+}
+
+@media screen and (max-width: 991px) and (min-width: 678px) {
+  .player-dmg {
+    flex-wrap: nowrap;
+    transform: scale(.8);
+    margin-top: -50px;
+    margin-left: -60px;
+
+    .team-1 {
+      margin-left: 0;
+    }
+
+    .team-2 {
+      margin-bottom: -100px;
+    }
+  }
+}
+
+@media screen and (max-width: 1261px) and (min-width: 991px) {
+  .player-dmg {
+    flex-wrap: nowrap;
+    transform: scale(.9);
+    margin-top: -30px;
+    margin-left: -60px;
+
+    .team-1 {
+      margin-left: 0;
+    }
+
+    .team-2 {
+      margin-bottom: -100px;
+    }
   }
 }
 </style>

src/components/Nav.vue

@@ -73,28 +73,52 @@ export default {
       const id64Pattern = /^\d{17}$/
       const vanityPattern = /^[A-Za-z0-9-_]{3,32}$/
 
-      store.state.id64 = ''
+      store.commit({
-      store.state.vanityUrl = ''
+        type: 'changeVanityUrl',
+        id: ''
+      })
+      store.commit({
+        type: 'changeId64',
+        id: ''
+      })
 
       if (data.searchInput !== '') {
         if (id64Pattern.test(input)) {
-          store.state.id64 = input
+          store.commit({
+            type: 'changeId64',
+            id: input
+          })
         } else if (input.match(customUrlPattern)) {
-          store.state.vanityUrl = input.split('/')[4].split('?')[0]
+          store.commit({
+            type: 'changeVanityUrl',
+            id: input.split('/')[4].split('?')[0]
+          })
         } else if (input.match(profileUrlPattern)) {
           const tmp = input.split('/')[4].split('?')[0]
           if (id64Pattern.test(tmp)) {
-            store.state.id64 = tmp
+            store.commit({
+              type: 'changeId64',
+              id: tmp
+            })
           }
         } else {
-          store.state.vanityUrl = input
+          store.commit({
+            type: 'changeVanityUrl',
+            id: input
+          })
         }
 
         if (vanityPattern.test(store.state.vanityUrl)) {
-          store.state.vanityUrl = input
+          store.commit({
+            type: 'changeVanityUrl',
+            id: input
+          })
         } else {
           data.error = 'Only alphanumeric symbols, "_", and "-", between 3-32 characters'
-          store.state.vanityUrl = ''
+          store.commit({
+            type: 'changeVanityUrl',
+            id: ''
+          })
         }
 
         if (store.state.id64 !== '' || store.state.vanityUrl !== '') {
@@ -104,6 +128,11 @@ export default {
             data.searchInput = ''
             document.activeElement.blur()
 
+            store.commit({
+              type: 'changePlayerDetails',
+              data: resData
+            })
+
             if (store.state.vanityUrl) {
               closeNav()
               GoToPlayer(store.state.vanityUrl)
@@ -115,8 +144,13 @@ export default {
           } else if (res === 404) {
             data.searchInput = ''
             data.error = `${resData} - Try again`
+            // TODO: needs 404
+          } else if (res === 502) {
+            data.searchInput = ''
+            data.error = 'Server not available'
           } else {
             console.log(res, resData)
+            // TODO: needs 404
           }
         }
 

src/components/ScoreTeam.vue

@@ -6,7 +6,7 @@
                :class="score === 9 ? 'text-success' : score === 8 ? 'text-warning' : 'text-danger'">
         {{ score }}
       </caption>
-      <caption v-if="store.state.matchDetails.max_rounds === 30"
+      <caption v-if="store.state.matchDetails.max_rounds === 30 || !store.state.matchDetails.max_rounds"
                :class="score === 16 ? 'text-success' : score === 15 ? 'text-warning' : 'text-danger'">
         {{ score }}
       </caption>
@@ -96,7 +96,7 @@ table {
     caption-side: top;
     padding: 0;
     margin-left: -70px;
-    margin-bottom: -178px;
+    margin-bottom: -158px;
   }
 
   tr {

src/components/ScoreTeamPlayer.vue

@@ -1,6 +1,6 @@
 <template>
   <td>
-    <img :src="props.avatar" alt="Player avatar" class="player__avatar" :class="'team-color-' + props.color">
+    <img :src="constructAvatarUrl(props.avatar)" alt="Player avatar" class="player__avatar" :class="'team-color-' + props.color">
   </td>
   <td class="player__name" @click="GoToPlayer(props.steamid64)">
     <i class="far fa-dot-circle text-success tracked" v-if="props.tracked" title="Tracked user"></i>
@@ -48,7 +48,7 @@
 </template>
 
 <script>
-import {DisplayRank, GetHLTV_1, GoToPlayer} from "../utils";
+import {DisplayRank, GetHLTV_1, GoToPlayer, constructAvatarUrl} from "../utils";
 
 export default {
   name: 'ScoreTeamPlayer',
@@ -155,7 +155,7 @@ export default {
     }
   },
   setup(props) {
-    return {props, GetHLTV_1, GoToPlayer, DisplayRank}
+    return {props, GetHLTV_1, GoToPlayer, DisplayRank, constructAvatarUrl}
   }
 }
 </script>

src/constants/index.js

@@ -0,0 +1,11 @@
+export const HITGROUPS = {
+  0: 'HitGroupGeneric',
+  1: 'HitGroupHead',
+  2: 'HitGroupChest',
+  3: 'HitGroupStomach',
+  4: 'HitGroupLeftArm',
+  5: 'HitGroupRightArm',
+  6: 'HitGroupLeftLeg',
+  7: 'HitGroupRightLeg',
+  10: 'HitGroupGear'
+}

src/utils/ApiRequests.js

@@ -10,7 +10,7 @@ export const GetUser = async (id) => {
     if (res.status === 200)
       return [res.status, res.data]
   } catch (err) {
-    if (err.response.status === 404)
+    if (err.response)
       return [err.response.status, err.response.statusText]
   }
 }
@@ -35,7 +35,7 @@ export const TrackMe = async (id64, authcode, sharecode) => {
 
   try {
     const res = await axios
-      .post(`${API_URL}/player/trackme`, `id=${id64}&authcode=${authcode}&sharecode=${sharecode}`)
+      .post(`${API_URL}/player/${id64}/track`, `authcode=${authcode}&sharecode=${sharecode}`)
 
     if (res.status === 202) {
       status = res.status

src/utils/Utils.js

@@ -48,9 +48,12 @@ export const getPlayerArr = (stats, team, color) => {
 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`
+  if (hash) {
+    const hashDir = hash.substring(0, 2)
+
+    return `${base}/${hashDir}/${hash}${imgSize}.jpg`
+  }
 }
 
 export const GetAvgRank = (stats) => {

src/views/Match.vue

@@ -35,39 +35,38 @@
     </button>
     <div id="matchNav" class="collapse navbar-collapse">
       <ul class="list-unstyled d-flex m-auto">
-        <li :class="!data.matchDetails.parsed ? 'disabled' : ''"
+        <li :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
-            :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
             class="list-item nav-item">
-          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/overview'" replace
+          <router-link :to="'/match/' + data.matchDetails.match_id + '/overview'" class="nav-link"
-                       class="nav-link">Scoreboard
+                       replace>Scoreboard
           </router-link>
         </li>
-        <li :class="!data.matchDetails.parsed ? 'disabled' : ''"
+        <li :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
-            :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
             class="list-item nav-item">
-          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/details'" replace
+          <router-link :class="!data.matchDetails.parsed ? 'disabled' : ''" :disabled="!data.matchDetails.parsed"
-                       class="nav-link">Details
+                       :to="'/match/' + data.matchDetails.match_id + '/details'" class="nav-link"
+                       replace>Details
           </router-link>
         </li>
-        <li :class="!data.matchDetails.parsed ? 'disabled' : ''"
+        <li :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
-            :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
             class="list-item nav-item">
-          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/flashes'" replace
+          <router-link :class="!data.matchDetails.parsed ? 'disabled' : ''" :disabled="!data.matchDetails.parsed"
-                       class="nav-link">Flashes
+                       :to="'/match/' + data.matchDetails.match_id + '/flashes'" class="nav-link"
+                       replace>Flashes
           </router-link>
         </li>
         <!--        <li :class="!data.matchDetails.parsed ? 'disabled' : ''"-->
         <!--            :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"-->
         <!--            class="list-item nav-item">-->
-        <!--          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/utility'" replace-->
+        <!--          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/utility'" replace :class="!data.matchDetails.parsed ? 'disabled' : ''"-->
         <!--                       class="nav-link">Utility-->
         <!--          </router-link>-->
         <!--        </li>-->
-        <li :class="!data.matchDetails.parsed ? 'disabled' : ''"
+        <li :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
-            :title="!data.matchDetails.parsed ? 'This demo has not been parsed' : ''"
             class="list-item nav-item">
-          <router-link :disabled="!data.matchDetails.parsed" :to="'/match/' + data.matchDetails.match_id + '/damage'" replace
+          <router-link :class="!data.matchDetails.parsed ? 'disabled' : ''" :disabled="!data.matchDetails.parsed"
-                       class="nav-link">Damage
+                       :to="'/match/' + data.matchDetails.match_id + '/damage'" class="nav-link"
+                       replace>Damage
           </router-link>
         </li>
       </ul>
@@ -121,7 +120,7 @@ export default {
 
               LoadImage(data.matchDetails.map ? data.matchDetails.map : 'random')
 
-              GetAvgRank(data.stats)
+              data.avgRank = GetAvgRank(data.stats)
 
               console.log(data.matchDetails)
             })
@@ -239,7 +238,7 @@ export default {
     color: #585858;
 
     &:hover {
-      background: transparent;
+      background: lime;
       cursor: default;
     }
   }
@@ -251,7 +250,6 @@ export default {
   flex-wrap: wrap;
 
   padding-left: 70px;
-
   z-index: 1;
   height: 100%;
   width: 100%;
@@ -266,6 +264,7 @@ export default {
 
 @media screen and (max-width: 991px) {
   #scoreWrapper {
+    justify-content: flex-start;
     overflow-x: scroll;
     overflow-y: hidden;
   }

src/views/Player.vue

@@ -6,16 +6,11 @@
         <div class="row g-0">
           <div class="img-container col-md-2 pt-3">
             <img
-                :class="data.tracked ? 'tracked' : ''" :src="store.state.playerDetails.avatar"
+                :class="data.tracked ? 'tracked' : ''"
+                :src="constructAvatarUrl(store.state.playerDetails.avatar, 'full')"
                 :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">
@@ -41,11 +36,11 @@
                   <td class="wlt-loss">{{ data.match_stats.loss }}</td>
                   <td class="wlt-tie">{{ data.match_stats.tie }}</td>
                   <td class="wlt-win-rate">{{
-                      (data.match_stats.win / (data.match_stats.win + data.match_stats.loss + data.match_stats.tie) * 100).toFixed(0)
+                      data.match_stats.win && data.match_stats.loss && data.match_stats.tie ? (data.match_stats.win / (data.match_stats.win + data.match_stats.loss + data.match_stats.tie) * 100).toFixed(0) : 0
                     }}%
                   </td>
                   <td class="wlt-tie-rate">{{
-                      (data.match_stats.tie / (data.match_stats.win + data.match_stats.loss + data.match_stats.tie) * 100).toFixed(0)
+                      data.match_stats.win && data.match_stats.loss && data.match_stats.tie ? (data.match_stats.tie / (data.match_stats.win + data.match_stats.loss + data.match_stats.tie) * 100).toFixed(0) : 0
                     }}%
                   </td>
                 </tr>
@@ -108,7 +103,7 @@
       </div>
       <div class="match-container">
         <div class="matches">
-          <table v-if="data.matches" class="table table-borderless">
+          <table v-if="store.state.playerDetails.matches" class="table table-borderless">
             <thead class="border-bottom">
             <tr>
               <th class="text-center map" scope="col">Map</th>
@@ -203,7 +198,7 @@
           </table>
           <h5 v-else>No matches on record</h5>
         </div>
-        <div class="side-info">
+        <div v-if="store.state.playerDetails.matches" class="side-info">
           <div class="side-info-box best-mate">
             <div class="heading">
               <h5>Best Mate</h5>
@@ -254,6 +249,7 @@
 import {onBeforeUnmount, onMounted, reactive, watch} from "vue";
 import {useStore} from "vuex";
 import {
+  constructAvatarUrl,
   DisplayRank,
   FormatDate,
   FormatDuration,
@@ -295,10 +291,13 @@ export default {
 
     const SetPlayerData = () => {
       data.tracked = store.state.playerDetails.tracked
-      data.matches = store.state.playerDetails.matches
+      if (store.state.playerDetails.matches)
-      data.match_stats.loss = store.state.playerDetails.match_stats.loss || 0
+        data.matches = store.state.playerDetails.matches
-      data.match_stats.win = store.state.playerDetails.match_stats.win || 0
+      if (store.state.playerDetails.match_stats) {
-      data.match_stats.tie = store.state.playerDetails.match_stats.tie || 0
+        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
+      }
 
       store.commit({
         type: 'changeId64',
@@ -309,15 +308,14 @@ export default {
         id: store.state.playerDetails.vanity_url || ''
       })
 
-      if (data.matches)
+      if (store.state.playerDetails.matches)
         LoadImage(data.matches[0].map ? data.matches[0].map : 'random')
 
       let player = {
         'steamid64': store.state.playerDetails.steamid64,
         'vanity_url': store.state.playerDetails.vanity_url || '',
         'name': store.state.playerDetails.name,
-        'avatar': store.state.playerDetails.avatar
+        'avatar': constructAvatarUrl(store.state.playerDetails.avatar, 'medium')
-        // 'avatar': constructAvatarUrl(store.state.playerDetails.avatar, 'medium')
       }
       SaveLastVisitedToLocalStorage(player)
 
@@ -371,6 +369,7 @@ export default {
             if (Object.entries(store.state.playerDetails).length === 0) {
               GetPlayer()
             } else {
+              console.log(store.state.playerDetails)
               SetPlayerData()
             }
           }, 200)
@@ -397,7 +396,8 @@ export default {
       FormatFullDuration,
       GoToMatch,
       GetHLTV_1,
-      DisplayRank
+      DisplayRank,
+      constructAvatarUrl
     }
   }
 }
@@ -604,9 +604,10 @@ table {
       width: 120px;
     }
 
-    .td-date svg {
+    .td-date, .date {
-      margin-left: -5px;
+      white-space: nowrap;
-      margin-right: 5px;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }