2017-09-24 22:23:22 +00:00
|
|
|
module TK.SpaceTac.UI {
|
2017-09-28 23:18:46 +00:00
|
|
|
/**
|
|
|
|
* Icon to activate a ship ability
|
|
|
|
*/
|
|
|
|
export class ActionIcon {
|
|
|
|
// Link to parents
|
2017-05-22 16:29:04 +00:00
|
|
|
bar: ActionBar
|
2017-09-28 23:18:46 +00:00
|
|
|
view: BattleView
|
2015-01-02 00:00:00 +00:00
|
|
|
|
2017-09-28 23:18:46 +00:00
|
|
|
// Container
|
2018-05-15 14:57:45 +00:00
|
|
|
container: UIButton
|
2015-01-02 00:00:00 +00:00
|
|
|
|
|
|
|
// Related ship
|
2017-05-22 16:29:04 +00:00
|
|
|
ship: Ship
|
2015-01-02 00:00:00 +00:00
|
|
|
|
|
|
|
// Related game action
|
2017-05-22 16:29:04 +00:00
|
|
|
action: BaseAction
|
2015-01-02 00:00:00 +00:00
|
|
|
|
2017-09-28 23:18:46 +00:00
|
|
|
// Current state
|
|
|
|
fading = false
|
|
|
|
disabled = true
|
|
|
|
selected = false
|
|
|
|
toggled = false
|
2017-12-06 23:10:43 +00:00
|
|
|
targetting = false
|
2017-10-01 18:16:41 +00:00
|
|
|
cooldown = 0
|
2015-02-26 00:00:00 +00:00
|
|
|
|
2017-09-28 23:18:46 +00:00
|
|
|
// Images
|
2018-05-15 14:57:45 +00:00
|
|
|
img_targetting!: UIImage
|
|
|
|
img_bottom: UIImage
|
|
|
|
img_cooldown_group: UIContainer
|
|
|
|
img_cooldown: UIImage
|
|
|
|
img_action: UIImage
|
2017-01-19 23:39:13 +00:00
|
|
|
|
2018-06-04 14:48:19 +00:00
|
|
|
// Keyboard shortcut
|
|
|
|
shortcut_container?: UIContainer
|
|
|
|
|
|
|
|
// Power usage indicator
|
|
|
|
power_container: UIContainer
|
|
|
|
power_bg: UIImage
|
|
|
|
power_text: UIText
|
2015-02-26 00:00:00 +00:00
|
|
|
|
2017-09-28 23:18:46 +00:00
|
|
|
constructor(bar: ActionBar, ship: Ship, action: BaseAction, position: number) {
|
|
|
|
this.bar = bar;
|
|
|
|
this.view = bar.battleview;
|
2017-05-16 23:12:05 +00:00
|
|
|
|
2018-05-15 14:57:45 +00:00
|
|
|
let builder = new UIBuilder(this.view);
|
|
|
|
this.container = builder.button("battle-actionbar-frame-disabled", 0, 0, () => this.processClick(), filler => {
|
|
|
|
ActionTooltip.fill(filler, this.ship, this.action, position);
|
|
|
|
return true;
|
2018-06-04 14:48:19 +00:00
|
|
|
}, undefined, { center: true, hover_bottom: true });
|
2018-05-15 14:57:45 +00:00
|
|
|
builder = builder.in(this.container);
|
2017-01-12 23:57:28 +00:00
|
|
|
|
2015-01-02 00:00:00 +00:00
|
|
|
this.ship = ship;
|
|
|
|
this.action = action;
|
|
|
|
|
2017-09-28 23:18:46 +00:00
|
|
|
// Action icon
|
2018-05-15 14:57:45 +00:00
|
|
|
this.img_action = builder.image(`action-${action.code}`, 0, 0, true);
|
|
|
|
this.img_action.setScale(0.35);
|
|
|
|
this.img_action.setAlpha(0.2);
|
2017-12-06 23:10:43 +00:00
|
|
|
|
|
|
|
// Hotkey indicator
|
2019-05-19 22:32:15 +00:00
|
|
|
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
|
2017-12-06 23:10:43 +00:00
|
|
|
});
|
2019-05-19 22:32:15 +00:00
|
|
|
});
|
2017-09-28 23:18:46 +00:00
|
|
|
|
|
|
|
// Bottom indicator
|
2018-05-15 14:57:45 +00:00
|
|
|
this.img_bottom = builder.image("battle-actionbar-bottom-disabled", 0, 40, true);
|
2017-12-06 23:10:43 +00:00
|
|
|
builder.in(this.img_bottom, builder => {
|
2018-06-04 14:48:19 +00:00
|
|
|
this.img_targetting = builder.image("battle-actionbar-bottom-targetting", 0, 12, true);
|
2018-05-15 14:57:45 +00:00
|
|
|
this.img_targetting.setVisible(false);
|
2017-12-06 23:10:43 +00:00
|
|
|
});
|
2017-09-28 23:18:46 +00:00
|
|
|
|
|
|
|
// Left indicator
|
2017-01-19 23:39:13 +00:00
|
|
|
this.selected = false;
|
2018-06-04 14:48:19 +00:00
|
|
|
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
|
2017-12-06 23:10:43 +00:00
|
|
|
});
|
2017-09-28 23:18:46 +00:00
|
|
|
|
|
|
|
// Right indicator
|
2018-06-04 14:48:19 +00:00
|
|
|
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);
|
2015-01-29 00:00:00 +00:00
|
|
|
|
|
|
|
// Initialize
|
2017-09-28 23:18:46 +00:00
|
|
|
this.refresh();
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Destroy the icon
|
|
|
|
*/
|
|
|
|
destroy(): void {
|
|
|
|
this.container.destroy();
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Move to a given layer and position
|
|
|
|
*/
|
2018-05-15 14:57:45 +00:00
|
|
|
moveTo(layer: UIContainer, x = 0, y = 0): void {
|
2017-09-28 23:18:46 +00:00
|
|
|
layer.add(this.container);
|
2018-05-15 14:57:45 +00:00
|
|
|
this.container.setPosition(x, y);
|
2015-01-02 00:00:00 +00:00
|
|
|
}
|
|
|
|
|
2017-09-19 15:09:06 +00:00
|
|
|
/**
|
|
|
|
* Process a click event on the action icon
|
|
|
|
*
|
|
|
|
* This will enter the action's targetting mode, waiting for a target or confirmation to apply the action
|
|
|
|
*/
|
2015-02-04 00:00:00 +00:00
|
|
|
processClick(): void {
|
2017-02-12 18:54:09 +00:00
|
|
|
if (!this.bar.interactive) {
|
|
|
|
return;
|
|
|
|
}
|
2017-03-07 19:27:46 +00:00
|
|
|
if (this.action.checkCannotBeApplied(this.ship)) {
|
2015-01-06 00:00:00 +00:00
|
|
|
return;
|
|
|
|
}
|
2017-07-19 23:22:18 +00:00
|
|
|
|
2017-09-28 23:18:46 +00:00
|
|
|
this.view.audio.playOnce("ui-button-click");
|
2017-07-19 23:22:18 +00:00
|
|
|
|
2017-01-19 23:39:13 +00:00
|
|
|
if (this.selected) {
|
|
|
|
this.bar.actionEnded();
|
|
|
|
return;
|
|
|
|
}
|
2015-01-02 00:00:00 +00:00
|
|
|
|
2015-02-04 00:00:00 +00:00
|
|
|
// End any previously selected action
|
|
|
|
this.bar.actionEnded();
|
2015-02-28 00:00:00 +00:00
|
|
|
this.bar.actionStarted();
|
2015-02-04 00:00:00 +00:00
|
|
|
|
2017-09-19 15:09:06 +00:00
|
|
|
let mode = this.action.getTargettingMode(this.ship);
|
|
|
|
if (mode == ActionTargettingMode.SELF || mode == ActionTargettingMode.SELF_CONFIRM) {
|
|
|
|
// Apply immediately on the ship
|
|
|
|
// TODO Handle confirm
|
|
|
|
this.processSelection(Target.newFromShip(this.ship));
|
|
|
|
} else {
|
2017-09-28 23:18:46 +00:00
|
|
|
// Switch to targetting mode (will apply action when a target is selected)
|
2018-02-08 15:16:03 +00:00
|
|
|
this.view.enterTargettingMode(this.ship, this.action, mode);
|
2015-01-06 00:00:00 +00:00
|
|
|
}
|
2015-01-06 00:00:00 +00:00
|
|
|
}
|
|
|
|
|
2017-09-19 15:09:06 +00:00
|
|
|
/**
|
|
|
|
* Called when a target is selected
|
|
|
|
*
|
|
|
|
* This will effectively apply the action
|
|
|
|
*/
|
|
|
|
processSelection(target: Target): void {
|
2019-05-13 17:57:12 +00:00
|
|
|
if (this.view.applyPlayerAction(this.action, target)) {
|
2015-01-22 00:00:00 +00:00
|
|
|
this.bar.actionEnded();
|
2015-01-06 00:00:00 +00:00
|
|
|
}
|
2014-12-31 00:00:00 +00:00
|
|
|
}
|
2015-01-29 00:00:00 +00:00
|
|
|
|
2017-09-28 23:18:46 +00:00
|
|
|
/**
|
|
|
|
* Update the display elements
|
|
|
|
*
|
|
|
|
* A currently targetting action may be passed, with power usage, to display potential fading and cooldown.
|
|
|
|
*/
|
|
|
|
refresh(used: BaseAction | null = null, power_consumption = 0): void {
|
|
|
|
let disabled = bool(this.action.checkCannotBeApplied(this.ship));
|
|
|
|
let selected = (used === this.action);
|
2018-02-08 15:16:03 +00:00
|
|
|
let toggled = (this.action instanceof ToggleAction) && this.ship.actions.isToggled(this.action);
|
2019-05-21 21:29:47 +00:00
|
|
|
let fading = bool(this.action.checkCannotBeApplied(this.ship, this.ship.getAttribute("power_capacity") - power_consumption));
|
2018-02-08 15:16:03 +00:00
|
|
|
let cooldown = this.ship.actions.getCooldown(this.action);
|
|
|
|
let heat = cooldown.heat;
|
2017-12-06 23:10:43 +00:00
|
|
|
let targetting = used !== null;
|
2018-02-08 15:16:03 +00:00
|
|
|
if (this.action == used && cooldown.willOverheat()) {
|
2017-10-01 16:33:48 +00:00
|
|
|
fading = true;
|
2018-02-08 15:16:03 +00:00
|
|
|
heat = cooldown.cooling;
|
2017-10-01 16:33:48 +00:00
|
|
|
}
|
2017-09-28 23:18:46 +00:00
|
|
|
|
|
|
|
// inputs
|
|
|
|
if (disabled != this.disabled) {
|
2018-05-15 14:57:45 +00:00
|
|
|
//this.container.input.useHandCursor = !disabled;
|
2015-02-04 00:00:00 +00:00
|
|
|
}
|
|
|
|
|
2017-09-28 23:18:46 +00:00
|
|
|
// frame
|
2017-10-01 16:33:48 +00:00
|
|
|
if (disabled != this.disabled || fading != this.fading) {
|
|
|
|
let name = "battle-actionbar-frame-enabled";
|
|
|
|
if (disabled) {
|
|
|
|
name = "battle-actionbar-frame-disabled";
|
|
|
|
} else if (fading) {
|
|
|
|
name = "battle-actionbar-frame-fading";
|
|
|
|
}
|
2018-05-15 14:57:45 +00:00
|
|
|
this.container.setBaseImage(name);
|
2017-09-28 23:18:46 +00:00
|
|
|
}
|
2017-01-19 23:39:13 +00:00
|
|
|
|
2017-09-28 23:18:46 +00:00
|
|
|
// action icon
|
|
|
|
if (disabled != this.disabled) {
|
|
|
|
this.img_action.alpha = disabled ? 0.2 : 1;
|
2017-05-16 23:12:05 +00:00
|
|
|
}
|
|
|
|
|
2017-12-06 23:10:43 +00:00
|
|
|
// top
|
2018-06-04 14:48:19 +00:00
|
|
|
if (this.shortcut_container && (targetting != this.targetting || disabled != this.disabled)) {
|
|
|
|
this.view.animations.setVisible(this.shortcut_container, !targetting, 200, disabled ? 0.2 : 1);
|
2017-12-06 23:10:43 +00:00
|
|
|
}
|
|
|
|
|
2017-09-28 23:18:46 +00:00
|
|
|
// bottom
|
|
|
|
if (disabled != this.disabled || toggled != this.toggled) {
|
|
|
|
if (disabled) {
|
|
|
|
this.view.changeImage(this.img_bottom, "battle-actionbar-bottom-disabled");
|
|
|
|
} else if (toggled) {
|
|
|
|
this.view.changeImage(this.img_bottom, "battle-actionbar-bottom-toggled");
|
|
|
|
} else {
|
|
|
|
this.view.changeImage(this.img_bottom, "battle-actionbar-bottom-enabled");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (selected != this.selected) {
|
|
|
|
this.view.animations.setVisible(this.img_targetting, selected, 200);
|
2017-01-13 00:28:23 +00:00
|
|
|
}
|
2015-02-26 00:00:00 +00:00
|
|
|
|
2017-09-28 23:18:46 +00:00
|
|
|
// left
|
2019-05-21 21:29:47 +00:00
|
|
|
let cost = this.action.getPowerUsage(this.ship);
|
2018-06-04 14:48:19 +00:00
|
|
|
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);
|
2017-10-01 16:33:48 +00:00
|
|
|
if (disabled != this.disabled || selected != this.selected || toggled != this.toggled) {
|
2017-09-28 23:18:46 +00:00
|
|
|
if (disabled) {
|
2018-06-04 14:48:19 +00:00
|
|
|
this.view.changeImage(this.power_bg, "battle-actionbar-consumption-disabled");
|
2017-09-28 23:18:46 +00:00
|
|
|
} else if (toggled) {
|
2018-06-04 14:48:19 +00:00
|
|
|
this.view.changeImage(this.power_bg, "battle-actionbar-consumption-toggled");
|
2017-09-28 23:18:46 +00:00
|
|
|
} else if (selected) {
|
2018-06-04 14:48:19 +00:00
|
|
|
this.view.changeImage(this.power_bg, "battle-actionbar-consumption-targetting");
|
2017-09-28 23:18:46 +00:00
|
|
|
} else {
|
2018-06-04 14:48:19 +00:00
|
|
|
this.view.changeImage(this.power_bg, "battle-actionbar-consumption-enabled");
|
2017-09-28 23:18:46 +00:00
|
|
|
}
|
2017-01-13 00:28:23 +00:00
|
|
|
}
|
2017-09-28 23:18:46 +00:00
|
|
|
|
|
|
|
// right
|
2018-02-08 15:16:03 +00:00
|
|
|
if (toggled != this.toggled || disabled != this.disabled || heat != this.cooldown) {
|
2018-05-15 14:57:45 +00:00
|
|
|
let builder = new UIBuilder(this.view, this.img_cooldown_group);
|
|
|
|
destroyChildren(this.img_cooldown_group, 1);
|
2017-09-28 23:18:46 +00:00
|
|
|
if (this.action instanceof ToggleAction) {
|
|
|
|
if (toggled) {
|
2018-05-15 14:57:45 +00:00
|
|
|
builder.change(this.img_cooldown, "battle-actionbar-sticky-toggled");
|
2017-09-28 23:18:46 +00:00
|
|
|
} else {
|
2018-05-15 14:57:45 +00:00
|
|
|
builder.change(this.img_cooldown, "battle-actionbar-sticky-untoggled");
|
2017-09-28 23:18:46 +00:00
|
|
|
}
|
2018-05-15 14:57:45 +00:00
|
|
|
this.img_cooldown.visible = !disabled;
|
2018-02-08 15:16:03 +00:00
|
|
|
} else if (heat) {
|
2017-10-01 18:16:41 +00:00
|
|
|
if (disabled) {
|
2018-05-15 14:57:45 +00:00
|
|
|
builder.change(this.img_cooldown, "battle-actionbar-sticky-disabled");
|
2017-10-01 18:16:41 +00:00
|
|
|
} else {
|
2018-05-15 14:57:45 +00:00
|
|
|
builder.change(this.img_cooldown, "battle-actionbar-sticky-overheat");
|
2017-10-01 18:16:41 +00:00
|
|
|
}
|
2018-02-08 15:16:03 +00:00
|
|
|
range(Math.min(heat - 1, 4)).forEach(i => {
|
2018-05-15 14:57:45 +00:00
|
|
|
builder.image("battle-actionbar-cooldown-one", 0, 2 - i * 7);
|
2017-10-01 18:16:41 +00:00
|
|
|
});
|
2018-05-15 14:57:45 +00:00
|
|
|
builder.image("battle-actionbar-cooldown-front", -4, -20);
|
|
|
|
this.img_cooldown.visible = true;
|
2017-09-28 23:18:46 +00:00
|
|
|
} else {
|
2018-05-15 14:57:45 +00:00
|
|
|
this.img_cooldown.visible = false;
|
2017-09-28 23:18:46 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
this.disabled = disabled;
|
|
|
|
this.selected = selected;
|
2017-12-06 23:10:43 +00:00
|
|
|
this.targetting = targetting;
|
2017-09-28 23:18:46 +00:00
|
|
|
this.fading = fading;
|
|
|
|
this.toggled = toggled;
|
2018-02-08 15:16:03 +00:00
|
|
|
this.cooldown = heat;
|
2015-01-29 00:00:00 +00:00
|
|
|
}
|
2014-12-31 00:00:00 +00:00
|
|
|
}
|
2015-01-07 00:00:00 +00:00
|
|
|
}
|