fix: compare summonerId or accountId instead of summonerNames in vue

client/src/components/Match/DetailedMatch.vue

@@ -26,7 +26,7 @@
 </template>
 
 <script>
-import { compareSummonernames } from '@/helpers/functions.js'
+import { mapState } from 'vuex'
 import DetailedMatchGlobalStats from '@/components/Match/DetailedMatchGlobalStats.vue'
 import DetailedMatchTeam from '@/components/Match/DetailedMatchTeam.vue'
 import SwitchToggle from '@/components/SwitchToggle.vue'
@@ -50,11 +50,14 @@ export default {
 
   computed: {
     allyTeam() {
-      return this.data.blueTeam.players.some(p => compareSummonernames(p.name, this.$route.params.name)) ? this.data.blueTeam : this.data.redTeam
+      return this.data.blueTeam.players.some(p => p.summonerId === this.account.id) ? this.data.blueTeam : this.data.redTeam
     },
     enemyTeam() {
-      return this.data.blueTeam.players.some(p => compareSummonernames(p.name, this.$route.params.name)) ? this.data.redTeam : this.data.blueTeam
-    }
+      return this.data.blueTeam.players.some(p => p.summonerId === this.account.id) ? this.data.redTeam : this.data.blueTeam
+    },
+    ...mapState({
+      account: state => state.summoner.basic.account
+    }),
   }
 }
 </script>

client/src/components/Match/DetailedMatchTeam.vue

@@ -124,7 +124,7 @@
                 <router-link
                   v-if="player.firstSum"
                   :to="{ name: 'summoner', params: { region: $route.params.region, name: player.name }}"
-                  :class="{'font-semibold text-yellow-400': compareSummonernames($route.params.name, player.name)}"
+                  :class="{'font-semibold text-yellow-400': account.id === player.summonerId}"
                   class="w-22 text-xs text-white text-left overflow-hidden text-overflow whitespace-no-wrap hover:text-blue-200"
                 >{{ player.name }}</router-link>
                 <div
@@ -198,7 +198,6 @@
 
 <script>
 import { mapState } from 'vuex'
-import { compareSummonernames } from '@/helpers/functions.js'
 import DotsLoader from '@/components/DotsLoader'
 import Dropdown from '@/components/Dropdown'
 import MatchItems from '@/components/Match/MatchItems'
@@ -230,6 +229,7 @@ export default {
       return this.percentSettings ? 'percentStats' : 'stats'
     },
     ...mapState({
+      account: state => state.summoner.basic.account,
       percentSettings: state => state.settings.percent
     }),
   },
@@ -251,7 +251,6 @@ export default {
     roundStats(value) {
       return this.percentSettings ? value : this.$options.filters.kilo(value)
     },
-    compareSummonernames,
   }
 }
 </script>

client/src/components/Match/Match.vue

@@ -102,7 +102,7 @@
               class="ml-4 flex items-center leading-none"
             >
               <div
-                :class="isSummonerProfile(ally.name)"
+                :class="isSummonerProfile(ally.account_id)"
                 class="w-16 text-right overflow-hidden text-overflow whitespace-no-wrap text-xs text-blue-200 font-medium"
               >{{ ally.name }}</div>
               <div
@@ -151,7 +151,6 @@
 
 <script>
 import { mapActions, mapState, mapGetters } from 'vuex'
-import { compareSummonernames } from '@/helpers/functions.js'
 import Dropdown from '@/components/Dropdown'
 import DetailedMatch from '@/components/Match/DetailedMatch'
 import MatchItems from '@/components/Match/MatchItems'
@@ -180,6 +179,7 @@ export default {
 
   computed: {
     ...mapState({
+      account: state => state.summoner.basic.account,
       roles: state => state.roles
     }),
     ...mapGetters('detailedMatch', ['getMatchDetails']),
@@ -193,9 +193,9 @@ export default {
         this.matchDetails(this.data.gameId)
       }
     },
-    isSummonerProfile(allyName) {
+    isSummonerProfile(account_id) {
       return {
-        'font-bold': compareSummonernames(this.$route.params.name, allyName)
+        'font-bold': this.account.accountId === account_id
       }
     },
     ...mapActions('detailedMatch', ['matchDetails']),

client/src/helpers/functions.js

@@ -25,12 +25,3 @@ export function timeDifference(previous) {
     return day + '.' + month + '.' + oldDate.getFullYear().toString().substr(-2)
   }
 }
-
-/**
- *  Check if 2 summoner names are the same
- * @param a : first summoner name
- * @param b : second summoner name
- */
-export function compareSummonernames(a, b) {
-  return a.toLowerCase().replace(/ /g, '') === b.toLowerCase().replace(/ /g, '')
-}