Add highlight possible path

app/gameObjects/TileUnit.js

@@ -10,6 +10,9 @@ export default class TileUnit extends Phaser.GameObjects.GameObject {
 
     this.tile = tile;
 
+    this.tilesPath = [];
+    this.movementTint = 16777215;
+
     this.sprite = this.createUnitSprite(tile);
     this.unit = createUnit(tile.properties.unitName);
 
@@ -30,7 +33,7 @@ export default class TileUnit extends Phaser.GameObjects.GameObject {
 
     this.tilesMovement.map((tile) => {
       this.scene.tweens.add({
-        alpha     : 1,
+        alpha     : .5,
         delay     : delay,
         duration  : 500,
         targets   : tile
@@ -209,6 +212,31 @@ export default class TileUnit extends Phaser.GameObjects.GameObject {
     });
   }
 
+  /**
+   * Fired when this current unit is selected
+   * and pointer has moved.
+   */
+  onCursorMoved(cursor, scene) {
+    const { layers: {movement}, selectedCharacter } = scene.gameMap;
+    const { tileUnit } = selectedCharacter.properties;
+
+    const { x: startX, y: startY } = tileUnit.tile;
+    const { x: endX, y: endY } = cursor;
+
+    const inRange = tileUnit.tilesMovement
+      .some(tile => tile.x === endX && tile.y === endY );
+
+    if (!inRange) return;
+
+    // Revert back past movement tiles to their original tint
+    tileUnit.tilesPath.map(tile => tile.tint = tileUnit.movementTint);
+
+    tileUnit.tilesPath = tileUnit
+      .getCharacterPath({ startX, startY }, { endX, endY })
+      .map(([x, y]) => movement.getTileAt(x, y))
+      .map(tile => { tile.tint = 0x358F55; return tile; });
+  }
+
   /**
    * Remove sprite animation from tile.
    */
@@ -224,6 +252,17 @@ export default class TileUnit extends Phaser.GameObjects.GameObject {
     this.hideAllowedMovement();
   }
 
+  /**
+   * Select this unit.
+   */
+  select() {
+    this.tintAllowedMovement();
+
+    this.scene.events.on('cursorMoved', this.onCursorMoved);
+
+    return this;
+  }
+
   /**
    * Show the allowed movement for the target character tile.
    * @param {Phaser.Tilemaps.Tile} tileCharacter Tile character to move.
@@ -254,15 +293,27 @@ export default class TileUnit extends Phaser.GameObjects.GameObject {
     this.tilesMovement
       .map(tile => {
         this.scene.tweens.add({
+          alpha     : 1,
           delay     : delay,
           duration  : 25,
-          targets   : tile,
-          tint      : 0x358F55
+          targets   : tile
         });
 
         delay += 25;
       });
 
     return this;
   }
+
+
+  /**
+   * Unselect this unit.
+   */
+  unselect() {
+    this.hideAllowedMovement();
+
+    this.scene.events.off('cursorMoved', this.onCursorMoved);
+
+    return this;
+  }
 }

app/scenes/components/GameMap.js

@@ -282,7 +282,7 @@ export default class GameMap extends Phaser.GameObjects.GameObject {
       .characters.getTileAt(x, y);
 
     this.selectedCharacter.properties
-      .tileUnit.tintAllowedMovement();
+      .tileUnit.select();
   }
 
   /**
@@ -316,6 +316,8 @@ export default class GameMap extends Phaser.GameObjects.GameObject {
 
       this.scene.cameras.main.pan(worldX, worldY, 500);
     }
+
+    return this;
   }
 
   onMoveCursorDown() {
@@ -394,7 +396,6 @@ export default class GameMap extends Phaser.GameObjects.GameObject {
       gameMap.moveCursorTo(tileX, tileY);
     }
 
-    // Pointer delta ?
     gameMap.dragCamera(pointer);
   }
 
@@ -406,13 +407,12 @@ export default class GameMap extends Phaser.GameObjects.GameObject {
     cursorLayer.removeTileAt(this.cursor.x, this.cursor.y);
     this.cursor = cursorLayer.putTileAt(this.cursor, x, y);
 
-    this.animateCursor(this.cursor);
+    this
+      .animateCursor(this.cursor)
+      .highlightChar(x, y)
+      .moveCamera(x, y);
 
     this.scene.events.emit('cursorMoved', this.cursor, this.scene);
-
-    this.highlightChar(x, y);
-
-    this.moveCamera(x, y);
   }
 
   scaleToGameSize() {
@@ -440,7 +440,7 @@ export default class GameMap extends Phaser.GameObjects.GameObject {
     tileUnit
       .moveCharacterTo(x, y)
       .then((result) => {
-        result.tileUnit.hideAllowedMovement();
+        result.tileUnit.unselect();
         return result;
       })
       .then((result) => {