Improvements to UIBuilder

TODO.md

@@ -34,6 +34,7 @@ Character sheet
 * Allow to cancel spent skill points (and confirm when closing the sheet)
 * Add filters and sort options for cargo and shop
 * Display level and slot type on equipment
+* Fix dragged equipment being under attributes (put attributes in a layer)
 
 Battle
 ------
@@ -93,7 +94,8 @@ Artificial Intelligence
 Common UI
 ---------
 
-* Remove UIComponent, and refactor UI tools from BaseView to have an UI creation/modification framework
+* Split atlases by asset stage
+* UIBuilder.button should be able to handle hover and pushed images
 * Add caret/focus to text input
 * Mobile: think UI layout so that fingers do not block the view (right and left handed)
 * Mobile: display tooltips larger and on the side of screen where the finger is not

src/ui/BaseView.ts

@@ -107,10 +107,13 @@ module TK.SpaceTac.UI {
         }
 
         /**
-         * Add a new layer in the view
+         * Get or create a layer in the view, by its name
          */
-        addLayer(name: string): Phaser.Group {
-            let layer = this.add.group(this.layers, name);
+        getLayer(name: string): Phaser.Group {
+            let layer = <Phaser.Group>this.layers.getByName(name);
+            if (!layer) {
+                layer = this.add.group(this.layers, name);
+            }
             return layer;
         }
 

src/ui/battle/BattleView.ts

@@ -83,12 +83,12 @@ module TK.SpaceTac.UI {
             this.log_processor = new LogProcessor(this);
 
             // Add layers
-            this.layer_background = this.addLayer("background");
-            this.layer_arena = this.addLayer("arena");
-            this.layer_borders = this.addLayer("borders");
-            this.layer_overlay = this.addLayer("overlay");
-            this.layer_dialogs = this.addLayer("dialogs");
-            this.layer_sheets = this.addLayer("character_sheet");
+            this.layer_background = this.getLayer("background");
+            this.layer_arena = this.getLayer("arena");
+            this.layer_borders = this.getLayer("borders");
+            this.layer_overlay = this.getLayer("overlay");
+            this.layer_dialogs = this.getLayer("dialogs");
+            this.layer_sheets = this.getLayer("character_sheet");
 
             // Background
             this.background = new Phaser.Image(game, 0, 0, "battle-background", 0);

src/ui/character/FleetCreationView.ts

@@ -29,7 +29,7 @@ module TK.SpaceTac.UI {
             this.character_sheet = new CharacterSheet(this, undefined, undefined, () => this.validateFleet());
             this.character_sheet.setShop(this.infinite_shop, "Initial basic equipment");
             this.character_sheet.show(this.built_fleet.ships[0], false);
-            this.addLayer("characters").add(this.character_sheet);
+            this.getLayer("characters").add(this.character_sheet);
         }
 
         /**

src/ui/common/UIBuilder.spec.ts

@@ -32,8 +32,34 @@ module TK.SpaceTac.UI.Specs {
             return component;
         }
 
+        it("can work on view layers", function () {
+            let builder = new UIBuilder(testgame.view, "tl1");
+            builder.group("tg1");
+            check(["View layers", "tl1", 0], Phaser.Group, "tg1");
+
+            builder = new UIBuilder(testgame.view, "tl2");
+            builder.group("tg2");
+            check(["View layers", "tl2", 0], Phaser.Group, "tg2");
+
+            builder = new UIBuilder(testgame.view, "tl1");
+            builder.group("tg3");
+            check(["View layers", "tl1", 0], Phaser.Group, "tg1");
+            check(["View layers", "tl1", 1], Phaser.Group, "tg3");
+
+            builder = new UIBuilder(testgame.view);
+            builder.group("tg4");
+            check(["View layers", "base", 0], Phaser.Group, "tg4");
+
+            builder = new UIBuilder(testgame.view);
+            builder.group("tg5");
+            check(["View layers", "base", 0], Phaser.Group, "tg4");
+            check(["View layers", "base", 1], Phaser.Group, "tg5");
+
+            expect(testgame.view.layers.children.map((child: any) => child.name)).toEqual(["tl1", "tl2", "base"]);
+        })
+
         it("creates component inside the parent container", function () {
-            let builder = new UIBuilder(testgame.view, testgame.view.addLayer("testlayer"));
+            let builder = new UIBuilder(testgame.view, testgame.view.getLayer("testlayer"));
             let group = builder.group("test1");
             check(["View layers", "testlayer", 0], Phaser.Group, "test1");
 

src/ui/common/UIBuilder.ts

@@ -57,8 +57,7 @@ module TK.SpaceTac.UI {
             this.view = view;
             this.game = view.gameui;
             if (typeof parent == "string") {
-                // TODO get or create
-                this.parent = view.addLayer(parent);
+                this.parent = view.getLayer(parent);
             } else {
                 this.parent = parent;
             }

src/ui/common/UIComponent.ts

@@ -37,6 +37,7 @@ module TK.SpaceTac.UI {
         private readonly container: Phaser.Group
         protected readonly width: number
         protected readonly height: number
+        protected readonly builder: UIBuilder
 
         constructor(parent: BaseView | UIComponent, width: number, height: number, background_key: string | null = null) {
             this.width = width;
@@ -56,6 +57,7 @@ module TK.SpaceTac.UI {
             } else {
                 this.view.add.existing(this.container);
             }
+            this.builder = new UIBuilder(this.view, this.container);
 
             if (background_key) {
                 this.background = this.addInternalChild(new Phaser.Image(this.view.game, 0, 0, background_key));
@@ -227,15 +229,7 @@ module TK.SpaceTac.UI {
          * Add a static text.
          */
         addText(x: number, y: number, content: string, color = "#ffffff", size = 16, bold = false, center = true, width = 0, vcenter = center): Phaser.Text {
-            let style = { font: `${bold ? "bold " : ""}${size}pt SpaceTac`, fill: color, align: center ? "center" : "left" };
-            let text = new Phaser.Text(this.view.game, x, y, content, style);
-            text.anchor.set(center ? 0.5 : 0, vcenter ? 0.5 : 0);
-            if (width) {
-                text.wordWrap = true;
-                text.wordWrapWidth = width;
-            }
-            this.addInternalChild(text);
-            return text;
+            return this.builder.text(content, x, y, { color: color, size: size, bold: bold, center: center, width: width, vcenter: vcenter });
         }
 
         /**
@@ -254,12 +248,10 @@ module TK.SpaceTac.UI {
          * Add a static image, from atlases, positioning its center.
          */
         addImage(x: number, y: number, name: string, scale = 1): Phaser.Image {
-            let info = this.view.getImageInfo(name);
-            let image = new Phaser.Image(this.container.game, x, y, info.key, info.frame);
-            image.anchor.set(0.5, 0.5);
-            image.scale.set(scale);
-            this.addInternalChild(image);
-            return image;
+            let result = this.builder.image(name, x, y);
+            result.anchor.set(0.5);
+            result.scale.set(scale);
+            return result;
         }
 
         /**

src/ui/intro/IntroSteps.ts

@@ -165,7 +165,7 @@ module TK.SpaceTac.UI {
          */
         protected getLayer(layer: number, clear = false): Phaser.Group {
             while (this.layers.length <= layer) {
-                this.layers.push(this.view.addLayer(`Layer ${this.layers.length}`));
+                this.layers.push(this.view.getLayer(`Layer ${this.layers.length}`));
             }
 
             if (clear) {

src/ui/map/UniverseMapView.ts

@@ -66,8 +66,8 @@ module TK.SpaceTac.UI {
         create() {
             super.create();
 
-            this.layer_universe = this.addLayer("universe");
-            this.layer_overlay = this.addLayer("overlay");
+            this.layer_universe = this.getLayer("universe");
+            this.layer_overlay = this.getLayer("overlay");
 
             this.starlinks_group = this.game.add.group(this.layer_universe);
             this.starlinks = this.universe.starlinks.map(starlink => {

src/ui/menu/MainMenu.ts

@@ -15,8 +15,8 @@ module TK.SpaceTac.UI {
         create() {
             super.create();
 
-            this.layer_stars = this.addLayer("stars");
-            this.layer_title = this.addLayer("title");
+            this.layer_stars = this.getLayer("stars");
+            this.layer_title = this.getLayer("title");
 
             // Stars
             for (let i = 0; i < 300; i++) {