refactor to utils + bug-fixes

src/views/Home.vue

@@ -57,9 +57,13 @@ export default {
   setup() {
     document.title = 'Home | csgoWTF'
 
-    const recentVisited = JSON.parse(localStorage.getItem('recent-visited'))
-    if (recentVisited !== null)
-        recentVisited.reverse()
+    let recentVisited = JSON.parse(localStorage.getItem('recent-visited'))
+    if (recentVisited !== null) {
+      recentVisited.reverse()
+      if (window.innerWidth < 768) {
+        recentVisited = recentVisited.filter(i => recentVisited.indexOf(i) < 6)
+      }
+    }
 
     return {recentVisited, GoToPlayer}
   }
@@ -129,9 +133,6 @@ export default {
 
   @media screen and (max-width: 768px) {
     .recent-search {
-      max-height: 240px;
-      overflow: hidden;
-
       .player-card {
         height: 60px;
         img {

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 {

src/views/Player.vue

@@ -104,17 +104,18 @@
             :key="match.match_id"
             :class="GetWinLoss(match.match_result, match.stats[0].team_id)"
             class="match"
-            @click="GoToMatch(match.match_id)">
+            @click="match.map !== '' ? GoToMatch(match.match_id) : ''">
           <td class="td-map text-center">
             <img :alt="match.map ? match.map : 'Map not found'"
-                 :src="require('@/images/map_icons/map_icon_' + match.map + '.svg')"
+                 :src="match.map !== '' ? require('@/images/map_icons/map_icon_' + match.map + '.svg') : require('../images/icons/image.svg')"
                  :title="match.map"
                  class="map-icon">
           </td>
           <td class="td-rank text-center">
             <img
-                :src="match.stats[0].extended?.rank?.new ? require('@/images/rank_icons/skillgroup' + match.stats[0].extended?.rank?.new + '.svg') : require('@/images/rank_icons/skillgroup0.svg')"
-                alt="Rank icon"
+                :src="DisplayRank(match.stats[0].extended?.rank?.new)[0]"
+                :alt="DisplayRank(match.stats[0].extended?.rank?.new)[1]"
+                :title="DisplayRank(match.stats[0].extended?.rank?.new)[1]"
                 class="rank-icon">
           </td>
           <td :class="match.stats[0].team_id === match.match_result ? 'text-success' : !match.match_result ? 'text-warning' : 'text-danger'"
@@ -191,7 +192,8 @@ import {
   FormatFullDuration,
   GetHLTV_1,
   GoToMatch,
-  SaveLastVisitedToLocalStorage
+  SaveLastVisitedToLocalStorage,
+  DisplayRank
 } from "../utils";
 
 export default {
@@ -292,7 +294,8 @@ export default {
       FormatDuration,
       FormatFullDuration,
       GoToMatch,
-      GetHLTV_1
+      GetHLTV_1,
+      DisplayRank
     }
   }
 }