From e3ce33788524244978349e0c654c30d228f806d8 Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Sat, 19 Dec 2020 18:49:03 +0100
Subject: [PATCH] feat(live): add detailed runes in live game tab

---
 client/src/assets/css/transition.css          |  2 +-
 .../src/components/Summoner/Live/LiveTeam.vue | 28 +++++++++++++++++--
 2 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/client/src/assets/css/transition.css b/client/src/assets/css/transition.css
index 86fe412..6c9b9d8 100644
--- a/client/src/assets/css/transition.css
+++ b/client/src/assets/css/transition.css
@@ -41,7 +41,7 @@
 }
 
 .fade-fast-enter-active, .fade-fast-leave-active {
-  transition: opacity .5s;
+  transition: opacity .3s;
 }
 
 .fade-fast-enter, .fade-fast-leave-to,
diff --git a/client/src/components/Summoner/Live/LiveTeam.vue b/client/src/components/Summoner/Live/LiveTeam.vue
index 0d8105a..c56a79d 100644
--- a/client/src/components/Summoner/Live/LiveTeam.vue
+++ b/client/src/components/Summoner/Live/LiveTeam.vue
@@ -24,7 +24,11 @@
         >
           <td class="py-1 pl-2 rounded-l-lg">
             <div class="flex items-center">
-              <div class="flex flex-col items-center">
+              <div 
+                @click="selectRunes(player)"
+                :class="{ 'cursor-pointer': player.perks }"
+                class="flex flex-col items-center runes"
+              >
                 <div
                   :style="{backgroundImage: `url('${player.runes.primaryRune}')`}"
                   class="w-6 h-6 bg-center bg-cover"
@@ -180,7 +184,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapActions, mapState } from 'vuex'
 import { getSummonerLink } from '@/helpers/summoner.js'
 import { ContentLoader } from 'vue-content-loader'
 
@@ -259,7 +263,19 @@ export default {
             url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/${championId}/${championId}000.jpg')`,
       }
     },
+    selectRunes(player) {
+      if(!player.perks) {
+        return
+      }
+      
+      this.displayOrHideRunes({
+        primaryStyle: player.perks.perkStyle,
+        secondaryStyle: player.perks.perkSubStyle,
+        selected: player.perks.perkIds
+      })
+    },
     getSummonerLink,
+     ...mapActions('cdragon', ['displayOrHideRunes']),
   }
 }
 </script>
@@ -294,4 +310,12 @@ export default {
   background-size: cover;
   border-radius: 0.5rem;
 }
+
+.runes {
+  @apply transition-all duration-150 ease-in-out;
+}
+
+.runes:hover {
+  filter: brightness(1.3);
+}
 </style>