changed colors in matches + fixed some bugs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "csgowtf",
-  "version": "0.28.36",
+  "version": "0.29.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

src/components/HitgroupPuppet.vue

@@ -18,7 +18,9 @@
         <option class="select-hr" value="All">All</option>
         <option disabled>───────────────────────────</option>
         <option v-for="(value, index) in processPlayerWeapon()" :key="index" :value="value">
-          {{ Object.values(value).toString().charAt(0).toUpperCase() + Object.values(value).toString().slice(1) }}
+<!--          This is here, because weapons are not always named correctly -->
+<!--          {{ Object.values(value).toString().charAt(0).toUpperCase() + Object.values(value).toString().slice(1) }}-->
+          {{ Object.values(value).toString() }}
         </option>
       </select>
     </div>

src/components/MatchesTable.vue

@@ -26,7 +26,7 @@
       <tbody>
       <tr v-for="match in props.matches"
           :key="match.match_id"
-          :class="(match.stats ? GetWinLoss(match.match_result, match.stats.team_id) : '') + (match.vac || match.game_ban ? ' ban' : '')"
+          :class="props.colorFront ? (GetWinLoss(match.match_result, match.stats.team_id) + (match.vac || match.game_ban ? ' ban' : '')) : (match.vac || match.game_ban ? ' matches_ban' : '')"
           :title="match.vac ? 'VAC-banned player in this game' : match.game_ban ? 'Game-banned player in this game' : ''"
           class="match default"
           @click="GoToMatch(match.match_id)"
@@ -60,9 +60,14 @@
           <img v-if="match.max_rounds === 16" alt="Match short" class="match-len"
                src="../assets/images/icons/timer_short.svg">
         </td>
-        <td :class="match.stats ? match.stats.team_id === match.match_result ? 'text-success' : !match.match_result ? 'text-warning' : 'text-danger' : ''"
-            class="td-score text-center fw-bold">
-          {{ match.score[0] }} - {{ match.score[1] }}
+        <td class="td-score text-center fw-bold">
+          <span
+              :class="match.match_result === 1 ? 'text-success' : match.match_result === 0 ? 'text-warning' : 'text-danger'">{{
+              match.score[0]
+            }}</span> - <span
+            :class="match.match_result === 2 ? 'text-success' : match.match_result === 0 ? 'text-warning' : 'text-danger'">{{
+            match.score[1]
+          }}</span>
         </td>
         <td v-if="match.stats" class="td-kills text-center">
           {{ match.stats.kills ? match.stats.kills : "0" }}
@@ -131,6 +136,11 @@ import {
 export default {
   name: "MatchesTable",
   props: {
+    colorFront: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     matches: {
       type: Array,
       required: false
@@ -248,7 +258,6 @@ table {
 
     .td-score {
       font-size: 1.2rem;
-      width: 120px;
     }
 
     .td-date, .date {
@@ -357,7 +366,6 @@ table {
       }
     }
 
-
     &.ban {
       $last: rgb(93, 3, 3);
       background: linear-gradient(to right,
@@ -381,6 +389,30 @@ table {
       }
     }
 
+    &.matches_ban {
+      $first: rgb(0, 0, 0);
+      $last: rgb(93, 3, 3);
+      background: linear-gradient(to right,
+          rgba($first, 0.2) 0%,
+          rgba($first, 0.1) 15%,
+          rgba(0, 0, 0, 0.4) 30%,
+          rgba(0, 0, 0, 0.4) 70%,
+          rgba($last, 0.6) 80%,
+          rgba($last, 0.6) 100%
+      );
+
+      &:hover {
+        background: linear-gradient(to right,
+            rgba($first, 0.3) 0%,
+            rgba($first, 0.2) 15%,
+            rgba(0, 0, 0, 0.5) 30%,
+            rgba(0, 0, 0, 0.5) 70%,
+            rgba($last, 0.7) 80%,
+            rgba($last, 0.7) 100%
+        );
+      }
+    }
+
     border-bottom: 1px solid rgba(73, 73, 73, 0.73);
 
     &:last-child {
@@ -394,13 +426,12 @@ table {
 }
 
 @media screen and (max-width: 768px) {
-  .map {
-    padding-left: 2.2rem !important;
+  .map-icon {
+    margin-left: -1.32em !important;
   }
 
   .td-map {
     position: relative;
-    padding-left: 2.2rem !important;
     width: 35px !important;
 
     .parsed {
@@ -425,12 +456,12 @@ table {
   }
 
   .td-score {
-    font-size: 1rem !important;
-    max-width: 90px;
+    font-size: .9rem !important;
+    //width: 110px !important;
   }
 
   .td-date {
-    font-size: 1rem !important;
+    font-size: .9rem !important;
   }
 
   .kills, .deaths, .assists, .kdiff, .duration, .hltv, .length,
@@ -439,7 +470,7 @@ table {
   }
 }
 
-@media screen and (max-width: 991px) {
+@media screen and (max-width: 992px) {
   .avatar {
     width: 100px !important;
     height: 100px !important;
@@ -452,9 +483,22 @@ table {
   }
 }
 
-@media screen and (max-width: 1199px) {
+@media screen and (max-width: 1200px) {
   .td-plus, .kdiff {
     display: none;
   }
+  .td-rank img {
+    width: 60px !important;
+    height: auto;
+    max-width: 60px;
+  }
+  .td-map img {
+    width: 50px !important;
+    height: auto;
+  }
+  .td-score {
+    font-size: 1.1rem !important;
+    width: 130px !important;
+  }
 }
 </style>

src/views/Explore.vue

@@ -5,7 +5,7 @@
     <div class="container-lg text-center">
       <h3>Recent matches</h3>
       <div v-if="data.matches">
-        <MatchesTable :key="data.matches" :explore="true" :matches="data.matches"/>
+        <MatchesTable :key="data.matches" :explore="true" :matches="data.matches" />
 
         <div class="load-more text-center">
           <button :key="scrollToPos(store.state.scroll_state)" class="btn border-2 btn-outline-info"

src/views/Player.vue

@@ -2,7 +2,7 @@
   <img alt="" class="bg-img" src="">
 
   <div class="wrapper">
-    <div class="container">
+    <div class="container-lg">
       <div v-if="store.state.playerDetails.name">
         <div class="card mb-3 bg-transparent border-0">
           <div class="row g-0">
@@ -119,7 +119,7 @@
         <div class="match-container d-flex">
           <div class="matches">
 
-            <MatchesTable v-if="store.state.playerDetails.matches" :matches="store.state.playerDetails.matches"/>
+            <MatchesTable v-if="store.state.playerDetails.matches" :matches="store.state.playerDetails.matches" color-front />
             <h5 v-else>No matches on record</h5>
 
           </div>
@@ -497,11 +497,23 @@ export default {
 }
 
 @media screen and (max-width: 991px) {
-  .matches {
-    width: 100% !important;
+  .card .avatar {
+    height: 120px;
+    width: 120px;
   }
-  .side-info-container {
-    display: none !important;
+  .match-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    gap: 0;
+
+    .matches {
+      width: 100% !important;
+    }
+
+    .side-info-container {
+      display: none !important;
+    }
   }
 }
 </style>