fix: use puuid instead of old summonerId for logic in frontend pages

client/src/components/Match/DetailedMatch.vue

@@ -62,12 +62,12 @@ export default {
 
   computed: {
     allyTeam() {
-      return this.data.blueTeam.players.some((p) => p.summonerId === this.account.id)
+      return this.data.blueTeam.players.some((p) => p.summonerPuuid === this.account.puuid)
         ? this.data.blueTeam
         : this.data.redTeam
     },
     enemyTeam() {
-      return this.data.blueTeam.players.some((p) => p.summonerId === this.account.id)
+      return this.data.blueTeam.players.some((p) => p.summonerPuuid === this.account.puuid)
         ? this.data.redTeam
         : this.data.blueTeam
     },

client/src/components/Match/DetailedMatchTeam.vue

@@ -183,7 +183,7 @@
                     params: { region: $route.params.region, name: player.name },
                   }"
                   :class="{
-                    'font-semibold text-yellow-400': account.id === player.summonerId,
+                    'font-semibold text-yellow-400': account.puuid === player.summonerPuuid,
                   }"
                   class="text-overflow w-[5.5rem] overflow-hidden whitespace-nowrap text-left text-xs text-white hover:text-blue-200"
                   >{{ nameWithoutTagLine(player.name) }}</router-link

client/src/components/Match/LiveMatch.vue

@@ -14,7 +14,7 @@
       <ul class="w-1/2 text-left">
         <li
           v-for="(ally, index) in allyTeam"
-          :key="ally.summonerId"
+          :key="ally.puuid"
           :class="index % 2 === 0 ? 'accent-ally' : 'ally'"
           class="flex items-center px-5 py-1 leading-loose"
         >
@@ -30,7 +30,7 @@
               name: 'summoner',
               params: { region: $route.params.region, name: ally.riotId.replaceAll('#', '-') },
             }"
-            :class="[ally.summonerId === account.id ? 'text-white' : 'text-blue-200']"
+            :class="[ally.puuid === account.puuid ? 'text-white' : 'text-blue-200']"
             class="relative ml-2 hover:text-white"
             >{{ ally.riotId }}</router-link
           >
@@ -39,7 +39,7 @@
       <ul class="w-1/2 text-right">
         <li
           v-for="(enemy, index) in enemyTeam"
-          :key="enemy.summonerId"
+          :key="enemy.puuid"
           :class="index % 2 === 0 ? 'accent-enemy' : 'enemy'"
           class="flex items-center justify-end px-5 py-1 leading-loose"
         >

client/src/components/Summoner/Live/LiveTeam.vue

@@ -6,7 +6,7 @@
     >
       <thead>
         <tr class="text-left">
-          <th :class="[ally ? 'text-teal-400 ' : 'text-red-400 ']" class="w-team font-semibold">
+          <th :class="[ally ? 'text-teal-400' : 'text-red-400']" class="w-team font-semibold">
             {{ ally ? 'Ally' : 'Enemy' }} Team
           </th>
           <th class="w-ranked text-sm font-normal text-blue-200">SoloQ Stats</th>
@@ -17,7 +17,7 @@
       <tbody v-if="liveLoaded">
         <tr
           v-for="(player, index) in team"
-          :key="player.summonerId"
+          :key="player.puuid"
           :style="getCSSVars(player.championId)"
           class="live-team-row relative"
         >
@@ -43,12 +43,12 @@
                 :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)"
+                :class="borderChampion(player.puuid)"
                 class="relative ml-2 h-12 w-12 rounded-full border-2 bg-blue-1000 bg-cover bg-center"
               >
                 <div
                   v-if="player.role && player.role !== 'NONE'"
-                  :class="borderChampion(player.summonerId)"
+                  :class="borderChampion(player.puuid)"
                   class="absolute rounded-full border bg-blue-1000 p-0.5"
                   style="bottom: -5px; right: -5px"
                 >
@@ -79,12 +79,12 @@
                     },
                   }"
                   :class="[
-                    player.summonerId === account.id ? 'text-yellow-500' : 'hover:text-blue-200',
+                    player.puuid === account.puuid ? 'text-yellow-500' : 'hover:text-blue-200',
                   ]"
                   class="font-semibold"
                   >{{ player.gameName + '#' + player.tagLine }}</router-link
                 >
-                <div :class="[ally ? 'text-teal-300 ' : 'text-red-400 ']" class="text-xs">
+                <div :class="[ally ? 'text-teal-300' : 'text-red-400']" class="text-xs">
                   {{ player.champion.name }}
                 </div>
               </div>
@@ -270,8 +270,8 @@ export default {
 
       return this.live.bannedChampions.find((b) => b.pickTurn === toFind && b.teamId === teamId)
     },
-    borderChampion(id) {
+    borderChampion(puuid) {
-      if (id === this.account.id) {
+      if (puuid === this.account.puuid) {
         return 'border-yellow-500'
       }
 

client/src/mixins/liveGame.js

@@ -45,7 +45,7 @@ export const liveGame = {
       return this.current ? this.current.gameStartTime : 0
     },
     teamColor() {
-      return this.current.participants.find((p) => p.summonerId === this.account.id).teamId
+      return this.current.participants.find((p) => p.puuid === this.account.puuid).teamId
     },
     ...mapState({
       account: (state) => state.summoner.basic.account,