context menu usability improvements

Author: mattbgold

src/controllers/game/contextmenu/controller.ts

@@ -12,6 +12,7 @@ import {ContainerKeys} from "../../../inversify.config";
 export class ContextMenuController extends BaseController {
 
 	private _selectedUnit: BaseUnit;
+	private _hoveredUnit: BaseUnit;
 	private _menuElement: HTMLElement;
 
 	constructor(
@@ -25,7 +26,7 @@ export class ContextMenuController extends BaseController {
 	}
 
 	preload() {
-		this._gameSubject.subscribe(GameEvent.UnitSelected, this._showMenuForUnit);
+		this._gameSubject.subscribe(GameEvent.UnitSelected, this._selectUnit);
 		this._gameSubject.subscribe(GameEvent.CancelAction, this._deselectAndHideMenu);
 		this._gameSubject.subscribe(GameEvent.UnitAttackActionSelected, this._hideMenu);
 		this._gameSubject.subscribe(GameEvent.UnitWaitActionSelected, this._hideMenu);
@@ -45,14 +46,37 @@ export class ContextMenuController extends BaseController {
 					this._gameSubject.dispatch(GameEvent.UnitWaitActionSelected, this._selectedUnit);
 					break;
 				case 'cancel':
-					this._gameSubject.dispatch(GameEvent.CancelAction);
+					this._gameSubject.dispatch(GameEvent.CancelAction, this._selectedUnit);
 					break;
 				default:
 					console.error('Invalid action dispatched on actionSelected');
 			}
 		});
 	}
 
+	update() {
+		let foundUnitUnderCursor = false;
+
+		this._gameSubject.units.forEach(unit => {
+			let inBounds = unit.spr.isoBounds.containsXY(this._inputSubject.cursorPos.x, this._inputSubject.cursorPos.y);
+
+			if(inBounds) {
+				foundUnitUnderCursor = true;
+				this._hoveredUnit = unit;
+			}
+		});
+
+		if (!foundUnitUnderCursor)
+			this._hoveredUnit = null;
+	}
+
+	render() {
+		if(!!this._hoveredUnit) {
+			this._game.debug.text(`${this._hoveredUnit.name} HP: ${this._hoveredUnit.hp}/${this._hoveredUnit.stats.hp}`, 2, 34, "#a7aebe");
+			this._game.debug.text(JSON.stringify(this._hoveredUnit.stats).replace(/[{}"]/g, '').replace(/,/g, ', '), 2, 54, "#a7aebe");
+		}
+	}
+
 	private _hideMenu = (): void => {
 		this._menuElement.style.display = 'none';
 	};
@@ -70,13 +94,8 @@ export class ContextMenuController extends BaseController {
 	// ---------- EVENT HANDLERS ----------
 	// ------------------------------------
 
-	private _showMenuForUnit = (unit: BaseUnit): void => {
-		if(unit.hasActedThisTurn || unit.belongsToPlayer !== 0) //player 0 is the user
-			return;
-
+	private _selectUnit = (unit: BaseUnit): void => {
 		this._selectedUnit = unit;
-
-		this._showMenu();
 	};
 
 	private _deselectAndHideMenu = (): void => {

src/controllers/game/grid/controller.ts

@@ -112,6 +112,8 @@ export class GridController extends BaseController {
 				this._activeCell = null;
 			}
 
+			//TODO: maybe we should just dispatch gridCellActivated and let unit controller handle dispatching UnitAttack or UnitMove. We need to check that it is a valid unit to attack etc...
+
 			// if we tapped a destination cell for MOVE action
 			if (!!this._unitHighlightedForMove && clickedCell.highlighted) {
 				this._unhighlightAll();
@@ -130,7 +132,6 @@ export class GridController extends BaseController {
 				this._activeCell = clickedCell;
 
 				// we didn't tap a cell for an action, so lets cancel any pending actions
-				this._gameSubject.dispatch(GameEvent.CancelAction, clickedCell);
 				this._gameSubject.dispatch(GameEvent.GridCellActivated, clickedCell);
 			}
 		}

src/controllers/game/unit/controller.ts

@@ -29,7 +29,7 @@ export class UnitController extends BaseController {
 	preload() {
 		this._gameSubject.subscribe(GameEvent.LoadMapCompleted, this._initializeUnits);
 		this._gameSubject.subscribe(GameEvent.GridCellActivated, this._trySelectUnit);
-		this._gameSubject.subscribe(GameEvent.CancelAction, this._deselectUnit);
+		this._gameSubject.subscribe(GameEvent.CancelAction, this._deselectAndResetPosition);
 		this._gameSubject.subscribe(GameEvent.UnitWaitActionSelected, this._unitFinishedTurn);
 		this._gameSubject.subscribe(GameEvent.UnitMove, this._tryMoveUnit);
 		this._gameSubject.subscribe(GameEvent.UnitMoveCompleted, this._flagUnitAsMoved);
@@ -45,13 +45,6 @@ export class UnitController extends BaseController {
 		this._game.iso.simpleSort(this._game['isoUnitsGroup']);
 	}
 
-	render() {
-		if(!!this._selectedUnit) {
-			this._game.debug.text(`${this._selectedUnit.name} HP: ${this._selectedUnit.hp}`, 2, 34, "#a7aebe");
-			this._game.debug.text('Base Unit Stats:' + JSON.stringify(this._selectedUnit.stats), 2, 54, "#a7aebe");
-		}
-	}
-
 	// ------------------------------------
 	// ---------- EVENT HANDLERS ----------
 	// ------------------------------------
@@ -63,6 +56,9 @@ export class UnitController extends BaseController {
 	};
 
 	private _trySelectUnit = (cell: GridCell): void => {
+		if(!!this._selectedUnit)
+			this._gameSubject.dispatch(GameEvent.CancelAction, this._selectedUnit);
+
 		let unitAtCell  = this.units.find(unit => unit.x == cell.x && unit.y == cell.y);
 		if(!!unitAtCell && this._selectedUnit !== unitAtCell) {
 			this._selectedUnit = unitAtCell;
@@ -74,8 +70,17 @@ export class UnitController extends BaseController {
 		}
 	};
 
-	private _deselectUnit = (): void => {
+	private _deselectAndResetPosition = (unit: BaseUnit): void => {
 		this._selectedUnit = null;
+
+		if (!!unit && !unit.hasActedThisTurn) {
+			unit.hasMovedThisTurn = false;
+			
+			unit.spr.isoX = this._config.cellSize * unit.committedX;
+			unit.spr.isoY = this._config.cellSize * unit.committedY;
+			unit.x = unit.committedX;
+			unit.y = unit.committedY;
+		}
 	};
 
 	private _tryMoveUnit = (destinationCell: GridCell): void => {
@@ -110,6 +115,8 @@ export class UnitController extends BaseController {
 
 	private _unitFinishedTurn = (unit: BaseUnit): void => {
 		unit.hasActedThisTurn = true;
+		unit.committedX = unit.x;
+		unit.committedY = unit.y;
 		unit.setTint(0xaaaaaa);
 
 		let unitsForPlayer = this.units.filter(x => x.belongsToPlayer === unit.belongsToPlayer && !x.isDead);

src/game_objects/units/base.ts

@@ -18,8 +18,11 @@ export abstract class BaseUnit implements Unit {
 
 	x: number;
 	y: number;
-
-	hp: number;
+	
+	committedX: number; //stores original position until a move is committed by selecting an action.
+	committedY: number;
+	
+	hp: number; //current hp
 
 	stats: Stats;
 
@@ -40,6 +43,8 @@ export abstract class BaseUnit implements Unit {
 		this.belongsToPlayer = unit.belongsToPlayer;
 		this.x = unit.x;
 		this.y = unit.y;
+		this.committedX = unit.x;
+		this.committedY = unit.y;
 		this.stats = unit.stats;
 		this.abilities = unit.abilities;
 
@@ -58,7 +63,7 @@ export abstract class BaseUnit implements Unit {
 			this.spr.scale.x = sign;
 		this.y = y;
 	}
-
+	
 	setTint(tint: number) {
 		this.spr.tint = tint;
 		this.currentTint = tint;

src/services/army_command_strategy/service.ts

@@ -1,12 +1,12 @@
 import * as Phaser from 'phaser';
-import {IArmyCommandStrategy} from "./interface";
 import Game = Phaser.Game;
 import {GameSubject, GameEvent} from "../subject/game";
 import {BaseUnit} from "../../game_objects/units/base";
 import {InputSubject, InputEvent} from "../subject/input";
 import Point3 = Phaser.Plugin.Isometric.Point3;
 import {GameConfig} from "../../config";
 import {GridCell} from "../../game_objects/grid/grid_cell";
+import {IArmyCommandStrategy} from "./interface";
 
 export class DemoArmyCommandStrategy implements IArmyCommandStrategy {
 	private _spottedEnemies: BaseUnit[] = [];
@@ -67,8 +67,7 @@ export class DemoArmyCommandStrategy implements IArmyCommandStrategy {
 		if(unitToAttack && this._cellUnderUnit(unitToAttack).highlighted)
 			setTimeout(() => this._tapLocation(unitToAttack), this._delay); //this._gameState.dispatch(GameEvent.UnitAttack, unitToAttack)
 		else {
-			this._gameState.dispatch(GameEvent.CancelAction);
-			this._gameState.dispatch(GameEvent.UnitAttackCompleted, unit);
+			this._gameState.dispatch(GameEvent.UnitWaitActionSelected, unit);
 		}
 	}
 

src/services/map_builder/service.ts

@@ -58,8 +58,9 @@ export class MapBuilder implements IMapBuilder {
 			for(let xx = 0; xx < this._map.layout.length; xx++) {
 				let playerNum = parseInt(this._map.layout[yy][xx]);
 				if(!isNaN(playerNum)) {
-					this._unitsByPlayer[playerNum][armyIndices[playerNum]].x = xx;
-					this._unitsByPlayer[playerNum][armyIndices[playerNum]].y = yy;
+					let unit = this._unitsByPlayer[playerNum][armyIndices[playerNum]];
+					unit.x = xx;
+					unit.y = yy;
 					armyIndices[playerNum]++;
 				}
 			}