begin ability display

client/src/app/components/combat-ability/combat-ability.component.html

@@ -0,0 +1,26 @@
+<ion-row>
+  <ion-col class="target-image">
+    <div class="target-image-container">
+      <ion-img
+        [src]="'assets/combat/targetting/' + imageName + '.png'"
+      ></ion-img>
+    </div>
+  </ion-col>
+
+  <ion-col>
+    <h3>
+      {{ ability.name }}
+
+      <app-element-icon
+        *ngFor="let element of ability.elements"
+        [element]="element"
+        [inline]="true"
+      ></app-element-icon>
+    </h3>
+
+    <p>
+      {{ ability.description }}
+      <strong>{{ abilityDamage() }} damage</strong>
+    </p>
+  </ion-col>
+</ion-row>

client/src/app/components/combat-ability/combat-ability.component.scss

@@ -0,0 +1,11 @@
+
+.target-image {
+  max-width: 64px;
+
+  .target-image-container {
+    margin-top: 20px;
+    max-height: 64px;
+    background-color: #ccc;
+    border-color: #000;
+  }
+}

client/src/app/components/combat-ability/combat-ability.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ICombatAbility } from '@interfaces';
+
+@Component({
+  selector: 'app-combat-ability',
+  templateUrl: './combat-ability.component.html',
+  styleUrls: ['./combat-ability.component.scss'],
+})
+export class CombatAbilityComponent implements OnInit {
+  @Input() ability!: ICombatAbility;
+
+  public get imageName() {
+    const pattern = this.ability.pattern.toLowerCase();
+    const targetting =
+      this.ability.targetting === 'Creature' ? 'center' : 'ground';
+
+    return `${pattern}-${targetting}`;
+  }
+
+  constructor() {}
+
+  ngOnInit() {}
+
+  // TODO: ability damage
+  abilityDamage() {
+    return 0;
+  }
+}

client/src/app/components/element-icon/element-icon.component.html

@@ -1,4 +1,4 @@
-<div class="element-container">
+<div class="element-container" [class.inline]="inline">
   <div class="element-count-container">
     <div class="element-count" *ngFor="let count of countArray"></div>
   </div>

client/src/app/components/element-icon/element-icon.component.scss

@@ -1,6 +1,13 @@
 
 .element-container {
   position: relative;
+
+  &.inline {
+    .element-icon {
+      width: 16px;
+      height: 16px;
+    }
+  }
 }
 
 .element-count-container {

client/src/app/components/element-icon/element-icon.component.ts

@@ -10,6 +10,7 @@ export class ElementIconComponent implements OnInit {
   @Input({ required: true }) element!: Element;
   @Input() count = 0;
   @Input() colored = true;
+  @Input() inline = false;
 
   public countArray: number[] = [];
 

client/src/app/pages/combat/combat.page.html

@@ -2,13 +2,33 @@
   <app-header-bar></app-header-bar>
 </ion-header>
 
-<ion-content [fullscreen]="true">
+<ion-content [fullscreen]="true" id="combat-abilities">
   <ion-header collapse="condense">
     <app-header-bar></app-header-bar>
   </ion-header>
 
   <ion-card>
-    <ion-card-content></ion-card-content>
+    <ion-card-content>
+      <ion-row>
+        <ion-col class="action-container">
+          <ion-button class="action-button" id="abilitiesModal">
+            Attack
+          </ion-button>
+        </ion-col>
+
+        <ion-col class="action-container">
+          <ion-button class="action-button">Move</ion-button>
+        </ion-col>
+
+        <ion-col class="action-container">
+          <ion-button class="action-button" disabled>Item</ion-button>
+        </ion-col>
+
+        <ion-col class="action-container">
+          <ion-button class="action-button">Run Away</ion-button>
+        </ion-col>
+      </ion-row>
+    </ion-card-content>
   </ion-card>
 
   <ion-card>
@@ -62,6 +82,31 @@
       </div>
     </ion-card-content>
   </ion-card>
-
-  {{ fight | json }}
 </ion-content>
+
+<ion-modal
+  trigger="abilitiesModal"
+  [initialBreakpoint]="0.5"
+  [breakpoints]="[0, 0.5, 1]"
+>
+  <ng-template>
+    <ion-header>
+      <ion-toolbar color="primary">
+        <ion-title>Abilities</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-list class="ability-list">
+        <ion-item
+          lines="none"
+          class="ability"
+          *ngFor="let ability of getAbilities()"
+          (click)="selectAbility(ability)"
+        >
+          <app-combat-ability [ability]="ability"></app-combat-ability>
+        </ion-item>
+      </ion-list>
+    </ion-content>
+  </ng-template>
+</ion-modal>

client/src/app/pages/combat/combat.page.scss

@@ -69,3 +69,26 @@
     height: 3px;
   }
 }
+
+.action-container {
+  display: flex;
+  justify-content: center;
+
+  .action-button {
+    width: 150px;
+  }
+}
+
+.ability-list {
+  --ion-background-color: transparent;
+  --ion-item-background: transparent;
+
+
+  .ability {
+    cursor: pointer;
+
+    &:hover {
+      outline: 1px solid #000;
+    }
+  }
+}

client/src/app/pages/combat/combat.page.ts

@@ -1,11 +1,18 @@
 import { Component, DestroyRef, OnInit, inject } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Element, IFight, IFightCharacter, IMonster } from '@interfaces';
+import {
+  Element,
+  ICombatAbility,
+  IFight,
+  IFightCharacter,
+  IMonster,
+  IUser,
+} from '@interfaces';
 import { Select, Store } from '@ngxs/store';
 import { ContentService } from '@services/content.service';
-import { FightStore } from '@stores';
+import { FightStore, UserStore } from '@stores';
 import { ChangePage } from '@stores/user/user.actions';
-import { Observable } from 'rxjs';
+import { Observable, combineLatest } from 'rxjs';
 
 @Component({
   selector: 'app-combat',
@@ -15,6 +22,7 @@ import { Observable } from 'rxjs';
 export class CombatPage implements OnInit {
   private destroyRef = inject(DestroyRef);
 
+  @Select(UserStore.user) user$!: Observable<IUser>;
   @Select(FightStore.fight) fight$!: Observable<IFight>;
 
   public readonly elements: Element[] = [
@@ -28,26 +36,60 @@ export class CombatPage implements OnInit {
 
   public fight!: IFight;
   public fightCharacters: Record<string, IFightCharacter> = {};
+  public myCharacterId = '';
+  public selectedAbility: ICombatAbility | undefined;
+
+  public get myCharacter(): IFightCharacter {
+    return this.fightCharacters[this.myCharacterId];
+  }
 
   constructor(private store: Store, private contentService: ContentService) {}
 
   ngOnInit() {
-    this.fight$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((fight) => {
-      if (!fight) {
-        this.store.dispatch(new ChangePage('home'));
-        return;
-      }
+    combineLatest([this.user$, this.fight$])
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(([user, fight]) => {
+        if (!fight) {
+          this.store.dispatch(new ChangePage('home'));
+          return;
+        }
+
+        this.fight = fight;
 
-      this.fight = fight;
+        this.fightCharacters = {};
+        [...fight.attackers, ...fight.defenders].forEach((character) => {
+          this.fightCharacters[character.characterId] = character;
 
-      this.fightCharacters = {};
-      [...fight.attackers, ...fight.defenders].forEach((character) => {
-        this.fightCharacters[character.characterId] = character;
+          if (character.userId === user.id) {
+            this.myCharacterId = character.characterId;
+          }
+        });
       });
-    });
   }
 
   getMonster(id: string): IMonster {
     return this.contentService.getMonster(id) as IMonster;
   }
+
+  getAbilities(): ICombatAbility[] {
+    const allAbilities = [
+      this.contentService.getAbilityByName('Unarmed Attack'),
+      ...Object.values(this.myCharacter.equipment)
+        .filter(Boolean)
+        .map((item) => {
+          return (item.abilities ?? [])
+            .map((ability) => this.contentService.getAbility(ability))
+            .flat();
+        })
+        .flat(),
+    ];
+
+    // TODO: job abilities
+
+    return allAbilities.filter(Boolean) as ICombatAbility[];
+  }
+
+  selectAbility(ability: ICombatAbility) {
+    this.selectedAbility = ability;
+  }
 }

client/src/app/services/content.service.ts

@@ -144,6 +144,12 @@ export class ContentService {
     return this.monsters[monster];
   }
 
+  public getAbilityByName(abilityName: string): ICombatAbility | undefined {
+    return Object.values(this.abilities).find(
+      (ability) => ability.name === abilityName,
+    );
+  }
+
   public getAbility(ability: string): ICombatAbility | undefined {
     return this.abilities[ability];
   }

client/src/app/shared.module.ts

@@ -5,6 +5,7 @@ import { RouterModule } from '@angular/router';
 import { AvatarComponent } from '@components/avatar/avatar.component';
 import { BackgroundArtComponent } from '@components/background-art/background-art.component';
 import { CardOnlineUsersComponent } from '@components/card-online-users/card-online-users.component';
+import { CombatAbilityComponent } from '@components/combat-ability/combat-ability.component';
 import { CountdownComponent } from '@components/countdown/countdown.component';
 import { ElementIconComponent } from '@components/element-icon/element-icon.component';
 import { HeaderBarComponent } from '@components/header-bar/header-bar.component';
@@ -47,6 +48,7 @@ const components = [
   CountdownComponent,
   RelativeTimePipe,
   ElementIconComponent,
+  CombatAbilityComponent,
 ];
 
 @NgModule({

client/src/stores/user/user.functions.ts

@@ -6,6 +6,7 @@ import { ApplyUserPatches, ChangePage, SetUser } from './user.actions';
 export const defaultStore: () => IUserStore = () => ({
   version: 0,
   user: {
+    id: '',
     createdAt: new Date(),
     discriminator: '',
     email: '',

server/src/modules/fight/fight.service.ts

@@ -61,6 +61,8 @@ export class FightService {
       player,
     );
 
+    console.log();
+
     return {
       userId: player.userId,
       characterId: uuid(),

shared/interfaces/user.ts

@@ -1,4 +1,5 @@
 export interface IUser {
+  id: string;
   createdAt: Date;
   discriminator: string;
   email: string;