fixed #12

src/views/Match.vue

@@ -3,6 +3,10 @@
 
   <div class="">
     <div class="head row m-auto text-center">
+      <div class="map-score">
+        <div v-if="route.fullPath.split('/')[3] !== 'overview'" class="score-team-1">
+          <h1 :class="checkWin(1)">{{ data.score[0] }}</h1>
+        </div>
         <div class="m-auto map">
           <img v-if="data.matchDetails.map" :alt="data.matchDetails.map"
                :src="require('../assets/images/map_icons/map_icon_' + data.matchDetails.map + '.svg')"
@@ -11,16 +15,22 @@
                alt="Map icon"
                class="map-icon" title="Map unknown">
         </div>
+        <div v-if="route.fullPath.split('/')[3] !== 'overview'" class="score-team-2">
+          <h1 :class="checkWin(2)">{{ data.score[1] }}</h1>
+        </div>
+      </div>
+      <div class="text">
         <p class="text-center text-muted fs-6 mb-1">
           Match lasted for
-        <span class="text-white">{{FormatDuration(data.matchDetails.duration)}}</span>
+          <span class="text-white">{{ FormatDuration(data.matchDetails.duration) }}</span>
         </p>
         <p class="text-center text-muted fs-6">
           on
           <span class="text-white">{{ FormatFullDate(data.matchDetails.date) }}</span>
         </p>
         <p class="text-center fs-6">
-        <span class="text-muted"><i class="far fa-clock"></i></span> {{ data.matchDetails.max_rounds === 16 ? 'Short' : 'Long' }}
+          <span class="text-muted"><i class="far fa-clock"></i></span>
+          {{ data.matchDetails.max_rounds === 16 ? 'Short' : 'Long' }}
           <i class="fas fa-grip-lines-vertical"></i>
           <span class="text-muted">Average Rank:</span> <img
             :alt="DisplayRank(data.avgRank)[1]"
@@ -28,10 +38,11 @@
             :title="DisplayRank(data.avgRank)[1]"
             class="rank-icon"/>
           <i class="fas fa-grip-lines-vertical"></i>
-        <a class="text-white" :href="data.matchDetails.replay_url">Demo</a>
+          <a :href="data.matchDetails.replay_url" class="text-white">Demo</a>
         </p>
       </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">
@@ -91,7 +102,16 @@
 <script>
 import {onBeforeMount, onBeforeUnmount, onMounted, reactive, watch} from "vue";
 import axios from 'axios'
-import {closeNav, DisplayRank, FixMapName, FormatFullDate, GetAvgRank, GoToLink, LoadImage, FormatDuration} from "../utils";
+import {
+  closeNav,
+  DisplayRank,
+  FixMapName,
+  FormatDuration,
+  FormatFullDate,
+  GetAvgRank,
+  GoToLink,
+  LoadImage
+} from "../utils";
 import {useStore} from "vuex";
 import {useRoute} from 'vue-router'
 
@@ -168,6 +188,25 @@ export default {
       }
     }
 
+    const checkWin = (team) => {
+      team -= 1
+      if (data.matchDetails.max_rounds === 16) {
+        if (data.score[team] === 9)
+          return 'text-success'
+        else if (data.score[team] === 8)
+          return 'text-warning'
+        else if (data.score[team] < 8)
+          return 'text-danger'
+      } else {
+        if (data.score[team] === 16)
+          return 'text-success'
+        else if (data.score[team] === 15)
+          return 'text-warning'
+        else if (data.score[team] < 15)
+          return 'text-danger'
+      }
+    }
+
     // Watchers
     watch(() => props.match_id, GetMatch)
 
@@ -189,7 +228,7 @@ export default {
     })
 
     return {
-      data, DisplayRank, FormatFullDate, FormatDuration
+      data, DisplayRank, FormatFullDate, FormatDuration, route, checkWin
     }
   }
 }
@@ -213,12 +252,36 @@ export default {
       rgba(0, 0, 0, .7) 100%
   );
 
+  .map-score {
+    display: flex;
+    position: relative;
+
     .map img {
       width: auto;
       height: 100px;
       margin: 10px 0;
     }
 
+    .score-team-1,
+    .score-team-2 {
+      position: absolute;
+      top: 5rem;
+
+      h1 {
+        font-size: 4rem;
+      }
+    }
+
+    .score-team-1 {
+      left: 25%;
+    }
+
+    .score-team-2 {
+      right: 25%;
+    }
+  }
+
+  .text {
     .rank-icon {
       width: 60px;
       margin-right: 3px;
@@ -240,6 +303,8 @@ export default {
         text-decoration: underline;
       }
     }
+  }
+
 }
 
 .nav {
@@ -297,6 +362,23 @@ export default {
 }
 
 @media screen and (max-width: 991px) {
+  .score-team-1,
+  .score-team-2 {
+    top: 2rem !important;
+
+    h1 {
+      font-size: 3.5rem !important;
+    }
+  }
+
+  .score-team-1 {
+    left: 10% !important;
+  }
+
+  .score-team-2 {
+    right: 10% !important;
+  }
+
   .nav {
     button {
       outline: 1px solid var(--bs-primary);