From 80b4c03800325543458086a72adb2c0f001c9c05 Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Mon, 16 Dec 2019 21:15:10 +0100
Subject: [PATCH] feat: use kilo notation when displaying the stats

---
 client/src/components/Match/DetailedMatchTeam.vue | 11 +++++++----
 client/src/components/Match/Match.vue             |  4 ++--
 client/src/main.js                                |  4 ++++
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Match/DetailedMatchTeam.vue b/client/src/components/Match/DetailedMatchTeam.vue
index dcb97ba..f3b17ff 100644
--- a/client/src/components/Match/DetailedMatchTeam.vue
+++ b/client/src/components/Match/DetailedMatchTeam.vue
@@ -174,19 +174,19 @@
         <td
           class="p-2 text-white text-sm"
           :style="bgColor(player, '146, 100, 79', 'gold')"
-        >{{ player[statsFormat].gold }}</td>
+        >{{ roundStats(player[statsFormat].gold) }}</td>
         <td
           :style="bgColor(player, '156, 71, 109', 'dmgChamp')"
           class="p-2 text-white text-sm"
-        >{{ player[statsFormat].dmgChamp }}</td>
+        >{{ roundStats(player[statsFormat].dmgChamp) }}</td>
         <td
           :style="bgColor(player, '156, 71, 109', 'dmgObj')"
           class="p-2 text-white text-sm text-red"
-        >{{ player[statsFormat].dmgObj }}</td>
+        >{{ roundStats(player[statsFormat].dmgObj) }}</td>
         <td
           :style="bgColor(player, '146, 145, 106', 'dmgTaken')"
           class="p-2 text-white text-sm"
-        >{{ player[statsFormat].dmgTaken }}</td>
+        >{{ roundStats(player[statsFormat].dmgTaken) }}</td>
         <td
           :style="bgColor(player, '71, 132, 116', 'kp')"
           class="p-2 text-white text-sm"
@@ -248,6 +248,9 @@ export default {
     displayBorderbottom(index) {
       return this.allyTeam || index !== this.data.players.length - 1
     },
+    roundStats(value) {
+      return this.percentSettings ? value : this.$options.filters.kilo(value)
+    },
     compareSummonernames,
   }
 }
diff --git a/client/src/components/Match/Match.vue b/client/src/components/Match/Match.vue
index 71b906e..3329fc8 100644
--- a/client/src/components/Match/Match.vue
+++ b/client/src/components/Match/Match.vue
@@ -81,11 +81,11 @@
             </div>
             <div class="flex items-center">
               <img src="@/assets/img/icons/Gold.svg" alt="Gold" />
-              <div class="ml-1 gold text-sm font-bold">{{ data.stats.gold }}</div>
+              <div class="ml-1 gold text-sm font-bold">{{ data.stats.gold|kilo }}</div>
             </div>
             <div class="flex items-center">
               <img src="@/assets/img/icons/Damage.svg" alt="Damage" />
-              <div class="ml-1 damage text-sm font-bold">{{ data.stats.dmgChamp }}</div>
+              <div class="ml-1 damage text-sm font-bold">{{ data.stats.dmgChamp|kilo }}</div>
             </div>
             <div class="flex items-center">
               <img src="@/assets/img/icons/KillParticipation.svg" alt="KillParticipation" />
diff --git a/client/src/main.js b/client/src/main.js
index 08d0315..6b04997 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -14,6 +14,10 @@ Vue.filter('capitalize', (value) => {
   return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase()
 })
 
+Vue.filter('kilo', (value) => {
+  return `${+(value / 1000).toFixed(1)}k`
+})
+
 Vue.filter('secToTime', (sec) => {
   const min = Math.floor(sec / 60)
   const newSec = sec - min * 60