diff --git a/graphics/ui/ui.blend b/graphics/ui/ui.blend index c6ea289..960d5d8 100644 Binary files a/graphics/ui/ui.blend and b/graphics/ui/ui.blend differ diff --git a/src/assets/images/battle/action-active.png b/src/assets/images/battle/action-active.png new file mode 100644 index 0000000..d794eb9 Binary files /dev/null and b/src/assets/images/battle/action-active.png differ diff --git a/src/assets/images/battle/action-inactive.png b/src/assets/images/battle/action-inactive.png new file mode 100644 index 0000000..77ec3a3 Binary files /dev/null and b/src/assets/images/battle/action-inactive.png differ diff --git a/src/assets/images/battle/arena/background.png b/src/assets/images/battle/arena/background.png index 99a95cd..9261d9e 100644 Binary files a/src/assets/images/battle/arena/background.png and b/src/assets/images/battle/arena/background.png differ diff --git a/src/scripts/view/Preload.ts b/src/scripts/view/Preload.ts index 32d6383..0a7d0a7 100644 --- a/src/scripts/view/Preload.ts +++ b/src/scripts/view/Preload.ts @@ -15,6 +15,8 @@ module SpaceTac.View { this.load.image("battle-shiplist-enemy", "assets/images/battle/shiplist-enemy.png"); this.load.image("battle-arena-background", "assets/images/battle/arena/background.png"); this.load.image("battle-actionbar", "assets/images/battle/actionbar.png"); + this.load.image("battle-action-inactive", "assets/images/battle/action-inactive.png"); + this.load.image("battle-action-active", "assets/images/battle/action-active.png"); this.load.image("battle-actionpointsempty", "assets/images/battle/actionpointsempty.png"); this.load.image("battle-actionpointsfull", "assets/images/battle/actionpointsfull.png"); this.load.image("battle-arena-shipspritehover", "assets/images/battle/arena/shipspritehover.png"); diff --git a/src/scripts/view/battle/ActionBar.ts b/src/scripts/view/battle/ActionBar.ts index 5c9bad1..2d45736 100644 --- a/src/scripts/view/battle/ActionBar.ts +++ b/src/scripts/view/battle/ActionBar.ts @@ -40,7 +40,7 @@ module SpaceTac.View { // Add an action icon addAction(ship: Game.Ship, action: Game.BaseAction): ActionIcon { - var icon = new ActionIcon(this, 110 + this.actions.length * 50, 25, ship, action); + var icon = new ActionIcon(this, 90 + this.actions.length * 62, 2, ship, action); this.actions.push(icon); return icon; } @@ -73,6 +73,9 @@ module SpaceTac.View { // Called by an action icon when the action has been applied actionEnded(): void { this.updateActionPoints(); + this.actions.forEach((action: ActionIcon) => { + action.updateActiveStatus(); + }); } } } diff --git a/src/scripts/view/battle/ActionIcon.ts b/src/scripts/view/battle/ActionIcon.ts index 3e81082..966db03 100644 --- a/src/scripts/view/battle/ActionIcon.ts +++ b/src/scripts/view/battle/ActionIcon.ts @@ -18,6 +18,9 @@ module SpaceTac.View { // Current targetting private targetting: Targetting; + // Layer applied when the action is active + private active: Phaser.Image; + // Create an icon for a single ship action constructor(bar: ActionBar, x: number, y: number, ship: Game.Ship, action: Game.BaseAction) { this.bar = bar; @@ -25,15 +28,20 @@ module SpaceTac.View { this.ship = ship; this.action = action; - super(bar.game, x, y, "action-" + action.code); + super(bar.game, x, y, "battle-action-inactive"); bar.addChild(this); - // TODO Handle action.canBeUsed() result to enable/disable the button + // Active layer + this.active = new Phaser.Image(bar.battleview.game, 0, 0, "battle-action-active", 0); + this.addChild(this.active); - this.input.useHandCursor = true; + // Click process this.onInputUp.add(() => { this.processClick(); }, this); + + // Initialize + this.updateActiveStatus(); } // Process a click event on the action icon @@ -70,5 +78,16 @@ module SpaceTac.View { this.bar.actionEnded(); } } + + // Update the active status, from the action canBeUsed result + updateActiveStatus() { + var active = this.action.canBeUsed(this.battleview.battle, this.ship); + + var tween = this.battleview.game.tweens.create(this.active); + tween.to({alpha: active ? 1 : 0}); + tween.start(); + + this.input.useHandCursor = active; + } } }