Improved action tooltip

src/game/actions/BaseAction.ts

@@ -6,6 +6,9 @@ module SpaceTac.Game {
         // Identifier code for the type of action
         code: string;
 
+        // Human-readable name
+        name: string;
+
         // Boolean at true if the action needs a target
         needs_target: boolean;
 
@@ -13,10 +16,11 @@ module SpaceTac.Game {
         equipment: Equipment;
 
         // Create the action
-        constructor(code: string, needs_target: boolean, equipment: Equipment = null) {
+        constructor(code: string, name: string, needs_target: boolean, equipment: Equipment = null) {
             super();
 
             this.code = code;
+            this.name = name;
             this.needs_target = needs_target;
             this.equipment = equipment;
         }

src/game/actions/EndTurnAction.ts

@@ -2,7 +2,7 @@ module SpaceTac.Game {
     // Action to end the ship's turn
     export class EndTurnAction extends BaseAction {
         constructor() {
-            super("endturn", false);
+            super("endturn", "End ship's turn", false);
         }
 
         protected customApply(battle: Battle, ship: Ship, target: Target): boolean {

src/game/actions/FireWeaponAction.ts

@@ -6,8 +6,8 @@ module SpaceTac.Game {
         // Boolean set to true if the weapon can target space
         can_target_space: boolean;
 
-        constructor(equipment: Equipment, can_target_space: boolean = false) {
-            super("fire-" + equipment.code, true, equipment);
+        constructor(equipment: Equipment, can_target_space = false, name = "Fire") {
+            super("fire-" + equipment.code, name, true, equipment);
 
             this.can_target_space = can_target_space;
         }

src/game/actions/MoveAction.ts

@@ -6,7 +6,7 @@ module SpaceTac.Game {
         safety_distance: number;
 
         constructor(equipment: Equipment) {
-            super("move", true, equipment);
+            super("move", "Move", true, equipment);
 
             this.safety_distance = 50;
         }

src/game/specs/BaseAction.spec.ts

@@ -3,7 +3,7 @@ module SpaceTac.Game {
         it("check if equipment can be used with remaining AP", function () {
             var equipment = new Equipment(SlotType.Armor);
             equipment.ap_usage = 3;
-            var action = new BaseAction("test", false, equipment);
+            var action = new BaseAction("test", "Test", false, equipment);
             var ship = new Ship();
             ship.addSlot(SlotType.Armor).attach(equipment);
             ship.ap_current.setMaximal(10);

src/view/battle/ActionTooltip.ts

@@ -1,23 +1,45 @@
 module SpaceTac.View {
     // Tooltip to display action information
     export class ActionTooltip extends Phaser.Sprite {
-        // Action name
-        title: Phaser.Text;
+        icon: Phaser.Image | null;
+        main_title: Phaser.Text;
+        sub_title: Phaser.Text;
+        cost: Phaser.Text;
 
         constructor(parent: ActionBar) {
             super(parent.game, 0, 0, "battle-action-tooltip");
             this.visible = false;
 
-            this.title = new Phaser.Text(this.game, 0, 0, "", {font: "14px Arial", fill: "#000000"});
-            this.addChild(this.title);
+            this.icon = null;
+
+            this.main_title = new Phaser.Text(this.game, 325, 20, "", { font: "24px Arial", fill: "#ffffff" });
+            this.main_title.anchor.set(0.5, 0);
+            this.addChild(this.main_title);
+
+            this.sub_title = new Phaser.Text(this.game, 325, 60, "", { font: "22px Arial", fill: "#ffffff" });
+            this.sub_title.anchor.set(0.5, 0);
+            this.addChild(this.sub_title);
+
+            this.cost = new Phaser.Text(this.game, 325, 100, "", { font: "20px Arial", fill: "#ffff00" });
+            this.cost.anchor.set(0.5, 0);
+            this.addChild(this.cost);
         }
 
         // Set current action to display, null to hide
         setAction(action: ActionIcon): void {
             if (action) {
+                if (this.icon) {
+                    this.icon.destroy(true);
+                }
+                this.icon = new Phaser.Image(this.game, 20, 15, "battle-actions-" + action.action.code);
+                this.addChild(this.icon);
+
                 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);
+                this.main_title.setText(action.action.equipment ? action.action.equipment.name : action.action.name);
+                this.sub_title.setText(action.action.equipment ? action.action.name : "");
+                this.cost.setText(action.action.equipment ? `Cost: ${action.action.equipment.ap_usage.toPrecision(3)} energy` : "");
+
+                Animation.fadeIn(this.game, this, 200, 0.9);
             } else {
                 Animation.fadeOut(this.game, this, 200);
             }

src/view/common/Animation.ts

@@ -3,20 +3,20 @@ module SpaceTac.View {
     export class Animation {
 
         // Display an object, fading in using opacity
-        static fadeIn(game: Phaser.Game, obj: PIXI.DisplayObject, duration: number = 1000): void {
+        static fadeIn(game: Phaser.Game, obj: PIXI.DisplayObject, duration: number = 1000, alpha: number = 1): void {
             if (!obj.visible) {
                 obj.alpha = 0;
                 obj.visible = true;
             }
             var tween = game.tweens.create(obj);
-            tween.to({alpha: 1}, duration);
+            tween.to({ alpha: alpha }, duration);
             tween.start();
         }
 
         // Hide an object, fading out using opacity
         static fadeOut(game: Phaser.Game, obj: PIXI.DisplayObject, duration: number = 1000): void {
             var tween = game.tweens.create(obj);
-            tween.to({alpha: 0}, duration);
+            tween.to({ alpha: 0 }, duration);
             tween.start();
         }