Fixed item modal and add more data

iversonLv · Aug 29, 2024 · a72d1ed · a72d1ed
1 parent e2abffa
commit a72d1ed
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 22 deletions.
diff --git a/...matches/components/table-match-detail-overview/table-match-detail-overview.component.html b/...matches/components/table-match-detail-overview/table-match-detail-overview.component.html
@@ -232,7 +232,8 @@
   <ng-container matColumnDef="permanent_buffs">
     <th mat-header-cell *matHeaderCellDef mat-sort-header [disabled]="true"
       matTooltip="Permanent buffs such as Flesh Heap stacks or Tomes of Knowledge used" matTooltipPosition="above">
-      <span> BUFF</span></th>
+      <span> BUFF</span>
+    </th>
     <td mat-cell *matCellDef="let element">
       <span *ngIf="!element.permanent_buffs; else hasPermanentBuffs">-</span>
       <ng-template #hasPermanentBuffs>

diff --git a/src/app/shared/components/item-modal/item-modal.component.html b/src/app/shared/components/item-modal/item-modal.component.html
@@ -16,13 +16,43 @@ <h3>{{item.dname}}</h3>
     </div>
   </div>
   <!-- item-main -->
+  <div class="item-behavior" *ngIf="item?.behavior > 0">
+    <label>TARGET:</label>
+    <span *ngFor="let behavior of item.behavior">{{behavior}} /</span>
+  </div>
+  <div class="item-dispellable" *ngIf="item?.dispellable">
+    <label>DISPELLABLE:</label> {{item?.dispellable}}
+  </div>
   <div class="item-attrib" *ngIf="item.attrib">
     <p *ngFor="let attribItem of item.attrib" class="attrib-row">
-      <span>{{attribItem.header}}</span> {{attribItem.value}} <span>{{attribItem.footer}}</span>
+      <span>{{replaceValueInDisplay(attribItem)}}</span>
     </p>
   </div>
+  <!-- item abilities -->
+  <div class="item-abilities" *ngIf="item.abilities.length > 0">
+    <div *ngFor="let ability of item.abilities" [class]="'item-ability item-ability-' + ability.type ">
+      <div class="item-ability-title">
+        <h2>{{ability.type}}: {{ability.title}}</h2>
+        <div *ngIf="ability.type === 'active'">
+          <div class="item-mc-cd">
+            <span class="item-mc" *ngIf="item.mc">
+              <img onError="this.src='./assets/images/Dota2Logo.svg'" width="15px" height="15px"
+                src="assets/images/mana.png">
+              <span class="item-value">{{item.mc}}</span>
+            </span>
+            <span class="item-cd" *ngIf="item.cd">
+              <img onError="this.src='./assets/images/Dota2Logo.svg'" width="15px" height="15px"
+                src="assets/images/cooldown.png">
+              <span class="item-value">{{item.cd}}</span>
+            </span>
+          </div>
+        </div>
+      </div>
+      <p class="item-ability-content">{{ability.description}}</p>
+    </div>
+  </div>
   <!-- item-attrib -->
-  <div class="item-hint" *ngIf="item.hint">
+  <div class="item-hint" *ngIf="item.hint.length > 0">
     <p *ngFor="let hint of item.hint" class="hint-row">
       {{hint}}
     </p>
@@ -41,13 +71,9 @@ <h6>Components:</h6>
         </app-img>
         <span *ngIf="items" class="item-cost">{{items[component]?.cost}}</span>
       </span>
-      <span class="components-block">
-        <app-img [data]="items['recipe_' + item?.img.slice(25).split('_lg')[0]]?.img"
-          *ngIf="items && items['recipe_' + item?.img.slice(25).split('_lg')[0]]?.img" class="sb-item-img"
-          [altData]="item['dname']">
-        </app-img>
-        <span *ngIf="items && items['recipe_' + item?.img.slice(25).split('_lg')[0]]?.cost"
-          class="item-cost">{{items['recipe_' + item?.img.slice(25).split('_lg')[0]]['cost']}}</span>
+      <span class="components-block" *ngIf="item.created">
+        <img onError="this.src='./assets/images/Dota2Logo.svg'" width="40" src='./assets/images/recipe.png' />
+        <span class="item-cost">{{calRecipeCost(item)}}</span>
       </span>
     </div>
   </div>

diff --git a/src/app/shared/components/item-modal/item-modal.component.scss b/src/app/shared/components/item-modal/item-modal.component.scss
@@ -1,5 +1,4 @@
-@import '../../../../styles.scss';
-
+@import "../../../../styles.scss";
 
 .item-tooltip {
   border: 2px solid $deep;
@@ -13,7 +12,7 @@
 .item-main {
   display: flex;
   padding-bottom: 10px;
-  
+
   .item-main-right {
     display: flex;
     flex-direction: column;
@@ -37,8 +36,7 @@
   }
 }
 
-.item-attrib
-{
+.item-attrib {
   font-size: 12px;
   padding-bottom: 10px;
 
@@ -99,12 +97,11 @@
   }
 }
 
-
 // aghs
 
 .aghs-box {
   padding: 15px;
-  border-top: 1px solid rgba($color: $white, $alpha: .3);
+  border-top: 1px solid rgba($color: $white, $alpha: 0.3);
 }
 
 .new-ablility {
@@ -116,4 +113,68 @@
 .enhance-ablility {
   font-size: 12px;
   color: $green;
-}
+}
+
+// item-mc-cd
+.item-mc-cd {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+}
+.item-mc,
+.item-cd {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+}
+
+// abilities
+.item-ability {
+  font-size: 13px;
+  .item-ability-title {
+    padding: 0 0.5em;
+  }
+  .item-ability-content {
+    padding: 0.5em;
+  }
+  .item-ability-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    h2 {
+      margin: 0;
+    }
+  }
+}
+.item-ability-active {
+  color: rgb(122, 128, 167);
+  .item-ability-title {
+    color: rgb(159, 159, 207);
+    background: linear-gradient(to right, rgb(55, 59, 127), rgb(24, 30, 48));
+  }
+  .item-ability-content {
+    background: rgb(24, 30, 48);
+  }
+}
+
+.item-ability-passive {
+  color: rgb(98, 109, 123);
+  .item-ability-title {
+    color: rgb(126, 140, 157);
+    background: linear-gradient(to right, rgb(38, 53, 64), rgb(28, 38, 48));
+  }
+  .item-ability-content {
+    background-color: rgb(28, 38, 48);
+  }
+}
+.item-ability-use {
+  color: rgb(123, 138, 114);
+  .item-ability-title {
+    color: rgb(149, 192, 122);
+    background: linear-gradient(to right, rgb(39, 63, 39), rgb(23, 35, 31));
+  }
+  .item-ability-content {
+    background-color: rgb(23, 35, 31);
+  }
+}
diff --git a/src/app/shared/components/item-modal/item-modal.component.ts b/src/app/shared/components/item-modal/item-modal.component.ts
@@ -4,7 +4,7 @@ import { IItemLocal } from '../../model/item';
 @Component({
   selector: 'app-item-modal',
   templateUrl: './item-modal.component.html',
-  styleUrls: ['./item-modal.component.scss']
+  styleUrls: ['./item-modal.component.scss'],
 })
 export class ItemModalComponent implements OnInit {
   @Input() pageXY: number[];
@@ -45,9 +45,7 @@ export class ItemModalComponent implements OnInit {
   //   charges: false
   // };
 
-  constructor(
-    // private itemsService: ItemsService,
-  ) { }
+  constructor() {} // private itemsService: ItemsService,
 
   ngOnInit(): void {
     // this.getitems();
@@ -61,4 +59,17 @@ export class ItemModalComponent implements OnInit {
   //   });
   // }
 
+  replaceValueInDisplay(attribItem): string {
+    if (attribItem.key.startsWith('bonus') && attribItem.display) {
+      return attribItem?.display.replace('{value}', attribItem.value);
+    }
+  }
+
+  calRecipeCost(item): number {
+    let componentCost = item.components.reduce(
+      (acc, cur) => acc + this.items[cur]?.cost,
+      0
+    );
+    return item.cost - componentCost;
+  }
 }
diff --git a/src/assets/images/recipe.png b/src/assets/images/recipe.png