From ea6c1b35a37f938b9ddbc4dfad987c960e8f0673 Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Sat, 9 Nov 2019 23:24:12 +0100
Subject: [PATCH] fix: sort gamemodes stats by most played and change colors of
 W/L

---
 .../src/components/Summoner/SummonerStats.vue | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Summoner/SummonerStats.vue b/client/src/components/Summoner/SummonerStats.vue
index de32137..62b1bd8 100644
--- a/client/src/components/Summoner/SummonerStats.vue
+++ b/client/src/components/Summoner/SummonerStats.vue
@@ -130,9 +130,15 @@
                 class="w-1/4"
               >{{ calculateWinrate(league.wins, league.count).winrate|percent }}</div>
               <div class="w-1/4">
-                <span class="text-green-400 font-bold">{{ league.wins }}</span>
+                <span
+                  :class="winLossColor(league.wins, league.losses).win"
+                  class="font-bold"
+                >{{ league.wins }}</span>
                 <span class="mx-1 text-gray-400 font-bold">-</span>
-                <span class="text-gray-200 font-bold">{{ league.losses }}</span>
+                <span
+                  :class="winLossColor(league.wins, league.losses).loss"
+                  class="font-bold"
+                >{{ league.losses }}</span>
               </div>
             </li>
           </ul>
@@ -181,6 +187,15 @@ export default {
           return { ...l, ...gameModes[l._id] }
         })
         .filter(l => l.type === typeName)
+        .sort((a, b) => b.count - a.count)
+    },
+    winLossColor(win, loss) {
+      const colors = {
+        win: 'text-gray-200',
+        loss: 'text-gray-200'
+      }
+      win >= loss ? colors.win = 'text-green-400' : colors.loss = 'text-red-400'
+      return colors
     }
   }
 }