Added ship renaming in creation mode

TODO.md

@@ -26,7 +26,6 @@ Character sheet
 
 * Replace the close icon by a validation icon in creation view
 * Allow to change/buy ship model
-* Allow to rename a personality (in creation view only)
 * Add personality indicators (editable in creation view)
 
 Battle
@@ -86,7 +85,7 @@ Common UI
 * Fix calling setHoverClick several times on the same button not working as expected
 * Fix tooltip remaining when the hovered object is hidden by animations
 * If ProgressiveMessage animation performance is bad, show the text directly
-* Add caret/focus to text input
+* Add caret/focus and configurable background 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
 * Mobile: targetting in two times, using a draggable target indicator

src/ui/battle/BattleView.ts

@@ -286,7 +286,7 @@ module TK.SpaceTac.UI {
             if (this.targetting.active) {
                 this.validationPressed();
             } else if (this.ship_hovered && this.player.is(this.ship_hovered.fleet.player) && this.interacting) {
-                this.character_sheet.show(this.ship_hovered, undefined, undefined, false);
+                this.character_sheet.show(this.ship_hovered, CharacterSheetMode.DISPLAY);
                 this.setShipHovered(null);
             }
         }

src/ui/character/CharacterSheet.spec.ts

@@ -17,7 +17,7 @@ module TK.SpaceTac.UI.Specs {
                 let ship2 = fleet.addShip();
                 ship2.name = "Ship 2";
 
-                sheet.show(ship1, false);
+                sheet.show(ship1, undefined, false);
 
                 check.equals(sheet.x, 0);
                 check.equals(sheet.group_portraits.length, 2);
@@ -36,20 +36,20 @@ module TK.SpaceTac.UI.Specs {
 
                 let ship = new Ship();
                 ship.critical = true;
-                sheet.show(ship);
+                sheet.show(ship, CharacterSheetMode.EDITION);
                 check.equals(sheet.isInteractive(), false, "critical ship");
 
                 ship.critical = false;
-                sheet.show(ship);
+                sheet.show(ship, CharacterSheetMode.EDITION);
                 check.equals(sheet.isInteractive(), true, "normal ship");
 
-                sheet.show(ship, undefined, undefined, false);
+                sheet.show(ship, CharacterSheetMode.DISPLAY);
                 check.equals(sheet.isInteractive(), false, "interactivity disabled");
 
-                sheet.show(ship);
+                sheet.show(ship, CharacterSheetMode.DISPLAY);
                 check.equals(sheet.isInteractive(), false, "interactivity stays disabled");
 
-                sheet.show(ship, undefined, undefined, true);
+                sheet.show(ship, CharacterSheetMode.EDITION);
                 check.equals(sheet.isInteractive(), true, "interactivity reenabled");
             });
         });

src/ui/character/CharacterSheet.ts

@@ -1,10 +1,16 @@
 module TK.SpaceTac.UI {
+    export enum CharacterSheetMode {
+        CREATION,
+        EDITION,
+        DISPLAY
+    }
+
     /**
      * Character sheet, displaying ship characteristics
      */
     export class CharacterSheet extends Phaser.Image {
-        // Globally interactive sheet (equipment can be moved, points upgraded)
+        // Global sheet mode
-        interactive = true
+        mode: CharacterSheetMode = CharacterSheetMode.DISPLAY
 
         // Parent view
         view: BaseView
@@ -22,8 +28,9 @@ module TK.SpaceTac.UI {
         group_actions: Phaser.Image
         group_upgrades: Phaser.Group
 
-        // Close button
+        // Buttons
-        close_button: Phaser.Button
+        close_button: UIButton
+        rename_button: UIButton
 
         // Currently displayed fleet
         fleet?: Fleet
@@ -74,7 +81,7 @@ module TK.SpaceTac.UI {
             let name_bg = this.builder.image("character-name-display", 434, 940, true);
             this.text_name = this.builder.in(name_bg).text("", 0, 0, { size: 28 });
 
-            this.builder.button("character-name-button", 656, 890, () => this.renamePersonality(), "Rename personality");
+            this.rename_button = this.builder.button("character-name-button", 656, 890, () => this.renamePersonality(), "Rename personality");
 
             let points_bg = this.builder.image("character-level-upgrades", 582, 986);
             this.builder.in(points_bg, builder => {
@@ -98,14 +105,24 @@ module TK.SpaceTac.UI {
          * Check if the sheet should be interactive
          */
         isInteractive(): boolean {
-            return this.ship ? (this.interactive && !this.ship.critical) : false;
+            return this.ship ? (this.mode != CharacterSheetMode.DISPLAY && !this.ship.critical) : false;
         }
 
         /**
          * Open a dialog to rename the ship's personality
          */
         renamePersonality(): void {
-            // TODO
+            if (!this.ship) {
+                return;
+            }
+            let ship = this.ship;
+
+            UITextDialog.ask(this.view, "Choose a name for this ship's personality", ship.name || undefined).then(name => {
+                if (bool(name)) {
+                    ship.name = name;
+                    this.refreshShipInfo();
+                }
+            });
         }
 
         /**
@@ -121,6 +138,7 @@ module TK.SpaceTac.UI {
                 this.text_description.setText(ship.model.getDescription());
                 this.text_upgrade_points.setText(`${ship.getAvailableUpgradePoints()}`);
                 this.valuebar_experience.setValue(ship.level.getExperience(), ship.level.getNextGoal());
+                this.rename_button.visible = this.mode == CharacterSheetMode.CREATION;
             }
         }
 
@@ -285,11 +303,9 @@ module TK.SpaceTac.UI {
         /**
          * Show the sheet for a given ship
          */
-        show(ship: Ship, animate = true, sound = true, interactive?: boolean) {
+        show(ship: Ship, mode: CharacterSheetMode = CharacterSheetMode.DISPLAY, animate = true, sound = true) {
             this.ship = ship;
-            if (typeof interactive != "undefined") {
+            this.mode = mode;
-                this.interactive = interactive;
-            }
 
             this.refreshShipInfo();
             this.refreshUpgrades();
@@ -327,7 +343,7 @@ module TK.SpaceTac.UI {
          */
         refresh() {
             if (this.ship) {
-                this.show(this.ship, false, false);
+                this.show(this.ship, this.mode, false, false);
             }
         }
     }

src/ui/character/FleetCreationView.ts

@@ -20,7 +20,7 @@ module TK.SpaceTac.UI {
             this.built_fleet.credits = this.built_fleet.ships.length * 1000;
 
             this.character_sheet = new CharacterSheet(this, () => this.validateFleet());
-            this.character_sheet.show(this.built_fleet.ships[0], false);
+            this.character_sheet.show(this.built_fleet.ships[0], CharacterSheetMode.CREATION, false);
             this.getLayer("characters").add(this.character_sheet);
         }
 

src/ui/common/UITextDialog.ts

@@ -0,0 +1,49 @@
+module TK.SpaceTac.UI {
+    /**
+     * Dialog asking for a text input
+     */
+    export class UITextDialog extends UIDialog {
+        private result: Promise<string | null>
+        private result_resolver?: (input: string | null) => void
+
+        constructor(view: BaseView, message: string, initial?: string) {
+            super(view);
+
+            this.addText(this.width * 0.5, this.height * 0.3, message, "#90FEE3", 32);
+
+            let input = new UITextInput(this, 600, 80, 16);
+            input.setPositionInsideParent(0.5, 0.5);
+            if (initial) {
+                input.setContent(initial);
+            }
+
+            this.result = new Promise((resolve, reject) => {
+                this.result_resolver = resolve;
+                this.addButton(this.width * 0.4, this.height * 0.7, () => resolve(null), "common-button-cancel");
+                this.addButton(this.width * 0.6, this.height * 0.7, () => resolve(input.getContent()), "common-button-ok");
+            });
+        }
+
+        /**
+         * Force the result (simulate filling the input and validation)
+         */
+        async forceResult(input: string | null): Promise<void> {
+            if (this.result_resolver) {
+                this.result_resolver(input);
+                await this.result;
+            }
+        }
+
+        /**
+         * Convenient function to ask for an input, and have a promise of result
+         */
+        static ask(view: BaseView, message: string, initial?: string): Promise<string | null> {
+            let dlg = new UITextDialog(view, message, initial);
+            let result = dlg.result;
+            return result.then(confirmed => {
+                dlg.close();
+                return confirmed;
+            });
+        }
+    }
+}

src/ui/map/UniverseMapView.ts

@@ -310,7 +310,7 @@ module TK.SpaceTac.UI {
         openShop(): void {
             let location = this.session.getLocation();
             if (this.interactive && location && location.shop) {
-                this.character_sheet.show(this.player.fleet.ships[0]);
+                this.character_sheet.show(this.player.fleet.ships[0], CharacterSheetMode.EDITION);
             }
         }