feat: add back records tab

client/src/components/Summoner/Records/RecordCard.vue

@@ -5,7 +5,7 @@
     :style="{
       backgroundImage:
         `${hover ? gradientHover : gradient},
-         url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/${record.champion.id}/${record.champion.id}000.jpg')`
+         url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-splashes/${record.champion_id}/${record.champion_id}000.jpg')`
     }"
     :class="borderColor"
     class="relative w-full p-4 mx-2 mt-6 leading-none bg-center bg-cover border rounded-lg record-card"
@@ -21,18 +21,18 @@
       <span :class="textColor" class="ml-0">{{ title }}</span>
     </div>
     <img
-      :src="`https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${record.champion.id}.png`"
+      :src="`https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${record.champion_id}.png`"
       :class="[{'opacity-0 scale-125': hover}, borderColor]"
       class="block w-16 h-16 mx-auto mt-10 transition duration-500 ease-in transform border-2 rounded-full"
       alt="Champion Played"
     />
-    <div :style="{textShadow: `-2px 1px 6px ${color}`}" class="mt-6 text-4xl">{{ record[property] }}</div>
+    <div :style="{textShadow: `-2px 1px 6px ${color}`}" class="mt-6 text-4xl">{{ record.amount }}</div>
 
     <div class="text-sm">
       <div class="mt-6">
         <span
-          :class="record.result === 'Win' ? 'text-green-400' : 'text-red-400'"
-        >{{ record.result === 'Win' ? 'Won' : 'Lost' }}</span>
+          :class="record.result ? 'text-green-400' : 'text-red-400'"
+        >{{ record.result ? 'Won' : 'Lost' }}</span>
         <span class="ml-1 font-semibold">{{ timeDifference(record.date) }}</span>
       </div>
       <div class="mt-2 text-gray-500">
@@ -41,7 +41,7 @@
       </div>
     </div>
     <div class="mt-6 text-xs font-light text-right text-gray-200 opacity-25">
-      <span v-if="hover">match {{ record.gameId }}</span>
+      <span v-if="hover">{{ record.id }}</span>
       <span v-else>{{ gameModes[record.gamemode].name }}</span>
     </div>
   </div>
@@ -65,10 +65,6 @@ export default {
       type: String,
       required: true
     },
-    property: {
-      type: String,
-      required: true
-    },
     record: {
       type: Object,
       required: true

client/src/helpers/summoner.js

@@ -66,21 +66,22 @@ export function createBasicSummonerData(RiotData) {
 
 /**
  * Return the formatted records of a summoner
- * @param {Object} records : raw records from the database stats
+ * @param {Object} recordsDto : raw records from the database stats
  */
-export function createRecordsData(records) {
-  records.maxTime.time = secToTime(records.maxTime.time)
-  records.maxGold.gold = records.maxGold.gold.toLocaleString()
-  records.maxDmgTaken.dmgTaken = records.maxDmgTaken.dmgTaken.toLocaleString()
-  records.maxDmgChamp.dmgChamp = records.maxDmgChamp.dmgChamp.toLocaleString()
-  records.maxDmgObj.dmgObj = records.maxDmgObj.dmgObj.toLocaleString()
-  records.maxKp.kp = `${records.maxKp.kp}%`
+export function createRecordsData(recordsDto) {
+  const records = recordsDto.reduce((acc, record) => {
+    acc[record.what] = record
+    return acc
+  }, {})
 
-  // New record fields
-  if (records.maxLiving) {
-    records.maxLiving.longestLiving = secToTime(records.maxLiving.longestLiving)
-    records.maxHeal.heal = records.maxHeal.heal.toLocaleString()
-  }
+  records.game_duration.amount = secToTime(records.game_duration.amount)
+  records.gold.amount =  records.gold.amount.toLocaleString()
+  records.damage_taken.amount = records.damage_taken.amount.toLocaleString()
+  records.damage_dealt_champions.amount = records.damage_dealt_champions.amount.toLocaleString()
+  records.damage_dealt_objectives.amount = records.damage_dealt_objectives.amount.toLocaleString()
+  records.kp.amount = `${records.kp.amount}%`
+  records.time_spent_living.amount = secToTime(records.time_spent_living.amount)
+  records.heal.amount = records.heal.amount.toLocaleString()
 
   return records
 }

client/src/store/modules/summoner.js

@@ -25,7 +25,7 @@ export const state = {
     championsLoaded: false
   },
   records: {
-    list: [],
+    list: {},
     recordsLoaded: false
   },
   live: {
@@ -81,6 +81,7 @@ export const mutations = {
     state.overview.matchIndex = infos.matches.length
     state.overview.stats = infos.stats
     state.overview.loaded = true
+    state.records.recordsLoaded = false
   },
   RECORDS_FOUND(state, { records }) {
     state.records.list = records
@@ -218,7 +219,7 @@ export const actions = {
     const resp = await axios(({ url: 'summoner/records', data: { puuid: state.basic.account.puuid }, method: 'POST' })).catch(() => { })
     console.log('---RECORDS---')
     console.log(resp.data)
-    const records = resp.data ? createRecordsData(resp.data) : {}
+    const records = resp.data.length ? createRecordsData(resp.data) : {}
 
     commit('RECORDS_FOUND', { records })
   },

client/src/views/SummonerRecords.vue

@@ -1,6 +1,6 @@
 <template>
   <div key="records">
-    <template v-if="!recordsLoaded || (recordsLoaded && records.maxKda)">
+    <template v-if="!recordsLoaded || (recordsLoaded && records.assists)">
       <div
         class="relative pl-6 text-2xl text-blue-200 border-b-2 border-blue-800 category blue-900"
       >Basics</div>
@@ -10,48 +10,42 @@
             color="#63b3ed"
             text-color="text-blue-400"
             border-color="border-blue-400"
-            property="kda"
-            :record="records.maxKda"
+            :record="records.kda"
             title="KDA"
           />
           <RecordCard
             color="#68D391"
             text-color="text-green-400"
             border-color="border-green-400"
-            property="kills"
-            :record="records.maxKills"
+            :record="records.kills"
             title="Kills"
           />
           <RecordCard
             color="#9F7AEA"
             text-color="text-purple-500"
             border-color="border-purple-500"
-            property="assists"
-            :record="records.maxAssists"
+            :record="records.assists"
             title="Assists"
           />
           <RecordCard
             color="#F56565"
             text-color="text-red-500"
             border-color="border-red-500"
-            property="deaths"
-            :record="records.maxDeaths"
+            :record="records.deaths"
             title="Deaths"
           />
           <RecordCard
             color="#D69E2E"
             text-color="text-yellow-600"
             border-color="border-yellow-600"
-            property="gold"
-            :record="records.maxGold"
+            :record="records.gold"
             title="Gold earned"
           />
           <RecordCard
             color="#81E6D9"
             text-color="text-teal-300"
             border-color="border-teal-300"
-            property="minions"
-            :record="records.maxMinions"
+            :record="records.minions"
             title="Minions killed"
           />
         </template>
@@ -81,24 +75,21 @@
             color="#FC8181"
             text-color="text-red-400"
             border-color="border-red-400"
-            property="dmgChamp"
-            :record="records.maxDmgChamp"
+            :record="records.damage_dealt_champions"
             title="Damage champions"
           />
           <RecordCard
             color="#D69E2E"
             text-color="text-yellow-400"
             border-color="border-yellow-400"
-            property="dmgObj"
-            :record="records.maxDmgObj"
+            :record="records.damage_dealt_objectives"
             title="Damage objectives"
           />
           <RecordCard
             color="#FC8181"
             text-color="text-red-400"
             border-color="border-red-400"
-            property="dmgTaken"
-            :record="records.maxDmgTaken"
+            :record="records.damage_taken"
             title="Damage taken"
           />
           <RecordCard
@@ -106,24 +97,21 @@
             color="#D69E2E"
             text-color="text-yellow-400"
             border-color="border-yellow-400"
-            property="towers"
-            :record="records.maxTowers"
+            :record="records.turret_kills"
             title="Towers"
           />
           <RecordCard
             color="#68D391"
             text-color="text-green-400"
             border-color="border-green-400"
-            property="kp"
-            :record="records.maxKp"
+            :record="records.kp"
             title="Kill participation"
           />
           <RecordCard
             color="#D69E2E"
             text-color="text-yellow-400"
             border-color="border-yellow-400"
-            property="vision"
-            :record="records.maxVision"
+            :record="records.vision_score"
             title="Vision score"
           />
         </template>
@@ -153,35 +141,28 @@
             color="#4299E1"
             text-color="text-blue-500"
             border-color="border-blue-500"
-            property="time"
-            :record="records.maxTime"
+            :record="records.game_duration"
             title="Longest game"
           />
           <RecordCard
-            v-if="records.maxLiving"
             color="#4299E1"
             text-color="text-blue-500"
             border-color="border-blue-500"
-            property="longestLiving"
-            :record="records.maxLiving"
+            :record="records.time_spent_living"
             title="Longest living"
           />
           <RecordCard
-            v-if="records.maxCriticalStrike"
             color="#D69E2E"
             text-color="text-yellow-400"
             border-color="border-yellow-400"
-            property="criticalStrike"
-            :record="records.maxCriticalStrike"
+            :record="records.critical_strike"
             title="Critical Strike"
           />
           <RecordCard
-            v-if="records.maxHeal"
             color="#68D391"
             text-color="text-green-400"
             border-color="border-green-400"
-            property="heal"
-            :record="records.maxHeal"
+            :record="records.heal"
             title="Heal"
           />
         </template>
@@ -204,47 +185,42 @@
           </div>
         </template>
       </div>
-      <div v-if="records.maxDouble" class="relative pl-6 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 category">Multi kills</div>
-      <div v-if="records.maxDouble" class="flex flex-wrap -mx-2">
+      <div class="relative pl-6 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 category">Multi kills</div>
+      <div class="flex flex-wrap -mx-2">
         <template v-if="recordsLoaded">
           <RecordCard
             color="#FEFCBF"
             text-color="text-yellow-200"
             border-color="border-yellow-200"
-            property="doubleKills"
-            :record="records.maxDouble"
+            :record="records.double_kills"
             title="Double kills"
           />
           <RecordCard
             color="#F6E05E"
             text-color="text-yellow-400"
             border-color="border-yellow-400"
-            property="tripleKills"
-            :record="records.maxTriple"
+            :record="records.triple_kills"
             title="Triple kills"
           />
           <RecordCard
             color="#D69E2E"
             text-color="text-yellow-600"
             border-color="border-yellow-600"
-            property="quadraKills"
-            :record="records.maxQuadra"
+            :record="records.quadra_kills"
             title="Quadra kills"
           />
           <RecordCard
             color="#F56565"
             text-color="text-red-500"
             border-color="border-red-500"
-            property="pentaKills"
-            :record="records.maxPenta"
+            :record="records.penta_kills"
             title="Penta kills"
           />
           <RecordCard
             color="#63b3ed"
             text-color="text-blue-400"
             border-color="border-blue-400"
-            property="killingSpree"
-            :record="records.maxKillingSpree"
+            :record="records.killing_spree"
             title="Killing Spree"
           />
         </template>
@@ -268,7 +244,7 @@
         </template>
       </div>
     </template>
-    <template v-if="recordsLoaded && !records.maxKda">
+    <template v-if="recordsLoaded && !records.assists">
       <div class="flex flex-col items-center mt-4">
         <div>No records have been found.</div>
         <div>😕</div>

server-v2/app/Controllers/Http/SummonersController.ts

@@ -2,6 +2,7 @@ import { HttpContextContract } from '@ioc:Adonis/Core/HttpContext'
 import { getCurrentSeason } from 'App/helpers'
 import Summoner from 'App/Models/Summoner'
 import MatchRepository from 'App/Repositories/MatchRepository'
+import BasicMatchSerializer from 'App/Serializers/BasicMatchSerializer'
 import Jax from 'App/Services/Jax'
 import MatchService from 'App/Services/MatchService'
 import StatsService from 'App/Services/StatsService'
@@ -94,7 +95,14 @@ export default class SummonersController {
     console.time('recordsRequest')
     const { puuid, season } = await request.validate(SummonerRecordValidator)
     const records = await MatchRepository.records(puuid)
+    const recordsSerialized = records.map((record) => {
+      return {
+        ...record,
+        what: record.what.split('.')[1],
+        champion: BasicMatchSerializer.getChampion(record.champion_id),
+      }
+    })
     console.timeEnd('recordsRequest')
-    return response.json(records)
+    return response.json(recordsSerialized)
   }
 }