fix(ability): ability display synced between list and combat

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

Hide file tree

Showing 4 changed files with 37 additions and 8 deletions.
diff --git a/client/src/app/components/combat-ability/combat-ability.component.scss b/client/src/app/components/combat-ability/combat-ability.component.scss
@@ -14,7 +14,7 @@
   margin-right: 12px;
 
   .ability-image-container {
-    margin-top: 20px;
+    margin-top: 4px;
     max-height: 48px;
     border-color: #000;
   }
@@ -27,6 +27,10 @@
 .title {
   display: flex;
   align-items: center;
+  font-size: 16px;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: 4px;
 
   .name, app-element-icon, .ct, .cd, .type {
     margin-right: 5px;

diff --git a/client/src/app/pages/combat/combat.page.scss b/client/src/app/pages/combat/combat.page.scss
@@ -182,7 +182,7 @@
 }
 
 .ability-modal {
-  --padding-top: 0;
+  --padding-top: 16px;
 }
 
 .ability-list {

diff --git a/client/src/app/pages/me/me.page.html b/client/src/app/pages/me/me.page.html
@@ -24,7 +24,7 @@
               </ion-segment-button>
 
               <ion-segment-button value="abilities">
-                <ion-label>{{ data.player?.job }} Abilities</ion-label>
+                <ion-label>Your Abilities</ion-label>
               </ion-segment-button>
 
               <ion-segment-button value="levels">
@@ -67,10 +67,30 @@
     <ion-row *ngIf="view === 'abilities'">
       <ion-col>
         <ion-card>
+          <ion-card-header>
+            <ion-card-title>Basic Abilities</ion-card-title>
+          </ion-card-header>
+
+          <ion-card-content>
+            <ion-list *ngIf="data.player && data.equipment">
+              <ion-item
+                *ngFor="let ability of getBasicAbilities(data.player, data.equipment)"
+              >
+                <app-combat-ability [ability]="ability"></app-combat-ability>
+              </ion-item>
+            </ion-list>
+          </ion-card-content>
+        </ion-card>
+
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>Job Abilities</ion-card-title>
+          </ion-card-header>
+
           <ion-card-content>
             <ion-list *ngIf="data.player && data.equipment">
               <ion-item
-                *ngFor="let ability of getAbilities(data.player, data.equipment)"
+                *ngFor="let ability of getJobAbilities(data.player, data.equipment)"
               >
                 <app-combat-ability [ability]="ability"></app-combat-ability>
               </ion-item>

diff --git a/client/src/app/pages/me/me.page.ts b/client/src/app/pages/me/me.page.ts
@@ -220,7 +220,7 @@ export class MePage implements OnInit {
     ];
   }
 
-  getAbilities(
+  getBasicAbilities(
     player: IPlayer,
     equipment: Record<ItemSlot, IEquipment>,
   ): ICombatAbility[] {
@@ -236,6 +236,13 @@ export class MePage implements OnInit {
         .flat(),
     ];
 
+    return [...itemAbilities].filter(Boolean) as ICombatAbility[];
+  }
+
+  getJobAbilities(
+    player: IPlayer,
+    equipment: Record<ItemSlot, IEquipment>,
+  ): ICombatAbility[] {
     const jobAbilities = Object.values(this.contentService.abilities).filter(
       (ability) => {
         return (
@@ -245,9 +252,7 @@ export class MePage implements OnInit {
       },
     );
 
-    return [...itemAbilities, ...jobAbilities].filter(
-      Boolean,
-    ) as ICombatAbility[];
+    return [...jobAbilities].filter(Boolean) as ICombatAbility[];
   }
 
   nextLevelXp(level: number) {