New actionbar design

src/ui/BaseView.ts

@@ -191,8 +191,7 @@ module TK.SpaceTac.UI {
         changeImage(image: Phaser.Image, name: string): void {
             let info = this.getImageInfo(name);
             image.name = name;
-            image.loadTexture(info.key);
-            image.frame = info.frame;
+            image.loadTexture(info.key, info.frame);
         }
 
         /**

src/ui/Preload.ts

@@ -33,6 +33,7 @@ module TK.SpaceTac.UI {
             this.loadSheet("battle/splash/shipcard.png", 99, 114);
             this.loadImage("battle/background.jpg");
             this.loadImage("battle/actionbar/background.png");
+            this.loadImage("battle/actionbar/actions-background.png");
             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.spec.ts

@@ -31,72 +31,12 @@ module TK.SpaceTac.UI.Specs {
             expect(bar.action_icons[1].action.code).toEqual("fire-equipment");
         });
 
-        it("mark actions that would become unavailable after use", function () {
-            let battleview = testgame.battleview;
-            var bar = battleview.action_bar;
-            var ship = new Ship();
-            ship.arena_x = 1;
-            ship.arena_y = 8;
-            var engine = TestTools.addEngine(ship, 0.5);
-            var weapon1 = TestTools.addWeapon(ship, 100, 3);
-            var weapon2 = TestTools.addWeapon(ship, 100, 5);
-            battleview.battle.playing_ship = ship;
-            battleview.player = ship.getPlayer();
-
-            ship.setAttribute("power_capacity", 10);
-            ship.setValue("power", 9);
-            bar.setShip(ship);
-
-            expect(bar.action_icons.length).toBe(4);
-
-            var checkFading = (fading: number[], available: number[], message: string) => {
-                fading.forEach((index: number) => {
-                    var icon = bar.action_icons[index];
-                    expect(icon.fading || !icon.active).toBe(true, `${message} - ${index} should be fading`);
-                });
-                available.forEach((index: number) => {
-                    var icon = bar.action_icons[index];
-                    expect(icon.fading).toBe(false, `${message} - ${index} should be available`);
-                });
-            };
-
-            bar.updateSelectedActionPower(3, 0, bar.action_icons[1].action);
-            checkFading([], [0, 1, 2, 3], "Weapon 1 leaves all choices open");
-            bar.actionEnded();
-
-            bar.updateSelectedActionPower(5, 0, bar.action_icons[2].action);
-            checkFading([2], [0, 1, 3], "Weapon 2 can't be fired twice");
-            bar.actionEnded();
-
-            ship.setValue("power", 7);
-            bar.updateSelectedActionPower(5, 0, bar.action_icons[2].action);
-            checkFading([1, 2], [0, 3], "Not enough AP for both weapons");
-            bar.actionEnded();
-
-            ship.setValue("power", 3);
-            bar.updateSelectedActionPower(3, 0, bar.action_icons[1].action);
-            checkFading([0, 1, 2], [3], "Not enough AP to move");
-            bar.actionEnded();
-
-            // Dynamic AP usage for move actions
-            ship.setValue("power", 6);
-            bar.updateSelectedActionPower(2, 0, bar.action_icons[0].action);
-            checkFading([2], [0, 1, 3], "2 move power used");
-            bar.updateSelectedActionPower(4, 0, bar.action_icons[0].action);
-            checkFading([1, 2], [0, 3], "4 move power used");
-            bar.updateSelectedActionPower(6, 0, bar.action_icons[0].action);
-            checkFading([0, 1, 2], [3], "6 move power used");
-            bar.updateSelectedActionPower(8, 0, bar.action_icons[0].action);
-            checkFading([0, 1, 2], [3], "8 move power used");
-            bar.actionEnded();
-        });
-
         it("updates power points display", function () {
             let bar = testgame.battleview.action_bar;
 
             function check(available = 0, using = 0, used = 0) {
-                expect(bar.power.children.length).toBe(available + using + used);
-                bar.power.children.forEach((child, idx) => {
+                expect(bar.power_icons.children.length).toBe(available + using + used);
+                bar.power_icons.children.forEach((child, idx) => {
                     let img = <Phaser.Image>child;
                     if (idx < available) {
                         expect(img.name).toEqual("battle-actionbar-power-available");

src/ui/battle/ActionBar.ts

@@ -2,22 +2,23 @@ module TK.SpaceTac.UI {
     // Bar with all available action icons displayed
     export class ActionBar extends Phaser.Group {
         // Link to the parent battleview
-        battleview: BattleView;
+        battleview: BattleView
 
         // List of action icons
-        actions: Phaser.Group;
-        action_icons: ActionIcon[];
+        actions: Phaser.Group
+        action_icons: ActionIcon[]
 
-        // Power bar
-        power: Phaser.Group;
+        // Power indicator
+        power: Phaser.Group
+        power_icons: Phaser.Group
 
         // Indicator of interaction disabled
-        icon_waiting: Phaser.Image;
+        icon_waiting: Phaser.Image
 
         // Current ship, whose actions are displayed
-        ship: Ship | null;
-        ship_power_capacity: number;
-        ship_power_value: number;
+        ship: Ship | null
+        ship_power_capacity: number
+        ship_power_value: number
 
         // Interactivity
         interactive = true;
@@ -35,14 +36,20 @@ module TK.SpaceTac.UI {
             // Background
             this.add(new Phaser.Image(this.game, 0, 0, "battle-actionbar-background", 0));
 
-            // Power bar
-            this.power = this.game.add.group();
-            this.power.position.set(1600, 14);
-            this.add(this.power);
-
             // Group for actions
-            this.actions = new Phaser.Group(this.game);
-            this.add(this.actions);
+            this.actions = this.game.add.group(this, "actions");
+            this.actions.position.set(86, 6);
+            this.actions.add(new Phaser.Image(this.game, 0, 0, "battle-actionbar-actions-background"));
+
+            // Power bar
+            this.power = this.game.add.group(this, "power");
+            this.power.position.set(1468, 0);
+            this.power.add(battleview.newImage("battle-actionbar-power-background", 0, 6));
+            this.power_icons = this.game.add.group(this.power, "power icons");
+            this.power_icons.position.set(50, 14);
+
+            // Playing ship
+            this.add(battleview.newImage("battle-actionbar-ship", 1730, -2));
 
             // Waiting icon
             this.icon_waiting = new Phaser.Image(this.game, this.width / 2, this.height / 2, "common-waiting", 0);
@@ -51,7 +58,7 @@ module TK.SpaceTac.UI {
             this.add(this.icon_waiting);
 
             // Options button
-            let button = battleview.add.button(1841, 0, "battle-actionbar-button-menu", () => battleview.showOptions(), null, 1, 0, 0, 1, this);
+            let button = battleview.add.button(0, 0, "battle-actionbar-button-menu", () => battleview.showOptions(), null, 1, 0, 0, 1, this);
             battleview.tooltip.bindStaticText(button, "Game options");
 
             // Key bindings
@@ -94,7 +101,8 @@ module TK.SpaceTac.UI {
                 this.interactive = interactive;
 
                 this.battleview.animations.setVisible(this.icon_waiting, !this.interactive, 100);
-                this.battleview.animations.setVisible(this.actions, interactive, 100, 1, 0.2);
+                this.battleview.animations.setVisible(this.power, interactive, 100, 1, 0);
+                this.battleview.animations.setVisible(this.actions, interactive, 100, 1, 0);
             }
         }
 
@@ -111,17 +119,20 @@ module TK.SpaceTac.UI {
             }
         }
 
-        // Clear the action icons
+        /**
+         * Remove all the action icons
+         */
         clearAll(): void {
-            this.action_icons.forEach((action: ActionIcon) => {
-                action.destroy();
-            });
+            this.action_icons.forEach(action => action.destroy());
             this.action_icons = [];
         }
 
-        // Add an action icon
+        /**
+         * Add an action icon
+         */
         addAction(ship: Ship, action: BaseAction): ActionIcon {
-            var icon = new ActionIcon(this, 170 + this.action_icons.length * 124, 2, ship, action, this.action_icons.length);
+            var icon = new ActionIcon(this, ship, action, this.action_icons.length);
+            icon.moveTo(this.actions, 74 + this.action_icons.length * 138, 58);
             this.action_icons.push(icon);
 
             return icon;
@@ -131,12 +142,12 @@ module TK.SpaceTac.UI {
          * Update the power indicator
          */
         updatePower(move_power = 0, fire_power = 0): void {
-            let current_power = this.power.children.length;
+            let current_power = this.power_icons.children.length;
             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)
+                    this.power_icons.removeChildAt(current_power - 1 - i)
                 });
                 //this.power.removeChildren(ship_power, current_power);  // TODO bugged in phaser 2.6
             } else if (power_capacity > current_power) {
@@ -144,13 +155,13 @@ module TK.SpaceTac.UI {
                     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);
+                    this.power_icons.add(image);
                 });
             }
 
             let power_value = this.ship_power_value;
             let remaining_power = power_value - move_power - fire_power;
-            this.power.children.forEach((obj, idx) => {
+            this.power_icons.children.forEach((obj, idx) => {
                 let img = <Phaser.Image>obj;
                 if (idx < remaining_power) {
                     this.battleview.changeImage(img, "battle-actionbar-power-available");
@@ -173,14 +184,7 @@ module TK.SpaceTac.UI {
          * *move_power* and *fire_power* is the consumption of currently selected action/target.
          */
         updateSelectedActionPower(move_power: number, fire_power: number, action: BaseAction): void {
-            var remaining_ap = this.ship ? (this.ship.getValue("power") - move_power - fire_power) : 0;
-            if (remaining_ap < 0) {
-                remaining_ap = 0;
-            }
-
-            this.action_icons.forEach(icon => {
-                icon.updateFadingStatus(remaining_ap, action);
-            });
+            this.action_icons.forEach(icon => icon.refresh(action, move_power + fire_power));
             this.updatePower(move_power, fire_power);
         }
 
@@ -226,12 +230,10 @@ module TK.SpaceTac.UI {
 
         // Called by an action icon when the action has been applied
         actionEnded(): void {
-            // TODO Lock interactivity until animation is ended
-            this.updatePower();
-            this.action_icons.forEach((action: ActionIcon) => {
-                action.resetState();
-            });
             this.battleview.exitTargettingMode();
+
+            this.updatePower();
+            this.action_icons.forEach(action => action.refresh());
         }
     }
 }

src/ui/battle/ActionIcon.spec.ts

@@ -0,0 +1,68 @@
+/// <reference path="../TestGame.ts"/>
+
+module TK.SpaceTac.UI.Specs {
+    describe("ActionIcon", function () {
+        let testgame = setupBattleview();
+
+        it("displays power usage", function () {
+            let bar = testgame.battleview.action_bar;
+            let ship = new Ship();
+            let action = new BaseAction("something", "Do something");
+            let icon = new ActionIcon(bar, ship, action, 0);
+            expect(icon.img_power.visible).toBe(false, "initial state");
+
+            icon.refresh();
+            expect(icon.img_power.visible).toBe(false, "no change");
+
+            spyOn(action, "getActionPointsUsage").and.returnValue(3);
+            icon.refresh();
+            expect(icon.img_power.visible).toBe(true);
+            expect(icon.text_power.text).toBe("3");
+        })
+
+        it("displays disabled and fading states", function () {
+            let bar = testgame.battleview.action_bar;
+            let ship = new Ship();
+            TestTools.setShipAP(ship, 5);
+            let action = nn(TestTools.addWeapon(ship, 50, 3).action);
+            let icon = new ActionIcon(bar, ship, action, 0);
+
+            expect(icon.img_power.name).toBe("battle-actionbar-consumption-enabled", "5/5");
+            expect(icon.img_power.visible).toBe(true, "5/5");
+            expect(icon.img_bottom.name).toBe("battle-actionbar-bottom-enabled", "5/5");
+
+            icon.refresh(null, 1);
+            expect(icon.img_power.name).toBe("battle-actionbar-consumption-enabled", "4/5");
+            expect(icon.img_power.visible).toBe(true, "4/5");
+            expect(icon.img_bottom.name).toBe("battle-actionbar-bottom-enabled", "4/5");
+
+            icon.refresh(null, 4);
+            expect(icon.img_power.name).toBe("battle-actionbar-consumption-fading", "1/5");
+            expect(icon.img_power.visible).toBe(true, "1/5");
+            expect(icon.img_bottom.name).toBe("battle-actionbar-bottom-enabled", "1/5");
+
+            ship.setValue("power", 2);
+            icon.refresh();
+            expect(icon.img_power.name).toBe("battle-actionbar-consumption-disabled", "2/2");
+            expect(icon.img_power.visible).toBe(true, "2/2");
+            expect(icon.img_bottom.name).toBe("battle-actionbar-bottom-disabled", "2/2");
+
+            icon.refresh(null, 6);
+            expect(icon.img_power.name).toBe("battle-actionbar-consumption-disabled", "0/2");
+            expect(icon.img_power.visible).toBe(true, "0/2");
+            expect(icon.img_bottom.name).toBe("battle-actionbar-bottom-disabled", "0/2");
+        })
+
+        it("displays toggle state", function () {
+
+        })
+
+        it("displays overheat/cooldown", function () {
+
+        })
+
+        it("displays currently targetting", function () {
+
+        })
+    });
+}

src/ui/battle/ActionIcon.ts

@@ -1,11 +1,14 @@
 module TK.SpaceTac.UI {
-    // Icon to activate a ship capability (move, fire...)
-    export class ActionIcon extends Phaser.Button {
-        // Link to the parent bar
+    /**
+     * Icon to activate a ship ability
+     */
+    export class ActionIcon {
+        // Link to parents
         bar: ActionBar
+        view: BattleView
 
-        // Link to the parent battle view
-        battleview: BattleView
+        // Container
+        container: Phaser.Button
 
         // Related ship
         ship: Ship
@@ -13,81 +16,91 @@ module TK.SpaceTac.UI {
         // Related game action
         action: BaseAction
 
-        // True if the action can be used
-        active: boolean
+        // Current state
+        fading = false
+        disabled = true
+        selected = false
+        toggled = false
 
-        // True if the action is selected for use
-        selected: boolean
+        // Images
+        img_targetting: Phaser.Image
+        img_bottom: Phaser.Image
+        img_power: Phaser.Image
+        img_sticky: Phaser.Image
+        img_action: Phaser.Image
 
-        // True if an action is currently selected, and this one won't be available after its use
-        fading: boolean
-
-        // Current targetting
-        private targetting: Targetting | null
-
-        // Action icon - image representing the action
-        private layer_icon: Phaser.Image
-
-        // Layer applied when the action is active
-        private layer_active: Phaser.Image
-
-        // Layer applied when the action is selected
-        private layer_selected: Phaser.Image
-
-        // Cooldown indicators
-        private cooldown: Phaser.Image
-        private cooldown_count: Phaser.Text
-
-        // 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, bar.battleview.getImageInfo("battle-actionbar-icon").key, () => this.processClick(),
-                undefined, bar.battleview.getImageInfo("battle-actionbar-icon").frame, bar.battleview.getImageInfo("battle-actionbar-icon").frame);
+        // Indicators
+        text_power: Phaser.Text
 
+        constructor(bar: ActionBar, ship: Ship, action: BaseAction, position: number) {
             this.bar = bar;
-            this.battleview = bar.battleview;
+            this.view = bar.battleview;
+
+            let info = this.view.getImageInfo("battle-actionbar-frame-disabled");
+            this.container = this.view.add.button(0, 0, info.key, () => this.processClick(), undefined, info.frame, info.frame);
+            this.container.anchor.set(0.5);
+            this.container.input.useHandCursor = false;
+
             this.ship = ship;
             this.action = action;
 
-            bar.actions.add(this);
+            // Action icon
+            let icon = this.view.getFirstImage(`action-${action.code}`, `equipment-${action.equipment ? action.equipment.code : "---"}`);
+            this.img_action = new Phaser.Image(bar.game, 0, 0, icon.key, icon.frame);
+            this.img_action.anchor.set(0.5);
+            this.img_action.scale.set(0.35);
+            this.img_action.alpha = 0.2;
+            this.container.addChild(this.img_action);
 
-            // 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);
+            // Bottom indicator
+            this.img_bottom = this.view.newImage("battle-actionbar-bottom-disabled", 0, 40);
+            this.img_bottom.anchor.set(0.5);
+            this.container.addChild(this.img_bottom);
+            this.img_targetting = this.view.newImage("battle-actionbar-bottom-targetting", 0, 12);
+            this.img_targetting.anchor.set(0.5);
+            this.img_targetting.visible = false;
+            this.img_bottom.addChild(this.img_targetting);
 
-            // Active layer
-            this.active = false;
-            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
+            // Left indicator
             this.selected = false;
-            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);
+            this.img_power = this.view.newImage("battle-actionbar-consumption-disabled", -46);
+            this.img_power.anchor.set(0.5);
+            this.img_power.visible = false;
+            this.container.addChild(this.img_power);
+            this.text_power = new Phaser.Text(bar.game, 0, 0, "", { align: "left", font: "16pt SpaceTac", fill: "#ffdd4b" });
+            this.text_power.setShadow(1, 1, "#000000");
+            this.text_power.anchor.set(0.5);
+            this.img_power.addChild(this.text_power);
 
-            // Cooldown layer
-            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);
-            this.cooldown.addChild(this.cooldown_count);
-            this.addChild(this.cooldown);
+            // Right indicator
+            this.img_sticky = this.view.newImage("battle-actionbar-sticky-untoggled", 46);
+            this.img_sticky.anchor.set(0.5);
+            this.img_sticky.visible = action instanceof ToggleAction;
+            this.container.addChild(this.img_sticky);
 
             // Events
-            this.battleview.tooltip.bind(this, filler => {
+            this.view.tooltip.bind(this.container, filler => {
                 ActionTooltip.fill(filler, this.ship, this.action, position);
                 return true;
             });
 
             // Initialize
-            this.updateActiveStatus(true);
-            this.updateCooldownStatus(0);
+            this.refresh();
+        }
+
+        /**
+         * Destroy the icon
+         */
+        destroy(): void {
+            this.container.destroy();
+        }
+
+        /**
+         * Move to a given layer and position
+         */
+        moveTo(layer: Phaser.Group, x = 0, y = 0): void {
+            layer.add(this.container);
+            this.container.position.set(x, y);
         }
 
         /**
@@ -103,7 +116,7 @@ module TK.SpaceTac.UI {
                 return;
             }
 
-            this.battleview.audio.playOnce("ui-button-click");
+            this.view.audio.playOnce("ui-button-click");
 
             if (this.selected) {
                 this.bar.actionEnded();
@@ -114,20 +127,14 @@ module TK.SpaceTac.UI {
             this.bar.actionEnded();
             this.bar.actionStarted();
 
-            // Set the selected state
-            this.setSelected(true);
-
             let mode = this.action.getTargettingMode(this.ship);
             if (mode == ActionTargettingMode.SELF || mode == ActionTargettingMode.SELF_CONFIRM) {
                 // Apply immediately on the ship
                 // TODO Handle confirm
                 this.processSelection(Target.newFromShip(this.ship));
             } else {
-                let sprite = this.battleview.arena.findShipSprite(this.ship);
-                if (sprite) {
-                    // Switch to targetting mode (will apply action when a target is selected)
-                    this.targetting = this.battleview.enterTargettingMode(this.action, mode);
-                }
+                // Switch to targetting mode (will apply action when a target is selected)
+                this.view.enterTargettingMode(this.action, mode);
             }
         }
 
@@ -142,71 +149,88 @@ module TK.SpaceTac.UI {
             }
         }
 
-        // Called to clear the current state
-        resetState(): void {
-            if (this.targetting) {
-                this.targetting = null;
-            }
-            this.setSelected(false);
-            this.updateCooldownStatus();
-            this.updateActiveStatus();
-            this.updateFadingStatus(this.ship.values.power.get());
-            this.battleview.arena.range_hint.clear();
-        }
+        /**
+         * Update the display elements
+         * 
+         * A currently targetting action may be passed, with power usage, to display potential fading and cooldown.
+         */
+        refresh(used: BaseAction | null = null, power_consumption = 0): void {
+            let disabled = bool(this.action.checkCannotBeApplied(this.ship));
+            let selected = (used === this.action);
+            let fading = bool(this.action.checkCannotBeApplied(this.ship, this.ship.getValue("power") - power_consumption));
+            let toggled = (this.action instanceof ToggleAction) && this.action.activated;
 
-        // Set the selected state on this icon
-        setSelected(selected: boolean) {
+            // inputs
+            if (disabled != this.disabled) {
+                this.container.input.useHandCursor = !disabled;
+            }
+
+            // frame
+            if (disabled != this.disabled) {
+                let name = disabled ? "battle-actionbar-frame-disabled" : "battle-actionbar-frame-enabled";
+                let info = this.view.getImageInfo(name);
+                this.container.name = name;
+                this.container.loadTexture(info.key);
+                this.container.setFrames(info.frame, info.frame, info.frame, info.frame);
+            }
+
+            // action icon
+            if (disabled != this.disabled) {
+                this.img_action.alpha = disabled ? 0.2 : 1;
+            }
+
+            // bottom
+            if (disabled != this.disabled || toggled != this.toggled) {
+                if (disabled) {
+                    this.view.changeImage(this.img_bottom, "battle-actionbar-bottom-disabled");
+                } else if (toggled) {
+                    this.view.changeImage(this.img_bottom, "battle-actionbar-bottom-toggled");
+                } else {
+                    this.view.changeImage(this.img_bottom, "battle-actionbar-bottom-enabled");
+                }
+            }
+            if (selected != this.selected) {
+                this.view.animations.setVisible(this.img_targetting, selected, 200);
+            }
+
+            // left
+            if (disabled != this.disabled || selected != this.selected || fading != this.fading || toggled != this.toggled) {
+                let power = this.action.getActionPointsUsage(this.ship, null);
+                this.img_power.visible = toggled || (power > 0);
+                this.text_power.text = `${power}`;
+                this.text_power.alpha = disabled ? 0.2 : 1;
+                if (disabled) {
+                    this.view.changeImage(this.img_power, "battle-actionbar-consumption-disabled");
+                } else if (toggled) {
+                    this.view.changeImage(this.img_power, "battle-actionbar-consumption-toggled");
+                } else if (fading) {
+                    this.view.changeImage(this.img_power, "battle-actionbar-consumption-fading");
+                } else if (selected) {
+                    this.view.changeImage(this.img_power, "battle-actionbar-consumption-targetting");
+                } else {
+                    this.view.changeImage(this.img_power, "battle-actionbar-consumption-enabled");
+                }
+            }
+
+            // right
+            if (toggled != this.toggled || disabled != this.disabled) {
+                if (this.action instanceof ToggleAction) {
+                    if (toggled) {
+                        this.view.changeImage(this.img_sticky, "battle-actionbar-sticky-toggled");
+                    } else {
+                        this.view.changeImage(this.img_sticky, "battle-actionbar-sticky-untoggled");
+                    }
+                    this.img_sticky.visible = !disabled;
+                } else {
+                    // TODO overheat
+                    this.img_sticky.visible = false;
+                }
+            }
+
+            this.disabled = disabled;
             this.selected = selected;
-            this.battleview.animations.setVisible(this.layer_selected, this.selected, 300);
-            this.updateCooldownStatus();
-        }
-
-        // Update the cooldown status
-        updateCooldownStatus(animate = 300): void {
-            let remaining = this.action.getUsesBeforeOverheat();
-            if (this.selected && remaining == 1) {
-                // will overheat, hint at the cooldown time
-                let cooldown = this.action.getCooldownDuration(true);
-                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, animate);
-            } else if (remaining == 0) {
-                // overheated, show cooldown time
-                let cooldown = this.action.getCooldownDuration(false);
-                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, animate);
-            } else if (this.action instanceof ToggleAction && this.action.activated) {
-                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, animate);
-            } else {
-                this.battleview.animations.setVisible(this.cooldown, false, animate);
-            }
-        }
-
-        // Update the active status, from the action canBeUsed result
-        updateActiveStatus(force = false): void {
-            var old_active = this.active;
-            this.active = !this.action.checkCannotBeApplied(this.ship);
-            if (force || (this.active != old_active)) {
-                this.battleview.animations.setVisible(this.layer_active, this.active, 500);
-                this.game.tweens.create(this.layer_icon).to({ alpha: this.active ? 1 : 0.3 }, 500).start();
-                this.input.useHandCursor = this.active;
-            }
-        }
-
-        // Update the fading status, given an hypothetical remaining AP
-        updateFadingStatus(remaining_ap: number, action: BaseAction | null = null): void {
-            let old_fading = this.fading;
-            let overheat = (action == this.action && this.action.equipment !== null && this.action.equipment.cooldown.willOverheat());
-            this.fading = this.active && (this.action.checkCannotBeApplied(this.ship, remaining_ap) != null || overheat);
-            if (this.fading != old_fading) {
-                this.battleview.animations.setVisible(this.layer_active, this.active && !this.fading, 500);
-            }
+            this.fading = fading;
+            this.toggled = toggled;
         }
     }
 }

src/ui/battle/Arena.ts

@@ -9,7 +9,7 @@ module TK.SpaceTac.UI {
         view: BattleView
 
         // Boundaries of the arena
-        boundaries: IBounded = { x: 112, y: 132, width: 1808, height: 948 }
+        boundaries: IBounded = { x: 0, y: 0, width: 1808, height: 948 }
 
         // Hint for weapon or move range
         range_hint: RangeHint

src/ui/battle/BattleView.ts

@@ -101,7 +101,9 @@ module TK.SpaceTac.UI {
 
             // Add UI elements
             this.action_bar = new ActionBar(this);
+            this.action_bar.position.set(0, this.getHeight() - 132);
             this.ship_list = new ShipList(this);
+            this.ship_list.position.set(this.getWidth() - 112, 0);
             this.ship_tooltip = new ShipTooltip(this);
             this.character_sheet = new CharacterSheet(this, -this.getWidth());
             this.layer_sheets.add(this.character_sheet);

src/ui/battle/ShipList.ts

@@ -19,7 +19,7 @@ module TK.SpaceTac.UI {
 
         // Create an empty action bar
         constructor(battleview: BattleView) {
-            super(battleview.game, 0, 133, "battle-shiplist-background");
+            super(battleview.game, 0, 0, "battle-shiplist-background");
 
             this.battleview = battleview;
             this.ships = [];
@@ -27,7 +27,6 @@ module TK.SpaceTac.UI {
             this.hovered = null;
 
             this.info_button = new Phaser.Button(this.game, 0, 0, "battle-shiplist-info-button");
-            this.info_button.position.set(0, this.height - this.info_button.height);
             UITools.setHoverClick(this.info_button,
                 () => this.battleview.toggle_tactical_mode.manipulate("button")(true),
                 () => this.battleview.toggle_tactical_mode.manipulate("button")(false),
@@ -61,7 +60,7 @@ module TK.SpaceTac.UI {
         // Add a ship icon
         addShip(ship: Ship): ShipListItem {
             var owned = ship.getPlayer() === this.battleview.player;
-            var result = new ShipListItem(this, -200, 0, ship, owned);
+            var result = new ShipListItem(this, 200, this.height / 2, ship, owned);
             this.ships.push(result);
             this.addChild(result);
             return result;
@@ -95,9 +94,9 @@ module TK.SpaceTac.UI {
             this.ships.forEach((item: ShipListItem) => {
                 var position = this.findPlayPosition(item.ship);
                 if (position === 0) {
-                    item.moveTo(18, 15 - this.y, animate);
+                    item.moveTo(-18, 962, animate);
                 } else {
-                    item.moveTo(0, 33 + position * 99 - this.y, animate);
+                    item.moveTo(2, 942 - position * 99, animate);
                 }
                 this.setChildIndex(item, position);
             });

src/ui/battle/ShipListItem.ts

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