Fixed some battle UI issues
This commit is contained in:
parent
75eeb44aa0
commit
1d8433c24c
BIN
data/stage2/image/battle/actionbar/frame-disabled-hover.png
Normal file
BIN
data/stage2/image/battle/actionbar/frame-disabled-hover.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 392 B |
Binary file not shown.
Before Width: | Height: | Size: 417 B After Width: | Height: | Size: 390 B |
|
@ -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");
|
||||
})
|
||||
|
|
|
@ -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, {
|
||||
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");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 });
|
||||
});
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue