diff --git a/data/stage2/image/battle/actionbar/frame-disabled-hover.png b/data/stage2/image/battle/actionbar/frame-disabled-hover.png new file mode 100644 index 0000000..cb38a77 Binary files /dev/null and b/data/stage2/image/battle/actionbar/frame-disabled-hover.png differ diff --git a/data/stage2/image/battle/actionbar/frame-disabled.png b/data/stage2/image/battle/actionbar/frame-disabled.png index 392404e..f3ff4c0 100644 Binary files a/data/stage2/image/battle/actionbar/frame-disabled.png and b/data/stage2/image/battle/actionbar/frame-disabled.png differ diff --git a/src/ui/battle/ActionIcon.spec.ts b/src/ui/battle/ActionIcon.spec.ts index 2c5fa60..bc26086 100644 --- a/src/ui/battle/ActionIcon.spec.ts +++ b/src/ui/battle/ActionIcon.spec.ts @@ -9,23 +9,23 @@ module TK.SpaceTac.UI.Specs { let ship = new Ship(); let action = new BaseAction("something"); let icon = new ActionIcon(bar, ship, action, 0); - check.same(icon.img_power.visible, false, "initial state"); + check.same(icon.power_bg.visible, false, "initial state"); icon.refresh(); - check.same(icon.img_power.visible, false, "no change"); + check.same(icon.power_bg.visible, false, "no change"); let cost = 3; check.patch(action, "getPowerUsage", () => cost); icon.refresh(); check.in("power cost = 3", check => { - check.equals(icon.img_power.visible, true); - check.equals(icon.text_power.text, "3\n-"); + check.equals(icon.power_bg.visible, true); + check.equals(icon.power_text.text, "3\n-"); }); cost = -2; icon.refresh(); check.in("power cost = -2", check => { - check.equals(icon.img_power.visible, true); - check.equals(icon.text_power.text, "2\n+"); + check.equals(icon.power_bg.visible, true); + check.equals(icon.power_text.text, "2\n+"); }); }) @@ -37,33 +37,33 @@ module TK.SpaceTac.UI.Specs { let icon = new ActionIcon(bar, ship, action, 0); check.equals(icon.container.name, "battle-actionbar-frame-enabled", "5/5"); - check.equals(icon.img_power.name, "battle-actionbar-consumption-enabled", "5/5"); - check.same(icon.img_power.visible, true, "5/5"); + check.equals(icon.power_bg.name, "battle-actionbar-consumption-enabled", "5/5"); + check.same(icon.power_bg.visible, true, "5/5"); check.equals(icon.img_bottom.name, "battle-actionbar-bottom-enabled", "5/5"); icon.refresh(null, 1); check.equals(icon.container.name, "battle-actionbar-frame-enabled", "4/5"); - check.equals(icon.img_power.name, "battle-actionbar-consumption-enabled", "4/5"); - check.same(icon.img_power.visible, true, "4/5"); + check.equals(icon.power_bg.name, "battle-actionbar-consumption-enabled", "4/5"); + check.same(icon.power_bg.visible, true, "4/5"); check.equals(icon.img_bottom.name, "battle-actionbar-bottom-enabled", "4/5"); icon.refresh(null, 4); check.equals(icon.container.name, "battle-actionbar-frame-fading", "1/5"); - check.equals(icon.img_power.name, "battle-actionbar-consumption-enabled", "1/5"); - check.same(icon.img_power.visible, true, "1/5"); + check.equals(icon.power_bg.name, "battle-actionbar-consumption-enabled", "1/5"); + check.same(icon.power_bg.visible, true, "1/5"); check.equals(icon.img_bottom.name, "battle-actionbar-bottom-enabled", "1/5"); ship.setValue("power", 2); icon.refresh(); check.equals(icon.container.name, "battle-actionbar-frame-disabled", "2/2"); - check.equals(icon.img_power.name, "battle-actionbar-consumption-disabled", "2/2"); - check.same(icon.img_power.visible, true, "2/2"); + check.equals(icon.power_bg.name, "battle-actionbar-consumption-disabled", "2/2"); + check.same(icon.power_bg.visible, true, "2/2"); check.equals(icon.img_bottom.name, "battle-actionbar-bottom-disabled", "2/2"); icon.refresh(null, 6); check.equals(icon.container.name, "battle-actionbar-frame-disabled", "0/2"); - check.equals(icon.img_power.name, "battle-actionbar-consumption-disabled", "0/2"); - check.same(icon.img_power.visible, true, "0/2"); + check.equals(icon.power_bg.name, "battle-actionbar-consumption-disabled", "0/2"); + check.same(icon.power_bg.visible, true, "0/2"); check.equals(icon.img_bottom.name, "battle-actionbar-bottom-disabled", "0/2"); }) @@ -76,14 +76,14 @@ module TK.SpaceTac.UI.Specs { let icon = new ActionIcon(bar, ship, action, 0); check.equals(icon.img_bottom.name, "battle-actionbar-bottom-enabled", "initial"); - check.equals(icon.img_power.name, "battle-actionbar-consumption-enabled", "initial"); + check.equals(icon.power_bg.name, "battle-actionbar-consumption-enabled", "initial"); check.equals(icon.img_cooldown.name, "battle-actionbar-sticky-untoggled", "initial"); check.same(icon.img_cooldown.visible, true, "initial"); ship.actions.toggle(action, true); icon.refresh(); check.equals(icon.img_bottom.name, "battle-actionbar-bottom-toggled", "initial"); - check.equals(icon.img_power.name, "battle-actionbar-consumption-toggled", "initial"); + check.equals(icon.power_bg.name, "battle-actionbar-consumption-toggled", "initial"); check.equals(icon.img_cooldown.name, "battle-actionbar-sticky-toggled", "initial"); check.same(icon.img_cooldown.visible, true, "initial"); }) diff --git a/src/ui/battle/ActionIcon.ts b/src/ui/battle/ActionIcon.ts index 4639ef8..4372520 100644 --- a/src/ui/battle/ActionIcon.ts +++ b/src/ui/battle/ActionIcon.ts @@ -26,15 +26,18 @@ module TK.SpaceTac.UI { // Images img_targetting!: UIImage - img_top: UIImage | null = null img_bottom: UIImage - img_power: UIImage img_cooldown_group: UIContainer img_cooldown: UIImage img_action: UIImage - // Indicators - text_power!: UIText + // Keyboard shortcut + shortcut_container?: UIContainer + + // Power usage indicator + power_container: UIContainer + power_bg: UIImage + power_text: UIText constructor(bar: ActionBar, ship: Ship, action: BaseAction, position: number) { this.bar = bar; @@ -44,7 +47,7 @@ module TK.SpaceTac.UI { this.container = builder.button("battle-actionbar-frame-disabled", 0, 0, () => this.processClick(), filler => { ActionTooltip.fill(filler, this.ship, this.action, position); return true; - }, undefined, { center: true }); + }, undefined, { center: true, hover_bottom: true }); builder = builder.in(this.container); this.ship = ship; @@ -57,9 +60,10 @@ module TK.SpaceTac.UI { // Hotkey indicator if (!(action instanceof EndTurnAction)) { - this.img_top = builder.image("battle-actionbar-hotkey", 0, -47, true); - builder.in(this.img_top, builder => { - builder.text(`${(position + 1) % 10}`, 0, 0, { + this.shortcut_container = builder.container("shortcut", 0, -47); + builder.in(this.shortcut_container, builder => { + builder.image("battle-actionbar-hotkey", 0, 0, true); + builder.text(`${(position + 1) % 10}`, 0, -4, { size: 12, color: "#d1d1d1", shadow: true, center: true, vcenter: true }); }); @@ -68,23 +72,21 @@ module TK.SpaceTac.UI { // Bottom indicator this.img_bottom = builder.image("battle-actionbar-bottom-disabled", 0, 40, true); builder.in(this.img_bottom, builder => { - this.img_targetting = builder.image("battle-actionbar-bottom-targetting", 0, 12); + this.img_targetting = builder.image("battle-actionbar-bottom-targetting", 0, 12, true); this.img_targetting.setVisible(false); }); // Left indicator this.selected = false; - this.img_power = builder.image("battle-actionbar-consumption-disabled", -46, 0, true); - this.img_power.setVisible(false); - builder.in(this.img_power, builder => { - this.text_power = builder.text("", -2, 4, { - size: 16, color: "#ffdd4b", shadow: true, center: true, vcenter: true - }); + this.power_container = builder.container("power", -46, -4, false); + this.power_bg = builder.in(this.power_container).image("battle-actionbar-consumption-disabled", 0, 0, true); + this.power_text = builder.in(this.power_container).text("", -2, 4, { + size: 16, color: "#ffdd4b", shadow: true, center: true, vcenter: true }); // Right indicator - this.img_cooldown_group = builder.container("cooldown", 46, 0, action instanceof ToggleAction); - this.img_cooldown = builder.in(this.img_cooldown_group).image("battle-actionbar-sticky-untoggled", 46, 0, true); + this.img_cooldown_group = builder.container("cooldown", 46, -4, action instanceof ToggleAction); + this.img_cooldown = builder.in(this.img_cooldown_group).image("battle-actionbar-sticky-untoggled", 0, 0, true); // Initialize this.refresh(); @@ -191,8 +193,8 @@ module TK.SpaceTac.UI { } // top - if (this.img_top && (targetting != this.targetting || disabled != this.disabled)) { - this.view.animations.setVisible(this.img_top, !targetting, 200, disabled ? 0.2 : 1); + if (this.shortcut_container && (targetting != this.targetting || disabled != this.disabled)) { + this.view.animations.setVisible(this.shortcut_container, !targetting, 200, disabled ? 0.2 : 1); } // bottom @@ -211,19 +213,19 @@ module TK.SpaceTac.UI { // left let cost = this.action.getPowerUsage(this.ship, null); - this.img_power.setVisible(bool(cost)); - this.text_power.setText(`${Math.abs(cost)}\n${cost < 0 ? "+" : "-"}`); - this.text_power.setColor((cost > 0) ? "#ffdd4b" : "#dbe748"); - this.text_power.setAlpha(disabled ? 0.2 : 1); + this.power_container.setVisible(bool(cost)); + this.power_text.setText(`${Math.abs(cost)}\n${cost < 0 ? "+" : "-"}`); + this.power_text.setColor((cost > 0) ? "#ffdd4b" : "#dbe748"); + this.power_text.setAlpha(disabled ? 0.2 : 1); if (disabled != this.disabled || selected != this.selected || toggled != this.toggled) { if (disabled) { - this.view.changeImage(this.img_power, "battle-actionbar-consumption-disabled"); + this.view.changeImage(this.power_bg, "battle-actionbar-consumption-disabled"); } else if (toggled) { - this.view.changeImage(this.img_power, "battle-actionbar-consumption-toggled"); + this.view.changeImage(this.power_bg, "battle-actionbar-consumption-toggled"); } else if (selected) { - this.view.changeImage(this.img_power, "battle-actionbar-consumption-targetting"); + this.view.changeImage(this.power_bg, "battle-actionbar-consumption-targetting"); } else { - this.view.changeImage(this.img_power, "battle-actionbar-consumption-enabled"); + this.view.changeImage(this.power_bg, "battle-actionbar-consumption-enabled"); } } diff --git a/src/ui/battle/ArenaShip.ts b/src/ui/battle/ArenaShip.ts index ef5b466..4387a3b 100644 --- a/src/ui/battle/ArenaShip.ts +++ b/src/ui/battle/ArenaShip.ts @@ -73,7 +73,7 @@ module TK.SpaceTac.UI { // HSP display this.hsp = builder.container("hsp", 0, 34); builder.in(this.hsp).image("battle-hud-hsp-background", 0, 0, true); - this.power_text = builder.in(this.hsp).text(`${ship.getValue("power")}`, -42, 2, + this.power_text = builder.in(this.hsp).text(`${ship.getValue("power")}`, -42, 0, { size: 13, color: "#ffdd4b", bold: true, shadow: true, center: true }); this.life_hull = builder.in(this.hsp).container("hull"); this.life_shield = builder.in(this.hsp).container("shield"); @@ -348,12 +348,12 @@ module TK.SpaceTac.UI { let text = builder.text(message, 0, 20 * this.effects_messages.length, { color: beneficial ? "#afe9c6" : "#e9afaf" - }) + }); let arena = this.battleview.arena.getBoundaries(); this.effects_messages.setPosition( (this.ship.arena_x < 100) ? -35 : ((this.ship.arena_x > arena.width - 100) ? (35 - this.effects_messages.width) : (-this.effects_messages.width * 0.5)), - (this.ship.arena_y < arena.height * 0.9) ? 50 : (-50 - this.effects_messages.height) + (this.ship.arena_y < arena.height * 0.9) ? 60 : (-60 - this.effects_messages.height) ); this.effects_messages_toggle.manipulate("added")(1400); diff --git a/src/ui/common/UIButton.ts b/src/ui/common/UIButton.ts index 7dd4028..fe5fc10 100644 --- a/src/ui/common/UIButton.ts +++ b/src/ui/common/UIButton.ts @@ -107,7 +107,7 @@ module TK.SpaceTac.UI { this.hover_mask = builder.image(hover_name, 0, 0, options.center); this.hover_mask.setVisible(false); this.hover_bottom = bool(options.hover_bottom); - if (this.hover_bottom && !this.on_bottom) { + if (this.hover_bottom && this.on_mask && !this.on_bottom) { this.moveDown(this.hover_mask); } } diff --git a/src/ui/common/UITextDialog.ts b/src/ui/common/UITextDialog.ts index 9a446b0..683f622 100644 --- a/src/ui/common/UITextDialog.ts +++ b/src/ui/common/UITextDialog.ts @@ -18,8 +18,10 @@ module TK.SpaceTac.UI { this.result = new Promise((resolve, reject) => { this.result_resolver = resolve; - this.content.button("common-button-cancel", this.width * 0.4, this.height * 0.7, () => resolve(null)); - this.content.button("common-button-ok", this.width * 0.6, this.height * 0.7, () => resolve(input.getContent())); + this.content.button("common-button-cancel", this.width * 0.4, this.height * 0.7, () => resolve(null), + undefined, undefined, { center: true }); + this.content.button("common-button-ok", this.width * 0.6, this.height * 0.7, () => resolve(input.getContent()), + undefined, undefined, { center: true }); }); }