feat: add hover infos for summoners' items

client/.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
     'vue/multiline-html-element-content-newline': 'off',
     "vue/html-self-closing": 'off',
     'vue/max-attributes-per-line': 'off',
+    'vue/no-v-html': 'off',
     "vue/attributes-order": ["error", {
       "order": [
         "DEFINITION",

client/src/components/Match/DetailedMatchTeam.vue

@@ -105,14 +105,7 @@
                 </svg>
                 <div class="text-blue-200 text-xs">S2</div>
               </div>
-              <div class="ml-2 flex items-center">
-                <div
-                  v-for="(item, indexItem) in player.items"
-                  :key="indexItem"
-                  :style="{backgroundImage: item}"
-                  class="ml-2px w-6 h-6 rounded-md bg-blue-1000 bg-center bg-cover"
-                ></div>
-              </div>
+              <MatchItems :items="player.items" :one-row="true" />
             </div>
           </div>
         </td>
@@ -163,8 +156,13 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import MatchItems from '@/components/Match/MatchItems'
 
 export default {
+  components: {
+    MatchItems,
+  },
+
   props: {
     allPlayers: {
       type: Array,

client/src/components/Match/Match.vue

@@ -5,7 +5,7 @@
       :class="[matchResultClass, showDetails ? 'rounded-t-lg' : 'rounded-lg']"
       class="match relative mt-4 bg-blue-800 text-white text-base cursor-pointer hover:shadow-xl"
     >
-      <div class="relative z-20 flex flex-wrap px-5 py-3">
+      <div class="relative flex flex-wrap px-5 py-3">
         <div class="first w-4/12 text-left">
           <div>
             <div
@@ -66,14 +66,7 @@
         </div>
 
         <div class="second w-3/12 py-6 flex items-center">
-          <div class="items flex flex-wrap">
-            <div
-              v-for="(item, index) in data.items"
-              :key="index"
-              :style="{backgroundImage: item}"
-              class="ml-1 w-8 h-8 rounded-md bg-blue-1000 bg-center bg-cover"
-            ></div>
-          </div>
+          <MatchItems :items="data.items" />
 
           <div class="ml-4 leading-none">
             <div class="flex items-center">
@@ -85,21 +78,15 @@
             </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 }}</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 }}</div>
             </div>
             <div class="flex items-center">
               <img src="@/assets/img/icons/KillParticipation.svg" alt="KillParticipation" />
-              <div class="ml-1 kp text-sm font-bold">
-                {{ data.stats.kp|percent }}
-              </div>
+              <div class="ml-1 kp text-sm font-bold">{{ data.stats.kp|percent }}</div>
             </div>
           </div>
         </div>
@@ -149,10 +136,12 @@
 <script>
 import { mapActions, mapState, mapGetters } from 'vuex'
 import DetailedMatch from '@/components/Match/DetailedMatch'
+import MatchItems from '@/components/Match/MatchItems'
 
 export default {
   components: {
-    DetailedMatch
+    DetailedMatch,
+    MatchItems,
   },
 
   props: {
@@ -242,11 +231,6 @@ export default {
   background-position: center;
 }
 
-.items {
-  width: 7rem;
-  height: 4.5rem;
-}
-
 .gold {
   color: #f3a05a;
 }

client/src/components/Match/MatchItems.vue

@@ -0,0 +1,83 @@
+<template>
+  <div :class="oneRow ? 'ml-2 items-center' : 'items-2-rows flex-wrap'" class="flex">
+    <Dropdown v-for="(item, index) in items" :key="index">
+      <template v-slot:trigger>
+        <div
+          :style="{backgroundImage: item ? `url('${item.image}')` : null}"
+          :class="[oneRow ? 'ml-2px w-6 h-6' : 'ml-1 w-8 h-8', {'cursor-pointer': item !== null}]"
+          class="rounded-md bg-blue-1000 bg-center bg-cover"
+        ></div>
+      </template>
+      <template v-if="item !== null" v-slot:default>
+        <div class="flex max-w-md p-2 text-white text-left text-xs select-none">
+          <div
+            :style="{backgroundImage: item ? `url('${item.image}')` : null}"
+            class="ml-1 w-12 h-12 flex-shrink-0 rounded-md bg-blue-1000 bg-center bg-cover"
+          ></div>
+          <div class="ml-2 leading-none">
+            <div class="text-base">{{ item.name }}</div>
+            <div class="mt-1">
+              <span class="text-blue-200">Price:</span>
+              <span class="ml-1 text-sm text-yellow-500 font-semibold">{{ item.price }}</span>
+            </div>
+            <div v-html="item.description" class="mt-1 item-description text-blue-200 font-light"></div>
+          </div>
+        </div>
+      </template>
+    </Dropdown>
+  </div>
+</template>
+
+<script>
+import Dropdown from '@/components/Dropdown.vue'
+
+export default {
+  components: {
+    Dropdown
+  },
+
+  props: {
+    oneRow: {
+      type: Boolean,
+      default: false
+    },
+    items: {
+      type: Array,
+      required: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.items-2-rows {
+  width: 7rem;
+  height: 4.5rem;
+}
+
+.item-description >>> stats {
+  color: #fff;
+  line-height: 1.25;
+}
+
+.item-description >>> br + br {
+  display: none;
+}
+
+.item-description >>> stats br {
+  display: block;
+}
+
+.item-description >>> unique,
+.item-description >>> passive,
+.item-description >>> active {
+  color: #fff;
+  font-weight: bold;
+  display: block;
+  margin-top: 0.5rem;
+}
+
+.item-description >>> font {
+  color: #63b3ed;
+}
+</style>

client/src/helpers/summoner.js

@@ -15,11 +15,6 @@ export function createDetailedMatchData(detailedMatch) {
   detailedMatch.redTeam.players = detailedMatch.redTeam.players.map(p => getPlayerData(p))
 
   function getPlayerData(p) {
-    // Items
-    for (let i = 0; i < p.items.length; i++) {
-      p.items[i] = getItemLink(p.items[i])
-    }
-
     // Summoner Spells
     p.firstSum = getSummonerLink(p.firstSum)
     p.secondSum = getSummonerLink(p.secondSum)
@@ -35,10 +30,6 @@ export function createDetailedMatchData(detailedMatch) {
  */
 export function createMatchData(matches) {
   for (const match of matches) {
-    for (let i = 0; i < match.items.length; i++) {
-      match.items[i] = getItemLink(match.items[i])
-    }
-
     match.firstSum = getSummonerLink(match.firstSum)
     match.secondSum = getSummonerLink(match.secondSum)
 
@@ -90,13 +81,6 @@ export function createSummonerData(RiotData) {
   }
 }
 
-function getItemLink(id) {
-  if (id === 0) {
-    return null
-  }
-  return `url('https://ddragon.leagueoflegends.com/cdn/${store.getters['ddragon/version']}/img/item/${id}.png')`
-}
-
 function getLeagueData(leagueData, leagueName) {
   if (!leagueData) return null
 

server/app/Controllers/Http/MatchController.js

@@ -41,10 +41,14 @@ class MatchController {
     let matchFromRiot = await Jax.Match.get(gameId)
 
     const champions = await Jax.DDragon.Champion.list()
+    const items = await Jax.DDragon.Item.list()
     const runes = await Jax.DDragon.Rune.list()
+    const version = Jax.DDragon.Version
     const ctx = {
       champions: champions.data,
+      items: items.data,
       runes,
+      version,
       MatchHelper
     }
 

server/app/Helpers/MatchHelper.js

@@ -101,12 +101,16 @@ class MatchHelper {
 
     /* If we have to store some matches in the db */
     if (matchesFromApi.length !== 0) {
+      const items = await Jax.DDragon.Item.list()
       const champions = await Jax.DDragon.Champion.list()
       const runes = await Jax.DDragon.Rune.list()
+      const version = Jax.DDragon.Version
       const ctx = {
         account,
         champions: champions.data,
+        items: items.data,
         runes,
+        version,
         MatchHelper: this
       }
 

server/app/Transformers/BasicMatchTransformer.js

@@ -13,10 +13,12 @@ class BasicMatchTransformer extends MatchTransformer {
    * @param match data from Riot API
    * @param ctx context
    */
-  transform(match, { account, champions, runes, MatchHelper }) {
+  transform(match, { account, champions, items, runes, version, MatchHelper }) {
     this.match = match
     this.champions = champions
+    this.items = items
     this.runes = runes
+    this.version = version
     this.MatchHelper = MatchHelper
 
     // Global data about the match

server/app/Transformers/DetailedMatchTransformer.js

@@ -13,10 +13,12 @@ class DetailedMatchTransformer extends MatchTransformer {
    * @param match data from Riot API
    * @param ctx context
    */
-  transform(match, { champions, runes, MatchHelper }) {
+  transform(match, { champions, items, runes, version, MatchHelper }) {
     this.match = match
     this.champions = champions
+    this.items = items
     this.runes = runes
+    this.version = version
     this.MatchHelper = MatchHelper
 
     // Global data

server/app/Transformers/MatchTransformer.js

@@ -98,8 +98,17 @@ class MatchTransformer {
 
     const items = []
     for (let i = 0; i < 6; i++) {
-      const currentItem = 'item' + i
-      items.push(player.stats[currentItem])
+      const id = player.stats['item' + i]
+      if(id === 0) {
+        items.push(null)
+        continue
+      }
+      items.push({
+        image: `https://ddragon.leagueoflegends.com/cdn/${this.version}/img/item/${id}.png`,
+        name: this.items[id].name,
+        description: this.items[id].description,
+        price: this.items[id].gold.total
+      })
     }
 
     const firstSum = player.spell1Id