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="team-1 mx-5">
+  <div class="player-dmg col-12">
+    <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 {
-  flex-direction: column;
-  align-items: center;
+h3 {
+  margin: 0 0 0 -60px;
+}
 
-  h4 {
-    margin-top: 7px;
-    color: cornflowerblue;
+.player-dmg {
+  display: flex;
+  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.state.vanityUrl = ''
+      store.commit({
+        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>