From 754a8b497c56d263e428803468baf8135354077f Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Wed, 15 Jan 2020 20:07:26 +0100
Subject: [PATCH] feat: highlight search summoner in live game tab

---
 client/src/components/Summoner/Live/LiveTeam.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Summoner/Live/LiveTeam.vue b/client/src/components/Summoner/Live/LiveTeam.vue
index f5ef22e..2e685e0 100644
--- a/client/src/components/Summoner/Live/LiveTeam.vue
+++ b/client/src/components/Summoner/Live/LiveTeam.vue
@@ -40,7 +40,7 @@
               </div>
               <div
                 :style="{backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${player.championId}.png')`}"
-                :class="[ally ? 'border-teal-400' : 'border-red-400']"
+                :class="borderChampion(player.summonerId)"
                 class="ml-2 w-12 h-12 bg-cover bg-center bg-blue-1000 border-2 rounded-full"
               ></div>
               <div class="ml-2 flex flex-col">
@@ -57,7 +57,8 @@
                 <router-link
                   v-if="!player.bot"
                   :to="{ name: 'summoner', params: { region: $route.params.region, name: player.summonerName }}"
-                  class="font-semibold hover:text-blue-200"
+                  :class="[player.summonerId === account.id ? 'text-yellow-500' : 'hover:text-blue-200']"
+                  class="font-semibold"
                 >{{ player.summonerName }}</router-link>
                 <div class="text-xs">Level {{ player.level }}</div>
               </div>
@@ -193,6 +194,7 @@ export default {
 
   computed: {
     ...mapState({
+      account: state => state.summoner.basic.account,
       live: state => state.summoner.live.match,
       liveLoaded: state => state.summoner.live.liveLoaded,
     })
@@ -207,6 +209,13 @@ export default {
       }
       return this.live.bannedChampions.find(b => b.pickTurn === index)
     },
+    borderChampion(id) {
+      if (id === this.account.id) {
+        return 'border-yellow-500'
+      }
+
+      return this.ally ? 'border-teal-400' : 'border-red-400'
+    },
     getSummonerLink,
   }
 }