From 0619989748864693061a580272121cd2c993dc87 Mon Sep 17 00:00:00 2001
From: cnachtigall1991 <40701475+cnachtigall1991@users.noreply.github.com>
Date: Thu, 7 Oct 2021 04:10:04 +0200
Subject: [PATCH] - changed home-screen image - added background image to
 matches - added icon for short games

---
 src/components/ScoreTeam.vue       | 11 +++--
 src/components/ScoreTeamPlayer.vue | 19 ++++++--
 src/images/icons/circle-half.svg   |  3 ++
 src/views/Home.vue                 | 14 +-----
 src/views/Match.vue                | 73 +++++++++++++++++++++++-------
 src/views/Player.vue               | 14 +++++-
 6 files changed, 96 insertions(+), 38 deletions(-)
 create mode 100644 src/images/icons/circle-half.svg

diff --git a/src/components/ScoreTeam.vue b/src/components/ScoreTeam.vue
index 4bd134b..77940d0 100644
--- a/src/components/ScoreTeam.vue
+++ b/src/components/ScoreTeam.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="scoreboard" :class="'team-' + props.team_id">
     <table>
-      <caption :class="props.score === 16 ? 'text-success' : 'text-danger'">{{props.score}}</caption>
+      <caption :class="props.score === 16 ? 'text-success' : props.score === 15 ? 'text-warning' : 'text-danger'">{{props.score}}</caption>
       <thead>
       <tr>
         <th class="player__avatar"></th>
         <th class="player__name"></th>
         <th class="player__rank"></th>
-        <th class="player__kills cursor__help">K</th>
-        <th class="player__assist cursor__help">A</th>
-        <th class="player__deaths cursor__help">D</th>
+        <th class="player__kills">K</th>
+        <th class="player__assist">A</th>
+        <th class="player__deaths">D</th>
         <th class="player__diff cursor__help" title="Kill death difference">+/-</th>
-        <th class="player__kd cursor__help">K/D</th>
+        <th class="player__kd">K/D</th>
         <th class="player__adr cursor__help" title="Average damage per round">ADR</th>
         <th class="player__hs cursor__help" title="Percentage of kills with a headshot">HS%</th>
         <th class="player__rating cursor__help" title="Estimated HLTV Rating 1.0">Rating</th>
@@ -22,6 +22,7 @@
       <tbody v-for="player in props.stats" :key="player.player.steamid64">
       <tr v-if="player.team_id === props.team_id" class="player">
         <ScoreTeamPlayer
+            :steamid64="player.player.steamid64"
             :assists="player.assists"
             :avatar="player.player.avatar"
             :deaths="player.deaths"
diff --git a/src/components/ScoreTeamPlayer.vue b/src/components/ScoreTeamPlayer.vue
index c16752a..e9cb290 100644
--- a/src/components/ScoreTeamPlayer.vue
+++ b/src/components/ScoreTeamPlayer.vue
@@ -2,8 +2,15 @@
   <td>
     <img :src="props.avatar" alt="Player avatar" class="player__avatar">
   </td>
-  <td class="player__name">
+  <td class="player__name" @click="GoToPlayer(props.steamid64)">
     {{ props.name }}
+    <svg class="bi bi-link-45deg" fill="currentColor" height="12" viewBox="0 0 16 16"
+         width="12" xmlns="http://www.w3.org/2000/svg">
+      <path
+          d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
+      <path
+          d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
+    </svg>
   </td>
   <td>
     <img :src="props.rank ? require('@/images/rank_icons/skillgroup' + props.rank + '.svg') : require('@/images/rank_icons/skillgroup0.svg')"
@@ -45,11 +52,16 @@
 </template>
 
 <script>
-import {GetHLTV_1} from "../utils";
+import {GetHLTV_1, GoToPlayer} from "../utils";
 
 export default {
   name: 'ScoreTeamPlayer',
   props: {
+    steamid64: {
+      type: String,
+      required: true,
+      default: ''
+    },
     avatar: {
       type: String,
       required: true,
@@ -132,7 +144,7 @@ export default {
     }
   },
   setup(props) {
-    return {props, GetHLTV_1}
+    return {props, GetHLTV_1, GoToPlayer}
   }
 }
 </script>
@@ -151,6 +163,7 @@ export default {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  cursor: pointer;
 }
 
 .player__rank {
diff --git a/src/images/icons/circle-half.svg b/src/images/icons/circle-half.svg
new file mode 100644
index 0000000..5380929
--- /dev/null
+++ b/src/images/icons/circle-half.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-circle-half" viewBox="0 0 16 16">
+  <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
+</svg>
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 0192342..c9f2624 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -4,13 +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 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>
-    </div>
     <div v-if="recentVisited !== null" class="recent-search mt-5 mb-5 row gap-2 justify-content-center">
-      <h4 class="mb-3s">Recently visited players</h4>
       <div v-for="player in recentVisited" :key="player.steamid64" class="player-card"
            @click="GoToPlayer(player.steamid64)">
         <div class="p-2">
@@ -76,7 +70,7 @@ export default {
 <style lang="scss" scoped>
 .main-content {
   .head {
-    background-image: url("https://images.unsplash.com/photo-1560419015-7c427e8ae5ba?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1470&q=80");
+    background-image: url("../images/map_screenshots/default.png");
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
@@ -103,12 +97,6 @@ export default {
     }
   }
 
-  .img-sub {
-    font-size: .8rem;
-    text-align: left;
-    margin-left: 10px;
-  }
-
   .recent-search {
     max-width: 1100px;
     margin: 0 auto;
diff --git a/src/views/Match.vue b/src/views/Match.vue
index 964b917..aa7a1f3 100644
--- a/src/views/Match.vue
+++ b/src/views/Match.vue
@@ -1,15 +1,19 @@
 <template>
-  <div class="pt-3">
-    <div v-if="data.matchDetails.map" class="head row m-auto mb-3 text-center">
-      <div class="m-auto">
+  <img :alt="data.matchDetails.map" :src="require('../images/map_screenshots/' + data.matchDetails.map + '.png')"
+       class="bg-img">
+  <div class="bg-img"></div>
+  <div class="">
+    <div v-if="data.matchDetails.map" class="head row m-auto text-center">
+      <div class="m-auto map">
         <img :alt="data.matchDetails.map"
              :src="require('@/images/map_icons/map_icon_' + data.matchDetails.map + '.svg')"
              :title="data.matchDetails.map" class="map-icon">
       </div>
+      <p class="text-center fs-6">Average Rank: <img
+          :src="require('@/images/rank_icons/skillgroup' + data.avgRank + '.svg')"
+          alt="Rank icon"
+          class="rank-icon"/></p>
     </div>
-    <p class="text-center fs-6">Average Rank: <img :src="require('@/images/rank_icons/skillgroup' + data.avgRank + '.svg')"
-                                                   alt="Rank icon"
-                                                   class="rank-icon mx-2"/></p>
   </div>
   <div class="nav">
     <ul class="list-unstyled d-flex m-auto">
@@ -20,10 +24,12 @@
       <li class="list-item">Heatmaps</li>
     </ul>
   </div>
-  <div class="container row m-auto">
-    <div v-if="data.score.length === 2 && data.stats" class="col-8 m-auto d-flex flex-column">
-      <ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :stats="data.stats" :team_id="1" :score="data.score[0]"/>
-      <ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :stats="data.stats" :team_id="2" :score="data.score[1]"/>
+  <div class="scoreboard">
+    <div v-if="data.score.length === 2 && data.stats">
+      <ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :score="data.score[0]" :stats="data.stats"
+                 :team_id="1"/>
+      <ScoreTeam :rounds_played="data.score.reduce((a, b) => a + b)" :score="data.score[1]" :stats="data.stats"
+                 :team_id="2"/>
     </div>
   </div>
 </template>
@@ -99,18 +105,54 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.bg-img {
+  z-index: -1;
+  top: 0;
+  left: 0;
+  position: fixed;
+  width: 100%;
+  max-height: 95%;
+}
+
 .head {
-  img {
+  background: linear-gradient(90deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(15, 15, 15, 0.8) 30%,
+      rgba(15, 15, 15, 0.8) 70%,
+      rgba(0, 0, 0, 0) 100%
+  );
+
+  .map img {
     width: auto;
     height: 100px;
+    margin: 10px 0;
+  }
+
+  .rank-icon {
+    width: 60px;
   }
 }
-.rank-icon {
-  width: 60px;
+
+.scoreboard {
+  z-index: 1;
+  max-width: 100vw;
+  background: linear-gradient(90deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(15, 15, 15, 0.8) 30%,
+      rgba(15, 15, 15, 0.8) 70%,
+      rgba(0, 0, 0, 0) 100%
+  );
+
+  div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 }
+
 .nav {
-  width: 100vw;
-  background: rgba(0, 0, 0, 0.6);
+  max-width: 100vw;
+  background: rgba(0, 0, 0, 0.9);
 
   .list-item {
     padding: 10px 10px;
@@ -119,7 +161,6 @@ export default {
       background: var(--bs-info);
       cursor: pointer;
     }
-
   }
 
   .active {
diff --git a/src/views/Player.vue b/src/views/Player.vue
index 386b569..e7181c8 100644
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -32,7 +32,7 @@
               <tr>
                 <td>{{ wl.win }}</td>
                 <td>{{ wl.loss }}</td>
-                <td>{{ (wl.win / wl.loss * 100).toFixed(2) }}%</td>
+                <td>{{ (wl.win / (wl.win + wl.loss) * 100).toFixed(2) }}%</td>
               </tr>
             </table>
             <small v-if="data.playerDetails.tracked" class="card-text text-muted">
@@ -163,8 +163,13 @@
           </td>
           <td :title="FormatFullDuration(match.duration)" class="td-duration text-center">
             {{ FormatDuration(match.duration) }}
+
           </td>
           <td :title="FormatFullDate(match.date)" class="td-date">
+            <svg v-if="match.rounds === 16" class="bi bi-circle-half" fill="currentColor" height="16" viewBox="0 0 16 16" width="16"
+                 xmlns="http://www.w3.org/2000/svg">
+              <path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
+            </svg>
             {{ FormatDate(match.date) }}
           </td>
         </tr>
@@ -242,6 +247,8 @@ export default {
             data.matches = response.data.matches
             store.state.id64 = response.data.steamid64
 
+            console.log(response.data)
+
             let player = {
               'steamid64': response.data.steamid64,
               'name': response.data.name,
@@ -369,6 +376,11 @@ table {
       font-size: 1.2rem;
       width: 120px;
     }
+
+    .td-date svg {
+      margin-left: -5px;
+      margin-right: 5px;
+    }
   }
 
   .match {