From 513e82b487fe1305ffafddef9ff655e2e3e54b1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20Lemaire?= Date: Wed, 6 Jun 2018 23:00:22 +0200 Subject: [PATCH] Added ship tooltip on battle splash --- data/stage1/image/translucent.png | Bin 169 -> 0 bytes data/stage2/image/battle/overlay.png | Bin 201 -> 0 bytes src/ui/battle/BattleSplash.ts | 25 ++++++++++++++-------- src/ui/battle/ShipTooltip.ts | 22 +++++++++++++------ src/ui/character/CharacterSheet.ts | 4 ++-- src/ui/character/CharacterUpgrade.spec.ts | 4 ++-- src/ui/character/CharacterUpgrade.ts | 4 ++-- src/ui/common/UIDialog.spec.ts | 6 +++--- src/ui/common/UIDialog.ts | 7 +++--- 9 files changed, 44 insertions(+), 28 deletions(-) delete mode 100644 data/stage1/image/translucent.png delete mode 100644 data/stage2/image/battle/overlay.png diff --git a/data/stage1/image/translucent.png b/data/stage1/image/translucent.png deleted file mode 100644 index 0df5f1211605e1267de5dd4537fb1f69eab1f5ff..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 169 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx1|;Q0k8}blwj^(N7l!{JxM1({$v_d#0*}aI z1_o|n5N2eUHAey{$X?><>&pI+LyT8XQ*^Pi7*I$yGbEzKIX^cyHLnE7WngeFN=+<>&pI!Rg^=9%i!EyexQ(SW=KSdbAE1aYF-JD%fR4Vl$uzQ znxasiS(2gP?&%wlqL<1J6xa21aSVw#{Pvt7BZC3YfdyOst=F8_W4EATWnBBVWF}M~ X@3NQS64&lrCy { 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 { + overlay(builder: UIBuilder): Promise { 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(); diff --git a/src/ui/battle/ShipTooltip.ts b/src/ui/battle/ShipTooltip.ts index d89fbf1..b0658d5 100644 --- a/src/ui/battle/ShipTooltip.ts +++ b/src/ui/battle/ShipTooltip.ts @@ -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); - builder.text((turns == 0) ? "Playing" : ((turns == 1) ? "Plays next" : `Plays in ${turns} turns`), 230, 36, { color: "#cccccc", size: 18 }); + 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) { diff --git a/src/ui/character/CharacterSheet.ts b/src/ui/character/CharacterSheet.ts index 8577e3d..5b24f2d 100644 --- a/src/ui/character/CharacterSheet.ts +++ b/src/ui/character/CharacterSheet.ts @@ -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}`); diff --git a/src/ui/character/CharacterUpgrade.spec.ts b/src/ui/character/CharacterUpgrade.spec.ts index 836c4f5..ccc7a9b 100644 --- a/src/ui/character/CharacterUpgrade.spec.ts +++ b/src/ui/character/CharacterUpgrade.spec.ts @@ -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), diff --git a/src/ui/character/CharacterUpgrade.ts b/src/ui/character/CharacterUpgrade.ts index 5b70b85..140d95b 100644 --- a/src/ui/character/CharacterUpgrade.ts +++ b/src/ui/character/CharacterUpgrade.ts @@ -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"; } } } diff --git a/src/ui/common/UIDialog.spec.ts b/src/ui/common/UIDialog.spec.ts index be90386..b49f325 100644 --- a/src/ui/common/UIDialog.spec.ts +++ b/src/ui/common/UIDialog.spec.ts @@ -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); }); diff --git a/src/ui/common/UIDialog.ts b/src/ui/common/UIDialog.ts index 56511c7..b7f14bf 100644 --- a/src/ui/common/UIDialog.ts +++ b/src/ui/common/UIDialog.ts @@ -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 + }); } /**