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

Fixed some battle UI issues

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 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");
})

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

@ -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");
}
}

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

@ -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);

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.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);
}
}

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

@ -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 });
});
}