Added background for action buttons, with active state

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");

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();
+            });
         }
     }
 }

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;
+        }
     }
 }