fixed #36

src/views/Match.vue

@@ -5,11 +5,18 @@
     <div class="head row m-auto text-center">
       <div class="map-score">
         <div class="score-team-1">
-          <h1 :class="checkWin(1)" :style="data.score[0] < 10 ? 'padding-left: 20px;' : ''">{{ data.score[0] }}</h1>
+          <h1 :class="checkWin(1)">{{ data.score[0] }}</h1>
           <div v-if="data.score[0]" class="team-1">
             <img alt="CT logo" src="../assets/images/icons/ct_logo.svg">
             <img alt="T logo" src="../assets/images/icons/t_logo.svg">
           </div>
+          <div class="team-avg-rank">
+            <img v-if="data.matchDetails.parsed"
+                 :alt="DisplayRank(Math.floor(data.team1Avg || 0))[1]"
+                 :src="DisplayRank(Math.floor(data.team1Avg || 0))[0]"
+                 :title="'Average Team-Rank: ' + DisplayRank(Math.floor(data.team1Avg || 0))[1]"
+                 class="team-avg-rank-icon helpicon"/>
+          </div>
         </div>
         <div class="m-auto map">
           <img v-if="data.matchDetails.map" :alt="data.matchDetails.map"
@@ -22,11 +29,18 @@
           >
         </div>
         <div class="score-team-2">
-          <h1 :class="checkWin(2)" :style="data.score[1] < 10 ? 'padding-left: 20px;' : ''">{{ data.score[1] }}</h1>
+          <h1 :class="checkWin(2)">{{ data.score[1] }}</h1>
           <div v-if="data.score[1]" class="team-2">
             <img alt="T logo" src="../assets/images/icons/t_logo.svg">
             <img alt="CT logo" src="../assets/images/icons/ct_logo.svg">
           </div>
+          <div class="team-avg-rank">
+            <img v-if="data.matchDetails.parsed"
+                 :alt="DisplayRank(Math.floor(data.team2Avg || 0))[1]"
+                 :src="DisplayRank(Math.floor(data.team2Avg || 0))[0]"
+                 :title="'Average Team-Rank: ' + DisplayRank(Math.floor(data.team2Avg || 0))[1]"
+                 class="team-avg-rank-icon helpicon"/>
+          </div>
         </div>
       </div>
       <div class="text">
@@ -74,6 +88,7 @@
       </div>
     </div>
   </div>
+
   <div class="nav navbar-dark navbar-expand-lg">
     <button aria-controls="matchNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"
             data-bs-target="#matchNav" data-bs-toggle="collapse" type="button">
@@ -118,6 +133,7 @@
       </ul>
     </div>
   </div>
+
   <div id="scoreWrapper" class="scoreboard">
     <router-view v-if="data.score.length === 2 && data.stats" name="score"/>
   </div>
@@ -128,7 +144,8 @@ import {onBeforeMount, onBeforeUnmount, onMounted, reactive, watch} from "vue";
 import {
   closeNav,
   CreatePlayersArray,
-  DisplayRank, errorHandling,
+  DisplayRank,
+  errorHandling,
   FixMapName,
   FormatDuration,
   FormatFullDate,
@@ -136,7 +153,7 @@ import {
   GoToLink,
   LoadImage,
   ProcessName
-} from "../utils";
+} from "@/utils";
 import {useStore} from "vuex";
 import {useRoute} from 'vue-router'
 import {DateTime} from "luxon/build/es6/luxon";
@@ -157,6 +174,8 @@ export default {
       matchDetails: {},
       stats: [],
       score: [0],
+      team1Avg: 0,
+      team2Avg: 0
     })
 
     // Functions
@@ -183,6 +202,8 @@ export default {
 
           data.stats = data.matchDetails.stats
           data.score = data.matchDetails.score
+          data.team1Avg = getTeamAvgRank(1).reduce((a, b) => a + b) / 5
+          data.team2Avg = getTeamAvgRank(2).reduce((a, b) => a + b) / 5
 
           LoadImage(data.matchDetails.map ? data.matchDetails.map : 'random')
 
@@ -234,6 +255,14 @@ export default {
       }
     }
 
+    const getTeamAvgRank = (team) => {
+      let arr = []
+      for (let i = (team - 1) * 5; i < team * 5; i++) {
+        arr.push(data.matchDetails.stats[i].rank.old)
+      }
+      return arr
+    }
+
     const handleDownloadMenu = () => {
       const downloadGroup = document.getElementById('downloadGroup')
       const menuBtn = document.getElementById('downloadMenuBtn')
@@ -291,7 +320,7 @@ export default {
     })
 
     return {
-      data, DisplayRank, FormatFullDate, FormatDuration, FixMapName, route, checkWin, handleDownloadMenu
+      data, DisplayRank, FormatFullDate, FormatDuration, FixMapName, route, checkWin, handleDownloadMenu, getTeamAvgRank
     }
   }
 }
@@ -329,17 +358,24 @@ export default {
     .score-team-1,
     .score-team-2 {
       position: absolute;
-      top: 3.5rem;
+      top: 2rem;
 
       h1 {
+        margin: 0 auto .5rem;
         font-size: 4rem;
       }
 
+      .team-avg-rank {
+        margin: 3.5rem auto 0;
+
+        .team-avg-rank-icon {
+          width: 60px;
+        }
+      }
+
       .team-1,
       .team-2 {
         position: relative;
-        right: 30%;
-
         color: white;
         font-size: 1rem;
         opacity: .8;
@@ -359,6 +395,14 @@ export default {
           }
         }
       }
+
+      .team-1 {
+        right: 1.4rem;
+      }
+
+      .team-2 {
+        left: -1.5rem;
+      }
     }
 
     .score-team-1 {
@@ -459,10 +503,29 @@ export default {
 @media (max-width: 991px) {
   .score-team-1,
   .score-team-2 {
-    top: 2rem !important;
+    top: 1rem !important;
 
     h1 {
-      font-size: 3.5rem !important;
+      font-size: 2.8rem !important;
+      margin-bottom: 0 !important;
+    }
+
+    .team-avg-rank {
+      margin: 2rem auto 0 !important;
+
+      .team-avg-rank-icon {
+        width: 50px !important;
+      }
+    }
+
+    .team-1, .team-2 {
+      img {
+        width: 25px !important;
+        height: 25px !important;
+      }
+    }
+    .team-2 {
+      left: -1.3rem !important;
     }
   }