Refactored character sheet

TODO.md

@@ -93,6 +93,7 @@ Artificial Intelligence
 Common UI
 ---------
 
+* Remove UIComponent, and refactor UI tools from BaseView to have an UI creation/modification framework
 * 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/AssetLoading.ts

@@ -73,7 +73,7 @@ module TK.SpaceTac.UI {
                 console.log("Loading battle assets");
 
                 // TODO automatic range
-                range(3).forEach(i => this.loadAtlas(i + 1));
+                range(4).forEach(i => this.loadAtlas(i + 1));
 
                 this.loadImage("options/background.png");
                 this.loadSheet("options/button.png", 497, 134);
@@ -93,15 +93,6 @@ module TK.SpaceTac.UI {
                 this.loadImage("battle/shiplist/info-button.png");
 
                 this.loadImage("character/sheet.png");
-                this.loadImage("character/close.png");
-                this.loadImage("character/ship.png");
-                this.loadImage("character/ship-selected.png");
-                this.loadImage("character/skill-upgrade.png");
-                this.loadImage("character/cargo-slot.png");
-                this.loadImage("character/equipment-slot.png");
-                this.loadSheet("character/slots.png", 52);
-                this.loadImage("character/upgrade-available.png");
-                this.loadImage("character/price-tag.png");
 
                 this.loadSound("ui/drag.wav");
                 this.loadSound("ui/drop.wav");

src/ui/BaseView.ts

@@ -178,6 +178,23 @@ module TK.SpaceTac.UI {
             return pos.x >= area.x && pos.x < area.x + area.width && pos.y >= area.y && pos.y < area.y + area.height;
         }
 
+        /**
+         * Create a simple text
+         */
+        newText(content: string, x = 0, y = 0, size = 16, color = "#ffffff", shadow = true, bold = false, center = true, vcenter = center, width = 0): Phaser.Text {
+            let style = { font: `${bold ? "bold " : ""}${size}pt SpaceTac`, fill: color, align: center ? "center" : "left" };
+            let text = new Phaser.Text(this.game, x, y, content, style);
+            text.anchor.set(center ? 0.5 : 0, vcenter ? 0.5 : 0);
+            if (width) {
+                text.wordWrap = true;
+                text.wordWrapWidth = width;
+            }
+            if (shadow) {
+                text.setShadow(3, 4, "rgba(0,0,0,0.6)", 6);
+            }
+            return text;
+        }
+
         /**
          * Get a new image from an atlas name
          */
@@ -188,13 +205,32 @@ module TK.SpaceTac.UI {
             return result;
         }
 
+        /**
+         * Get a new button from an atlas name
+         */
+        newButton(name: string, x = 0, y = 0, onclick?: Function): Phaser.Button {
+            let info = this.getImageInfo(name);
+            let button = new Phaser.Button(this.game, x, y, info.key, onclick || nop, null, info.frame, info.frame);
+            let clickable = bool(onclick);
+            button.input.useHandCursor = clickable;
+            if (clickable) {
+                UIComponent.setButtonSound(button);
+            }
+            return button;
+        }
+
         /**
          * Update an image from an atlas name
          */
-        changeImage(image: Phaser.Image, name: string): void {
+        changeImage(image: Phaser.Image | Phaser.Button, name: string): void {
             let info = this.getImageInfo(name);
             image.name = name;
-            image.loadTexture(info.key, info.frame);
+            if (image instanceof Phaser.Button) {
+                image.loadTexture(info.key);
+                image.setFrames(info.frame, info.frame);
+            } else {
+                image.loadTexture(info.key, info.frame);
+            }
         }
 
         /**

src/ui/character/CharacterCargo.ts

@@ -8,7 +8,8 @@ module TK.SpaceTac.UI {
         sheet: CharacterSheet;
 
         constructor(sheet: CharacterSheet, x: number, y: number) {
-            super(sheet.game, x, y, "character-cargo-slot");
+            let info = sheet.view.getImageInfo("character-cargo-slot");
+            super(sheet.game, x, y, info.key, info.frame);
 
             this.sheet = sheet;
         }

src/ui/character/CharacterEquipment.ts

@@ -71,7 +71,7 @@ module TK.SpaceTac.UI {
             }
             this.price = price;
 
-            let tag = new Phaser.Image(this.game, 0, 0, "character-price-tag");
+            let tag = this.sheet.view.newImage("character-price-tag");
             let yoffset = this.container.getPriceOffset();
             tag.position.set(0, -yoffset * 2 + tag.height);
             tag.anchor.set(0.5, 0.5);
@@ -79,8 +79,7 @@ module TK.SpaceTac.UI {
             tag.alpha = 0.85;
             this.addChild(tag);
 
-            let text = new Phaser.Text(this.game, -10, 4, price.toString(), { align: "center", font: "18pt SpaceTac", fill: "#FFFFCC" });
-            text.anchor.set(0.5, 0.5);
+            let text = this.sheet.view.newText(price.toString(), -8, 2, 18, "#ffffcc");
             tag.addChild(text);
         }
 

src/ui/character/CharacterFleetMember.ts

@@ -10,7 +10,8 @@ module TK.SpaceTac.UI {
         levelup: Phaser.Image;
 
         constructor(sheet: CharacterSheet, x: number, y: number, ship: Ship) {
-            super(sheet.game, x, y, "character-ship", () => sheet.show(ship));
+            let info = sheet.view.getImageInfo("character-ship");
+            super(sheet.game, x, y, info.key, () => sheet.show(ship), null, info.frame, info.frame);
             this.anchor.set(0.5, 0.5);
 
             this.sheet = sheet;
@@ -20,7 +21,7 @@ module TK.SpaceTac.UI {
             portrait_pic.anchor.set(0.5, 0.5);
             this.addChild(portrait_pic);
 
-            this.levelup = new Phaser.Image(this.game, this.width / 2 - 40, -this.height / 2 + 40, "character-upgrade-available");
+            this.levelup = sheet.view.newImage("character-upgrade-available", this.width / 2 - 40, -this.height / 2 + 40);
             this.levelup.anchor.set(1, 0);
             this.levelup.visible = this.ship.getAvailableUpgradePoints() > 0;
             this.addChild(this.levelup);
@@ -32,7 +33,7 @@ module TK.SpaceTac.UI {
          * Set the selected state of the ship
          */
         setSelected(selected: boolean) {
-            this.loadTexture(selected ? "character-ship-selected" : "character-ship");
+            this.sheet.view.changeImage(this, selected ? "character-ship-selected" : "character-ship");
             this.sheet.view.animations.setVisible(this.levelup, this.ship.getAvailableUpgradePoints() > 0, 200);
         }
 

src/ui/character/CharacterSheet.ts

@@ -54,7 +54,8 @@ module TK.SpaceTac.UI {
         // Shop
         shop: Shop | null = null
 
-        // Fleet's portraits
+        // Fleet portraits
+        members: CharacterFleetMember[] = []
         portraits: Phaser.Group
 
         // Layer for draggable equipments
@@ -79,25 +80,24 @@ module TK.SpaceTac.UI {
             if (!onclose) {
                 onclose = () => this.hide();
             }
-            this.close_button = new Phaser.Button(this.game, view.getWidth(), 0, "character-close", onclose);
+            this.close_button = view.newButton("character-close", 1920, 0, onclose);
             this.close_button.anchor.set(1, 0);
-            UIComponent.setButtonSound(this.close_button);
             this.addChild(this.close_button);
             view.tooltip.bindStaticText(this.close_button, "Close the character sheet");
 
-            this.ship_name = new Phaser.Text(this.game, 758, 48, "", { align: "center", font: "30pt SpaceTac", fill: "#FFFFFF" });
-            this.ship_name.anchor.set(0.5, 0.5);
+            this.addChild(view.newText("Level", 420, 1052, 24));
+            this.addChild(view.newText("Available points", 894, 1052, 24));
+
+            this.ship_name = view.newText("", 758, 48, 30);
             this.addChild(this.ship_name);
 
-            this.ship_level = new Phaser.Text(this.game, 552, 1054, "", { align: "center", font: "30pt SpaceTac", fill: "#FFFFFF" });
-            this.ship_level.anchor.set(0.5, 0.5);
+            this.ship_level = view.newText("", 554, 1052, 30);
             this.addChild(this.ship_level);
 
             this.ship_experience = new ValueBar(this.view, "character-experience", ValueBarOrientation.EAST, 516, 1067);
             this.addChild(this.ship_experience.node);
 
-            this.ship_upgrade_points = new Phaser.Text(this.game, 1066, 1054, "", { align: "center", font: "30pt SpaceTac", fill: "#FFFFFF" });
-            this.ship_upgrade_points.anchor.set(0.5, 0.5);
+            this.ship_upgrade_points = view.newText("", 1068, 1052, 30);
             this.addChild(this.ship_upgrade_points);
 
             this.ship_upgrades = new Phaser.Group(this.game);
@@ -120,15 +120,13 @@ module TK.SpaceTac.UI {
             this.portraits.position.set(152, 0);
             this.addChild(this.portraits);
 
-            this.credits = new Phaser.Text(this.game, 136, 38, "", { align: "center", font: "30pt SpaceTac", fill: "#FFFFFF" });
-            this.credits.anchor.set(0.5, 0.5);
+            this.credits = view.newText("", 136, 38, 30);
             this.addChild(this.credits);
 
             this.equipments = new Phaser.Group(this.game);
             this.addChild(this.equipments);
 
-            this.mode_title = new Phaser.Text(this.game, 1548, 648, "", { align: "center", font: "18pt SpaceTac", fill: "#FFFFFF" });
-            this.mode_title.anchor.set(0.5, 0.5);
+            this.mode_title = view.newText("", 1566, 648, 18);
             this.addChild(this.mode_title);
 
             this.loot_next = new Phaser.Button(this.game, 1890, 850, "common-arrow", () => this.paginate(1));
@@ -142,9 +140,9 @@ module TK.SpaceTac.UI {
             UIComponent.setButtonSound(this.loot_prev);
             this.addChild(this.loot_prev);
 
-            let x1 = 664;
-            let x2 = 1066;
-            let y = 662;
+            let x1 = 402;
+            let x2 = 802;
+            let y = 640;
             this.addAttribute("hull_capacity", x1, y);
             this.addAttribute("shield_capacity", x1, y + 64);
             this.addAttribute("power_capacity", x1, y + 128);
@@ -163,37 +161,29 @@ module TK.SpaceTac.UI {
          * Add an attribute display
          */
         private addAttribute(attribute: keyof ShipAttributes, x: number, y: number) {
+            let button = this.view.newButton("character-attribute", x, y);
+            this.addChild(button);
+            this.view.tooltip.bindDynamicText(button, () => this.ship.getAttributeDescription(attribute));
+
             let attrname = capitalize(SHIP_ATTRIBUTES[attribute].name);
-            let name = new Phaser.Text(this.game, x - 144, y - 2, attrname,
+            let name = new Phaser.Text(this.game, 120, 22, attrname,
                 { align: "center", font: "20pt SpaceTac", fill: "#c9d8ef", stroke: "#395665", strokeThickness: 1 });
             name.anchor.set(0.5);
-            this.addChild(name);
+            button.addChild(name);
 
-            let button_value = new Phaser.Button(this.game, x, y, "common-transparent");
-            button_value.input.useHandCursor = false;
-            button_value.anchor.set(0.5);
-            button_value.width = 58;
-            button_value.height = 42;
-            this.addChild(button_value);
-            this.view.tooltip.bindDynamicText(button_value, () => this.ship.getAttributeDescription(attribute));
-
-            let value = new Phaser.Text(this.game, x, y, "",
-                { align: "center", font: "bold 18pt SpaceTac", fill: "#FFFFFF" });
-            value.anchor.set(0.5);
-            this.addChild(value);
+            let value = this.view.newText("", 264, 24, 18, "#ffffff", true, true);
+            button.addChild(value);
 
             this.attributes[attribute] = value;
 
             if (SHIP_SKILLS.hasOwnProperty(attribute)) {
-                let button = new Phaser.Button(this.game, x + 54, y - 4, "character-skill-upgrade", () => {
+                let upgrade_button = this.view.newButton("character-skill-upgrade", x + 292, y, () => {
                     this.ship.upgradeSkill(<keyof ShipSkills>attribute);
                     this.refresh();
                 });
-                UIComponent.setButtonSound(button);
-                button.anchor.set(0.5);
-                this.ship_upgrades.add(button);
+                this.ship_upgrades.add(upgrade_button);
 
-                this.view.tooltip.bindStaticText(button, `Spend one point to upgrade ${attrname}`);
+                this.view.tooltip.bindStaticText(upgrade_button, `Spend one point to upgrade ${attrname}`);
             }
         }
 
@@ -201,16 +191,18 @@ module TK.SpaceTac.UI {
          * Update the fleet sidebar
          */
         updateFleet(fleet: Fleet) {
-            if (fleet != this.fleet || fleet.ships.length != this.portraits.children.length) {
+            if (fleet != this.fleet || fleet.ships.length != this.members.length) {
                 this.portraits.removeAll(true);
+                this.members = [];
                 this.fleet = fleet;
             }
 
             fleet.ships.forEach((ship, idx) => {
-                let portrait = this.portraits.children.length > idx ? <CharacterFleetMember>this.portraits.getChildAt(idx) : null;
+                let portrait = this.members[idx];
                 if (!portrait) {
                     portrait = new CharacterFleetMember(this, 0, idx * 320, ship);
                     this.portraits.add(portrait);
+                    this.members.push(portrait);
                 }
                 portrait.setSelected(ship == this.ship);
             });
@@ -304,7 +296,7 @@ module TK.SpaceTac.UI {
             this.loot_slots.visible = false;
             this.mode_title.visible = false;
 
-            this.portraits.children.forEach((portrait: Phaser.Button) => portrait.loadTexture("character-ship"));
+            this.members.forEach(member => member.setSelected(false));
 
             this.view.audio.playOnce("ui-dialog-close");
 

src/ui/character/CharacterSlot.ts

@@ -8,13 +8,13 @@ module TK.SpaceTac.UI {
         sheet: CharacterSheet;
 
         constructor(sheet: CharacterSheet, x: number, y: number, slot: SlotType) {
-            super(sheet.game, x, y, "character-equipment-slot");
+            let info = sheet.view.getImageInfo("character-equipment-slot");
+            super(sheet.game, x, y, info.key, info.frame);
 
             this.sheet = sheet;
 
-            let sloticon = new Phaser.Button(this.game, 150, 150, `character-slots`);
-            sloticon.frame = slot;
-            sloticon.anchor.set(0.5, 0.5);
+            let sloticon = sheet.view.newButton(`character-slot-${SlotType[slot].toLowerCase()}`, 150, 150);
+            sloticon.anchor.set(0.5);
             this.addChild(sloticon);
             sheet.view.tooltip.bindStaticText(sloticon, `${SlotType[slot]} slot`);
         }