fixed #12

src/views/Match.vue

@@ -3,33 +3,44 @@
 
   <div class="">
     <div class="head row m-auto text-center">
-      <div class="m-auto map">
+      <div class="map-score">
-        <img v-if="data.matchDetails.map" :alt="data.matchDetails.map"
+        <div v-if="route.fullPath.split('/')[3] !== 'overview'" class="score-team-1">
-             :src="require('../assets/images/map_icons/map_icon_' + data.matchDetails.map + '.svg')"
+          <h1 :class="checkWin(1)">{{ data.score[0] }}</h1>
-             :title="data.matchDetails.map" class="map-icon">
+        </div>
-        <img v-if="!data.matchDetails.map" :src="require('../assets/images/map_icons/map_icon_lobby_mapveto.svg')"
+        <div class="m-auto map">
-             alt="Map icon"
+          <img v-if="data.matchDetails.map" :alt="data.matchDetails.map"
-             class="map-icon" title="Map unknown">
+               :src="require('../assets/images/map_icons/map_icon_' + data.matchDetails.map + '.svg')"
+               :title="data.matchDetails.map" class="map-icon">
+          <img v-if="!data.matchDetails.map" :src="require('../assets/images/map_icons/map_icon_lobby_mapveto.svg')"
+               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>
+        </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' }}
+          <i class="fas fa-grip-lines-vertical"></i>
+          <span class="text-muted">Average Rank:</span> <img
+            :alt="DisplayRank(data.avgRank)[1]"
+            :src="DisplayRank(data.avgRank)[0]"
+            :title="DisplayRank(data.avgRank)[1]"
+            class="rank-icon"/>
+          <i class="fas fa-grip-lines-vertical"></i>
+          <a :href="data.matchDetails.replay_url" class="text-white">Demo</a>
+        </p>
       </div>
-      <p class="text-center text-muted fs-6 mb-1">
-        Match lasted for
-        <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' }}
-        <i class="fas fa-grip-lines-vertical"></i>
-        <span class="text-muted">Average Rank:</span> <img
-          :alt="DisplayRank(data.avgRank)[1]"
-          :src="DisplayRank(data.avgRank)[0]"
-          :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>
-      </p>
     </div>
   </div>
   <div class="nav navbar-dark navbar-expand-lg">
@@ -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,33 +252,59 @@ export default {
       rgba(0, 0, 0, .7) 100%
   );
 
-  .map img {
+  .map-score {
-    width: auto;
+    display: flex;
-    height: 100px;
+    position: relative;
-    margin: 10px 0;
+
+    .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%;
+    }
   }
 
-  .rank-icon {
+  .text {
-    width: 60px;
+    .rank-icon {
-    margin-right: 3px;
+      width: 60px;
+      margin-right: 3px;
+    }
+
+    .fas {
+      margin: 0 .5rem
+    }
+
+    a {
+      font-weight: 600;
+      text-decoration: none;
+      color: var(--bs-warning) !important;
+      transition: all .25s;
+      line-height: 1rem;
+
+      &:hover {
+        color: #b98d00 !important;
+        text-decoration: underline;
+      }
+    }
   }
 
-  .fas {
-    margin: 0 .5rem
-  }
-
-  a {
-    font-weight: 600;
-    text-decoration: none;
-    color: var(--bs-warning) !important;
-    transition: all .25s;
-    line-height: 1rem;
-
-    &:hover {
-      color: #b98d00 !important;
-      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);