fix(live-game): don't crash when Riot API doesn't give any perks...

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)"

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,
       }
     })
 

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