feat: add Summoner's games with friends stats

client/src/components/Match.vue

@@ -1,14 +1,14 @@
 <template>
   <li class="relative">
-    <div class="game-status absolute left-0 h-32 w-32">
+    <!-- <div class="game-status absolute left-0 h-32 w-32">
       <div class="text-2xl text-teal-500 uppercase font-extrabold">{{ data.status }}</div>
-    </div>
+    </div> -->
     <div
       :class="matchResultClass"
-      class="ml-10 match relative mt-4 rounded-lg text-white text-base"
+      class="ml-4 match relative mt-4 bg-blue-800 rounded-lg text-white text-base"
     >
       <div class="relative z-20 flex flex-wrap px-5 py-3">
-        <div class="first w-1/3 text-left">
+        <div class="first w-4/12 text-left">
           <div>
             <div
               class="h-6 text-lg text-teal-500 font-extrabold uppercase leading-none"
@@ -49,15 +49,15 @@
                   class="w-6 h-6 bg-blue-1000 rounded-md"
                 ></div>
               </div>
-              <div class="ml-12 flex flex-col justify-center items-center leading-none">
+              <div class="mx-auto flex flex-col justify-center items-center leading-none">
-                <div class="text-3xl font-extrabold text-teal-500">
+                <div class="text-xl font-extrabold text-teal-500">
                   <span class>{{ data.kills }}</span>
                   <span class>/</span>
                   <span class>{{ data.deaths }}</span>
                   <span class>/</span>
                   <span class>{{ data.assists }}</span>
                 </div>
-                <div class="mt-2 text-white text-sm font-extrabold">{{ data.kda }} KDA</div>
+                <div class="mt-2 text-white text-xs font-extrabold">{{ data.kda }} KDA</div>
               </div>
             </div>
 
@@ -67,7 +67,7 @@
           </div>
         </div>
 
-        <div class="second w-1/3 py-6 flex items-center">
+        <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"
@@ -77,49 +77,49 @@
             ></div>
           </div>
 
-          <div class="ml-12 leading-none">
+          <div class="ml-4 leading-none">
             <div class="flex items-center">
               <img src="@/assets/img/icons/Creep.svg" alt="Minions" />
-              <div class="ml-1 text-teal-300 text-lg font-bold">
+              <div class="ml-1 text-teal-300 text-sm font-bold">
                 {{ data.minions }}
                 <span class="font-normal">cs</span>
               </div>
             </div>
             <div class="flex items-center">
               <img src="@/assets/img/icons/Gold.svg" alt="Gold" />
-              <div class="ml-1 gold text-lg font-bold">
+              <div class="ml-1 gold text-sm font-bold">
                 {{ data.gold }}
-                <span class="font-normal">gold</span>
+                <!-- <span class="font-normal">gold</span> -->
               </div>
             </div>
             <div class="flex items-center">
               <img src="@/assets/img/icons/Damage.svg" alt="Damage" />
-              <div class="ml-1 damage text-lg font-bold">
+              <div class="ml-1 damage text-sm font-bold">
                 {{ data.damage }}
-                <span class="font-normal">damage</span>
+                <!-- <span class="font-normal">dmg</span> -->
               </div>
             </div>
             <div class="flex items-center">
               <img src="@/assets/img/icons/KillParticipation.svg" alt="KillParticipation" />
-              <div class="ml-1 kp text-lg font-bold">
+              <div class="ml-1 kp text-sm font-bold">
                 {{ data.kp }}
-                <span class="font-normal">kp</span>
+                <!-- <span class="font-normal">kp</span> -->
               </div>
             </div>
           </div>
         </div>
 
-        <div class="third w-1/3 py-1 flex items-center">
+        <div class="third w-5/12 py-1 flex items-center">
           <div v-if="data.allyTeam.length > 1">
             <div
               v-for="(ally, index) in data.allyTeam"
               :key="'player-' + index"
-              class="flex items-center leading-none"
+              class="ml-4 flex items-center leading-none"
             >
               <router-link
                 :to="{ name: 'summoner', params: { region: $route.params.region, name: ally.name }}"
                 :class="isSummonerProfile(ally.name)"
-                class="w-20 text-right overflow-hidden text-overflow whitespace-no-wrap text-sm text-blue-200 font-medium hover:text-blue-100"
+                class="w-16 text-right overflow-hidden text-overflow whitespace-no-wrap text-xs text-blue-200 font-medium hover:text-blue-100"
               >{{ ally.name }}</router-link>
               <div
                 :class="index !== 0 ? '-mt-1': ''"
@@ -137,7 +137,7 @@
               ></div>
               <router-link
                 :to="{ name: 'summoner', params: { region: $route.params.region, name: data.enemyTeam[index].name }}"
-                class="ml-1 w-20 text-left overflow-hidden text-overflow whitespace-no-wrap text-sm text-blue-200 font-medium hover:text-blue-100"
+                class="ml-1 w-16 text-left overflow-hidden text-overflow whitespace-no-wrap text-xs text-blue-200 font-medium hover:text-blue-100"
               >{{ data.enemyTeam[index].name }}</router-link>
             </div>
           </div>
@@ -189,11 +189,11 @@ export default {
 
 <style scoped>
 .match {
-  background-image: linear-gradient(
+  /* background-image: linear-gradient(
     90deg,
     #2c5282 0%,
     rgba(44, 82, 130, 0) 100%
-  );
+  ); */
 }
 
 .match::after {
@@ -233,6 +233,7 @@ export default {
 
 .game-status {
   top: 50%;
+  left: 6px;
   transform: translateY(-50%) rotate(-90deg);
 }
 

client/src/components/Summoner/SummonerMates.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="bg-blue-800 rounded-lg">
+    <div class="pb-2">
+      <div class="flex items-center justify-center py-4 heading rounded-t-lg text-blue-200">
+        <svg
+          class="w-5 h-5"
+          style="transform: rotate(-5deg);"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+          <circle cx="9" cy="7" r="4" />
+          <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+          <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+        </svg>
+        <span class="mx-4 text-lg font-bold uppercase">FRIENDS</span>
+        <svg
+          class="w-5 h-5"
+          style="transform: rotate(5deg);"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+          <circle cx="9" cy="7" r="4" />
+          <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+          <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+        </svg>
+      </div>
+      <div v-if="hasMates" class="px-4 py-2 text-sm text-left">
+        <div class="flex font-bold text-base text-teal-400">
+          <div class="w-2/4">Summoner</div>
+          <div class="w-1/4">W / L</div>
+          <div class="w-1/4">Winrate</div>
+        </div>
+        <ul class="mt-1 text-gray-100">
+          <li v-for="mate in mates" :key="mate.name" class="flex justify-between items-center">
+            <router-link
+              :to="{ name: 'summoner', params: { region: $route.params.region, name: mate.name }}"
+              class="w-2/4 hover:text-teal-200"
+            >{{ mate.name }}</router-link>
+            <div class="w-1/4">{{ mate.wins }} / {{ mate.losses }}</div>
+            <div class="w-1/4">
+              <Dropdown>
+                <template v-slot:trigger>
+                  <div class="bg-blue-900 rounded-full h-2 cursor-pointer">
+                    <div
+                      :class="getWinrateColor(mate.winrate)"
+                      :style="{width: mate.winrate}"
+                      class="rounded-full h-full"
+                    ></div>
+                  </div>
+                </template>
+                <template v-slot:default>
+                  <div class="px-2 text-white text-center text-xs">
+                    <div>Winrate</div>
+                    <div>
+                      <span
+                        :class="getWinrateColor(mate.winrate, false)"
+                        class="font-bold"
+                      >{{ mate.winrate }}</span>
+                    </div>
+                  </div>
+                </template>
+              </Dropdown>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div v-else class="px-4 py-2 text-center">
+        <div>No friends have been found.</div>
+        <div>😕</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import Dropdown from '@/components/Dropdown.vue'
+
+export default {
+  components: {
+    Dropdown,
+  },
+
+  computed: {
+    hasMates() {
+      return this.mates.length > 0
+    },
+    ...mapState({
+      mates: state => state.summoner.infos.mates
+    }),
+  },
+
+  methods: {
+    getWinrateColor(winrate, background = true) {
+      winrate = winrate.slice(0, -1)
+      if (winrate >= 70) {
+        return background ? 'bg-yellow-400' : 'text-yellow-400'
+      } else if (winrate >= 60) {
+        return background ? 'bg-teal-500' : 'text-teal-500'
+      } else if (winrate >= 50) {
+        return background ? 'bg-teal-300' : 'text-teal-300'
+      }
+      return background ? 'bg-teal-200' : 'text-teal-200'
+    }
+  }
+}
+</script>
+
+<style scoped>
+.heading {
+  background: linear-gradient(
+    to top,
+    rgb(34, 92, 155) 0%,
+    rgb(34, 92, 135) 100%
+  );
+  box-shadow: rgba(235, 248, 255, 0.1) 0px -1px inset;
+}
+</style>

client/src/helpers/summoner.js

@@ -29,14 +29,25 @@ export function createMatchData(matches) {
   return matches
 }
 
+/**
+ * Return the list of teammates of the summoner in a nice way
+ * @param {Object} mates : mates list from the API
+ */
+export function createMatesData(mates) {
+  return mates
+    .map(mate => {
+      mate.total = mate.wins + mate.losses
+      mate.winrate = +(100 * mate.wins / mate.total).toFixed(1) + '%'
+      return mate
+    })
+    .sort((a, b) => (a.total < b.total) ? 1 : -1)
+}
+
 /**
  * Return all the infos about a summoner built with the Riot API data
  * @param {Object} RiotData : all data from the Riot API
  */
 export function createSummonerData(RiotData) {
-  console.log('--- ALL INFOS ---')
-  console.log(RiotData)
-
   // Ranked Stats
   RiotData.ranked.soloQ = getLeagueData(RiotData.ranked.soloQ, 'Solo/Duo')
   if (!RiotData.ranked.soloQ) delete RiotData.ranked.soloQ
@@ -65,6 +76,7 @@ export function createSummonerData(RiotData) {
     ranked: RiotData.ranked,
     matchList: RiotData.allMatches,
     matches: createMatchData(RiotData.matchesDetails),
+    mates: createMatesData(RiotData.mates),
     playing: RiotData.playing
   }
 }

client/src/store/modules/summoner.js

@@ -1,5 +1,5 @@
 import { axios } from '@/plugins/axios'
-import { createMatchData, createSummonerData } from '@/helpers/summoner'
+import { createMatchData, createMatesData, createSummonerData } from '@/helpers/summoner'
 
 export const namespaced = true
 
@@ -9,6 +9,7 @@ export const state = {
     matchIndex: 0,
     matchList: [],
     matches: [],
+    mates: [],
     ranked: {},
     playing: false
   },
@@ -20,12 +21,14 @@ export const mutations = {
   MATCHES_LOADING(state) {
     state.matchesLoading = true
   },
-  MATCHES_FOUND(state, newMatches) {
+  MATCHES_FOUND(state, { newMatches, mates }) {
     state.matchesLoading = false
 
     state.infos.matches = [...state.infos.matches, ...newMatches]
 
     state.infos.matchIndex += newMatches.length
+
+    state.infos.mates = mates
   },
   SUMMONER_REQUEST(state) {
     state.status = 'loading'
@@ -36,6 +39,7 @@ export const mutations = {
     state.infos.matches = infos.matches
     state.infos.ranked = infos.ranked
     state.infos.matchIndex = infos.matches.length
+    state.infos.mates = infos.mates
     state.infos.playing = infos.playing
     state.status = 'found'
   },
@@ -52,7 +56,11 @@ export const actions = {
     const gameIds = state.infos.matchList.slice(state.infos.matchIndex, state.infos.matchIndex + 10).map(({ gameId }) => gameId)
 
     const resp = await axios(({ url: 'match', data: { account, gameIds }, method: 'POST' })).catch(() => { })
-    commit('MATCHES_FOUND', createMatchData(resp.data))
+    console.log('--- MATCHES INFOS ---')
+    console.log(resp.data)
+    const newMatches = createMatchData(resp.data.matches)
+    const mates = createMatesData(resp.data.mates)
+    commit('MATCHES_FOUND', { newMatches, mates })
   },
   async summonerRequest({ commit, dispatch, rootState }, { summoner, region }) {
     region = rootState.regionsList[region]
@@ -60,6 +68,8 @@ export const actions = {
     try {
       const resp = await axios(({ url: 'api', data: { summoner, region }, method: 'POST' }))
       if (resp.data) {
+        console.log('--- SUMMONER INFOS ---')
+        console.log(resp.data)
         dispatch('ddragon/getVersion', resp.data.version, { root: true })
         const infos = createSummonerData(resp.data)
         commit('SUMMONER_FOUND', infos)

client/src/views/Summoner.vue

@@ -2,7 +2,7 @@
   <div class="bg-blue-900 overflow-hidden min-h-screen flex flex-col">
     <LazyBackground
       :image-source="require('@/assets/img/bg-homepage-1.jpg')"
-      image-class="fixed w-full h-200 z-0"
+      image-class="absolute w-full h-200 z-0"
       more-backgrounds="linear-gradient(180deg, rgba(42, 67, 101, 0) 0%, #2A4365 50%),"
       transition-name="fade"
     ></LazyBackground>
@@ -60,8 +60,11 @@
             </div>
           </div>
 
-          <div class="mt-12 text-center">
+          <div class="mt-12 text-center flex">
-            <ul class="text-gray-900">
+            <div class="mt-4 w-3/12">
+              <SummonerMates />
+            </div>
+            <ul class="w-9/12 text-gray-900">
               <Match
                 v-for="(match, index) in summonerInfos.matches"
                 :key="index"
@@ -103,10 +106,11 @@ import LazyBackground from '@/components/LazyBackgroundImage.vue'
 import LoadingButton from '@/components/LoadingButton.vue'
 import MainFooter from '@/components/MainFooter.vue'
 import Match from '@/components/Match.vue'
-import RecentActivity from '@/components/RecentActivity.vue'
+import RecentActivity from '@/components/Summoner/RecentActivity.vue'
 import SearchForm from '@/components/SearchForm.vue'
-import SummonerLoader from '@/components/SummonerLoader.vue'
+import SummonerLoader from '@/components/Summoner/SummonerLoader.vue'
-import SummonerRanked from '@/components/SummonerRanked.vue'
+import SummonerMates from '@/components/Summoner/SummonerMates.vue'
+import SummonerRanked from '@/components/Summoner/SummonerRanked.vue'
 
 export default {
   components: {
@@ -117,6 +121,7 @@ export default {
     RecentActivity,
     SearchForm,
     SummonerLoader,
+    SummonerMates,
     SummonerRanked,
   },
 

server/app/Controllers/Http/MatchController.js

@@ -1,6 +1,7 @@
 'use strict'
 
 const MatchHelper = use('App/Helpers/MatchHelper')
+const Summoner = use('App/Models/Summoner')
 
 class MatchController {
   /**
@@ -11,8 +12,15 @@ class MatchController {
     const account = request.input('account')
     const gameIds = request.input('gameIds')
 
-    const result = await MatchHelper.getMatches(account, gameIds)
+    const summonerDB = await Summoner.where({ puuid: account.puuid }).first()
-    return response.json(result)
+    const matches = await MatchHelper.getMatches(account, gameIds, summonerDB)
+
+    await summonerDB.save()
+
+    return response.json({
+      matches,
+      mates: summonerDB.mates.filter(m => m.wins + m.losses > 1)
+    })
   }
 }
 

server/app/Controllers/Http/SummonerController.js

@@ -2,6 +2,7 @@
 
 const Jax = use('Jax')
 const MatchHelper = use('App/Helpers/MatchHelper')
+const Summoner = use('App/Models/Summoner')
 
 class SummonerController {
   /**
@@ -28,9 +29,16 @@ class SummonerController {
       account.region = region
       finalJSON.account = account
 
+      // Summoner in DB
+      let summonerDB = await Summoner.where({ puuid: account.puuid }).first()
+      if (!summonerDB) {
+        summonerDB = await Summoner.create({ puuid: account.puuid })
+      }
+
       // CURRENT GAME
       const currentGame = await Jax.Spectator.summonerID(account.id)
       finalJSON.playing = !!currentGame
+
       // RANKED STATS
       const ranked = await Jax.League.summonerID(account.id)
       finalJSON.ranked = {
@@ -40,15 +48,22 @@ class SummonerController {
       }
 
       // MATCH LIST
-      const matchList = await MatchHelper.getFullMatchList(account)
+      await MatchHelper.updateMatchList(account, summonerDB)
+      const matchList = summonerDB.matchList
       finalJSON.allMatches = matchList
 
       // MATCHES DETAILS
       const gameIds = matchList.slice(0, 10).map(({ gameId }) => gameId)
-      finalJSON.matchesDetails = await MatchHelper.getMatches(account, gameIds)
+      finalJSON.matchesDetails = await MatchHelper.getMatches(account, gameIds, summonerDB)
+
+      // MATES
+      finalJSON.mates = summonerDB.mates.filter(m => m.wins + m.losses > 1)
 
       // PATCH VERSION
       finalJSON.version = Jax.DDragon.Version
+
+      // SAVE IN DB
+      await summonerDB.save()
     } catch (error) {
       console.log('username not found')
       console.log(error)

server/app/Helpers/MatchHelper.js

@@ -6,6 +6,7 @@ const Match = use('App/Models/Match')
 const Summoner = use('App/Models/Summoner')
 const Jax = use('Jax')
 const MatchTransformer = use('App/Transformers/MatchTransformer')
+const SummonerHelper = use('App/Helpers/SummonerHelper')
 
 class MatchHelper {
   /**
@@ -34,15 +35,15 @@ class MatchHelper {
     return matchList
   }
   /**
-   * Return the full MatchList of the summoner (min. 4 months)
+   * Update the full MatchList of the summoner (min. 4 months)
    * @param account of the summoner
+   * @param summonerDB summoner in the database
    */
-  async getFullMatchList(account) {
+  async updateMatchList(account, summonerDB) {
     console.time('matchList')
-    let summonerDB = await Summoner.where({ puuid: account.puuid }).first()
 
     // Summoner has already been searched : we already have a MatchList and we need to update it
-    if (summonerDB) {
+    if (summonerDB.matchList) {
       // Get MatchList
       const matchList = await this.fetchMatchListUntil(account, (newMatchList) => {
         return summonerDB.matchList.some(m => m.gameId === newMatchList[newMatchList.length - 1].gameId)
@@ -54,7 +55,6 @@ class MatchHelper {
           summonerDB.matchList.unshift(match)
         }
       }
-      await summonerDB.save()
       Logger.transport('file').info(`Summoner ${account.name} has been updated.`)
     }
     // First search of the Summoner 
@@ -64,21 +64,20 @@ class MatchHelper {
       const matchList = await this.fetchMatchListUntil(account, (newMatchList) => {
         return (newMatchList.length !== 100 || today - newMatchList[newMatchList.length - 1].timestamp > 10368000000)
       })
-      // Create Summoner in Database
+      // Create Summoner's MatchList in Database
-      summonerDB = await Summoner.create({ puuid: account.puuid, matchList: matchList })
+      summonerDB.matchList = matchList
       Logger.transport('file').info(`Summoner ${account.name} has been created.`)
     }
     console.timeEnd('matchList')
-
-    return summonerDB.matchList
   }
 
   /**
    * Fetch list of matches for a specific Summoner
    * @param account of the summoner
    * @param gameIds of the matches to fetch
+   * @param summonerDB summoner in the database
    */
-  async getMatches(account, gameIds) {
+  async getMatches(account, gameIds, summonerDB) {
     console.time('getMatches')
 
     let matchesDetails = []
@@ -113,6 +112,9 @@ class MatchHelper {
         .withContext(ctx)
         .toJSON()
 
+      // Update teamMates
+      SummonerHelper.updatePlayedWith(account, summonerDB, matchesFromApi)
+
       matchesDetails = [...matchesDetails, ...matchesFromApi]
 
       /* Save all matches from Riot Api in db */

server/app/Helpers/SummonerHelper.js

@@ -0,0 +1,41 @@
+'use strict'
+
+const Logger = use('Logger')
+const Summoner = use('App/Models/Summoner')
+
+class SummonerHelper {
+  /**
+   * Update the mates' list of the Summoner
+   * @param account of the summoner
+   * @param summonerDB summoner in the database
+   * @param matches all new matches
+   */
+  updatePlayedWith(account, summonerDB, matches) {
+    let teamMates = summonerDB.mates || []
+
+    for (const match of matches) {
+      const win = match.result === 'Win'
+
+      for (const ally of match.allyTeam) {
+        if (ally.name === account.name) continue
+
+        const mate = teamMates.find(m => m.name === ally.name)
+        if (mate) {
+          win ? mate.wins++ : mate.losses++
+        } else {
+          teamMates.push({
+            name: ally.name,
+            wins: win ? 1 : 0,
+            losses: win ? 0 : 1,
+            creation: Date.now()
+          })
+        }
+      }
+    }
+
+    // Save new mates'list
+    summonerDB.mates = teamMates
+  }
+}
+
+module.exports = new SummonerHelper()