From 617b48a87b7d5816bb6a979bdfb65317d03c6d57 Mon Sep 17 00:00:00 2001
From: vikingowl <cw.nachtigall@gmail.com>
Date: Sun, 24 Oct 2021 19:35:12 +0200
Subject: [PATCH] removed text from dmg-chart, decreased count of meta data +
 minor adjustments

---
 src/views/Player.vue | 47 ++++++++++++++++++++++----------------------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/src/views/Player.vue b/src/views/Player.vue
index b10d3f8..7f9d59b 100644
--- a/src/views/Player.vue
+++ b/src/views/Player.vue
@@ -223,8 +223,8 @@
             <ul v-for="mate in data.playerMeta.most_mates" :key="mate.player.steamid64" class="list-unstyled">
               <li @click="GoToPlayer(mate.player.vanity_url || mate.player.steamid64)">
                 <span class="start">
-                  <img :src="constructAvatarUrl(mate.player.avatar)" alt="Player avatar">
-                  <i v-if="mate.player.tracked" class="far fa-dot-circle text-success tracked" title="Tracked user"></i>
+                  <img :class="mate.player.tracked ? 'tracked' : ''" :src="constructAvatarUrl(mate.player.avatar)"
+                       :title="mate.player.tracked ? 'Tracked' : ''" alt="Player avatar">
                   <span class="text">{{ mate.player.name }}</span>
                 </span>
                 <span class="end">
@@ -241,8 +241,8 @@
             <ul v-for="mate in data.playerMeta.best_mates" :key="mate.player.steamid64" class="list-unstyled">
               <li @click="GoToPlayer(mate.player.vanity_url || mate.player.steamid64)">
                 <span class="start">
-                  <img :src="constructAvatarUrl(mate.player.avatar)" alt="Player avatar">
-                  <i v-if="mate.player.tracked" class="far fa-dot-circle text-success tracked" title="Tracked user"></i>
+                  <img :class="mate.player.tracked ? 'tracked' : ''" :src="constructAvatarUrl(mate.player.avatar)"
+                       :title="mate.player.tracked ? 'Tracked' : ''" alt="Player avatar">
                   <span class="text">{{ mate.player.name }}</span>
                 </span>
                 <span class="end">
@@ -261,13 +261,10 @@
                 <span class="start">
                   <span class="text">{{ id[0] }}</span>
                 </span>
-                <span class="end"  :title="id[0] + ' - ' + id[1] + ' dmg'">
+                <span :title="id[0] + ' - ' + id[1] + ' dmg'" class="end">
                   <span :class="'dmg-chart-' + key">
                     {{ id[1] }}
                   </span>
-                  <span class="text">
-                    {{ id[1] }}
-                  </span>
                 </span>
               </li>
             </ul>
@@ -336,6 +333,8 @@ export default {
     // Variables
     const store = useStore()
 
+    const displayCounter = 3
+
     const data = reactive({
       userData: {
         authcode: '',
@@ -404,7 +403,7 @@ export default {
     const GetPlayer = async () => {
       if (props.id) {
         const [res, resData] = await GetUser(props.id)
-        data.playerMeta = await getPlayerMeta(props.id)
+        data.playerMeta = await getPlayerMeta(props.id, displayCounter)
 
         if (res === 200 && resData) {
           store.commit({
@@ -510,12 +509,12 @@ export default {
     })
 
     watch(() => data.playerMeta, () => {
+      mapWeaponDamage()
+
       data.best_maps = sortObjectValue(data.playerMeta.win_maps, 'desc')
 
-      if (data.best_maps.length > 4)
-        data.best_maps.splice(4, data.best_maps.length - 4)
-
-      mapWeaponDamage()
+      if (data.best_maps.length > displayCounter)
+        data.best_maps.splice(displayCounter, data.best_maps.length - displayCounter)
     })
 
     onBeforeUnmount(() => {
@@ -761,6 +760,11 @@ export default {
             height: 25px;
             border-radius: 50%;
             margin-right: 5px;
+            margin-left: 5px;
+
+            &.tracked {
+              border: 2px solid var(--bs-success);
+            }
           }
         }
 
@@ -784,22 +788,19 @@ export default {
       .end {
         position: relative;
 
-        @for $i from 0 through 4 {
+        @for $i from 0 through 3 {
           .dmg-chart-#{$i} {
             position: absolute;
-            background: rgba(150, 50, 50, .8);
+            background: rgba(150, 50, 50, 1);
             border-radius: 15px;
             color: transparent;
             user-select: none;
-          }
-        }
+            cursor: help;
 
-        .text {
-          z-index: 1;
-          padding-right: 5px;
-          text-align: end;
-          user-select: none;
-          color: #e5e5e5;
+            &:hover {
+              background: rgba(220, 50, 50, 1);
+            }
+          }
         }
       }
     }