UI (website): add icons for achievement categories

Zero-to-Heroes · Jun 10, 2023 · 5849af4 · 5849af4
1 parent 8188c1e
commit 5849af4
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 4 deletions.
diff --git a/libs/achievements/view/src/lib/components/achievement-category-view.component.ts b/libs/achievements/view/src/lib/components/achievement-category-view.component.ts
@@ -28,7 +28,8 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 				</i>
 			</div>
 			<span class="text set-name" [helpTooltip]="displayName">{{ displayName }}</span>
-			<i class="logo" [inlineSVG]="categoryIcon"> </i>
+			<i class="logo"*ngIf="categoryIcon" [inlineSVG]="categoryIcon"> </i>
+			<img class="logo"*ngIf="categoryImage" [src]="categoryImage" />
 			<progress-bar [current]="achieved" [total]="totalAchievements"></progress-bar>
 		</div>
 	`,
@@ -39,6 +40,7 @@ export class AchievementCategoryViewComponent {
 	@Input() complete: boolean;
 	@Input() displayName: string;
 	@Input() categoryIcon: string;
+	@Input() categoryImage: string;
 	@Input() achieved: number;
 	@Input() totalAchievements: number;
 }
diff --git a/libs/website/profile/src/lib/+state/website/profile.effects.ts b/libs/website/profile/src/lib/+state/website/profile.effects.ts
@@ -170,7 +170,7 @@ export class WebsiteProfileEffects {
 						refCategory?.locales?.find((loc) => loc.locale === this.i18n.locale)?.name ??
 						refCategory?.name ??
 						'',
-					categoryIcon: '',
+					categoryImage: this.buildAchievementCategoryImage(category.id),
 				};
 			}) ?? [];
 		const extendedProfile: ExtendedProfile = {
@@ -180,4 +180,27 @@ export class WebsiteProfileEffects {
 		};
 		return extendedProfile;
 	}
+
+	private buildAchievementCategoryImage(id: number): string {
+		const imageName = this.buildAchievementCategoryImageName(id);
+		return !!imageName?.length
+			? `https://static.zerotoheroes.com/hearthstone/asset/firestone/images/achievements/${imageName}.webp`
+			: '';
+	}
+	buildAchievementCategoryImageName(id: number): string | null {
+		switch (id) {
+			case 1:
+				return 'AchievementPin_Progression';
+			case 2:
+				return 'AchievementPin_Gameplay';
+			case 3:
+				return 'AchievementPin_Collection';
+			case 4:
+				return 'AchievementPin_Adventures';
+			case 6:
+				return 'AchievementPin_GameModes1';
+			default:
+				return null;
+		}
+	}
 }
diff --git a/libs/website/profile/src/lib/+state/website/profile.models.ts b/libs/website/profile/src/lib/+state/website/profile.models.ts
@@ -32,5 +32,5 @@ export interface ExtendedProfileAchievementCategory extends ProfileAchievementCa
 	readonly empty: boolean;
 	readonly complete: boolean;
 	readonly displayName: string;
-	readonly categoryIcon: string;
+	readonly categoryImage: string;
 }
diff --git a/libs/website/profile/src/lib/achievements/website-profile-achievements-overview.component.ts b/libs/website/profile/src/lib/achievements/website-profile-achievements-overview.component.ts
@@ -14,7 +14,7 @@ import { getAchievementCategories } from '../+state/website/profile.selectors';
 				[empty]="category.empty"
 				[complete]="category.complete"
 				[displayName]="category.displayName"
-				[categoryIcon]="category.categoryIcon"
+				[categoryImage]="category.categoryImage"
 				[achieved]="category.completedAchievements"
 				[totalAchievements]="category.totalAchievements"
 			>