From fedb4b461cf3a88f66e9084efa2149e783744ae3 Mon Sep 17 00:00:00 2001 From: Valentin Kaelin Date: Thu, 14 Nov 2019 21:22:01 +0100 Subject: [PATCH] feat: add hover infos for summoners' items --- client/.eslintrc.js | 1 + .../components/Match/DetailedMatchTeam.vue | 14 ++-- client/src/components/Match/Match.vue | 32 ++----- client/src/components/Match/MatchItems.vue | 83 +++++++++++++++++++ client/src/helpers/summoner.js | 16 ---- .../app/Controllers/Http/MatchController.js | 4 + server/app/Helpers/MatchHelper.js | 4 + .../app/Transformers/BasicMatchTransformer.js | 4 +- .../Transformers/DetailedMatchTransformer.js | 4 +- server/app/Transformers/MatchTransformer.js | 13 ++- 10 files changed, 123 insertions(+), 52 deletions(-) create mode 100644 client/src/components/Match/MatchItems.vue diff --git a/client/.eslintrc.js b/client/.eslintrc.js index c80ee2d..f3eae80 100644 --- a/client/.eslintrc.js +++ b/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", diff --git a/client/src/components/Match/DetailedMatchTeam.vue b/client/src/components/Match/DetailedMatchTeam.vue index 1ca0f27..fc0f430 100644 --- a/client/src/components/Match/DetailedMatchTeam.vue +++ b/client/src/components/Match/DetailedMatchTeam.vue @@ -105,14 +105,7 @@
S2
-
-
-
+ @@ -163,8 +156,13 @@ + + \ No newline at end of file diff --git a/client/src/helpers/summoner.js b/client/src/helpers/summoner.js index 7646a02..f88d8db 100644 --- a/client/src/helpers/summoner.js +++ b/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 diff --git a/server/app/Controllers/Http/MatchController.js b/server/app/Controllers/Http/MatchController.js index 7b7a2f0..e4a65c1 100644 --- a/server/app/Controllers/Http/MatchController.js +++ b/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 } diff --git a/server/app/Helpers/MatchHelper.js b/server/app/Helpers/MatchHelper.js index 84dca15..187eb5f 100644 --- a/server/app/Helpers/MatchHelper.js +++ b/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 } diff --git a/server/app/Transformers/BasicMatchTransformer.js b/server/app/Transformers/BasicMatchTransformer.js index c2be401..0cdcf81 100644 --- a/server/app/Transformers/BasicMatchTransformer.js +++ b/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 diff --git a/server/app/Transformers/DetailedMatchTransformer.js b/server/app/Transformers/DetailedMatchTransformer.js index 02dcc0c..c8270c7 100644 --- a/server/app/Transformers/DetailedMatchTransformer.js +++ b/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 diff --git a/server/app/Transformers/MatchTransformer.js b/server/app/Transformers/MatchTransformer.js index 7a26e87..326b1ec 100644 --- a/server/app/Transformers/MatchTransformer.js +++ b/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