From 7950d835c496b9b5242c8ecdc1752487ebb0729b Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Fri, 29 Nov 2019 18:09:35 +0100
Subject: [PATCH] feat: display banned champion name on hover

---
 .../Match/DetailedMatchGlobalStats.vue        | 42 +++++++++++++------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Match/DetailedMatchGlobalStats.vue b/client/src/components/Match/DetailedMatchGlobalStats.vue
index 9a1a83b..1ed486f 100644
--- a/client/src/components/Match/DetailedMatchGlobalStats.vue
+++ b/client/src/components/Match/DetailedMatchGlobalStats.vue
@@ -1,21 +1,33 @@
 <template>
   <div :class="allyTeam ? 'text-left' : 'text-right'">
     <div v-if="team.bans">
-      <div
+      <Dropdown
         v-for="ban in team.bans"
         :key="'ban-' + ban.pickTurn"
-        :class="[{'ml-2': ban.pickTurn !== 6 && ban.pickTurn !== 1}, allyTeam ? 'ban-blue border-teal-500' : 'ban-red border-red-500']"
-        class="relative ban inline-block border-2 rounded-full"
+        :class="{'ml-2': ban.pickTurn !== 6 && ban.pickTurn !== 1}"
+        class="inline-block"
       >
-        <div
-          :style="[ban.champion.id ? {backgroundImage: `url('${ban.champion.icon}')`} : '']"
-          class="ban-img w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full"
-        ></div>
-        <div
-          :class="[textLightColor, bgColor]"
-          class="absolute ban-order w-4 h-4 flex items-center justify-center text-xs font-bold rounded-full"
-        >{{ ban.pickTurn }}</div>
-      </div>
+        <template v-slot:trigger>
+          <div
+            :class="[allyTeam ? 'ban-blue border-teal-500' : 'ban-red border-red-500']"
+            class="relative ban border-2 rounded-full cursor-pointer"
+          >
+            <div
+              :style="[ban.champion.id ? {backgroundImage: `url('${ban.champion.icon}')`} : '']"
+              class="ban-img w-6 h-6 bg-cover bg-center bg-blue-1000 rounded-full"
+            ></div>
+            <div
+              :class="[textLightColor, bgColor]"
+              class="absolute ban-order w-4 h-4 flex items-center justify-center text-xs font-bold rounded-full"
+            >{{ ban.pickTurn }}</div>
+          </div>
+        </template>
+        <template v-slot:default>
+          <div class="px-2 text-white text-center text-xs leading-tight select-none">
+            <div>{{ ban.champion.name }}</div>
+          </div>
+        </template>
+      </Dropdown>
     </div>
     <div
       :class="allyTeam ? 'text-left' : 'text-right flex-row-reverse'"
@@ -61,7 +73,13 @@
 </template>
 
 <script>
+import Dropdown from '@/components/Dropdown'
+
 export default {
+  components: {
+    Dropdown,
+  },
+
   props: {
     team: {
       type: Object,