From 1d8433c24c9c74b05836fcf76d3a0bf66ac4a0ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20Lemaire?= Date: Mon, 4 Jun 2018 16:48:19 +0200 Subject: [PATCH] Fixed some battle UI issues --- .../battle/actionbar/frame-disabled-hover.png | Bin 0 -> 392 bytes .../image/battle/actionbar/frame-disabled.png | Bin 417 -> 390 bytes src/ui/battle/ActionIcon.spec.ts | 36 +++++------ src/ui/battle/ActionIcon.ts | 56 +++++++++--------- src/ui/battle/ArenaShip.ts | 6 +- src/ui/common/UIButton.ts | 2 +- src/ui/common/UITextDialog.ts | 6 +- 7 files changed, 55 insertions(+), 51 deletions(-) create mode 100644 data/stage2/image/battle/actionbar/frame-disabled-hover.png 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 0000000000000000000000000000000000000000..cb38a7776d8ee84b21f0ac9ec0582b3916f4484e GIT binary patch literal 392 zcmeAS@N?(olHy`uVBq!ia0vp^lYqFEgAGV}W?J0@Qfx`y?k)`fL2$v|<&%LToCO|{ z#S9F5M?jcysy3fAP>{XE)7O>#5gQAiKJQ0QX%+?sMo~`}$B>F!Z!cZsJY*ozdNG3O ztj5+0eUAn70(Z4ITl6(qdDRv($hT@wDHi*2@@zQB8DKEQ`O%5Yy)wRk<*z^e<8x=_ zO7^|)wzub>m0DKmb9dFr_T2Yp-?weq=lZ@>&E128Q?YS^fRK}uhk{B=3y=jAP*ed6 zaBzYJoS1+DK$ZgzwJj__&DhjJjX^dSsup4;vbiuTPqKjR{}D9#c+`Czy(RZ~F5Aok d1rQjNy=8v=ji>A8ho_DpzNf37%Q~loCIHJ9c4`0s literal 0 HcmV?d00001 diff --git a/data/stage2/image/battle/actionbar/frame-disabled.png b/data/stage2/image/battle/actionbar/frame-disabled.png index 392404ed73f0457deb855dd1d3cb60d272c8ea65..f3ff4c0431100213338a76fb17da74631d53eda6 100644 GIT binary patch literal 390 zcmeAS@N?(olHy`uVBq!ia0vp^lYqFEgAGV}W?J0@Qfx`y?k)`fL2$v|<&%LToCO|{ z#S9F5M?jcysy3fAP>{XE)7O>#5gQAiicAIXBU=UrMqy7E$B>F!Z!cZsJY*ozdQl@% z@$Nysse)XseTp1?6Bd@Vmv!CxRFmKtv-h02T3zsjG zE2+1M-)EW~J>9Z&wVM1k`S$y~Go!li?Vcs0sHoDy;^gGP!Kv6dK|lz|Qc!7Wncx5t zP*ed6aBupl8^NtDoHm^OMlLzzI ak8Jh*%Dm0Ktg}9YggjmST-G@yGywqU_Hj@E literal 417 zcmeAS@N?(olHy`uVBq!ia0vp^@gU5>1|<7@q`v|wmSQK*5Dp-y;YjHK@;M7UB8wRq z_>O=u<5X=vX`rBFiEBhjaDG}zd16s2LwR|*US?i)adKios$PCk`s{Z$QVa}?a-J@Z zAr*7pUO1S^>?q)RaN13gFv}AMC3*Oq6$&_nr!;Mt^ug2cN@CpHUHS9NBeUFVdQ&MBb@09 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 }); }); }