Added ship tooltip on battle splash
This commit is contained in:
parent
296a9d6839
commit
513e82b487
Binary file not shown.
Before Width: | Height: | Size: 169 B |
Binary file not shown.
Before Width: | Height: | Size: 201 B |
|
@ -26,7 +26,9 @@ module TK.SpaceTac.UI {
|
|||
|
||||
this.fleet1.ships.forEach((ship, index) => {
|
||||
let ship_card = builder.image("battle-splash-ship-card", -86 + index * 96, -72, true);
|
||||
let ship_portrait = builder.in(ship_card).image(`ship-${ship.model.code}-portrait`, 0, 0, true);
|
||||
let ship_portrait = builder.in(ship_card).button(`ship-${ship.model.code}-portrait`, 0, 0, undefined, filler => ShipTooltip.fillInfo(filler, ship), undefined, {
|
||||
center: true
|
||||
});
|
||||
ship_portrait.setScale(0.3);
|
||||
});
|
||||
});
|
||||
|
@ -41,7 +43,9 @@ module TK.SpaceTac.UI {
|
|||
|
||||
this.fleet2.ships.forEach((ship, index) => {
|
||||
let ship_card = builder.image("battle-splash-ship-card", -86 + index * 96, -72, true);
|
||||
let ship_portrait = builder.in(ship_card).image(`ship-${ship.model.code}-portrait`, 0, 0, true);
|
||||
let ship_portrait = builder.in(ship_card).button(`ship-${ship.model.code}-portrait`, 0, 0, undefined, filler => ShipTooltip.fillInfo(filler, ship), undefined, {
|
||||
center: true
|
||||
});
|
||||
ship_portrait.setAngle(180);
|
||||
ship_portrait.setScale(0.3);
|
||||
});
|
||||
|
@ -72,10 +76,16 @@ module TK.SpaceTac.UI {
|
|||
/**
|
||||
* Create an overlay, returns when it is clicked
|
||||
*/
|
||||
overlay(builder: UIBuilder): Promise<UIButton> {
|
||||
overlay(builder: UIBuilder): Promise<void> {
|
||||
return new Promise(resolve => {
|
||||
let overlay = builder.button("battle-overlay", this.view.getMidWidth(), this.view.getMidHeight(), () => resolve(overlay), undefined, undefined, { center: true });
|
||||
overlay.setScale(this.view.getWidth() / overlay.width, this.view.getHeight() / overlay.height);
|
||||
let overlay = builder.overlay({
|
||||
color: 0x000000,
|
||||
alpha: 0.5,
|
||||
on_click: () => {
|
||||
overlay.destroy();
|
||||
resolve();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -90,10 +100,7 @@ module TK.SpaceTac.UI {
|
|||
let components = this.components(builder.in(container), container);
|
||||
|
||||
return Promise.all([
|
||||
overlay.then(overlayobj => {
|
||||
container.visible = false;
|
||||
overlayobj.destroy();
|
||||
}),
|
||||
overlay.then(() => container.setVisible(false)),
|
||||
components
|
||||
]).then(() => {
|
||||
container.destroy();
|
||||
|
|
|
@ -23,18 +23,29 @@ module TK.SpaceTac.UI {
|
|||
|
||||
builder.configure(10, 6, this.battleview.arena.getBoundaries());
|
||||
|
||||
ShipTooltip.fillInfo(builder, ship, this.battleview.battle, this.battleview.player);
|
||||
|
||||
let sprite = this.battleview.arena.findShipSprite(ship);
|
||||
if (sprite) {
|
||||
this.container.show(UITools.getBounds(sprite.frame_owner));
|
||||
}
|
||||
}
|
||||
|
||||
static fillInfo(builder: TooltipBuilder, ship: Ship, battle?: Battle, player?: Player): boolean {
|
||||
let portrait_bg = builder.image("battle-tooltip-ship-portrait", 0, 0);
|
||||
builder.in(portrait_bg, builder => {
|
||||
let portrait = builder.image(`ship-${ship.model.code}-portrait`, 1, 1);
|
||||
portrait.setScale(0.75);
|
||||
});
|
||||
|
||||
let enemy = !this.battleview.player.is(ship.fleet.player);
|
||||
let enemy = player && !player.is(ship.fleet.player);
|
||||
builder.text(ship.getName(), 230, 0, { color: enemy ? "#cc0d00" : "#ffffff", size: 22, bold: true });
|
||||
|
||||
if (ship.alive) {
|
||||
let turns = this.battleview.battle.getPlayOrder(ship);
|
||||
if (battle) {
|
||||
let turns = battle.getPlayOrder(ship);
|
||||
builder.text((turns == 0) ? "Playing" : ((turns == 1) ? "Plays next" : `Plays in ${turns} turns`), 230, 36, { color: "#cccccc", size: 18 });
|
||||
}
|
||||
|
||||
ShipTooltip.addValue(builder, 0, "#eb4e4a", "attribute-hull_capacity", ship.getValue("hull"), ship.getAttribute("hull_capacity"));
|
||||
ShipTooltip.addValue(builder, 1, "#2ad8dc", "attribute-shield_capacity", ship.getValue("shield"), ship.getAttribute("shield_capacity"));
|
||||
|
@ -65,10 +76,7 @@ module TK.SpaceTac.UI {
|
|||
{ color: "#a899db", size: 20, center: true, vcenter: true });
|
||||
}
|
||||
|
||||
let sprite = this.battleview.arena.findShipSprite(ship);
|
||||
if (sprite) {
|
||||
this.container.show(UITools.getBounds(sprite.frame_owner));
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
private static addValue(builder: UIBuilder, idx: number, color: string, icon: string, val: number, max?: number) {
|
||||
|
|
|
@ -70,7 +70,7 @@ module TK.SpaceTac.UI {
|
|||
this.xhidden = -this.view.getWidth();
|
||||
this.container.x = this.xhidden;
|
||||
|
||||
this.image_portrait = this.builder.image("translucent", 435, 271, true);
|
||||
this.image_portrait = this.builder.image("common-transparent", 435, 271, true);
|
||||
|
||||
this.builder.image("character-entry", 24, 740);
|
||||
|
||||
|
@ -223,7 +223,7 @@ module TK.SpaceTac.UI {
|
|||
builder.in(builder.container("actions"), builder => {
|
||||
let actions = ship.model.getActions(1, []);
|
||||
actions.forEach(action => {
|
||||
let button = builder.button("translucent", 0, 66, undefined, action.getEffectsDescription());
|
||||
let button = builder.button("common-transparent", 0, 66, undefined, action.getEffectsDescription());
|
||||
|
||||
builder.in(button, builder => {
|
||||
let icon = builder.image(`action-${action.code}`);
|
||||
|
|
|
@ -60,10 +60,10 @@ module TK.SpaceTac.UI.Specs {
|
|||
check.equals(display.getIcon(), "action-testaction");
|
||||
|
||||
upgrade.actions = [];
|
||||
check.equals(display.getIcon(), "translucent");
|
||||
check.equals(display.getIcon(), "common-transparent");
|
||||
|
||||
upgrade.effects = [new DamageEffect(10)];
|
||||
check.equals(display.getIcon(), "translucent");
|
||||
check.equals(display.getIcon(), "common-transparent");
|
||||
|
||||
upgrade.effects = [
|
||||
new DamageEffect(10),
|
||||
|
|
|
@ -105,10 +105,10 @@ module TK.SpaceTac.UI {
|
|||
if (attr && (attr instanceof AttributeEffect || attr instanceof AttributeMultiplyEffect)) {
|
||||
return `attribute-${attr.attrcode}`;
|
||||
} else {
|
||||
return "translucent";
|
||||
return "common-transparent";
|
||||
}
|
||||
} else {
|
||||
return "translucent";
|
||||
return "common-transparent";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -9,14 +9,14 @@ module TK.SpaceTac.UI.Specs {
|
|||
let dialog1 = new UIDialog(view, "fake");
|
||||
check.in("one dialog", check => {
|
||||
check.equals(view.dialogs_layer.length, 2);
|
||||
check.equals(view.dialogs_layer.list[0] instanceof UIImage, true);
|
||||
check.equals(view.dialogs_layer.list[0] instanceof UIOverlay, true);
|
||||
check.same(view.dialogs_layer.list[1], dialog1.base);
|
||||
});
|
||||
|
||||
let dialog2 = new UIDialog(view, "fake");
|
||||
check.in("two dialogs", check => {
|
||||
check.equals(view.dialogs_layer.length, 3);
|
||||
check.equals(view.dialogs_layer.list[0] instanceof UIImage, true);
|
||||
check.equals(view.dialogs_layer.list[0] instanceof UIOverlay, true);
|
||||
check.same(view.dialogs_layer.list[1], dialog1.base);
|
||||
check.same(view.dialogs_layer.list[2], dialog2.base);
|
||||
});
|
||||
|
@ -25,7 +25,7 @@ module TK.SpaceTac.UI.Specs {
|
|||
|
||||
check.in("one dialog closed", check => {
|
||||
check.equals(view.dialogs_layer.length, 2);
|
||||
check.equals(view.dialogs_layer.list[0] instanceof UIImage, true);
|
||||
check.equals(view.dialogs_layer.list[0] instanceof UIOverlay, true);
|
||||
check.same(view.dialogs_layer.list[1], dialog2.base);
|
||||
});
|
||||
|
||||
|
|
|
@ -36,9 +36,10 @@ module TK.SpaceTac.UI {
|
|||
* Add an input-capturing overlay
|
||||
*/
|
||||
addOverlay(layer: UIContainer): void {
|
||||
let overlay = new UIBuilder(this.view, layer).image("translucent");
|
||||
overlay.setInteractive();
|
||||
overlay.setScale(this.view.getWidth() / overlay.width, this.view.getHeight() / overlay.height);
|
||||
new UIBuilder(this.view, layer).overlay({
|
||||
color: 0x888888,
|
||||
alpha: 0.3
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
Loading…
Reference in a new issue