From 26d994bb390a4065525281797d08b1fd19d1fd67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20Lemaire?= Date: Mon, 12 Mar 2018 00:07:41 +0100 Subject: [PATCH] Added ship renaming in creation mode --- TODO.md | 3 +- src/ui/battle/BattleView.ts | 2 +- src/ui/character/CharacterSheet.spec.ts | 12 +++--- src/ui/character/CharacterSheet.ts | 40 ++++++++++++++------ src/ui/character/FleetCreationView.ts | 2 +- src/ui/common/UITextDialog.ts | 49 +++++++++++++++++++++++++ src/ui/map/UniverseMapView.ts | 2 +- 7 files changed, 87 insertions(+), 23 deletions(-) create mode 100644 src/ui/common/UITextDialog.ts diff --git a/TODO.md b/TODO.md index e429670..344da14 100644 --- a/TODO.md +++ b/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 diff --git a/src/ui/battle/BattleView.ts b/src/ui/battle/BattleView.ts index 5876f58..8c31fc0 100644 --- a/src/ui/battle/BattleView.ts +++ b/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); } } diff --git a/src/ui/character/CharacterSheet.spec.ts b/src/ui/character/CharacterSheet.spec.ts index 6fa6bb4..8756d70 100644 --- a/src/ui/character/CharacterSheet.spec.ts +++ b/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"); }); }); diff --git a/src/ui/character/CharacterSheet.ts b/src/ui/character/CharacterSheet.ts index 448f4dd..a767c69 100644 --- a/src/ui/character/CharacterSheet.ts +++ b/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) - interactive = true + // Global sheet mode + 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 - close_button: Phaser.Button + // Buttons + 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.interactive = interactive; - } + this.mode = mode; 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); } } } diff --git a/src/ui/character/FleetCreationView.ts b/src/ui/character/FleetCreationView.ts index 8e22749..606f799 100644 --- a/src/ui/character/FleetCreationView.ts +++ b/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); } diff --git a/src/ui/common/UITextDialog.ts b/src/ui/common/UITextDialog.ts new file mode 100644 index 0000000..dcec3cd --- /dev/null +++ b/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 + 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 { + 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 { + let dlg = new UITextDialog(view, message, initial); + let result = dlg.result; + return result.then(confirmed => { + dlg.close(); + return confirmed; + }); + } + } +} \ No newline at end of file diff --git a/src/ui/map/UniverseMapView.ts b/src/ui/map/UniverseMapView.ts index 4405bba..b6ad689 100644 --- a/src/ui/map/UniverseMapView.ts +++ b/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); } }