feat(profile): add abilities tab for classes

After-the-End-of-All-Things · Sep 12, 2023 · e078643 · e078643
1 parent 827993c
commit e078643
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 3 deletions.
diff --git a/client/src/app/components/combat-ability/combat-ability.component.html b/client/src/app/components/combat-ability/combat-ability.component.html
@@ -62,7 +62,9 @@ <h3 class="title">
       <ion-col>
         <p class="ability-desc">
           {{ ability.description }}
-          <strong>{{ abilityDamage() }} damage</strong>
+          <strong *ngIf="abilityDamage() as abilityDamage">
+            {{ abilityDamage }} damage
+          </strong>
         </p>
       </ion-col>
     </ion-row>

diff --git a/client/src/app/components/combat-ability/combat-ability.component.ts b/client/src/app/components/combat-ability/combat-ability.component.ts
@@ -33,6 +33,8 @@ export class CombatAbilityComponent implements OnInit {
   ngOnInit() {}
 
   abilityDamage(): number {
+    if (!this.stats) return 0;
+
     return +Object.keys(this.ability.statScaling)
       .map(
         (stat) =>

diff --git a/client/src/app/pages/me/me.page.html b/client/src/app/pages/me/me.page.html
@@ -23,6 +23,10 @@
                 <ion-label>{{ data.player?.job }} Stats</ion-label>
               </ion-segment-button>
 
+              <ion-segment-button value="abilities">
+                <ion-label>{{ data.player?.job }} Abilities</ion-label>
+              </ion-segment-button>
+
               <ion-segment-button value="levels">
                 <ion-label>Job Levels</ion-label>
               </ion-segment-button>
@@ -60,6 +64,22 @@
       </ion-col>
     </ion-row>
 
+    <ion-row *ngIf="view === 'abilities'">
+      <ion-col>
+        <ion-card>
+          <ion-card-content>
+            <ion-list *ngIf="data.player && data.equipment">
+              <ion-item
+                *ngFor="let ability of getAbilities(data.player, data.equipment)"
+              >
+                <app-combat-ability [ability]="ability"></app-combat-ability>
+              </ion-item>
+            </ion-list>
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+
     <ng-container *ngIf="data.player as player">
       <ion-row *ngIf="view === 'levels'">
         <ion-col

diff --git a/client/src/app/pages/me/me.page.ts b/client/src/app/pages/me/me.page.ts
@@ -2,7 +2,13 @@ import { Component, OnInit } from '@angular/core';
 import { ChooseAvatarModalComponent } from '@components/modals/choose-avatar/choose-avatar.component';
 import { ChooseBackgroundComponent } from '@components/modals/choose-background/choose-background.component';
 import { xpForLevel } from '@helpers/xp';
-import { IEquipment, IPlayer, ItemSlot, Stat } from '@interfaces';
+import {
+  ICombatAbility,
+  IEquipment,
+  IPlayer,
+  ItemSlot,
+  Stat,
+} from '@interfaces';
 import { AlertController, ModalController } from '@ionic/angular';
 import { Select } from '@ngxs/store';
 import { AuthService } from '@services/auth.service';
@@ -23,7 +29,7 @@ export class MePage implements OnInit {
     Record<ItemSlot, IEquipment>
   >;
 
-  public view: 'stats' | 'levels' = 'stats';
+  public view: 'stats' | 'abilities' | 'levels' = 'stats';
 
   public readonly stats = [
     {
@@ -214,6 +220,36 @@ export class MePage implements OnInit {
     ];
   }
 
+  getAbilities(
+    player: IPlayer,
+    equipment: Record<ItemSlot, IEquipment>,
+  ): ICombatAbility[] {
+    const itemAbilities = [
+      this.contentService.getAbilityByName('Unarmed Attack'),
+      ...Object.values(equipment)
+        .filter(Boolean)
+        .map((item) => {
+          return (item.abilities ?? [])
+            .map((ability) => this.contentService.getAbility(ability))
+            .flat();
+        })
+        .flat(),
+    ];
+
+    const jobAbilities = Object.values(this.contentService.abilities).filter(
+      (ability) => {
+        return (
+          ability.requiredJob === player.job &&
+          ability.requiredLevel <= player.level
+        );
+      },
+    );
+
+    return [...itemAbilities, ...jobAbilities].filter(
+      Boolean,
+    ) as ICombatAbility[];
+  }
+
   nextLevelXp(level: number) {
     return xpForLevel(level + 1);
   }