games/spacetac
games/spacetac
1
0
Fork 0
Code Releases Activity

Fixed some battle UI issues

Browse source
This commit is contained in:
Michaël Lemaire 2018-06-04 16:48:19 +02:00
parent 75eeb44aa0
commit 1d8433c24c
7 changed files with 55 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
data/stage2/image/battle/actionbar/frame-disabled-hover.png Normal file
View file

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 392 B

BIN
data/stage2/image/battle/actionbar/frame-disabled.png
View file

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 417 B

After

Width:  |  Height:  |  Size: 390 B

36
src/ui/battle/ActionIcon.spec.ts
View file

@ -9,23 +9,23 @@ module TK.SpaceTac.UI.Specs {
let ship = new Ship(); let ship = new Ship();
let action = new BaseAction("something"); let action = new BaseAction("something");
let icon = new ActionIcon(bar, ship, action, 0); 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(); icon.refresh();
check.same(icon.img_power.visible, false, "no change"); check.same(icon.power_bg.visible, false, "no change");
let cost = 3; let cost = 3;
check.patch(action, "getPowerUsage", () => cost); check.patch(action, "getPowerUsage", () => cost);
icon.refresh(); icon.refresh();
check.in("power cost = 3", check => { check.in("power cost = 3", check => {
check.equals(icon.img_power.visible, true); check.equals(icon.power_bg.visible, true);
check.equals(icon.text_power.text, "3\n-"); check.equals(icon.power_text.text, "3\n-");
}); });
cost = -2; cost = -2;
icon.refresh(); icon.refresh();
check.in("power cost = -2", check => { check.in("power cost = -2", check => {
check.equals(icon.img_power.visible, true); check.equals(icon.power_bg.visible, true);
check.equals(icon.text_power.text, "2\n+"); 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); let icon = new ActionIcon(bar, ship, action, 0);
check.equals(icon.container.name, "battle-actionbar-frame-enabled", "5/5"); check.equals(icon.container.name, "battle-actionbar-frame-enabled", "5/5");
check.equals(icon.img_power.name, "battle-actionbar-consumption-enabled", "5/5"); check.equals(icon.power_bg.name, "battle-actionbar-consumption-enabled", "5/5");
check.same(icon.img_power.visible, true, "5/5"); check.same(icon.power_bg.visible, true, "5/5");
check.equals(icon.img_bottom.name, "battle-actionbar-bottom-enabled", "5/5"); check.equals(icon.img_bottom.name, "battle-actionbar-bottom-enabled", "5/5");
icon.refresh(null, 1); icon.refresh(null, 1);
check.equals(icon.container.name, "battle-actionbar-frame-enabled", "4/5"); check.equals(icon.container.name, "battle-actionbar-frame-enabled", "4/5");
check.equals(icon.img_power.name, "battle-actionbar-consumption-enabled", "4/5"); check.equals(icon.power_bg.name, "battle-actionbar-consumption-enabled", "4/5");
check.same(icon.img_power.visible, true, "4/5"); check.same(icon.power_bg.visible, true, "4/5");
check.equals(icon.img_bottom.name, "battle-actionbar-bottom-enabled", "4/5"); check.equals(icon.img_bottom.name, "battle-actionbar-bottom-enabled", "4/5");
icon.refresh(null, 4); icon.refresh(null, 4);
check.equals(icon.container.name, "battle-actionbar-frame-fading", "1/5"); check.equals(icon.container.name, "battle-actionbar-frame-fading", "1/5");
check.equals(icon.img_power.name, "battle-actionbar-consumption-enabled", "1/5"); check.equals(icon.power_bg.name, "battle-actionbar-consumption-enabled", "1/5");
check.same(icon.img_power.visible, true, "1/5"); check.same(icon.power_bg.visible, true, "1/5");
check.equals(icon.img_bottom.name, "battle-actionbar-bottom-enabled", "1/5"); check.equals(icon.img_bottom.name, "battle-actionbar-bottom-enabled", "1/5");
ship.setValue("power", 2); ship.setValue("power", 2);
icon.refresh(); icon.refresh();
check.equals(icon.container.name, "battle-actionbar-frame-disabled", "2/2"); check.equals(icon.container.name, "battle-actionbar-frame-disabled", "2/2");
check.equals(icon.img_power.name, "battle-actionbar-consumption-disabled", "2/2"); check.equals(icon.power_bg.name, "battle-actionbar-consumption-disabled", "2/2");
check.same(icon.img_power.visible, true, "2/2"); check.same(icon.power_bg.visible, true, "2/2");
check.equals(icon.img_bottom.name, "battle-actionbar-bottom-disabled", "2/2"); check.equals(icon.img_bottom.name, "battle-actionbar-bottom-disabled", "2/2");
icon.refresh(null, 6); icon.refresh(null, 6);
check.equals(icon.container.name, "battle-actionbar-frame-disabled", "0/2"); check.equals(icon.container.name, "battle-actionbar-frame-disabled", "0/2");
check.equals(icon.img_power.name, "battle-actionbar-consumption-disabled", "0/2"); check.equals(icon.power_bg.name, "battle-actionbar-consumption-disabled", "0/2");
check.same(icon.img_power.visible, true, "0/2"); check.same(icon.power_bg.visible, true, "0/2");
check.equals(icon.img_bottom.name, "battle-actionbar-bottom-disabled", "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); let icon = new ActionIcon(bar, ship, action, 0);
check.equals(icon.img_bottom.name, "battle-actionbar-bottom-enabled", "initial"); 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.equals(icon.img_cooldown.name, "battle-actionbar-sticky-untoggled", "initial");
check.same(icon.img_cooldown.visible, true, "initial"); check.same(icon.img_cooldown.visible, true, "initial");
ship.actions.toggle(action, true); ship.actions.toggle(action, true);
icon.refresh(); icon.refresh();
check.equals(icon.img_bottom.name, "battle-actionbar-bottom-toggled", "initial"); 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.equals(icon.img_cooldown.name, "battle-actionbar-sticky-toggled", "initial");
check.same(icon.img_cooldown.visible, true, "initial"); check.same(icon.img_cooldown.visible, true, "initial");
}) })

56
src/ui/battle/ActionIcon.ts
View file

@ -26,15 +26,18 @@ module TK.SpaceTac.UI {
// Images // Images
img_targetting!: UIImage img_targetting!: UIImage
img_top: UIImage | null = null
img_bottom: UIImage img_bottom: UIImage
img_power: UIImage
img_cooldown_group: UIContainer img_cooldown_group: UIContainer
img_cooldown: UIImage img_cooldown: UIImage
img_action: UIImage img_action: UIImage
// Indicators // Keyboard shortcut
text_power!: UIText shortcut_container?: UIContainer
// Power usage indicator
power_container: UIContainer
power_bg: UIImage
power_text: UIText
constructor(bar: ActionBar, ship: Ship, action: BaseAction, position: number) { constructor(bar: ActionBar, ship: Ship, action: BaseAction, position: number) {
this.bar = bar; this.bar = bar;
@ -44,7 +47,7 @@ module TK.SpaceTac.UI {
this.container = builder.button("battle-actionbar-frame-disabled", 0, 0, () => this.processClick(), filler => { this.container = builder.button("battle-actionbar-frame-disabled", 0, 0, () => this.processClick(), filler => {
ActionTooltip.fill(filler, this.ship, this.action, position); ActionTooltip.fill(filler, this.ship, this.action, position);
return true; return true;
}, undefined, { center: true }); }, undefined, { center: true, hover_bottom: true });
builder = builder.in(this.container); builder = builder.in(this.container);
this.ship = ship; this.ship = ship;
@ -57,9 +60,10 @@ module TK.SpaceTac.UI {
// Hotkey indicator // Hotkey indicator
if (!(action instanceof EndTurnAction)) { if (!(action instanceof EndTurnAction)) {
this.img_top = builder.image("battle-actionbar-hotkey", 0, -47, true); this.shortcut_container = builder.container("shortcut", 0, -47);
builder.in(this.img_top, builder => { builder.in(this.shortcut_container, builder => {
builder.text(`${(position + 1) % 10}`, 0, 0, { 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 size: 12, color: "#d1d1d1", shadow: true, center: true, vcenter: true
}); });
}); });
@ -68,23 +72,21 @@ module TK.SpaceTac.UI {
// Bottom indicator // Bottom indicator
this.img_bottom = builder.image("battle-actionbar-bottom-disabled", 0, 40, true); this.img_bottom = builder.image("battle-actionbar-bottom-disabled", 0, 40, true);
builder.in(this.img_bottom, builder => { 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); this.img_targetting.setVisible(false);
}); });
// Left indicator // Left indicator
this.selected = false; this.selected = false;
this.img_power = builder.image("battle-actionbar-consumption-disabled", -46, 0, true); this.power_container = builder.container("power", -46, -4, false);
this.img_power.setVisible(false); this.power_bg = builder.in(this.power_container).image("battle-actionbar-consumption-disabled", 0, 0, true);
builder.in(this.img_power, builder => { this.power_text = builder.in(this.power_container).text("", -2, 4, {
this.text_power = builder.text("", -2, 4, { size: 16, color: "#ffdd4b", shadow: true, center: true, vcenter: true
size: 16, color: "#ffdd4b", shadow: true, center: true, vcenter: true
});
}); });
// Right indicator // Right indicator
this.img_cooldown_group = builder.container("cooldown", 46, 0, action instanceof ToggleAction); 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", 46, 0, true); this.img_cooldown = builder.in(this.img_cooldown_group).image("battle-actionbar-sticky-untoggled", 0, 0, true);
// Initialize // Initialize
this.refresh(); this.refresh();
@ -191,8 +193,8 @@ module TK.SpaceTac.UI {
} }
// top // top
if (this.img_top && (targetting != this.targetting || disabled != this.disabled)) { if (this.shortcut_container && (targetting != this.targetting || disabled != this.disabled)) {
this.view.animations.setVisible(this.img_top, !targetting, 200, disabled ? 0.2 : 1); this.view.animations.setVisible(this.shortcut_container, !targetting, 200, disabled ? 0.2 : 1);
} }
// bottom // bottom
@ -211,19 +213,19 @@ module TK.SpaceTac.UI {
// left // left
let cost = this.action.getPowerUsage(this.ship, null); let cost = this.action.getPowerUsage(this.ship, null);
this.img_power.setVisible(bool(cost)); this.power_container.setVisible(bool(cost));
this.text_power.setText(`${Math.abs(cost)}\n${cost < 0 ? "+" : "-"}`); this.power_text.setText(`${Math.abs(cost)}\n${cost < 0 ? "+" : "-"}`);
this.text_power.setColor((cost > 0) ? "#ffdd4b" : "#dbe748"); this.power_text.setColor((cost > 0) ? "#ffdd4b" : "#dbe748");
this.text_power.setAlpha(disabled ? 0.2 : 1); this.power_text.setAlpha(disabled ? 0.2 : 1);
if (disabled != this.disabled || selected != this.selected || toggled != this.toggled) { if (disabled != this.disabled || selected != this.selected || toggled != this.toggled) {
if (disabled) { 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) { } 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) { } else if (selected) {
this.view.changeImage(this.img_power, "battle-actionbar-consumption-targetting"); this.view.changeImage(this.power_bg, "battle-actionbar-consumption-targetting");
} else { } else {
this.view.changeImage(this.img_power, "battle-actionbar-consumption-enabled"); this.view.changeImage(this.power_bg, "battle-actionbar-consumption-enabled");
} }
} }

6
src/ui/battle/ArenaShip.ts
View file

@ -73,7 +73,7 @@ module TK.SpaceTac.UI {
// HSP display // HSP display
this.hsp = builder.container("hsp", 0, 34); this.hsp = builder.container("hsp", 0, 34);
builder.in(this.hsp).image("battle-hud-hsp-background", 0, 0, true); 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 }); { size: 13, color: "#ffdd4b", bold: true, shadow: true, center: true });
this.life_hull = builder.in(this.hsp).container("hull"); this.life_hull = builder.in(this.hsp).container("hull");
this.life_shield = builder.in(this.hsp).container("shield"); 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, { let text = builder.text(message, 0, 20 * this.effects_messages.length, {
color: beneficial ? "#afe9c6" : "#e9afaf" color: beneficial ? "#afe9c6" : "#e9afaf"
}) });
let arena = this.battleview.arena.getBoundaries(); let arena = this.battleview.arena.getBoundaries();
this.effects_messages.setPosition( 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_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); this.effects_messages_toggle.manipulate("added")(1400);

2
src/ui/common/UIButton.ts
View file

@ -107,7 +107,7 @@ module TK.SpaceTac.UI {
this.hover_mask = builder.image(hover_name, 0, 0, options.center); this.hover_mask = builder.image(hover_name, 0, 0, options.center);
this.hover_mask.setVisible(false); this.hover_mask.setVisible(false);
this.hover_bottom = bool(options.hover_bottom); 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); this.moveDown(this.hover_mask);
} }
} }

6
src/ui/common/UITextDialog.ts
View file

@ -18,8 +18,10 @@ module TK.SpaceTac.UI {
this.result = new Promise((resolve, reject) => { this.result = new Promise((resolve, reject) => {
this.result_resolver = resolve; 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-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())); 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 });
}); });
} }