Started work on new battle HUD

TODO.md

@@ -37,6 +37,8 @@ Battle
 * Add a voluntary retreat option
 * Remove dead ships from ship list and play order
 * Add quick animation of playing ship indicator, on ship change
+* Toggle bar/text display in power section of action bar
+* Fix ship's active effect radius pushing the tooltip far from the ship
 * Display a hint when a move-fire simulation failed (cannot enter exclusion area for example)
 * Display effects description instead of attribute changes
 * Display radius and power usage hints for area effects on action icon hover + add confirmation?

src/ui/Preload.ts

@@ -33,8 +33,6 @@ module TS.SpaceTac.UI {
             this.loadSheet("battle/splash/shipcard.png", 99, 114);
             this.loadImage("battle/background.jpg");
             this.loadImage("battle/actionbar/background.png");
-            this.loadSheet("battle/actionbar/icon.png", 88, 88);
-            this.loadSheet("battle/actionbar/power.png", 58, 21);
             this.loadSheet("battle/actionbar/button-menu.png", 79, 132);
             this.loadImage("battle/arena/background.png");
             this.loadImage("battle/arena/blast.png");

src/ui/battle/ActionBar.ts

@@ -37,6 +37,7 @@ module TS.SpaceTac.UI {
 
             // Power bar
             this.power = this.game.add.group();
+            this.power.position.set(1600, 14);
             this.add(this.power);
 
             // Group for actions
@@ -144,7 +145,7 @@ module TS.SpaceTac.UI {
 
         // Add an action icon
         addAction(ship: Ship, action: BaseAction): ActionIcon {
-            var icon = new ActionIcon(this, 170 + this.action_icons.length * 88, 8, ship, action, this.action_icons.length);
+            var icon = new ActionIcon(this, 170 + this.action_icons.length * 124, 2, ship, action, this.action_icons.length);
             this.action_icons.push(icon);
 
             return icon;
@@ -158,28 +159,32 @@ module TS.SpaceTac.UI {
             let power_capacity = this.ship_power_capacity;
 
             if (current_power > power_capacity) {
-                range(current_power - power_capacity).forEach(i => this.power.removeChildAt(current_power - 1 - i));
+                range(current_power - power_capacity).forEach(i => {
+                    this.power.removeChildAt(current_power - 1 - i)
+                });
                 //this.power.removeChildren(ship_power, current_power);  // TODO bugged in phaser 2.6
             } else if (power_capacity > current_power) {
-                range(power_capacity - current_power).forEach(i => this.game.add.image(192 + (current_power + i) * 56, 104, "battle-actionbar-power", 0, this.power));
+                range(power_capacity - current_power).forEach(i => {
+                    let x = (current_power + i) % 5;
+                    let y = ((current_power + i) - x) / 5;
+                    let image = this.battleview.newImage("battle-actionbar-power-used", x * 43, y * 22);
+                    this.power.add(image);
+                });
             }
 
             let power_value = this.ship_power_value;
             let remaining_power = power_value - move_power - fire_power;
             this.power.children.forEach((obj, idx) => {
                 let img = <Phaser.Image>obj;
-                let frame: number;
                 if (idx < remaining_power) {
-                    frame = 0;
+                    this.battleview.changeImage(img, "battle-actionbar-power-available");
                 } else if (idx < remaining_power + move_power) {
-                    frame = 2;
+                    this.battleview.changeImage(img, "battle-actionbar-power-move");
                 } else if (idx < power_value) {
-                    frame = 3;
+                    this.battleview.changeImage(img, "battle-actionbar-power-fire");
                 } else {
-                    frame = 1;
+                    this.battleview.changeImage(img, "battle-actionbar-power-used");
                 }
-                img.data.frame = frame;
-                img.frame = frame;
             });
         }
 

src/ui/battle/ActionIcon.ts

@@ -40,38 +40,39 @@ module TS.SpaceTac.UI {
 
         // Create an icon for a single ship action
         constructor(bar: ActionBar, x: number, y: number, ship: Ship, action: BaseAction, position: number) {
-            super(bar.game, x, y, "battle-actionbar-icon", () => this.processClick());
+            super(bar.game, x, y, bar.battleview.getImageInfo("battle-actionbar-icon").key, () => this.processClick(),
+                undefined, bar.battleview.getImageInfo("battle-actionbar-icon").frame, bar.battleview.getImageInfo("battle-actionbar-icon").frame);
 
             this.bar = bar;
             this.battleview = bar.battleview;
             this.ship = ship;
             this.action = action;
 
-            bar.actions.addChild(this);
+            bar.actions.add(this);
+
+            // Icon layer
+            let icon = this.battleview.getFirstImage(`action-${action.code}`, `equipment-${action.equipment ? action.equipment.code : "---"}`);
+            this.layer_icon = new Phaser.Image(this.game, this.width / 2, this.height / 2, icon.key, icon.frame);
+            this.layer_icon.anchor.set(0.5, 0.5);
+            this.layer_icon.scale.set(0.35, 0.35);
+            this.addChild(this.layer_icon);
 
             // Active layer
             this.active = false;
-            this.layer_active = new Phaser.Image(this.game, this.width / 2, this.height / 2, "battle-actionbar-icon", 1);
+            this.layer_active = this.battleview.newImage("battle-actionbar-icon-available", this.width / 2, this.height / 2);
             this.layer_active.anchor.set(0.5, 0.5);
             this.layer_active.visible = false;
             this.addChild(this.layer_active);
 
             // Selected layer
             this.selected = false;
-            this.layer_selected = new Phaser.Image(this.game, this.width / 2, this.height / 2, "battle-actionbar-icon", 2);
+            this.layer_selected = this.battleview.newImage("battle-actionbar-icon-selected", this.width / 2, this.height / 2);
             this.layer_selected.anchor.set(0.5, 0.5);
             this.layer_selected.visible = false;
             this.addChild(this.layer_selected);
 
-            // Icon layer
-            let icon = this.battleview.getFirstImage(`action-${action.code}`, `equipment-${action.equipment ? action.equipment.code : "---"}`);
-            this.layer_icon = new Phaser.Image(this.game, this.width / 2, this.height / 2, icon.key, icon.frame);
-            this.layer_icon.anchor.set(0.5, 0.5);
-            this.layer_icon.scale.set(0.25, 0.25);
-            this.addChild(this.layer_icon);
-
             // Cooldown layer
-            this.cooldown = new Phaser.Image(this.game, this.width / 2, this.height / 2, "battle-actionbar-icon", 3);
+            this.cooldown = this.battleview.newImage("battle-actionbar-icon-cooldown", this.width / 2, this.height / 2);
             this.cooldown.anchor.set(0.5, 0.5);
             this.cooldown_count = new Phaser.Text(this.game, 0, 0, "", { align: "center", font: "bold 34pt SpaceTac", fill: "#aaaaaa" });
             this.cooldown_count.anchor.set(0.5, 0.45);
@@ -161,19 +162,19 @@ module TS.SpaceTac.UI {
             if (this.selected && remaining == 1) {
                 // will overheat, hint at the cooldown time
                 let cooldown = this.action.getCooldownDuration(true);
-                this.cooldown.frame = 3;
+                this.battleview.changeImage(this.cooldown, "battle-actionbar-icon-cooldown");
                 this.cooldown.scale.set(0.7);
                 this.cooldown_count.text = `${cooldown}`;
                 this.battleview.animations.setVisible(this.cooldown, true, 300);
             } else if (remaining == 0) {
                 // overheated, show cooldown time
                 let cooldown = this.action.getCooldownDuration(false);
-                this.cooldown.frame = 3;
+                this.battleview.changeImage(this.cooldown, "battle-actionbar-icon-cooldown");
                 this.cooldown.scale.set(1);
                 this.cooldown_count.text = `${cooldown}`;
                 this.battleview.animations.setVisible(this.cooldown, true, 300);
             } else if (this.action instanceof ToggleAction && this.action.activated) {
-                this.cooldown.frame = 4;
+                this.battleview.changeImage(this.cooldown, "battle-actionbar-icon-toggled");
                 this.cooldown.scale.set(1);
                 this.cooldown_count.text = "";
                 this.battleview.animations.setVisible(this.cooldown, true, 300);

src/ui/battle/ArenaShip.ts

@@ -51,12 +51,18 @@ module TS.SpaceTac.UI {
             this.effects_radius = new Phaser.Graphics(this.game);
             this.add(this.effects_radius);
 
+            // Add frame indicating which side this ship is on
+            this.frame = this.battleview.newImage(this.enemy ? "battle-hud-ship-enemy" : "battle-hud-ship-own");
+            this.frame.anchor.set(0.5, 0.5);
+            this.add(this.frame);
+            this.setPlaying(false);
+
             // Add ship sprite
             let info = this.battleview.getImageInfo(`ship-${ship.model.code}-sprite`);
             this.sprite = new Phaser.Button(this.game, 0, 0, info.key, undefined, undefined, info.frame, info.frame);
             this.sprite.rotation = ship.arena_angle;
             this.sprite.anchor.set(0.5, 0.5);
-            this.sprite.scale.set(0.25);
+            this.sprite.scale.set(0.4);
             this.add(this.sprite);
 
             // Add stasis effect
@@ -65,12 +71,6 @@ module TS.SpaceTac.UI {
             this.stasis.visible = false;
             this.add(this.stasis);
 
-            // Add playing effect
-            this.frame = this.battleview.newImage("battle-hud-ship-enemy");
-            this.frame.anchor.set(0.5, 0.5);
-            this.add(this.frame);
-            this.setPlaying(false);
-
             // HSP display
             this.hull = ValueBar.newStyled(this.battleview, "battle-hud-ship-hull", -59, -47, true);
             this.hull.setValue(this.ship.getValue("hull"), this.ship.getAttribute("hull_capacity"));
@@ -92,6 +92,7 @@ module TS.SpaceTac.UI {
             // Effects display
             this.active_effects = new ActiveEffectsEvent(ship);
             this.active_effects_display = new Phaser.Group(this.game);
+            this.active_effects_display.position.set(0, -44);
             this.add(this.active_effects_display);
             this.effects_messages = new Phaser.Group(this.game);
             this.add(this.effects_messages);
@@ -206,16 +207,13 @@ module TS.SpaceTac.UI {
             }
         }
 
-        // Set the playing state on this ship
-        //  This will toggle the "playing" indicator
+        /**
+         * Set the playing state on this ship
+         * 
+         * This will alter the HUD frame to show this state
+         */
         setPlaying(playing: boolean) {
-            let name = this.enemy ? "battle-hud-ship-enemy" : "battle-hud-ship-own";
-            if (playing) {
-                name += "-playing";
-            }
-            let info = this.battleview.getImageInfo(name);
-            this.frame.loadTexture(info.key);
-            this.frame.frame = info.frame;
+            this.frame.alpha = playing ? 1 : 0.35;
         }
 
         /**
@@ -225,7 +223,7 @@ module TS.SpaceTac.UI {
             if (dead) {
                 this.displayEffect("stasis", false);
             }
-            this.frame.alpha = dead ? 0.5 : 1.0;
+            this.frame.alpha = dead ? 0 : 1;
             this.battleview.animations.setVisible(this.stasis, dead, 400);
         }
 
@@ -306,11 +304,12 @@ module TS.SpaceTac.UI {
 
             let count = effects.length;
             if (count) {
-                let positions = UITools.evenlySpace(70, 10, count);
+                let positions = UITools.evenlySpace(70, 17, count);
 
                 effects.forEach((effect, index) => {
                     let name = effect.isBeneficial() ? "battle-hud-ship-effect-good" : "battle-hud-ship-effect-bad";
-                    let dot = this.battleview.newImage(name, positions[index] - 40, -47);
+                    let dot = this.battleview.newImage(name, positions[index] - 35, 0);
+                    dot.anchor.set(0.5, 0.5);
                     this.active_effects_display.add(dot);
                 });
             }

src/ui/battle/ShipListItem.ts

@@ -26,7 +26,7 @@ module TS.SpaceTac.UI {
 
             this.ship = ship;
 
-            this.player_indicator = this.view.newImage(owned ? "battle-hud-ship-own" : "battle-hud-ship-enemy", 42, 52);
+            this.player_indicator = this.view.newImage(owned ? "battle-hud-ship-own-mini" : "battle-hud-ship-enemy-mini", 8, 52);
             this.player_indicator.anchor.set(0.5, 0.5);
             this.player_indicator.angle = 90;
             this.addChild(this.player_indicator);

src/ui/battle/Targetting.ts

@@ -224,7 +224,7 @@ module TS.SpaceTac.UI {
                 this.action = action;
 
                 this.view.changeImage(this.move_ghost, `ship-${this.ship.model.code}-sprite`);
-                this.move_ghost.scale.set(0.25);
+                this.move_ghost.scale.set(0.4);
             } else {
                 this.ship = null;
                 this.action = null;