refactor to utils + bug-fixes

src/views/Match.vue

@@ -1,7 +1,6 @@
 <template>
-  <img :alt="data.matchDetails.map" :src="require('../images/map_screenshots/' + data.matchDetails.map + '.png')"
+  <img v-if="data.matchDetails.map" :alt="data.matchDetails.map" :src="require('../images/map_screenshots/' + data.matchDetails.map + '.png')"
        class="bg-img">
-  <div class="bg-img"></div>
   <div class="">
     <div v-if="data.matchDetails.map" class="head row m-auto text-center">
       <div class="m-auto map">
@@ -10,8 +9,9 @@
              :title="data.matchDetails.map" class="map-icon">
       </div>
       <p class="text-center fs-6">Average Rank: <img
-          :src="require('@/images/rank_icons/skillgroup' + data.avgRank + '.svg')"
-          alt="Rank icon"
+          :src="DisplayRank(data.avgRank)[0]"
+          :alt="DisplayRank(data.avgRank)[1]"
+          :title="DisplayRank(data.avgRank)[1]"
           class="rank-icon"/></p>
     </div>
   </div>
@@ -27,9 +27,9 @@
   <div class="scoreboard">
     <div v-if="data.score.length === 2 && data.stats">
       <ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :score="data.score[0]" :stats="data.stats"
-                 :team_id="1"/>
+                 :team_id="1" :rounds="data.matchDetails.rounds"/>
       <ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :score="data.score[1]" :stats="data.stats"
-                 :team_id="2"/>
+                 :team_id="2" :rounds="data.matchDetails.rounds"/>
     </div>
   </div>
 </template>
@@ -37,7 +37,7 @@
 <script>
 import {defineAsyncComponent, onBeforeMount, reactive, watch} from "vue";
 import axios from 'axios'
-import {GetHLTV_1, GoToPlayer} from "../utils";
+import {GetHLTV_1, GoToPlayer, DisplayRank} from "../utils";
 
 const ScoreTeam = defineAsyncComponent(() => import('../components/ScoreTeam'))
 
@@ -64,7 +64,7 @@ export default {
             data.matchDetails = response.data
             data.stats = response.data.stats
             data.score = response.data.score
-            // console.log(response.data)
+            console.log(response.data)
           })
           .catch((e) => {
             console.log(e)
@@ -98,7 +98,7 @@ export default {
     })
 
     return {
-      GetMatch, GetAvgRank, data, GoToPlayer, GetHLTV_1
+      GetMatch, GetAvgRank, data, GoToPlayer, GetHLTV_1, DisplayRank
     }
   }
 }
@@ -107,11 +107,15 @@ export default {
 <style lang="scss" scoped>
 .bg-img {
   z-index: -1;
-  top: 0;
-  left: 0;
+  //top: 0;
+  //left: 0;
   position: fixed;
+  //max-width: 100%;
+  //height: auto;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
   width: 100%;
-  max-height: 95%;
 }
 
 .head {