Update icon logic

src/components/ladder/CountryRankingsGrid.vue

@@ -197,20 +197,19 @@ import { Component, Prop, Watch } from "vue-property-decorator";
 import {
   Ranking,
   PlayerId,
-  PlayerInfo,
   CountryRanking,
   League,
 } from "@/store/ranking/types";
-import { EAvatarCategory, ERaceEnum, OngoingMatches } from "@/store/typings";
+import { ERaceEnum, OngoingMatches } from "@/store/typings";
 import PlayerIcon from "@/components/matches/PlayerIcon.vue";
 import SwordIcon from "@/components/ladder/SwordIcon.vue";
 import LeagueIcon from "@/components/ladder/LeagueIcon.vue";
 import PlayerRankInfo from "@/components/ladder/PlayerRankInfo.vue";
 import RaceIcon from "@/components/player/RaceIcon.vue";
 import CountryFlagExtended from "@/components/common/CountryFlagExtended.vue";
-import { getAsset, getAvatarUrl } from "@/helpers/url-functions";
 import { TranslateResult } from "vue-i18n";
 import LevelProgress from "@/components/ladder/LevelProgress.vue"
+import { getRaceIcon, hasSelectedIcon } from "@/helpers/ranking-icons";
 
 @Component({
   components: {
@@ -377,51 +376,21 @@ export default class CountryRankingsGrid extends Vue {
     this.leagueMap = new Map(league?.leagues.map((l) => [l.id, l]));
   }
 
-  public getRaceIcon(ranking: Ranking, playerIndex: number): string {
-    const playersInfo = ranking.playersInfo;
-    if (!playersInfo) return this.raceIcon(ERaceEnum.RANDOM);
-    const playerInfo = playersInfo[playerIndex];
-    if (CountryRankingsGrid.hasSelectedIcon(playerInfo)) {
-      return getAvatarUrl(
-        playerInfo.selectedRace,
-        playerInfo.pictureId,
-        playerInfo.isClassicPicture
-      );
-    } else {
-      return this.raceIcon(playerInfo.calculatedRace);
-    }
+  getRaceIcon(ranking: Ranking, playerIndex: number): string {
+    return getRaceIcon(ranking, playerIndex);
   }
 
-  public getTitleRace(ranking: Ranking, playerIndex: number): TranslateResult {
+  getTitleRace(ranking: Ranking, playerIndex: number): TranslateResult {
     const playersInfo = ranking.playersInfo;
     if (!playersInfo) return this.$t("races.RANDOM");
     const playerInfo = playersInfo[playerIndex];
-    if (
-      CountryRankingsGrid.hasSelectedIcon(playerInfo) &&
-      playerInfo.selectedRace <= ERaceEnum.UNDEAD
-    ) {
+    if (hasSelectedIcon(playerInfo)) {
       return this.$t(`races.${ERaceEnum[playerInfo.selectedRace]}`);
     } else {
       return this.$t(`races.${ERaceEnum[playerInfo.calculatedRace]}`);
     }
   }
 
-  private static hasSelectedIcon(playerInfo: PlayerInfo) {
-    if (
-      playerInfo.selectedRace !== undefined &&
-      playerInfo.selectedRace != null &&
-      playerInfo.pictureId !== undefined &&
-      playerInfo.pictureId != null
-    ) {
-      return playerInfo.selectedRace !== EAvatarCategory.TOTAL;
-    }
-    return false;
-  }
-
-  raceIcon(race: ERaceEnum) {
-    return getAsset(`raceIcons/${ERaceEnum[race]}.jpg`);
-  }
-
   isTwitchLive(ranking: Ranking): boolean {
     const twitchName = ranking.playersInfo[0].twitchName;
     const streamData =

src/components/ladder/RankingsGrid.vue

@@ -138,15 +138,15 @@
 import Vue from "vue";
 import { Component, Prop, Watch } from "vue-property-decorator";
 import { Ranking, PlayerId, PlayerInfo } from "@/store/ranking/types";
-import { EAvatarCategory, EGameMode, ERaceEnum, OngoingMatches } from "@/store/typings";
+import { EGameMode, ERaceEnum, OngoingMatches } from "@/store/typings";
 import PlayerIcon from "@/components/matches/PlayerIcon.vue";
 import SwordIcon from "@/components/ladder/SwordIcon.vue";
 import PlayerRankInfo from "@/components/ladder/PlayerRankInfo.vue";
 import CountryFlagExtended from "@/components/common/CountryFlagExtended.vue";
 import RaceIcon from "@/components/player/RaceIcon.vue";
-import { getAsset, getAvatarUrl } from "@/helpers/url-functions";
 import { TranslateResult } from "vue-i18n";
 import LevelProgress from "@/components/ladder/LevelProgress.vue"
+import { hasSelectedIcon, getRaceIcon } from "@/helpers/ranking-icons";
 
 @Component({
   components: {
@@ -339,56 +339,21 @@ export default class RankingsGrid extends Vue {
     }, 500);
   }
 
-  public getRaceIcon(ranking: Ranking, playerIndex: number): string {
-    const playersInfo = ranking.playersInfo;
-    if (!playersInfo) return this.raceIcon(ERaceEnum.RANDOM);
-    const playerInfo = playersInfo[playerIndex];
-    if (RankingsGrid.hasSelectedIcon(playerInfo)) {
-      return getAvatarUrl(
-        playerInfo.selectedRace,
-        playerInfo.pictureId,
-        playerInfo.isClassicPicture
-      );
-    } else {
-      return getAvatarUrl(
-        playerInfo.selectedRace,
-        playerInfo.pictureId,
-        playerInfo.isClassicPicture
-      );
-      // old way to get race icon: return this.raceIcon(playerInfo.calculatedRace);
-    }
+  getRaceIcon(ranking: Ranking, playerIndex: number): string {
+    return getRaceIcon(ranking, playerIndex);
   }
 
-  public getTitleRace(ranking: Ranking, playerIndex: number): TranslateResult {
+  getTitleRace(ranking: Ranking, playerIndex: number): TranslateResult {
     const playersInfo = ranking.playersInfo;
     if (!playersInfo) return "Random";
     const playerInfo = playersInfo[playerIndex];
-    if (
-      RankingsGrid.hasSelectedIcon(playerInfo) &&
-      playerInfo.selectedRace <= ERaceEnum.UNDEAD
-    ) {
+    if (hasSelectedIcon(playerInfo)) {
       return this.$t(`races.${ERaceEnum[playerInfo.selectedRace]}`);
     } else {
       return this.$t(`races.${ERaceEnum[playerInfo.calculatedRace]}`);
     }
   }
 
-  private static hasSelectedIcon(playerInfo: PlayerInfo) {
-    if (
-      playerInfo.selectedRace !== undefined &&
-      playerInfo.selectedRace != null &&
-      playerInfo.pictureId !== undefined &&
-      playerInfo.pictureId != null
-    ) {
-      return playerInfo.selectedRace !== EAvatarCategory.TOTAL;
-    }
-    return false;
-  }
-
-  raceIcon(race: ERaceEnum) {
-    return getAsset(`raceIcons/${ERaceEnum[race]}.jpg`);
-  }
-
   public isTwitchLive(ranking: Ranking, index: number): boolean {
     const twitchName = ranking.playersInfo[index].twitchName;
     const streamData =

src/components/player/PlayerHeroWinRate.vue

@@ -157,7 +157,6 @@ export default class PlayerHeroWinRate extends Vue {
         [ERaceEnum.HUMAN]: '',
         [ERaceEnum.NIGHT_ELF]: '',
         [ERaceEnum.RANDOM]: '',
-        [ERaceEnum.STARTER]: '',
       };
       const filtered = item.stats
         .filter((byRace) => byRace.race == this.selectedRace)[0]

src/helpers/ranking-icons.ts

@@ -0,0 +1,31 @@
+import { PlayerInfo, Ranking } from "@/store/ranking/types";
+import { ERaceEnum } from "@/store/typings";
+import { getAsset, getAvatarUrl } from "./url-functions";
+
+export function getRaceIcon(ranking: Ranking, playerIndex: number): string {
+  const playersInfo = ranking.playersInfo;
+  if (!playersInfo) return raceIcon(ERaceEnum.RANDOM);
+  const playerInfo = playersInfo[playerIndex];
+  if (hasSelectedIcon(playerInfo)) {
+    return getAvatarUrl(
+    playerInfo.selectedRace,
+    playerInfo.pictureId,
+    playerInfo.isClassicPicture
+    );
+  } else {
+    return raceIcon(playerInfo.calculatedRace);
+  }
+}
+
+function raceIcon(race: ERaceEnum) {
+  return getAsset(`raceIcons/${ERaceEnum[race]}.jpg`);
+}
+
+export function hasSelectedIcon(playerInfo: PlayerInfo) {
+  return (
+    playerInfo.selectedRace !== undefined &&
+    playerInfo.selectedRace != null &&
+    playerInfo.pictureId !== undefined &&
+    playerInfo.pictureId != null
+  );
+}

src/locales/data.ts

@@ -444,6 +444,8 @@ const data = {
       NIGHT_ELF: "Night Elf",
       RANDOM: "Random",
       TOTAL: "Total",
+      SPECIAL: "Special",
+      STARTER: "Starter",
     },
     racesShort: {
       ORC: "OC",

src/store/player/types.ts

@@ -147,5 +147,4 @@ export type PlayerHeroWinRateForStatisticsTab = {
   [ERaceEnum.HUMAN]: string;
   [ERaceEnum.NIGHT_ELF]: string;
   [ERaceEnum.RANDOM]: string;
-  [ERaceEnum.STARTER]: string;
 }

src/store/typings.ts

@@ -158,7 +158,8 @@ export enum ERaceEnum {
   NIGHT_ELF = 4,
   UNDEAD = 8,
   TOTAL = 16,
-  STARTER = 32,
+  SPECIAL = 32,
+  STARTER = 64,
 }
 
 export enum EAvatarCategory {