Added action bar with action icons, using Targetting (WIP)
This commit is contained in:
parent
eb727d4ff4
commit
9d55c8d085
|
@ -37,5 +37,19 @@ module SpaceTac.Game {
|
||||||
checkShipTarget(battle: Battle, ship: Ship, target: Target): Target {
|
checkShipTarget(battle: Battle, ship: Ship, target: Target): Target {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Apply an action, returning true if it was successful
|
||||||
|
apply(battle: Battle, ship: Ship, target: Target): boolean {
|
||||||
|
target = this.checkTarget(battle, ship, target);
|
||||||
|
if (!target) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return this.customApply(battle, ship, target);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Method to reimplement to apply a action
|
||||||
|
protected customApply(battle: Battle, ship: Ship, target: Target): boolean {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -14,5 +14,10 @@ module SpaceTac.Game {
|
||||||
var coords = ship.getLongestMove(target.x, target.y);
|
var coords = ship.getLongestMove(target.x, target.y);
|
||||||
return Target.newFromLocation(coords[0], coords[1]);
|
return Target.newFromLocation(coords[0], coords[1]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
protected customApply(battle: Battle, ship: Ship, target: Target): boolean {
|
||||||
|
ship.moveTo(target.x, target.y);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
54
src/scripts/view/battle/ActionBar.ts
Normal file
54
src/scripts/view/battle/ActionBar.ts
Normal file
|
@ -0,0 +1,54 @@
|
||||||
|
module SpaceTac.View {
|
||||||
|
// Bar with all available action icons displayed
|
||||||
|
export class ActionBar extends Phaser.Group {
|
||||||
|
// Link to the parent battleview
|
||||||
|
battleview: BattleView;
|
||||||
|
|
||||||
|
// List of action icons
|
||||||
|
actions: ActionIcon[];
|
||||||
|
|
||||||
|
// Create an empty action bar
|
||||||
|
constructor(battleview: BattleView) {
|
||||||
|
this.battleview = battleview;
|
||||||
|
this.actions = [];
|
||||||
|
|
||||||
|
super(battleview.game, battleview.ui);
|
||||||
|
battleview.ui.add(this);
|
||||||
|
|
||||||
|
this.update();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update the bar status (and position)
|
||||||
|
update() {
|
||||||
|
super.update();
|
||||||
|
|
||||||
|
this.x = 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clear the action icons
|
||||||
|
clearAll(): void {
|
||||||
|
this.actions.forEach((action) => {
|
||||||
|
action.destroy();
|
||||||
|
});
|
||||||
|
this.actions = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add an action icon
|
||||||
|
addAction(ship: Game.Ship, action: Game.BaseAction): ActionIcon {
|
||||||
|
var icon = new ActionIcon(this, this.actions.length * 50, 0, ship, action);
|
||||||
|
this.actions.push(icon);
|
||||||
|
return icon;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set action icons from selected ship
|
||||||
|
setShip(ship: Game.Ship): void {
|
||||||
|
var action_bar = this;
|
||||||
|
this.clearAll();
|
||||||
|
|
||||||
|
var actions = ship.getAvailableActions();
|
||||||
|
actions.forEach((action) => {
|
||||||
|
action_bar.addAction(ship, action);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,8 +1,43 @@
|
||||||
module SpaceTac.View {
|
module SpaceTac.View {
|
||||||
// Icon to activate a ship capability (move, fire...)
|
// Icon to activate a ship capability (move, fire...)
|
||||||
export class ActionIcon extends Phaser.Button {
|
export class ActionIcon extends Phaser.Button {
|
||||||
constructor(battleview: BattleView, x: number, y:number, code: string) {
|
|
||||||
super(battleview.game, x, y, 'action-' + code);
|
// Link to the parent battle view
|
||||||
|
battleview: BattleView;
|
||||||
|
|
||||||
|
// Related ship
|
||||||
|
ship: Game.Ship;
|
||||||
|
|
||||||
|
// Related game action
|
||||||
|
action: Game.BaseAction;
|
||||||
|
|
||||||
|
// Create an icon for a single ship action
|
||||||
|
constructor(bar: ActionBar, x: number, y:number, ship: Game.Ship, action: Game.BaseAction) {
|
||||||
|
this.battleview = bar.battleview;
|
||||||
|
this.ship = ship;
|
||||||
|
this.action = action;
|
||||||
|
|
||||||
|
super(bar.game, x, y, 'action-' + action.code);
|
||||||
|
bar.add(this);
|
||||||
|
|
||||||
|
this.onInputUp.add(() => {
|
||||||
|
this.processClick();
|
||||||
|
}, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Process a click event on the action icon
|
||||||
|
processClick() {
|
||||||
|
console.log("Action started", this.action);
|
||||||
|
|
||||||
|
var targetting = this.battleview.enterTargettingMode();
|
||||||
|
targetting.targetSelected.add(this.processTarget, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Receive a target for the action
|
||||||
|
processTarget(target: Game.Target) {
|
||||||
|
console.log("Action target", this.action, target);
|
||||||
|
|
||||||
|
this.action.apply(this.battleview.battle, this.ship, target);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -2,17 +2,21 @@ module SpaceTac.View {
|
||||||
// Graphical representation of a battle
|
// Graphical representation of a battle
|
||||||
// This is the area in the BattleView that will display ships with their real positions
|
// This is the area in the BattleView that will display ships with their real positions
|
||||||
export class Arena extends Phaser.Group {
|
export class Arena extends Phaser.Group {
|
||||||
background: Phaser.Image;
|
background: Phaser.Button;
|
||||||
private input_callback: any;
|
private input_callback: any;
|
||||||
|
|
||||||
constructor(battleview: BattleView) {
|
constructor(battleview: BattleView) {
|
||||||
super(battleview.game);
|
super(battleview.game);
|
||||||
|
|
||||||
var background = new Phaser.Image(battleview.game, 0, 0, 'ui-arena-background');
|
var background = new Phaser.Button(battleview.game, 0, 0, 'ui-arena-background');
|
||||||
background.scale.set(5, 5);
|
background.scale.set(5, 5);
|
||||||
background.inputEnabled = true;
|
|
||||||
this.background = background;
|
this.background = background;
|
||||||
|
|
||||||
|
// Capture clicks on background
|
||||||
|
background.onInputUp.add(() => {
|
||||||
|
battleview.cursorClicked();
|
||||||
|
});
|
||||||
|
|
||||||
// Watch mouse move to capture hovering over background
|
// Watch mouse move to capture hovering over background
|
||||||
this.input_callback = this.game.input.addMoveCallback((pointer) => {
|
this.input_callback = this.game.input.addMoveCallback((pointer) => {
|
||||||
var point = new Phaser.Point();
|
var point = new Phaser.Point();
|
||||||
|
|
|
@ -23,6 +23,9 @@ module SpaceTac.View {
|
||||||
// Card to display hovered ship
|
// Card to display hovered ship
|
||||||
card_hovered: ShipCard;
|
card_hovered: ShipCard;
|
||||||
|
|
||||||
|
// Action bar
|
||||||
|
action_bar: ActionBar;
|
||||||
|
|
||||||
// Currently hovered ship
|
// Currently hovered ship
|
||||||
ship_hovered: Game.Ship;
|
ship_hovered: Game.Ship;
|
||||||
|
|
||||||
|
@ -44,17 +47,21 @@ module SpaceTac.View {
|
||||||
var game = this.game;
|
var game = this.game;
|
||||||
var player = this.player;
|
var player = this.player;
|
||||||
|
|
||||||
|
game.stage.backgroundColor = 0x000000;
|
||||||
|
|
||||||
|
// Add arena (local map)
|
||||||
this.arena = new Arena(battleview);
|
this.arena = new Arena(battleview);
|
||||||
game.add.existing(this.arena);
|
game.add.existing(this.arena);
|
||||||
|
|
||||||
|
// Add UI layer
|
||||||
this.ui = new UIGroup(game);
|
this.ui = new UIGroup(game);
|
||||||
game.add.existing(this.ui);
|
game.add.existing(this.ui);
|
||||||
|
|
||||||
|
// Add UI elements
|
||||||
|
this.action_bar = new ActionBar(this);
|
||||||
this.card_playing = new ShipCard(this, 500, 0);
|
this.card_playing = new ShipCard(this, 500, 0);
|
||||||
this.card_hovered = new ShipCard(this, 500, 300);
|
this.card_hovered = new ShipCard(this, 500, 300);
|
||||||
|
|
||||||
game.stage.backgroundColor = 0x000000;
|
|
||||||
|
|
||||||
// Add ship buttons to UI
|
// Add ship buttons to UI
|
||||||
this.battle.play_order.forEach(function (ship: Game.Ship, rank: number) {
|
this.battle.play_order.forEach(function (ship: Game.Ship, rank: number) {
|
||||||
new ShipListItem(battleview, 0, rank * 50, ship, ship.getPlayer() === player);
|
new ShipListItem(battleview, 0, rank * 50, ship, ship.getPlayer() === player);
|
||||||
|
@ -71,6 +78,8 @@ module SpaceTac.View {
|
||||||
|
|
||||||
// Leaving the view, we unbind the battle
|
// Leaving the view, we unbind the battle
|
||||||
shutdown() {
|
shutdown() {
|
||||||
|
this.exitTargettingMode();
|
||||||
|
|
||||||
if (this.log_processor) {
|
if (this.log_processor) {
|
||||||
this.log_processor.destroy();
|
this.log_processor.destroy();
|
||||||
this.log_processor = null;
|
this.log_processor = null;
|
||||||
|
@ -115,6 +124,16 @@ module SpaceTac.View {
|
||||||
cursorInSpace(x: number, y: number): void {
|
cursorInSpace(x: number, y: number): void {
|
||||||
if (!this.ship_hovered) {
|
if (!this.ship_hovered) {
|
||||||
console.log("In space", x, y);
|
console.log("In space", x, y);
|
||||||
|
if (this.targetting) {
|
||||||
|
this.targetting.setTargetSpace(x, y);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Method called when cursor has been clicked (in space or on a ship)
|
||||||
|
cursorClicked(): void {
|
||||||
|
if (this.targetting) {
|
||||||
|
this.targetting.validate();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -122,17 +141,27 @@ module SpaceTac.View {
|
||||||
setShipHovered(ship: Game.Ship): void {
|
setShipHovered(ship: Game.Ship): void {
|
||||||
this.ship_hovered = ship;
|
this.ship_hovered = ship;
|
||||||
this.card_hovered.setShip(ship);
|
this.card_hovered.setShip(ship);
|
||||||
|
if (this.targetting && ship) {
|
||||||
|
this.targetting.setTargetShip(ship);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Enter targetting mode
|
// Enter targetting mode
|
||||||
// While in this mode, the Targetting object will receive hover and click events, and handle them
|
// While in this mode, the Targetting object will receive hover and click events, and handle them
|
||||||
enterTargettingMode(): Targetting {
|
enterTargettingMode(): Targetting {
|
||||||
|
if (this.targetting) {
|
||||||
|
this.exitTargettingMode();
|
||||||
|
}
|
||||||
|
|
||||||
this.targetting = new Targetting(this);
|
this.targetting = new Targetting(this);
|
||||||
return this.targetting;
|
return this.targetting;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Exit targetting mode
|
// Exit targetting mode
|
||||||
exitTargettingMode(): void {
|
exitTargettingMode(): void {
|
||||||
|
if (this.targetting) {
|
||||||
|
this.targetting.destroy();
|
||||||
|
}
|
||||||
this.targetting = null;
|
this.targetting = null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -29,9 +29,16 @@ module SpaceTac.View {
|
||||||
// Process a BaseLogEvent
|
// Process a BaseLogEvent
|
||||||
processBattleEvent(event: Game.BaseLogEvent) {
|
processBattleEvent(event: Game.BaseLogEvent) {
|
||||||
console.log("Battle event", event);
|
console.log("Battle event", event);
|
||||||
if (event.code == "ship_change") {
|
|
||||||
// Playing ship changed
|
switch (event.code) {
|
||||||
this.view.card_playing.setShip(event.target.ship);
|
case "ship_change":
|
||||||
|
// Playing ship changed
|
||||||
|
this.view.card_playing.setShip(event.target.ship);
|
||||||
|
this.view.action_bar.setShip(event.target.ship);
|
||||||
|
break;
|
||||||
|
case "move":
|
||||||
|
// TODO A ship moved
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -17,6 +17,9 @@ module SpaceTac.View {
|
||||||
this.onInputOut.add(() => {
|
this.onInputOut.add(() => {
|
||||||
battleview.cursorOffShip(ship);
|
battleview.cursorOffShip(ship);
|
||||||
});
|
});
|
||||||
|
this.onInputUp.add(() => {
|
||||||
|
battleview.cursorClicked();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,12 +1,48 @@
|
||||||
module SpaceTac.View {
|
module SpaceTac.View {
|
||||||
// Targetting system
|
// Targetting system
|
||||||
// Allows to pick a target for a capability
|
// Allows to pick a target for an action
|
||||||
export class Targetting {
|
export class Targetting {
|
||||||
// Access to the parent battle view
|
// Access to the parent battle view
|
||||||
private battleview: BattleView;
|
private battleview: BattleView;
|
||||||
|
|
||||||
|
// Current target
|
||||||
|
private target: Game.Target;
|
||||||
|
|
||||||
|
// Signal to receive hovering events
|
||||||
|
targetHovered: Phaser.Signal;
|
||||||
|
|
||||||
|
// Signal to receive targetting events
|
||||||
|
targetSelected: Phaser.Signal;
|
||||||
|
|
||||||
|
// Create a default targetting mode
|
||||||
constructor(battleview: BattleView) {
|
constructor(battleview: BattleView) {
|
||||||
this.battleview = battleview;
|
this.battleview = battleview;
|
||||||
|
this.targetHovered = new Phaser.Signal();
|
||||||
|
this.targetSelected = new Phaser.Signal();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Destructor
|
||||||
|
destroy(): void {
|
||||||
|
this.targetHovered.dispose();
|
||||||
|
this.targetSelected.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set the current target ship (when hovered)
|
||||||
|
setTargetShip(ship: Game.Ship): void {
|
||||||
|
this.target = Game.Target.newFromShip(ship);
|
||||||
|
this.targetHovered.dispatch(this.target);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set the current target in space (when hovered)
|
||||||
|
setTargetSpace(x: number, y: number): void {
|
||||||
|
this.target = Game.Target.newFromLocation(x, y);
|
||||||
|
this.targetHovered.dispatch(this.target);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate the current target (when clicked)
|
||||||
|
// This will broadcast the targetSelected signal
|
||||||
|
validate(): void {
|
||||||
|
this.targetSelected.dispatch(this.target);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
26
src/scripts/view/specs/Targetting.spec.ts
Normal file
26
src/scripts/view/specs/Targetting.spec.ts
Normal file
|
@ -0,0 +1,26 @@
|
||||||
|
/// <reference path="../../definitions/jasmine.d.ts"/>
|
||||||
|
|
||||||
|
module SpaceTac.View {
|
||||||
|
describe("Targetting", () => {
|
||||||
|
it("broadcasts hovering and selection events", () => {
|
||||||
|
var targetting = new Targetting(null);
|
||||||
|
|
||||||
|
var hovered = [];
|
||||||
|
var selected = [];
|
||||||
|
targetting.targetHovered.add((target: Game.Target) => {
|
||||||
|
hovered.push(target);
|
||||||
|
});
|
||||||
|
targetting.targetSelected.add((target: Game.Target) => {
|
||||||
|
selected.push(target);
|
||||||
|
});
|
||||||
|
|
||||||
|
targetting.setTargetSpace(1, 2);
|
||||||
|
expect(hovered).toEqual([Game.Target.newFromLocation(1, 2)]);
|
||||||
|
expect(selected).toEqual([]);
|
||||||
|
|
||||||
|
targetting.validate();
|
||||||
|
expect(hovered).toEqual([Game.Target.newFromLocation(1, 2)]);
|
||||||
|
expect(selected).toEqual([Game.Target.newFromLocation(1, 2)]);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
Loading…
Reference in a new issue