client side, send actions to server side. need to finish move

After-the-End-of-All-Things · Aug 25, 2023 · c4e032b · c4e032b
1 parent 897466d
commit c4e032b
Show file tree

Hide file tree

Showing 6 changed files with 220 additions and 8 deletions.
diff --git a/client/src/app/components/avatar/avatar.component.scss b/client/src/app/components/avatar/avatar.component.scss
@@ -23,17 +23,18 @@
       transform: scale(1);
     }
   }
+
   &.active {
     --glow-color-start: #033;
     --glow-color-end: #0ff;
 
+    animation: glow 1s ease-in-out infinite alternate;
+
     filter: drop-shadow(1px 1px 0 var(--glow-color-start))
             drop-shadow(-1px 1px 0 var(--glow-color-start))
             drop-shadow(1px -1px 0 var(--glow-color-start))
             drop-shadow(-1px -1px 0 var(--glow-color-start));
 
-    animation: glow 1s ease-in-out infinite alternate;
-
     @keyframes glow {
       0% {
         filter: drop-shadow(1px 1px 0 var(--glow-color-start))

diff --git a/client/src/app/pages/combat/combat.page.html b/client/src/app/pages/combat/combat.page.html
@@ -21,7 +21,11 @@
         </ion-col>
 
         <ion-col class="action-container">
-          <ion-button class="action-button" [disabled]="!isMyCharacterActive">
+          <ion-button
+            class="action-button"
+            [disabled]="!isMyCharacterActive"
+            (click)="startMoving()"
+          >
             Move
           </ion-button>
         </ion-col>
@@ -51,9 +55,21 @@
   <ion-card>
     <ion-card-content>
       <div class="fight">
-        <ion-row *ngFor="let row of fight.tiles" class="tile-row">
-          <ion-col *ngFor="let col of row; let i = index" class="tile-col">
-            <div class="tile" [class.enemy]="i > 3" [class.friendly]="i <= 3">
+        <ion-row
+          *ngFor="let row of fight.tiles; let y = index"
+          class="tile-row"
+        >
+          <ion-col *ngFor="let col of row; let x = index" class="tile-col">
+            <div
+              class="tile"
+              [class.enemy]="x > 3"
+              [class.friendly]="x <= 3"
+              [class.glowing]="isTileActive(x, y)"
+              [ngClass]="['x-' + x, 'y-' + y]"
+              (mouseenter)="selectTilesOnHover(x, y)"
+              (contextmenu)="resetAbilityAndSelection(); $event.preventDefault()"
+              (click)="clickTile(col, x, y)"
+            >
               <div
                 class="character-container"
                 [class.active]="isMyCharacterActive"
@@ -76,7 +92,7 @@
                     size="small"
                     [padding]="0"
                     [noScale]="true"
-                    [active]="isMyCharacterActive"
+                    [active]="isMyCharacterActive && !selectedAbility"
                   ></app-avatar>
 
                   <app-monster-icon
@@ -103,6 +119,10 @@
       </div>
     </ion-card-content>
   </ion-card>
+
+  <ion-card *ngIf="selectedAbility">
+    <ion-card-content>{{ selectedAbility | json }}</ion-card-content>
+  </ion-card>
 </ion-content>
 
 <ion-modal

diff --git a/client/src/app/pages/combat/combat.page.scss b/client/src/app/pages/combat/combat.page.scss
@@ -31,6 +31,25 @@
     &.friendly {
       background-color: #040;
     }
+
+    &.glowing {
+      --glow-color-start: #099;
+      --glow-color-end: #0cc;
+
+      cursor: pointer;
+
+      animation: glow 1s ease-in-out infinite alternate;
+    }
+
+    @keyframes glow {
+      0% {
+        background-color: var(--glow-color-start);
+      }
+
+      100% {
+        background-color: var(--glow-color-end);
+      }
+    }
   }
 }
 

diff --git a/client/src/app/pages/combat/combat.page.ts b/client/src/app/pages/combat/combat.page.ts
@@ -9,8 +9,11 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
   Element,
   ICombatAbility,
+  ICombatAbilityPattern,
+  ICombatTargetParams,
   IFight,
   IFightCharacter,
+  IFightTile,
   IMonster,
   IPlayer,
   IUser,
@@ -52,6 +55,7 @@ export class CombatPage implements OnInit {
   public myCharacterJob = '';
   public myCharacterLevel = 0;
   public selectedAbility: ICombatAbility | undefined;
+  public staticSelectedTiles: Record<string, boolean> = {};
 
   public get myCharacter(): IFightCharacter {
     return this.fightCharacters[this.myCharacterId];
@@ -61,6 +65,12 @@ export class CombatPage implements OnInit {
     return this.fight.currentTurn === this.myCharacterId;
   }
 
+  public get defenders(): IFightCharacter[] {
+    return this.fight.defenders.map((character) => {
+      return this.fightCharacters[character.characterId];
+    });
+  }
+
   constructor(
     private store: Store,
     private contentService: ContentService,
@@ -126,8 +136,169 @@ export class CombatPage implements OnInit {
 
   selectAbility(ability: ICombatAbility) {
     this.selectedAbility = ability;
+    this.staticSelectedTiles = {};
 
     this.abilitiesModal.dismiss();
+
+    this.chooseSelectedTiles(ability);
+  }
+
+  findTileWithCharacter(characterId: string): [number, number] | undefined {
+    let foundTile: [number, number] | undefined;
+
+    this.fight.tiles.forEach((row, y) => {
+      row.forEach((tile, x) => {
+        if (tile.containedCharacters.includes(characterId)) {
+          foundTile = [x, y];
+        }
+      });
+    });
+
+    return foundTile;
+  }
+
+  choosePatternAroundCenter(
+    x: number,
+    y: number,
+    pattern: ICombatAbilityPattern,
+  ): Record<string, boolean> {
+    const staticSelectedTiles: Record<string, boolean> = {};
+
+    switch (pattern) {
+      case 'Single': {
+        staticSelectedTiles[`${x}-${y}`] = true;
+        return staticSelectedTiles;
+      }
+
+      case 'Cross': {
+        staticSelectedTiles[`${x}-${y}`] = true;
+        staticSelectedTiles[`${x - 1}-${y}`] = true;
+        staticSelectedTiles[`${x + 1}-${y}`] = true;
+        staticSelectedTiles[`${x}-${y - 1}`] = true;
+        staticSelectedTiles[`${x}-${y + 1}`] = true;
+        return staticSelectedTiles;
+      }
+
+      case 'CrossNoCenter': {
+        staticSelectedTiles[`${x - 1}-${y}`] = true;
+        staticSelectedTiles[`${x + 1}-${y}`] = true;
+        staticSelectedTiles[`${x}-${y - 1}`] = true;
+        staticSelectedTiles[`${x}-${y + 1}`] = true;
+        return staticSelectedTiles;
+      }
+
+      case 'ThreeVertical': {
+        staticSelectedTiles[`${x}-${y}`] = true;
+        staticSelectedTiles[`${x}-${y - 1}`] = true;
+        staticSelectedTiles[`${x}-${y + 1}`] = true;
+        return staticSelectedTiles;
+      }
+
+      case 'TwoHorizontal': {
+        staticSelectedTiles[`${x}-${y}`] = true;
+        staticSelectedTiles[`${x + 1}-${y}`] = true;
+        return staticSelectedTiles;
+      }
+
+      default:
+        return pattern satisfies never;
+    }
+  }
+
+  drawPatternAroundCenter(
+    x: number,
+    y: number,
+    pattern: ICombatAbilityPattern,
+  ) {
+    const patternTiles = this.choosePatternAroundCenter(x, y, pattern);
+    this.staticSelectedTiles = { ...this.staticSelectedTiles, ...patternTiles };
+  }
+
+  chooseSelectedTiles(ability: ICombatAbility) {
+    switch (ability.targetting) {
+      case 'Self': {
+        const center = this.findTileWithCharacter(this.myCharacterId);
+        if (!center) return;
+
+        this.drawPatternAroundCenter(center[0], center[1], ability.pattern);
+        return;
+      }
+
+      case 'Creature': {
+        this.defenders.forEach((defender) => {
+          const center = this.findTileWithCharacter(defender.characterId);
+          if (!center) return;
+
+          this.drawPatternAroundCenter(center[0], center[1], ability.pattern);
+        });
+        return;
+      }
+    }
+  }
+
+  selectTilesOnHover(hoverTileX: number, hoverTileY: number) {
+    if (!this.selectedAbility || this.selectedAbility.targetting !== 'Ground')
+      return;
+
+    this.resetSelectedTiles();
+    this.drawPatternAroundCenter(
+      hoverTileX,
+      hoverTileY,
+      this.selectedAbility.pattern,
+    );
+  }
+
+  resetAbilityAndSelection() {
+    this.resetAbility();
+    this.resetSelectedTiles();
+  }
+
+  resetAbility() {
+    this.selectedAbility = undefined;
+  }
+
+  resetSelectedTiles() {
+    this.staticSelectedTiles = {};
+  }
+
+  isTileActive(x: number, y: number) {
+    if (!this.selectedAbility) return false;
+
+    const tileKey = `${x}-${y}`;
+    return this.staticSelectedTiles[tileKey];
+  }
+
+  clickTile(tile: IFightTile, x: number, y: number) {
+    if (!this.selectedAbility) return;
+
+    if (this.isTileActive(x, y)) {
+      const targetArgs =
+        this.selectedAbility.targetting === 'Ground'
+          ? { tile: { x, y } }
+          : { characterId: tile.containedCharacters[0] };
+
+      this.fightService
+        .takeAction(this.selectedAbility.itemId, targetArgs)
+        .subscribe();
+    }
+
+    this.resetAbilityAndSelection();
+  }
+
+  startMoving() {
+    const moveAction = this.contentService.getAbilityByName('Move');
+    if (!moveAction) return;
+
+    this.selectAbility(moveAction);
+  }
+
+  finalizeAction(targetParams: ICombatTargetParams) {
+    const action = this.selectedAbility;
+    if (!action) return;
+
+    this.fightService.takeAction(action.itemId, targetParams).subscribe();
+    this.resetAbility();
+    this.resetSelectedTiles();
   }
 
   async flee() {

diff --git a/server/src/modules/fight/fight.service.ts b/server/src/modules/fight/fight.service.ts
@@ -217,7 +217,7 @@ export class FightService {
       }
 
       default: {
-        console.log('default action', action);
+        console.log('default action', action, targetParams);
       }
     }
   }

diff --git a/shared/interfaces/combat.ts b/shared/interfaces/combat.ts
@@ -6,6 +6,7 @@ export type ICombatAbilityTargetting = 'Creature' | 'Ground' | 'Self';
 export type ICombatAbilityPattern =
   | 'Single'
   | 'Cross'
+  | 'CrossNoCenter'
   | 'ThreeVertical'
   | 'TwoHorizontal';