From a42c3ff777d516eb1f36dde6926011aec17fd4f3 Mon Sep 17 00:00:00 2001
From: cnachtigall1991 <40701475+cnachtigall1991@users.noreply.github.com>
Date: Wed, 6 Oct 2021 22:53:49 +0200
Subject: [PATCH] updated nav, colors and layout

---
 src/App.vue            |  2 +-
 src/components/Nav.vue | 19 +++++++++++------
 src/utils/index.js     | 23 +++++++++++++++-----
 src/views/Home.vue     | 26 +++++++++++++++++------
 src/views/Match.vue    |  7 +++---
 src/views/Player.vue   | 48 +++++++++++++++++++++++++++++++++++++++++-
 6 files changed, 102 insertions(+), 23 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5b13065..3f4925a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,7 +3,7 @@
     <Nav/>
   </header>
   <main>
-    <div class="spacer bg-secondary"></div>
+    <div class="spacer"></div>
     <router-view/>
   </main>
   <footer>
diff --git a/src/components/Nav.vue b/src/components/Nav.vue
index 4a03efe..a7bf224 100644
--- a/src/components/Nav.vue
+++ b/src/components/Nav.vue
@@ -84,7 +84,8 @@ nav {
   max-width: 100vw;
   height: 70px;
   width: 100vw;
-  background: rgba(16, 18, 26, 0.5);
+  //background: rgba(16, 18, 26, 0.5);
+  background: rgba(16, 18, 26, 1);
 
   .text-up {
     font-size: 40%;
@@ -118,13 +119,17 @@ nav {
 }
 
 @media screen and (max-width: 768px) {
-  nav input[type="search"] {
-    min-width: 0;
-    max-width: 0;
+  nav {
+    background: rgba(16, 18, 26, 1);
 
-    &:focus {
-      min-width: 100%;
-      max-width: 100%;
+    input[type="search"] {
+      min-width: 0;
+      max-width: 0;
+
+      &:focus {
+        min-width: 100%;
+        max-width: 100%;
+      }
     }
   }
 }
diff --git a/src/utils/index.js b/src/utils/index.js
index 5e9c25e..c9f2767 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -71,13 +71,26 @@ export const GetHLTV_1 = (kills = 0, rounds, deaths = 0, k2 = 0, k3 = 0, k4 = 0,
 
 export const SaveLastVisitedToLocalStorage = (data) => {
     let a = JSON.parse(localStorage.getItem('recent-visited')) || [];
+
     if (a.length === 0) {
         a.push(data);
-    } else if (a.find(p => p.steamid64 === data.steamid64)) {
-        a.splice(a.findIndex(j => j.steamid64 === data.steamid64), 1)
-        a.push(data)
-    } else if (!a.find(p => p.steamid64 === data.steamid64)) {
-        a.push(data)
+    } else if (a.length === 9) {
+        if (a.find(p => p.steamid64 === data.steamid64)) {
+            a.shift()
+            a.splice(a.findIndex(i => i.steamid64 === data.steamid64), 1)
+            a.push(data)
+        } else if (!a.find(p => p.steamid64 === data.steamid64)) {
+            a.shift()
+            a.push(data)
+        }
+    } else if (a.length > 0 && a.length < 9) {
+        if (a.find(p => p.steamid64 === data.steamid64)) {
+            a.splice(a.findIndex(i => i.steamid64 === data.steamid64), 1)
+            a.push(data)
+        } else if (!a.find(p => p.steamid64 === data.steamid64)) {
+            a.push(data)
+        }
     }
+
     localStorage.setItem('recent-visited', JSON.stringify(a));
 }
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 5695d90..0192342 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -4,7 +4,7 @@
       <h1 class="text-warning fw-bold mt-lg-5">CSGO<span class="text-up text-white">WTF</span></h1>
       <h3 class="mb-lg-5">Open source CSGO data platform</h3>
     </div>
-    <div class="mt-n4">
+    <div class="mt-n4 img-sub">
       <span class="text-muted">Image by <a class="text-decoration-none text-warning"
                                            href="https://unsplash.com/photos/6ou8gWpS9ns"
                                            target="_blank">Fredrick Tendong</a></span>
@@ -63,7 +63,9 @@ export default {
   setup() {
     document.title = 'Home | csgoWTF'
 
-    const recentVisited = JSON.parse(localStorage.getItem('recent-visited')).reverse()
+    const recentVisited = JSON.parse(localStorage.getItem('recent-visited'))
+    if (recentVisited !== null)
+        recentVisited.reverse()
 
     return {recentVisited, GoToPlayer}
   }
@@ -101,18 +103,24 @@ export default {
     }
   }
 
+  .img-sub {
+    font-size: .8rem;
+    text-align: left;
+    margin-left: 10px;
+  }
+
   .recent-search {
-    max-width: 900px;
+    max-width: 1100px;
     margin: 0 auto;
 
     .player-card {
       width: 180px;
       height: 75px;
-      background: var(--bs-primary);
-      border-radius: 5% 30%;
+      background: var(--bs-blue);
+      border-radius: 15% 5%;
 
       &:hover {
-        background: var(--bs-secondary);
+        background: var(--bs-primary);
         cursor: pointer;
       }
 
@@ -124,12 +132,18 @@ export default {
 
       p {
         font-size: .9rem;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }
   }
 
   @media screen and (max-width: 768px) {
     .recent-search {
+      max-height: 240px;
+      overflow: hidden;
+
       .player-card {
         height: 60px;
         img {
diff --git a/src/views/Match.vue b/src/views/Match.vue
index 10c548f..84adf6b 100644
--- a/src/views/Match.vue
+++ b/src/views/Match.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="pt-3">
-    <p class="text-center fs-6">Average Rank: <img :src="require('@/images/ranks/' + data.avgRank + '.png')"
-                                                   alt="Rank icon"
-                                                   class="rank-icon mx-2"/></p>
+
     <div v-if="data.matchDetails" class="head row m-auto mb-3 text-center">
       <div class="m-auto">
         <img :alt="data.matchDetails.map"
@@ -10,6 +8,9 @@
              :title="data.matchDetails.map" class="map-icon">
       </div>
     </div>
+    <p class="text-center fs-6">Average Rank: <img :src="require('@/images/ranks/' + data.avgRank + '.png')"
+                                                   alt="Rank icon"
+                                                   class="rank-icon mx-2"/></p>
   </div>
   <div class="nav">
     <ul class="list-unstyled d-flex m-auto">
diff --git a/src/views/Player.vue b/src/views/Player.vue
index a58b673..79573c0 100644
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -102,6 +102,7 @@
         <tbody>
         <tr v-for="match in data.matches"
             :key="match.match_id"
+            :class="GetWinLoss(match.match_result, match.stats[0].team_id)"
             class="match"
             @click="GoToMatch(match.match_id)">
           <td class="td-map text-center">
@@ -258,6 +259,16 @@ export default {
           });
     }
 
+    const GetWinLoss = (matchResult, teamId) => {
+      if (matchResult === teamId) {
+        return 'win'
+      } else if (matchResult === 0) {
+        return 'draw'
+      } else {
+        return 'loss'
+      }
+    }
+
     watch(() => props.id, GetUser)
 
     onBeforeMount(() => {
@@ -272,6 +283,7 @@ export default {
       props,
       GetUser,
       TrackMe,
+      GetWinLoss,
       FormatDate,
       FormatFullDate,
       FormatDuration,
@@ -295,6 +307,30 @@ export default {
   }
 }
 
+.win {
+  background: linear-gradient(90deg, rgba(0, 255, 0, .2) 0%, rgba(0, 255, 0, .1) 5%, var(--bs-body-bg) 15%, var(--bs-body-bg) 100%);
+
+  &:hover {
+    background: linear-gradient(90deg, rgba(0, 255, 0, .2) 0%, rgba(0, 255, 0, .1) 5%, rgba(0, 0, 0, .25) 15%, rgba(0, 0, 0, .25) 100%);
+  }
+}
+
+.loss {
+  background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.1) 5%, var(--bs-body-bg) 15%, var(--bs-body-bg) 100%);
+
+  &:hover {
+    background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.1) 5%, rgba(0, 0, 0, .25) 15%, rgba(0, 0, 0, .25) 100%);
+  }
+}
+
+.draw {
+  background: linear-gradient(90deg, rgba(255, 255, 0, 0.2) 0%, rgba(255, 255, 0, 0.1) 5%, var(--bs-body-bg) 15%, var(--bs-body-bg) 100%);
+
+  &:hover {
+    background: linear-gradient(90deg, rgba(255, 255, 0, 0.2) 0%, rgba(255, 255, 0, 0.1) 5%, rgba(0, 0, 0, .25) 15%, rgba(0, 0, 0, .25) 100%);
+  }
+}
+
 table {
   tr {
     th {
@@ -353,12 +389,22 @@ table {
 
     &:hover {
       cursor: pointer;
-      background: rgba(0, 0, 0, 0.25);
     }
   }
 }
 
 @media screen and (max-width: 768px) {
+  .win {
+    background: linear-gradient(90deg, rgba(0, 255, 0, .2) 0%, rgba(0, 255, 0, .1) 5%, var(--bs-body-bg) 30%, var(--bs-body-bg) 100%);
+  }
+
+  .loss {
+    background: linear-gradient(90deg, rgba(255, 0, 0, 0.2) 0%, rgba(255, 0, 0, 0.1) 5%, var(--bs-body-bg) 30%, var(--bs-body-bg) 100%);
+  }
+
+  .draw {
+    background: linear-gradient(90deg, rgba(255, 255, 0, 0.2) 0%, rgba(255, 255, 0, 0.1) 5%, var(--bs-body-bg) 30%, var(--bs-body-bg) 100%);
+  }
   .card {
     .avatar {
       height: 75px;