Added ship tooltip on battle splash

src/ui/battle/BattleSplash.ts

@@ -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 });
+                let overlay = builder.overlay({
-                overlay.setScale(this.view.getWidth() / overlay.width, this.view.getHeight() / overlay.height);
+                    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 => {
+                overlay.then(() => container.setVisible(false)),
-                    container.visible = false;
-                    overlayobj.destroy();
-                }),
                 components
             ]).then(() => {
                 container.destroy();

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);
+                if (battle) {
-                builder.text((turns == 0) ? "Playing" : ((turns == 1) ? "Plays next" : `Plays in ${turns} turns`), 230, 36, { color: "#cccccc", size: 18 });
+                    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);
+            return true;
-            if (sprite) {
-                this.container.show(UITools.getBounds(sprite.frame_owner));
-            }
         }
 
         private static addValue(builder: UIBuilder, idx: number, color: string, icon: string, val: number, max?: number) {

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

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),

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

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

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");
+            new UIBuilder(this.view, layer).overlay({
-            overlay.setInteractive();
+                color: 0x888888,
-            overlay.setScale(this.view.getWidth() / overlay.width, this.view.getHeight() / overlay.height);
+                alpha: 0.3
+            });
         }
 
         /**