From 6c5e09d67dbee9a029be12868fa7fe824d38f1f1 Mon Sep 17 00:00:00 2001
From: Kalane <kalanehd@gmail.com>
Date: Wed, 29 Sep 2021 22:28:35 +0200
Subject: [PATCH] fix(live-game): don't crash when Riot API doesn't give any
 perks...

---
 client/src/components/Summoner/Live/LiveTeam.vue |  2 ++
 server/app/Serializers/LiveMatchSerializer.ts    | 15 ++++++++++-----
 server/app/Serializers/SerializedTypes.ts        |  2 +-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Summoner/Live/LiveTeam.vue b/client/src/components/Summoner/Live/LiveTeam.vue
index bd0cf19..f40876a 100644
--- a/client/src/components/Summoner/Live/LiveTeam.vue
+++ b/client/src/components/Summoner/Live/LiveTeam.vue
@@ -25,6 +25,7 @@
           <td class="py-1 pl-2 rounded-l-lg">
             <div class="flex items-center">
               <div
+                v-if="player.perks"
                 @click="selectRunes(player)"
                 :class="{ 'cursor-pointer': player.perks }"
                 class="flex flex-col items-center runes"
@@ -38,6 +39,7 @@
                   class="w-3 h-3 mt-1 bg-center bg-cover"
                 ></div>
               </div>
+              <div v-else class="w-6"></div>
               <div
                 :style="{backgroundImage: `url('https://raw.communitydragon.org/latest/plugins/rcp-be-lol-game-data/global/default/v1/champion-icons/${player.championId}.png')`}"
                 :class="borderChampion(player.summonerId)"
diff --git a/server/app/Serializers/LiveMatchSerializer.ts b/server/app/Serializers/LiveMatchSerializer.ts
index e56e175..3cc4a6e 100644
--- a/server/app/Serializers/LiveMatchSerializer.ts
+++ b/server/app/Serializers/LiveMatchSerializer.ts
@@ -49,16 +49,21 @@ class LiveMatchSerializer extends MatchSerializer {
         const roles = player.teamId === 100 ? blueRoles : redRoles
         role = Object.entries(roles).find(([, champion]) => player.championId === champion)![0]
       }
+
+      const perks = player.perks
+        ? {
+            primaryStyle: player.perks.perkStyle,
+            secondaryStyle: player.perks.perkSubStyle,
+            selected: player.perks.perkIds,
+          }
+        : undefined
+
       return {
         ...player,
         role,
         rank: ranks[index],
         champion: this.getChampion(player.championId),
-        perks: {
-          primaryStyle: player.perks.perkStyle,
-          secondaryStyle: player.perks.perkSubStyle,
-          selected: player.perks.perkIds,
-        },
+        perks,
       }
     })
 
diff --git a/server/app/Serializers/SerializedTypes.ts b/server/app/Serializers/SerializedTypes.ts
index b66d44a..7e592de 100644
--- a/server/app/Serializers/SerializedTypes.ts
+++ b/server/app/Serializers/SerializedTypes.ts
@@ -199,7 +199,7 @@ export interface SerializedLiveMatchPlayer {
   champion: SerializedMatchChampion
   championId: number
   gameCustomizationObjects: GameCustomizationObjectDTO[]
-  perks: SerializedMatchPerks
+  perks?: SerializedMatchPerks
   profileIconId: number
   rank: LeagueEntriesByQueue
   role?: string