added chart to weapon-dmg

src/views/Player.vue

@@ -256,16 +256,22 @@
               <h5>Weapons <span class="text-muted">(by dmg)</span></h5>
             </div>
             <hr>
-            <ul v-for="id in data.best_weapons" :key="id[0]" class="list-unstyled">
+            <ul v-for="(id, key) in data.best_weapons" :key="id[0]" class="list-unstyled">
               <li>
                 <span class="start">
                   <span class="text">{{ id[0] }}</span>
                 </span>
-                <span class="end">
-                  {{ id[1] }}
+                <span class="end"  :title="id[0] + ' - ' + id[1] + ' dmg'">
+                  <span :class="'dmg-chart-' + key">
+                    {{ id[1] }}
+                  </span>
+                  <span class="text">
+                    {{ id[1] }}
+                  </span>
                 </span>
               </li>
             </ul>
+            {{ setDmgGraphWidth() }}
           </div>
           <div v-if="data.playerMeta.win_maps" class="side-info-box best-map">
             <div class="heading">
@@ -296,7 +302,7 @@
 </template>
 
 <script>
-import {onBeforeMount, onBeforeUnmount, onMounted, reactive, watch} from "vue";
+import {onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, watch} from "vue";
 import {useStore} from "vuex";
 import {
   constructAvatarUrl,
@@ -478,6 +484,27 @@ export default {
       }
     }
 
+    const setDmgGraphWidth = () => {
+      setTimeout(() => {
+        let weaponsContainer
+        const dmg100 = ref(0)
+        const dmg = ref(0)
+
+        for (let i = 0; i <= 4; i++) {
+          weaponsContainer = document.querySelector('.dmg-chart-' + i)
+          if (weaponsContainer !== null) {
+            if (i === 0) {
+              dmg100.value = weaponsContainer.innerHTML * 1
+              weaponsContainer.style.width = '100%'
+            }
+
+            dmg.value = weaponsContainer.innerHTML * 1
+            weaponsContainer.style.width = dmg.value * 100 / dmg100.value + '%'
+          }
+        }
+      }, 100)
+    }
+
     watch(() => props.id, () => {
       GetPlayer()
     })
@@ -521,6 +548,7 @@ export default {
       FixMapName,
       GoToPlayer,
       setMoreMatches,
+      setDmgGraphWidth
     }
   }
 }
@@ -712,12 +740,16 @@ export default {
         margin: 5px 0;
         cursor: pointer;
 
+        display: flex;
+        justify-content: space-between;
+        gap: 1rem;
+
         .start {
-          .text {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-          }
+          width: 50%;
+
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
 
           .tracked {
             font-size: .8rem;
@@ -733,7 +765,10 @@ export default {
         }
 
         .end {
-          float: right;
+          display: flex;
+          width: 45%;
+          justify-content: end;
+          align-items: end;
         }
       }
     }
@@ -744,6 +779,30 @@ export default {
         cursor: default;
       }
     }
+
+    .preferred-weapons {
+      .end {
+        position: relative;
+
+        @for $i from 0 through 4 {
+          .dmg-chart-#{$i} {
+            position: absolute;
+            background: rgba(150, 50, 50, .8);
+            border-radius: 15px;
+            color: transparent;
+            user-select: none;
+          }
+        }
+
+        .text {
+          z-index: 1;
+          padding-right: 5px;
+          text-align: end;
+          user-select: none;
+          color: #e5e5e5;
+        }
+      }
+    }
   }
 }