WIP

src/app/games/massive-darkness2/md2-icon/md2-icon.component.html

@@ -1 +1,5 @@
-<span [innerHtml]="iconHtml" class="{{sizeClass}} mx-2"></span>
+@if(isImageIcon) {
+<img [src]="imgUrl" class="{{sizeClass}} mx-2">
+} @else {
+<span [innerHtml]="iconHtml" class="{{sizeClass}} mx-2"></span>
+}

src/app/games/massive-darkness2/md2-icon/md2-icon.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { MD2Icon } from '../massive-darkness2.model';
+import { MD2Icon, TreasureType } from '../massive-darkness2.model';
 import { MD2StateService } from '../../../services/MD2/md2-state.service';
 
 @Component({
@@ -10,7 +10,8 @@ import { MD2StateService } from '../../../services/MD2/md2-state.service';
 export class MD2IconComponent implements OnInit {
 
   @Input() iconClass: string = 'mr-1';
-
+  isImageIcon: boolean = false;
+  imgUrl: string;
   iconHtml: string;
   private _icon: string | MD2Icon;
 
@@ -27,7 +28,7 @@ export class MD2IconComponent implements OnInit {
             v = MD2Icon[key as keyof typeof MD2Icon];
           }
         }
-        this.iconHtml = this.md2StateService.iconHtml(v as MD2Icon);
+        this.initIcon(v as MD2Icon);
       }
       if (this.isMD2Icon(v)) {
         this.iconName = MD2Icon[v].toLowerCase();
@@ -48,20 +49,46 @@ export class MD2IconComponent implements OnInit {
   ngOnInit(): void {
   }
 
+  private initIcon(icon: MD2Icon): void {
+    if (icon < MD2Icon.TreasureToken) {
+      this.isImageIcon = false;
+      this.iconHtml = this.md2StateService.iconHtml(icon);
+    } else {
+      this.isImageIcon = true;
+      switch (icon) {
+        case MD2Icon.TreasureToken:
+          this.imgUrl = this.md2StateService.treasureImage(TreasureType.Cover);
+          break;
+        case MD2Icon.TreasureToken_Common:
+          this.imgUrl = this.md2StateService.treasureImageHtml(TreasureType.Common);
+          break;
+        case MD2Icon.TreasureToken_Rare:
+          this.imgUrl = this.md2StateService.treasureImage(TreasureType.Rare);
+          break;
+        case MD2Icon.TreasureToken_Epic:
+          this.imgUrl = this.md2StateService.treasureImage(TreasureType.Epic);
+          break;
+        case MD2Icon.TreasureToken_Legendary:
+          this.imgUrl = this.md2StateService.treasureImage(TreasureType.Legendary);
+          break;
+      }
+    }
+  }
+
   public get sizeClass(): string {
     switch (this.size) {
       case 'sm':
-        return 'g-font-size-18'
+        return this.isImageIcon ? 'g-width-25 img-fluid' : 'g-font-size-18'
         break;
       case 'med':
-        return 'g-font-size-30'
+        return this.isImageIcon ? 'g-width-35 img-fluid' : 'g-font-size-30'
         break;
       case 'lg':
-        return 'g-font-size-50'
+        return this.isImageIcon ? 'g-width-50 img-fluid' : 'g-font-size-50'
         break;
 
       default:
-        return 'g-font-size-' + this.size;
+        return this.isImageIcon ? 'g-width-20 img-fluid' : 'g-font-size-' + this.size;
         break;
     }
   }