refactor: export compareSummonernames function

client/src/components/Match/DetailedMatch.vue

@@ -4,6 +4,7 @@
       <DetailedMatchTeam
         :data="allyTeam"
         :all-players="[...allyTeam.players, ...enemyTeam.players]"
+        :ally-team="true"
       />
 
       <div class="px-3 py-2 flex justify-between items-start">
@@ -15,6 +16,7 @@
       <DetailedMatchTeam
         :data="enemyTeam"
         :all-players="[...allyTeam.players, ...enemyTeam.players]"
+        :ally-team="false"
       />
     </div>
     <div v-else-if="data.status === 'loading' && detailsOpen">
@@ -24,6 +26,7 @@
 </template>
 
 <script>
+import { compareSummonernames } from '@/helpers/functions.js'
 import DetailedMatchGlobalStats from '@/components/Match/DetailedMatchGlobalStats.vue'
 import DetailedMatchTeam from '@/components/Match/DetailedMatchTeam.vue'
 import SwitchToggle from '@/components/SwitchToggle.vue'
@@ -47,16 +50,10 @@ export default {
 
   computed: {
     allyTeam() {
-      return this.data.blueTeam.players.some(p => this.compareSummonernames(p.name, this.$route.params.name)) ? this.data.blueTeam : this.data.redTeam
+      return this.data.blueTeam.players.some(p => compareSummonernames(p.name, this.$route.params.name)) ? this.data.blueTeam : this.data.redTeam
     },
     enemyTeam() {
-      return this.data.blueTeam.players.some(p => this.compareSummonernames(p.name, this.$route.params.name)) ? this.data.redTeam : this.data.blueTeam
+      return this.data.blueTeam.players.some(p => compareSummonernames(p.name, this.$route.params.name)) ? this.data.redTeam : this.data.blueTeam
-    }
-  },
-
-  methods: {
-    compareSummonernames(a, b) {
-      return a.toLowerCase().replace(/ /g, '') === b.toLowerCase().replace(/ /g, '')
     }
   }
 }

client/src/components/Match/DetailedMatchTeam.vue

@@ -88,7 +88,7 @@
                 <router-link
                   v-if="player.firstSum"
                   :to="{ name: 'summoner', params: { region: $route.params.region, name: player.name }}"
-                  :class="{'font-semibold text-yellow-400': $route.params.name.toLowerCase() === player.name.toLowerCase()}"
+                  :class="{'font-semibold text-yellow-400': compareSummonernames($route.params.name, player.name)}"
                   class="w-24 text-sm text-white text-left overflow-hidden text-overflow whitespace-no-wrap hover:text-blue-200"
                 >{{ player.name }}</router-link>
                 <div
@@ -156,6 +156,7 @@
 
 <script>
 import { mapState } from 'vuex'
+import { compareSummonernames } from '@/helpers/functions.js'
 import MatchItems from '@/components/Match/MatchItems'
 
 export default {
@@ -168,18 +169,16 @@ export default {
       type: Array,
       required: true
     },
+    allyTeam: {
+      type: Boolean,
+      required: true
+    },
     data: {
       type: Object,
       required: true
     },
   },
 
-  data() {
-    return {
-      allyTeam: this.data.players.some(p => p.name.toLowerCase().replace(/ /g, '') === this.$route.params.name.toLowerCase().replace(/ /g, ''))
-    }
-  },
-
   computed: {
     statsFormat() {
       return this.percentSettings === 'true' ? 'percentStats' : 'stats'
@@ -202,7 +201,8 @@ export default {
     },
     displayBorderbottom(index) {
       return this.allyTeam || index !== this.data.players.length - 1
-    }
+    },
+    compareSummonernames,
   }
 }
 </script>

client/src/components/Match/Match.vue

@@ -151,6 +151,7 @@
 
 <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'
@@ -194,7 +195,7 @@ export default {
     },
     isSummonerProfile(allyName) {
       return {
-        'font-bold': this.$route.params.name.toLowerCase() === allyName.toLowerCase()
+        'font-bold': compareSummonernames(this.$route.params.name, allyName)
       }
     },
     ...mapActions('detailedMatch', ['matchDetails']),

client/src/helpers/functions.js

@@ -25,3 +25,12 @@ 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, '')
+}