Added action points usage indication in action bar, while targetting

TODO

@@ -3,4 +3,4 @@
 * Add retreat from battle
 * Refactor the tooltip system to use it more
 * Flash ship icons that receive damage
-* Add an indicator for AP consumption in action bar
+* Add a ship model system

src/app/view/MainMenu.ts

@@ -8,7 +8,14 @@ module SpaceTac.View {
         button_quick_battle: Phaser.Button;
         button_load_game: Phaser.Button;
 
-        preload() {
+        create() {
+            // Title
+            var text = new Phaser.Text(this.game, this.getMidWidth(), this.getHeight() * 0.4, "SpaceTac",
+                {align: "center", font: "bold 42px Arial", fill: "#4050f2"});
+            text.anchor.set(0.5, 0.5);
+            this.add.existing(text);
+
+            // Menu buttons
             var basex = this.getMidWidth();
             var y = Math.floor(this.getHeight() * 0.6);
             var space = this.getWidth() * 0.2;

src/app/view/Preload.ts

@@ -35,6 +35,7 @@ module SpaceTac.View {
             this.loadImage("battle/action-tooltip.png");
             this.loadImage("battle/actionpointsempty.png");
             this.loadImage("battle/actionpointsfull.png");
+            this.loadImage("battle/actionpointspart.png");
             this.loadImage("battle/arena/shipspritehover.png");
             this.loadImage("battle/arena/shipspriteplaying.png");
             this.loadImage("battle/actions/move.png");

src/app/view/battle/ActionBar.ts

@@ -11,6 +11,7 @@ module SpaceTac.View {
 
         // Progress bar displaying action points
         actionpoints: ValueBar;
+        actionpointstemp: ValueBar;
 
         // Tooltip to display hovered action info
         tooltip: ActionTooltip;
@@ -37,8 +38,11 @@ module SpaceTac.View {
 
             // Action points progress bar
             this.actionpoints = new ValueBar(this.game, 119, 76, "battle-actionpointsempty");
-            this.actionpoints.setBarImage("battle-actionpointsfull");
+            this.actionpoints.setBarImage("battle-actionpointspart");
             this.addChild(this.actionpoints);
+            this.actionpointstemp = new ValueBar(this.game, 119, 76, "battle-actionpointsempty");
+            this.actionpointstemp.setBarImage("battle-actionpointsfull");
+            this.addChild(this.actionpointstemp);
 
             // Cancel button
             this.cancel = new Phaser.Button(this.game, 849, 8, "battle-actionbar-cancel", () => {
@@ -77,9 +81,12 @@ module SpaceTac.View {
         updateActionPoints(): void {
             if (this.ship) {
                 this.actionpoints.setValue(this.ship.ap_current.current, this.ship.ap_current.maximal);
+                this.actionpointstemp.setValue(this.ship.ap_current.current, this.ship.ap_current.maximal);
                 this.actionpoints.visible = true;
+                this.actionpointstemp.visible = true;
             } else {
                 this.actionpoints.visible = false;
+                this.actionpointstemp.visible = false;
             }
         }
 
@@ -94,6 +101,7 @@ module SpaceTac.View {
             this.actions.forEach((icon: ActionIcon) => {
                 icon.updateFadingStatus(remaining_ap);
             });
+            this.actionpointstemp.setValue(remaining_ap, this.ship.ap_current.maximal);
         }
 
         // Set action icons from selected ship

src/app/view/battle/ActionTooltip.ts

@@ -17,7 +17,7 @@ module SpaceTac.View {
         // Set current action to display, null to hide
         setAction(action: ActionIcon): void {
             if (action) {
-                this.position.set(action.x, action.y + action.height);
+                this.position.set(action.x, action.y + action.height + action.bar.actionpoints.height);
                 this.title.setText(action.action.code);
                 Animation.fadeIn(this.game, this, 200);
             } else {

src/app/view/common/ValueBar.ts

@@ -73,7 +73,7 @@ module SpaceTac.View {
 
         // Set current value
         setValue(current: number, maximal: number = -1) {
-            this.current = current;
+            this.current = current > 0 ? current : 0;
             if (maximal >= 0) {
                 this.maximal = maximal;
             }