➕ Add unit attack ⚔️

src/gameObjects/GameMap.ts

@@ -169,18 +169,6 @@ export default class GameMap extends Phaser.GameObjects.GameObject {
     return this;
   }
 
-  private onTargetSelectorCancel(tile: Phaser.Tilemaps.Tile) {
-    this.removeTargetSelectorListeners();
-
-    this.addUnitActionsListeners();
-    this.scene.events.emit('openUnitActions', this.cursor, tile);
-  }
-
-  private onTargetSelectorSelect() {
-    console.log('selected');
-    this.removeTargetSelectorListeners();
-  }
-
   private addWeaponSelectorListeners() {
     const { events } = this.scene;
 
@@ -600,6 +588,32 @@ export default class GameMap extends Phaser.GameObjects.GameObject {
     this.dragCamera(pointer);
   }
 
+  private onTargetSelectorCancel(tile: Phaser.Tilemaps.Tile) {
+    this.removeTargetSelectorListeners();
+
+    this.addUnitActionsListeners();
+    this.scene.events.emit('openUnitActions', this.cursor, tile);
+  }
+
+  private onTargetSelectorSelect(config: OnTargetSelectorSelectConfig) {
+    const { attacker, target } = config;
+    console.log('selected');
+    this.removeTargetSelectorListeners();
+    this.scene.events.emit('showPanelsInfo');
+
+    const tileTarget = this.layers.units.getTileAt(target.x, target.y);
+
+    const attackerTU: TileUnit = attacker.properties.tileUnit;
+    const targetTU: TileUnit = tileTarget.properties.tileUnit;
+
+    // 1. Set the attacker to has played/wait
+    attackerTU.markAsPlayed();
+
+    // 2. Decrease weapon usability  &
+    //    remove HP to the target.
+    attackerTU.getUnit().attackTarget(targetTU.getUnit());
+  }
+
   private onUnitActionAtk(unit: Phaser.Tilemaps.Tile) {
     this
       .removeUnitActionsListeners()

src/gameObjects/TargetSelector.ts

@@ -9,6 +9,9 @@ import { Unit }           from '../logic/Unit';
 
 export default class TargetSelector extends Phaser.GameObjects.GameObject {
   private attackerTile?: Phaser.Tilemaps.Tile;
+
+  private attackerWeapon?: Weapon;
+
   private currentTileTargetMarker?: Phaser.Tilemaps.Tile;
 
   private currentTileTargetMarkerIndex = 0;
@@ -85,7 +88,8 @@ export default class TargetSelector extends Phaser.GameObjects.GameObject {
       .stopTargetAnimation()
       .cleanUpMarkers()
       .cleanUpTilesTargets()
-      .disableEvents();
+      .disableEvents()
+      .enableMapEvents();
 
     return this;
   }
@@ -94,6 +98,7 @@ export default class TargetSelector extends Phaser.GameObjects.GameObject {
     const { markers, targets, attackerTile, weapon } = config;
 
     this.attackerTile = attackerTile;
+    this.attackerWeapon = weapon;
 
     this.panelLayer.setVisible(true);
     this.targetsLayer.setVisible(true);
@@ -106,7 +111,7 @@ export default class TargetSelector extends Phaser.GameObjects.GameObject {
     this
       .startTargetMarkerAnimation()
       .initTilesTargets(targets)
-      .updateTextsFightInfo(attackerTile, weapon)
+      .updateTextsFightInfo({ unit: attackerTile, weapon })
       .disableMapEvents()
       .enableEvents();
 
@@ -170,7 +175,6 @@ export default class TargetSelector extends Phaser.GameObjects.GameObject {
     textX += 20;
     textY += 20;
 
-    // this.createUnitFightStatsTexts(textX, textY);
     this.createTextsFightStats(textX, textY);
 
     return this;
@@ -249,7 +253,8 @@ export default class TargetSelector extends Phaser.GameObjects.GameObject {
   private disableEvents() {
     const { input } = this.scene;
 
-    input.off('pointerup', this.onPointerUpOutside, this);
+    input.off('pointerup', this.onPointerUp, this, false);
+    input.off('pointermove', this.onPointerMove, this, false);
 
     return this;
   }
@@ -268,7 +273,8 @@ export default class TargetSelector extends Phaser.GameObjects.GameObject {
 
     // NOTE: Fired too early if not deffered.
     setTimeout(() => {
-      input.on('pointerup', this.onPointerUpOutside, this);
+      input.on('pointerup', this.onPointerUp, this);
+      input.on('pointermove', this.onPointerMove, this);
     }, 100);
 
     return this;
@@ -296,16 +302,46 @@ export default class TargetSelector extends Phaser.GameObjects.GameObject {
     return this;
   }
 
-  private onPointerUpOutside() {
+  private onPointerUp() {
     this
       .hide()
-      .sendAction(TargetSelectorActions.cancel);
+      .sendAction(TargetSelectorActions.select);
+  }
+
+  private onPointerMove(pointer: Phaser.Input.Pointer) {
+    const x = pointer.x + this.scene.cameras.main.scrollX;
+    const y = pointer.y + this.scene.cameras.main.scrollY;
+
+    // Out of boundaries
+    if (x >= this.targetsLayer.displayWidth ||
+      y >= this.targetsLayer.displayHeight) {
+      return;
+    }
+
+    const { x: tileX, y: tileY } = this.targetsLayer.worldToTileXY(x, y);
+
+    if (this.targetsLayer.hasTileAt(tileX, tileY)) {
+      if (this.currentTileTargetMarker === this.targetsLayer.getTileAt(tileX, tileY)) {
+        return;
+      }
+
+      this.stopTargetAnimation();
+      this.currentTileTargetMarker = this.targetsLayer.getTileAt(tileX, tileY);
+
+      this
+        .startTargetMarkerAnimation()
+        .updateTextsFightInfo({
+          unit: this.attackerTile,
+          weapon: this.attackerWeapon,
+        });
+    }
   }
 
   private sendAction(action: string) {
-    const { attackerTile: unit } = this;
+    const { attackerTile: attacker } = this;
+    const target = this.currentTileTargetMarker;
 
-    this.scene.events.emit(`${targetSelectorEvent}${action}`, unit);
+    this.scene.events.emit(`${targetSelectorEvent}${action}`, { attacker, target });
 
     return this;
   }
@@ -367,9 +403,10 @@ export default class TargetSelector extends Phaser.GameObjects.GameObject {
     // update circle
   }
 
-  private updateTextsFightInfo(unit: Phaser.Tilemaps.Tile, weapon: Weapon) {
-    if (!this.currentTileTargetMarker) {
-      throw new Error('Ghost opponent is not allowed.');
+  private updateTextsFightInfo({ unit, weapon }: { unit?: Phaser.Tilemaps.Tile, weapon?: Weapon}) {
+    if (!this.currentTileTargetMarker || !unit) {
+      console.warn('Ghost opponent is not allowed.');
+      return this;
     }
 
     const { x, y } = this.currentTileTargetMarker;

src/logic/Inventory.ts

@@ -1,8 +1,8 @@
 import { ItemTypes } from '../const/items';
 
 export class Inventory {
-  private _MAXITEMS = 5;
-  private items: Array<Weapon | Consumable>;
+  private readonly _MAXITEMS = 5;
+  private readonly items: Array<Weapon | Consumable>;
 
   constructor(data: any) {
     this.items = data.items as Array<Weapon | Consumable>;
@@ -28,11 +28,12 @@ export class Inventory {
     return this.items;
   }
 
-  public getWeapon(index: number) {
+  public getWeapon(index: number = 1) {
     const weapons = this.getWeapons();
 
     if (index < 0 || index > weapons.length) {
-      throw new Error('The index specified it out of boundaries.');
+      index = 1;
+      console.warn('The index specified it out of boundaries. Returning the first weapon found starting 0 index.');
     }
 
     return weapons[index];

src/logic/Unit.ts

@@ -42,6 +42,14 @@ export class Unit {
     this.privateInventory = config.createInventory(rawItems);
   }
 
+  public attackTarget(target: Unit) {
+    this.useCurrentWeapon();
+    const atk = this.getAtk(target);
+
+    target.receiveDamage(atk);
+    return this;
+  }
+
   /** Return true if the weapon can be equipped. False otherwise. */
   public canEquip(weapon: Weapon): boolean {
     const { wrank } = this.data;
@@ -366,4 +374,19 @@ export class Unit {
 
     return neutral;
   }
+
+  public receiveDamage(damage = 0) {
+    const reducedDamage = damage - this.stats.def;
+    this.stats.hp -= reducedDamage;
+
+    return this;
+  }
+
+  public useCurrentWeapon(times = 1) {
+    const weapon = this.inventory.getWeapon();
+    if (!weapon) { return this; }
+
+    weapon.usage -= times;
+    return this;
+  }
 }

typings/cycles.d.ts

@@ -126,7 +126,7 @@ interface GameMapObjectLayers {
 interface InventoryShape {
   count: () => number
   getItems: () => Array<Consumable|Weapon>
-  getWeapon: (index: number) => Weapon
+  getWeapon: (index?: number) => Weapon
   getWeapons: () => Weapon[]
   maxItems: number
   moveWeaponToTop: (weapon: Weapon) => InventoryShape
@@ -193,7 +193,7 @@ interface MapUIPanel {
   textsContainer?: Phaser.GameObjects.Container
 }
 
-interface moveTilesGroupParam {
+interface MoveTilesGroupParam {
   /** The grouped tiles bounds. */
   bounds?: Bounds
 
@@ -204,6 +204,11 @@ interface moveTilesGroupParam {
   layer: Phaser.Tilemaps.DynamicTilemapLayer
 }
 
+interface OnTargetSelectorSelectConfig {
+  attacker: Phaser.Tilemaps.Tile
+  target: Phaser.Tilemaps.Tile
+}
+
 interface OpenTargetSelectorEventConfig {
   markers: Phaser.Tilemaps.Tile[]
   targets: Phaser.Tilemaps.Tile[]