refactor to utils + bug-fixes

src/components/Nav.vue

@@ -1,12 +1,19 @@
 <template>
   <nav class="navbar navbar-expand navbar-dark fixed-top">
     <div class="container">
-      <div class="navbar-nav fs-5">
+      <button aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"
+              data-bs-target="#navbar-collapse" data-bs-toggle="collapse" type="button">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <div class="collapse navbar-collapse navbar-nav fs-5" id="navbar-collapse">
         <router-link class="navbar-brand text-warning fw-bold fs-3" to="/">
           CSGO<span class="text-up text-white fw-bold">WTF</span>
         </router-link>
+
         <router-link class="nav-link" to="/explore">Explore</router-link>
       </div>
+
       <form class="d-flex justify-content-end" @keydown.enter.prevent="parseSearch">
         <label for="search">
           <svg class="bi bi-search" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
@@ -14,6 +21,7 @@
                 d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
           </svg>
         </label>
+
         <input id="search" v-model="data.searchInput" aria-label="Search"
                class="form-control bg-transparent border-0"
                placeholder="SteamID64, Profile Link or Custom URL"
@@ -84,7 +92,6 @@ nav {
   max-width: 100vw;
   height: 70px;
   width: 100vw;
-  //background: rgba(16, 18, 26, 0.5);
   background: rgba(16, 18, 26, 1);
 
   .text-up {
@@ -120,16 +127,14 @@ nav {
 
 @media screen and (max-width: 768px) {
   nav {
-    background: rgba(16, 18, 26, 1);
-
     input[type="search"] {
-      min-width: 0;
-      max-width: 0;
-
-      &:focus {
-        min-width: 100%;
-        max-width: 100%;
-      }
+      min-width: 100%;
+      max-width: 100%;
+      //
+      //&:focus {
+      //  min-width: 100%;
+      //  max-width: 100%;
+      //}
     }
   }
 }

src/components/ScoreTeam.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="scoreboard" :class="'team-' + props.team_id">
     <table>
-      <caption :class="props.score === 16 ? 'text-success' : props.score === 15 ? 'text-warning' : 'text-danger'">{{props.score}}</caption>
+      <caption v-if="props.rounds === 16" :class="props.score === 9 ? 'text-success' : props.score === 8 ? 'text-warning' : 'text-danger'">{{props.score}}</caption>
+      <caption v-if="props.rounds === 30" :class="props.score === 16 ? 'text-success' : props.score === 15 ? 'text-warning' : 'text-danger'">{{props.score}}</caption>
       <thead>
       <tr>
         <th class="player__avatar"></th>
@@ -72,6 +73,11 @@ export default {
       type: Number,
       required: true,
       default: 0
+    },
+    rounds: {
+      type: Number,
+      required: true,
+      default: 0
     }
   },
   setup(props) {

src/components/ScoreTeamPlayer.vue

@@ -13,8 +13,9 @@
     </svg>
   </td>
   <td>
-    <img :src="props.rank ? require('@/images/rank_icons/skillgroup' + props.rank + '.svg') : require('@/images/rank_icons/skillgroup0.svg')"
-         alt="Player rank"
+    <img :src="DisplayRank(props.rank)[0]"
+         :alt="DisplayRank(props.rank)[1]"
+         :title="DisplayRank(props.rank)[1]"
          class="player__rank">
   </td>
   <td class="player__kills">
@@ -52,7 +53,7 @@
 </template>
 
 <script>
-import {GetHLTV_1, GoToPlayer} from "../utils";
+import {GetHLTV_1, GoToPlayer, DisplayRank} from "../utils";
 
 export default {
   name: 'ScoreTeamPlayer',
@@ -144,7 +145,7 @@ export default {
     }
   },
   setup(props) {
-    return {props, GetHLTV_1, GoToPlayer}
+    return {props, GetHLTV_1, GoToPlayer, DisplayRank}
   }
 }
 </script>