Start cleaning some Vue code

client/src/helpers/summoner.js

@@ -0,0 +1,95 @@
+import { timeDifference, secToTime, getRankImg } from '@/helpers/functions.js'
+import { maps, gameModes } from '@/data/data.js'
+import summonersJSON from '@/data/summoner.json'
+
+/**
+ * Return all the infos about a summoner built with the Riot API data
+ * @param {Object} RiotData : all data from the Riot API
+ * @param {Object} championsInfos : champions data from the Riot API
+ */
+export function createSummonerData(RiotData, championsInfos) {
+  console.log('--- ALL INFOS ---')
+  console.log(RiotData)
+
+  const userStats = RiotData.account
+  const soloQStats = RiotData.soloQ
+  const matches = RiotData.matchesDetails
+
+  const matchesInfos = []
+  // Loop on all matches
+  for (let i = 0; i < matches.length; i++) {
+    const currentMatch = matches[i]
+    const participantId = currentMatch.participantIdentities.find((p) => p.player.currentAccountId === userStats.accountId).participantId
+
+    const teamId = currentMatch.participants[participantId - 1].teamId
+    const win = currentMatch.teams.find((t) => t.teamId === teamId).win === 'Win'
+
+    const map = maps[currentMatch.mapId]
+    let mode = gameModes[currentMatch.queueId]
+    if (!mode)
+      mode = 'Undefined gamemode'
+    const champion = Object.entries(championsInfos).find(([, champion]) => Number(champion.key) === currentMatch.participants[participantId - 1].championId)[0]
+    const role = currentMatch.participants[participantId - 1].timeline.lane
+    const timeAgo = timeDifference(currentMatch.gameCreation)
+    const time = secToTime(currentMatch.gameDuration)
+    const kills = currentMatch.participants[participantId - 1].stats.kills
+    const deaths = currentMatch.participants[participantId - 1].stats.deaths
+    const assists = currentMatch.participants[participantId - 1].stats.assists
+    const level = currentMatch.participants[participantId - 1].stats.champLevel
+
+    const items = []
+    for (let i = 0; i < 6; i++) {
+      const currentItem = 'item' + i
+      items.push(getItemLink(currentMatch.participants[participantId - 1].stats[currentItem]))
+    }
+
+    const gold = (currentMatch.participants[participantId - 1].stats.goldEarned / 1000).toFixed(1) + 'k'
+    const minions = currentMatch.participants[participantId - 1].stats.totalMinionsKilled + currentMatch.participants[participantId - 1].stats.neutralMinionsKilled
+
+    const firstSum = currentMatch.participants[participantId - 1].spell1Id
+    const secondSum = currentMatch.participants[participantId - 1].spell2Id
+
+    matchesInfos.push({
+      result: win,
+      map: map,
+      gamemode: mode,
+      champ: champion,
+      role: role,
+      date: timeAgo,
+      time: time,
+      kills: kills,
+      deaths: deaths,
+      assists: assists,
+      level: level,
+      items: items,
+      gold: gold,
+      minions: minions,
+      firstSum: getSummonerLink(firstSum),
+      secondSum: getSummonerLink(secondSum)
+    })
+  } // end loop matches
+  console.log('matches infos just below')
+  console.log(matchesInfos)
+
+  return {
+    accountId: userStats.accountId,
+    allMatches: RiotData.allMatches,
+    matches: matchesInfos,
+    profileIconId: userStats.profileIconId,
+    name: userStats.name,
+    level: userStats.summonerLevel,
+    rank: soloQStats ? soloQStats.tier + ' ' + soloQStats.rank : 'Player is unranked',
+    rankImgLink: getRankImg(soloQStats),
+    rankedWins: soloQStats ? soloQStats.wins : undefined,
+    rankedLosses: soloQStats ? soloQStats.losses : undefined
+  }
+}
+
+function getItemLink(id) {
+  return `url('https://ddragon.leagueoflegends.com/cdn/${process.env.VUE_APP_PATCH}/img/item/${id === 0 ? 3637 : id}.png') no-repeat center center / contain`
+}
+
+function getSummonerLink(id) {
+  const spellName = Object.entries(summonersJSON.data).find(([, spell]) => Number(spell.key) === id)[0]
+  return `https://ddragon.leagueoflegends.com/cdn/${process.env.VUE_APP_PATCH}/img/spell/${spellName}.png`
+}

client/src/store/modules/summoner.js

@@ -1,7 +1,5 @@
 import { axios } from '@/plugins/axios'
-import { timeDifference, secToTime, getRankImg } from '@/helpers/functions.js'
+import { createSummonerData } from '@/helpers/summoner'
-import { maps, gameModes } from '@/data/data.js'
-import summonersJSON from '@/data/summoner.json'
 
 export const namespaced = true
 
@@ -33,9 +31,8 @@ export const actions = {
     commit('SUMMONER_REQUEST')
     try {
       const resp = await axios(({ url: 'api', data: { summoner, region }, method: 'POST' }))
-      await dispatch('ddragon/getChampions', {}, { root: true })
       if (resp.data) {
-        const infos = createObject(resp.data, rootState.ddragon.champions)
+        const infos = createSummonerData(resp.data, rootState.ddragon.champions)
         commit('SUMMONER_FOUND', infos)
       } else {
         commit('SUMMONER_NOT_FOUND')
@@ -52,90 +49,3 @@ export const actions = {
     }
   }
 }
-
-function createObject(JSONData, championsInfos) {
-  console.log('--- ALL INFOS ---')
-  console.log(JSONData)
-
-  const userStats = JSONData.account
-  const soloQStats = JSONData.soloQ
-  const matches = JSONData.matchesDetails
-
-  const matchesInfos = []
-  // Loop on all matches
-  for (let i = 0; i < matches.length; i++) {
-    const currentMatch = matches[i]
-    const participantId = currentMatch.participantIdentities.find((p) => p.player.currentAccountId === userStats.accountId).participantId
-
-    const teamId = currentMatch.participants[participantId - 1].teamId
-    const win = currentMatch.teams.find((t) => t.teamId === teamId).win === 'Win'
-
-    const map = maps[currentMatch.mapId]
-    let mode = gameModes[currentMatch.queueId]
-    if (!mode)
-      mode = 'Undefined gamemode'
-    const champion = Object.entries(championsInfos).find(([, champion]) => Number(champion.key) === currentMatch.participants[participantId - 1].championId)[0]
-    const role = currentMatch.participants[participantId - 1].timeline.lane
-    const timeAgo = timeDifference(currentMatch.gameCreation)
-    const time = secToTime(currentMatch.gameDuration)
-    const kills = currentMatch.participants[participantId - 1].stats.kills
-    const deaths = currentMatch.participants[participantId - 1].stats.deaths
-    const assists = currentMatch.participants[participantId - 1].stats.assists
-    const level = currentMatch.participants[participantId - 1].stats.champLevel
-
-    const items = []
-    for (let i = 0; i < 6; i++) {
-      const currentItem = 'item' + i
-      items.push(getItemLink(currentMatch.participants[participantId - 1].stats[currentItem]))
-    }
-
-    const gold = (currentMatch.participants[participantId - 1].stats.goldEarned / 1000).toFixed(1) + 'k'
-    const minions = currentMatch.participants[participantId - 1].stats.totalMinionsKilled + currentMatch.participants[participantId - 1].stats.neutralMinionsKilled
-
-    const firstSum = currentMatch.participants[participantId - 1].spell1Id
-    const secondSum = currentMatch.participants[participantId - 1].spell2Id
-
-    matchesInfos.push({
-      result: win,
-      map: map,
-      gamemode: mode,
-      champ: champion,
-      role: role,
-      date: timeAgo,
-      time: time,
-      kills: kills,
-      deaths: deaths,
-      assists: assists,
-      level: level,
-      items: items,
-      gold: gold,
-      minions: minions,
-      firstSum: getSummonerLink(firstSum),
-      secondSum: getSummonerLink(secondSum)
-    })
-  } // end loop matches
-  console.log('matches infos just below')
-  console.log(matchesInfos)
-
-  return {
-    accountId: userStats.accountId,
-    allMatches: JSONData.allMatches,
-    matches: matchesInfos,
-    profileIconId: userStats.profileIconId,
-    name: userStats.name,
-    level: userStats.summonerLevel,
-    rank: soloQStats ? soloQStats.tier + ' ' + soloQStats.rank : 'Joueur non classé',
-    rankImgLink: getRankImg(soloQStats),
-    rankedWins: soloQStats ? soloQStats.wins : undefined,
-    rankedLosses: soloQStats ? soloQStats.losses : undefined
-  }
-}
-
-function getItemLink(id) {
-  return `url('https://ddragon.leagueoflegends.com/cdn/${process.env.VUE_APP_PATCH}/img/item/${id === 0 ? 3637 : id}.png') no-repeat center center / contain`
-}
-
-function getSummonerLink(id) {
-  const spellName = Object.entries(summonersJSON.data).find(([, spell]) => Number(spell.key) === id)[0]
-  return `https://ddragon.leagueoflegends.com/cdn/${process.env.VUE_APP_PATCH}/img/spell/${spellName}.png`
-}

client/src/views/Summoner.vue

@@ -13,25 +13,25 @@
 
     <template v-if="summonerFound && !loading">
       <div class="container mx-auto pb-16">
-        <div class="player bg-blue-100">
+        <div class="mt-4 mx-auto p-4 text-center bg-blue-100 border border-gray-300 rounded-lg">
           <div
-            class="player__pp"
+            class="mx-auto w-16 h-16 bg-gray-300"
             :style="{background: `url(https://ddragon.leagueoflegends.com/cdn/${this.$patch}/img/profileicon/${localInfos.profileIconId}.png) center/cover`}"
           ></div>
           <h1 class="player__name">{{ localInfos.name }}</h1>
           <h3 class="player__level">{{ localInfos.level }}</h3>
           <h3 class="player__rank">{{ localInfos.rank }}</h3>
           <div
-            class="player__rank-img"
+            class="mx-auto w-16 h-16 bg-gray-300"
             :style="{background: `url(${localInfos.rankImgLink}) center/cover`}"
           ></div>
           <h3
             class="player__ratio"
-          >{{ localInfos.rankedWins ? localInfos.rankedWins + ' wins / ' + localInfos.rankedLosses + ' losses' : "Joueur non classé" }}</h3>
+          >{{ localInfos.rankedWins ? localInfos.rankedWins + ' wins / ' + localInfos.rankedLosses + ' losses' : localInfos.rank }}</h3>
 
           <RecentActivity :matches="localInfos.allMatches" />
 
-          <ul class="list-matches--debug">
+          <ul>
             <Match
               v-for="(match, index) in localInfos.matches"
               :key="index"
@@ -49,13 +49,12 @@
       </div>
     </template>
     <template v-else>
-      <p>Le joueur est introuvable.</p>
+      <p>Player can't be found.</p>
     </template>
   </div>
 </template>
 
 <script>
-// import itemsJSON from '@/data/item.json'
 import { mapState, mapActions } from 'vuex'
 import RecentActivity from '@/components/RecentActivity.vue'
 import Match from '@/components/Match.vue'
@@ -89,64 +88,20 @@ export default {
     }
   },
 
-  // created() {
-  //   this.getChampionData()
-  // },
   mounted() {
     this.apiCall()
   },
 
   methods: {
     async apiCall() {
-      await this.summonerRequest({ summoner: this.summoner, region: this.region })
+      await this.getChampions()
+      this.summonerRequest({ summoner: this.summoner, region: this.region })
     },
     redirect(summoner, region) {
       this.$router.push(`/summoner/${region}/${summoner}`)
     },
-    ...mapActions('summoner', ['summonerRequest'])
+    ...mapActions('summoner', ['summonerRequest']),
+    ...mapActions('ddragon', ['getChampions'])
   }
 }
 </script>
-
-<style scoped>
-.debug {
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 40px;
-  height: 40px;
-  border: none;
-  z-index: 9999999999;
-}
-
-.debug:hover {
-  background: #ef5753;
-}
-
-.player {
-  text-align: center;
-  margin: 16px auto 0;
-  border: 1px solid #ebebeb;
-  padding: 16px;
-  /* background: #fff; */
-}
-
-.player__pp {
-  width: 75px;
-  height: 75px;
-  background: #ebebeb;
-  margin: 0 auto;
-}
-
-.player__rank-img {
-  width: 75px;
-  height: 75px;
-  background: #ebebeb;
-  margin: 0 auto;
-}
-
-.list-matches {
-  list-style-type: none;
-  padding: 0;
-}
-</style>