feat(records): add some new records

client/src/helpers/functions.js

@@ -24,6 +24,18 @@ export function timeDifference(previous) {
   }
 }
 
+/**
+ * Convert seconds to a readable string
+ * @param {Number} seconds 
+ */
+export function secToTime(seconds) {
+  const min = Math.floor(seconds / 60)
+  let newSec = Math.floor(seconds - min * 60)
+  newSec = newSec < 10 ? '0' + newSec : newSec
+  
+  return `${min}:${newSec}`
+}
+
 /**
  * Sort an array of players by role
  */

client/src/helpers/summoner.js

@@ -1,4 +1,4 @@
-import { timeDifference } from '@/helpers/functions.js'
+import { secToTime, timeDifference } from '@/helpers/functions.js'
 import { maps, gameModes } from '@/data/data.js'
 import summonerSpells from '@/data/summonerSpells.json'
 
@@ -63,16 +63,19 @@ export function createBasicSummonerData(RiotData) {
  * @param {Object} records : raw records from the database stats
  */
 export function createRecordsData(records) {
-  const min = Math.floor(records.maxTime.time / 60)
+  records.maxTime.time = secToTime(records.maxTime.time)
-  let newSec = Math.floor(records.maxTime.time - min * 60)
-  newSec = newSec < 10 ? '0' + newSec : newSec
-  records.maxTime.time = `${min}:${newSec}`
   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}%`
 
+  // New record fields
+  if (records.maxLiving) {
+    records.maxLiving.longestLiving = secToTime(records.maxLiving.longestLiving)
+    records.maxHeal.heal = records.maxHeal.heal.toLocaleString()
+  }
+
   return records
 }
 

client/src/views/SummonerRecords.vue

@@ -101,6 +101,15 @@
             :record="records.maxDmgTaken"
             title="Damage taken"
           />
+          <RecordCard
+            v-if="records.maxTowers"
+            color="#D69E2E"
+            text-color="text-yellow-400"
+            border-color="border-yellow-400"
+            property="towers"
+            :record="records.maxTowers"
+            title="Towers"
+          />
           <RecordCard
             color="#68D391"
             text-color="text-green-400"
@@ -109,6 +118,72 @@
             :record="records.maxKp"
             title="Kill participation"
           />
+          <RecordCard
+            color="#D69E2E"
+            text-color="text-yellow-400"
+            border-color="border-yellow-400"
+            property="vision"
+            :record="records.maxVision"
+            title="Vision score"
+          />
+        </template>
+        <template v-else>
+          <div
+            v-for="index in 6"
+            :key="index"
+            style="width: 176px; height: 294px;"
+            class="mx-2 mt-6"
+          >
+            <content-loader
+              :height="294"
+              :width="176"
+              :speed="2"
+              primary-color="#17314f"
+              secondary-color="#2b6cb0"
+            >
+              <rect x="0" y="0" rx="8" ry="8" width="176" height="294" />
+            </content-loader>
+          </div>
+        </template>
+      </div>
+      <div class="relative pl-6 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 category">Miscellaneous</div>
+      <div class="flex flex-wrap -mx-2">
+        <template v-if="recordsLoaded">
+          <RecordCard
+            color="#4299E1"
+            text-color="text-blue-500"
+            border-color="border-blue-500"
+            property="time"
+            :record="records.maxTime"
+            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"
+            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"
+            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"
+            title="Heal"
+          />
         </template>
         <template v-else>
           <div
@@ -129,29 +204,53 @@
           </div>
         </template>
       </div>
-      <div class="relative pl-6 mt-3 text-2xl text-blue-200 border-b-2 border-blue-800 category">Extra</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 class="flex flex-wrap -mx-2">
+      <div v-if="records.maxDouble" class="flex flex-wrap -mx-2">
         <template v-if="recordsLoaded">
           <RecordCard
-            color="#D69E2E"
+            color="#FEFCBF"
-            text-color="text-yellow-400"
+            text-color="text-yellow-200"
-            border-color="border-yellow-400"
+            border-color="border-yellow-200"
-            property="vision"
+            property="doubleKills"
-            :record="records.maxVision"
+            :record="records.maxDouble"
-            title="Vision score"
+            title="Double kills"
           />
           <RecordCard
-            color="#4299E1"
+            color="#F6E05E"
-            text-color="text-blue-500"
+            text-color="text-yellow-400"
-            border-color="border-blue-500"
+            border-color="border-yellow-400"
-            property="time"
+            property="tripleKills"
-            :record="records.maxTime"
+            :record="records.maxTriple"
-            title="Longest game"
+            title="Triple kills"
+          />
+          <RecordCard
+            color="#D69E2E"
+            text-color="text-yellow-600"
+            border-color="border-yellow-600"
+            property="quadraKills"
+            :record="records.maxQuadra"
+            title="Quadra kills"
+          />
+          <RecordCard
+            color="#F56565"
+            text-color="text-red-500"
+            border-color="border-red-500"
+            property="pentaKills"
+            :record="records.maxPenta"
+            title="Penta kills"
+          />
+          <RecordCard
+            color="#63b3ed"
+            text-color="text-blue-400"
+            border-color="border-blue-400"
+            property="killingSpree"
+            :record="records.maxKillingSpree"
+            title="Killing Spree"
           />
         </template>
         <template v-else>
           <div
-            v-for="index in 2"
+            v-for="index in 5"
             :key="index"
             style="width: 176px; height: 294px;"
             class="mx-2 mt-6"

server/app/Repositories/MatchRepository.js

@@ -176,6 +176,15 @@ class MatchRepository {
           maxDmgObj: { $max: '$stats.dmgObj' },
           maxKp: { $max: '$stats.kp' },
           maxVision: { $max: '$stats.vision' },
+          maxCriticalStrike: { $max: '$stats.criticalStrike' },
+          maxLiving: { $max: '$stats.longestLiving' },
+          maxHeal: { $max: '$stats.heal' },
+          maxTowers: { $max: '$stats.towers' },
+          maxKillingSpree: { $max: '$stats.killingSpree' },
+          maxDouble: { $max: '$stats.doubleKills' },
+          maxTriple: { $max: '$stats.tripleKills' },
+          maxQuadra: { $max: '$stats.quadraKills' },
+          maxPenta: { $max: '$stats.pentaKills' },
           docs: {
             '$push': {
               'champion': '$champion',
@@ -192,6 +201,15 @@ class MatchRepository {
               'dmgObj': '$stats.dmgObj',
               'kp': '$stats.kp',
               'vision': '$stats.vision',
+              'criticalStrike': '$stats.criticalStrike',
+              'longestLiving': '$stats.longestLiving',
+              'heal': '$stats.heal',
+              'towers': '$stats.towers',
+              'killingSpree': '$stats.killingSpree',
+              'doubleKills': '$stats.doubleKills',
+              'tripleKills': '$stats.tripleKills',
+              'quadraKills': '$stats.quadraKills',
+              'pentaKills': '$stats.pentaKills',
               'result': '$result',
               'date': '$date',
             }
@@ -213,6 +231,15 @@ class MatchRepository {
           maxDmgObj: { $arrayElemAt: [{ $filter: { input: '$docs', cond: { $eq: ['$$this.dmgObj', '$maxDmgObj'] } } }, 0] },
           maxKp: { $arrayElemAt: [{ $filter: { input: '$docs', cond: { $eq: ['$$this.kp', '$maxKp'] } } }, 0] },
           maxVision: { $arrayElemAt: [{ $filter: { input: '$docs', cond: { $eq: ['$$this.vision', '$maxVision'] } } }, 0] },
+          maxCriticalStrike: { $arrayElemAt: [{ $filter: { input: '$docs', cond: { $eq: ['$$this.criticalStrike', '$maxCriticalStrike'] } } }, 0] },
+          maxLiving: { $arrayElemAt: [{ $filter: { input: '$docs', cond: { $eq: ['$$this.longestLiving', '$maxLiving'] } } }, 0] },
+          maxHeal: { $arrayElemAt: [{ $filter: { input: '$docs', cond: { $eq: ['$$this.heal', '$maxHeal'] } } }, 0] },
+          maxTowers: { $arrayElemAt: [{ $filter: { input: '$docs', cond: { $eq: ['$$this.towers', '$maxTowers'] } } }, 0] },
+          maxKillingSpree: { $arrayElemAt: [{ $filter: { input: '$docs', cond: { $eq: ['$$this.killingSpree', '$maxKillingSpree'] } } }, 0] },
+          maxDouble: { $arrayElemAt: [{ $filter: { input: '$docs', cond: { $eq: ['$$this.doubleKills', '$maxDouble'] } } }, 0] },
+          maxTriple: { $arrayElemAt: [{ $filter: { input: '$docs', cond: { $eq: ['$$this.tripleKills', '$maxTriple'] } } }, 0] },
+          maxQuadra: { $arrayElemAt: [{ $filter: { input: '$docs', cond: { $eq: ['$$this.quadraKills', '$maxQuadra'] } } }, 0] },
+          maxPenta: { $arrayElemAt: [{ $filter: { input: '$docs', cond: { $eq: ['$$this.pentaKills', '$maxPenta'] } } }, 0] },
         }
       }
     ])

server/app/Transformers/MatchTransformer.js

@@ -111,6 +111,15 @@ class MatchTransformer {
         return prev + current.stats.kills
       }, 0)
 
+      stats.criticalStrike = player.stats.largestCriticalStrike
+      stats.killingSpree = player.stats.largestKillingSpree
+      stats.doubleKills = player.stats.doubleKills
+      stats.tripleKills = player.stats.tripleKills
+      stats.quadraKills = player.stats.quadraKills
+      stats.pentaKills = player.stats.pentaKills
+      stats.heal = player.stats.totalHeal
+      stats.towers = player.stats.turretKills
+      stats.longestLiving = player.stats.longestTimeSpentLiving
       stats.kp = totalKills === 0 ? 0 : +((stats.kills + stats.assists) * 100 / totalKills).toFixed(1)
     }