diff --git a/src/ui/TestGame.ts b/src/ui/TestGame.ts index 80a884b..eb5a9f9 100644 --- a/src/ui/TestGame.ts +++ b/src/ui/TestGame.ts @@ -133,20 +133,6 @@ module TK.SpaceTac.UI.Specs { } } - /** - * Check that a layer contains the given component at a given index - */ - export function checkComponentInLayer(check: TestContext, layer: UIContainer, index: number, component: UIComponent) { - if (index >= layer.list.length) { - check.fail(`Not enough children in group ${layer.name} for ${component} at index ${index}`); - } else { - let child = layer.list[index]; - if (child !== (component).container) { - check.fail(`${component} is not at index ${index} in ${layer.name}`); - } - } - } - /** * Simulate a click on a button */ diff --git a/src/ui/common/UIComponent.spec.ts b/src/ui/common/UIComponent.spec.ts deleted file mode 100644 index 40925dc..0000000 --- a/src/ui/common/UIComponent.spec.ts +++ /dev/null @@ -1,48 +0,0 @@ -module TK.SpaceTac.UI.Specs { - testing("UIComponent", test => { - let testgame = setupEmptyView(test); - - test.case("controls visibility", check => { - let component = new UIComponent(testgame.view, 50, 50); - - let container = (component).container; - check.equals(container.visible, true); - - component.setVisible(false); - check.equals(container.visible, false); - - component.setVisible(true); - check.equals(container.visible, true); - - // with transition - component.setVisible(false, 500); - check.equals(container.visible, true); - check.equals(testgame.view.animations.simulate(container, 'alpha'), [1, 0.75, 0.5, 0.25, 0]); - }); - - test.case("sets position inside parent", check => { - let comp1 = new UIComponent(testgame.view, 100, 100); - check.equals(comp1.getPosition(), [0, 0]); - comp1.setPositionInsideParent(1, 1); - check.equals(comp1.getPosition(), [1820, 980]); - comp1.setPositionInsideParent(0.5, 0.5); - check.equals(comp1.getPosition(), [910, 490]); - - let comp2 = new UIComponent(comp1, 50, 50); - check.equals(comp2.getPosition(), [910, 490]); - check.equals(comp2.getPosition(true), [0, 0]); - comp2.setPositionInsideParent(1, 0); - check.equals(comp2.getPosition(), [960, 490]); - check.equals(comp2.getPosition(true), [50, 0]); - - comp1.setPositionInsideParent(0, 0); - check.equals(comp1.getPosition(), [0, 0]); - check.equals(comp2.getPosition(), [50, 0]); - - comp1.setPositionInsideParent(0.654, 0.321, false); - check.equals(comp1.getPosition(), [1190.28, 314.58]); - comp1.setPositionInsideParent(0.654, 0.321); - check.equals(comp1.getPosition(), [1190, 315]); - }); - }); -} diff --git a/src/ui/common/UIComponent.ts b/src/ui/common/UIComponent.ts deleted file mode 100644 index 2628c9c..0000000 --- a/src/ui/common/UIComponent.ts +++ /dev/null @@ -1,214 +0,0 @@ -module TK.SpaceTac.UI { - /** - * Union of all UI components types - */ - export type UIComponentT = UIContainer | UIImage | UIButton | UIGraphics | UIText; - - /** - * Interface to add a component to a group - */ - export interface UIGroupableI { - addToGroup(group: UIContainer): void; - } - - /** - * Base class for UI components - * - * DEPRECATED - Use UIBuilder instead - */ - export class UIComponent { - private background: UIImage | UIGraphics | null - protected readonly view: BaseView - protected readonly parent: UIComponent | null - readonly container: UIContainer - 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; - this.height = height; - - if (parent instanceof UIComponent) { - this.view = parent.view; - this.parent = parent; - } else { - this.view = parent; - this.parent = null; - } - - this.container = this.createInternalNode(); - if (this.parent) { - this.parent.addInternalChild(this.container); - } else { - this.view.add.existing(this.container); - } - this.container.setSize(width, height); - this.builder = new UIBuilder(this.view, this.container); - - if (background_key) { - this.background = this.builder.image(background_key, 0, 0, false); - } else { - this.background = null; - } - } - - get game(): MainUI { - return this.view.gameui; - } - - jasmineToString(): string { - return this.toString(); - } - - toString(): string { - return `<${classname(this)}>`; - } - - /** - * Draw a background - */ - drawBackground(fill: number, border?: number, border_width = 0, alpha = 1) { - if (this.background) { - this.background.destroy(); - } - - let rect = new Phaser.Geom.Rectangle(0, 0, this.width, this.height); - this.background = this.addInternalChild(new UIGraphics(this.view, "background")); - this.background.addRectangle(rect, fill, border_width, border, alpha); - } - - /** - * Move the a parent's layer - */ - moveToLayer(layer: UIContainer) { - layer.add(this.container); - } - - /** - * Destroy the component - */ - destroy() { - this.container.destroy(); - } - - /** - * Create the internal phaser node - */ - protected createInternalNode(): UIContainer { - let result = new UIContainer(this.view); - result.setName(classname(this)); - return result; - } - - /** - * Add an other internal component as child - */ - protected addInternalChild(child: T): T { - this.container.add(child); - return child; - } - - /** - * Set the component's visibility, with optional transition (in milliseconds) - */ - setVisible(visible: boolean, transition = 0): void { - this.view.animations.setVisible(this.container, visible, transition); - } - - /** - * Get the component's declared size - */ - getSize(): [number, number] { - return [this.width, this.height]; - } - - /** - * Get the width and height of parent - */ - getParentSize(): [number, number] { - if (this.parent) { - return this.parent.getSize(); - } else { - return [this.view.getWidth(), this.view.getHeight()]; - } - } - - /** - * Return the component's position (either relative to its parent, or absolute in the view) - */ - getPosition(relative = false): [number, number] { - if (relative || !this.parent) { - return [this.container.x, this.container.y]; - } else { - let [px, py] = this.parent.getPosition(); - return [px + this.container.x, py + this.container.y]; - } - } - - /** - * Set the position in pixels. - */ - setPosition(x: number, y: number): void { - this.container.setPosition(x, y); - } - - /** - * Position the component inside the boundaries of its parent. - * - * (0, 0) is the top-left anchoring, (1, 1) is the bottom-right one. - * - * If *pixelsnap* is true, position will be rounded to pixel. - */ - setPositionInsideParent(x: number, y: number, pixelsnap = true): void { - let [pwidth, pheight] = this.getParentSize(); - let [width, height] = this.getSize(); - let rx = (pwidth - width) * x; - let ry = (pheight - height) * y; - if (pixelsnap) { - this.container.setPosition(Math.round(rx), Math.round(ry)); - } else { - this.container.setPosition(rx, ry); - } - } - - /** - * Clear from all added content. - */ - clearContent(): void { - let offset = this.background ? 1 : 0; - while (this.container.list.length > offset) { - this.container.remove(this.container.list[offset], true); - } - } - - /** - * Add a button in the component, positioning its center. - * - * DEPRECATED - Use UIBuilder directly - */ - addButton(x: number, y: number, on_click: Function, background: string, tooltip = ""): UIButton { - return this.builder.button(background, x, y, on_click, tooltip, undefined, { center: true }); - } - - /** - * Add a static text. - * - * DEPRECATED - Use UIBuilder directly - */ - addText(x: number, y: number, content: string, color = "#ffffff", size = 16, bold = false, center = true, width = 0, vcenter = center): UIText { - return this.builder.text(content, x, y, { color: color, size: size, bold: bold, center: center, width: width, vcenter: vcenter }); - } - - /** - * Add a static image, from atlases, positioning its center. - * - * DEPRECATED - Use UIBuilder directly - */ - addImage(x: number, y: number, name: string, scale = 1): UIImage { - let result = this.builder.image(name, x, y, true); - result.setScale(scale); - return result; - } - } -} diff --git a/src/ui/common/UIConversation.ts b/src/ui/common/UIConversation.ts index 207d286..e543158 100644 --- a/src/ui/common/UIConversation.ts +++ b/src/ui/common/UIConversation.ts @@ -1,5 +1,3 @@ -/// - module TK.SpaceTac.UI { export type UIConversationPiece = { interlocutor: Ship, message: string } export type UIConversationCallback = (conversation: UIConversation, step: number) => boolean diff --git a/src/ui/map/ActiveMissionsDisplay.ts b/src/ui/map/ActiveMissionsDisplay.ts index 7ee753b..25093fe 100644 --- a/src/ui/map/ActiveMissionsDisplay.ts +++ b/src/ui/map/ActiveMissionsDisplay.ts @@ -1,16 +1,20 @@ -/// +/// module TK.SpaceTac.UI { /** * Widget to display the active missions list */ - export class ActiveMissionsDisplay extends UIComponent { + export class ActiveMissionsDisplay { + readonly container: UIContainer + private builder: UIBuilder private missions: ActiveMissions private hash: number private markers?: MissionLocationMarker - constructor(parent: BaseView, missions: ActiveMissions, markers?: MissionLocationMarker) { - super(parent, 520, 240); + constructor(view: BaseView, missions: ActiveMissions, markers?: MissionLocationMarker) { + let builder = new UIBuilder(view); + this.container = builder.container("active-missions"); + this.builder = builder.in(this.container); this.missions = missions; this.hash = missions.getHash(); this.markers = markers; @@ -18,6 +22,18 @@ module TK.SpaceTac.UI { this.update(); } + /** + * Move to a specific location inside a parent + */ + moveTo(parent: UIContainer, x: number, y: number): void { + parent.add(this.container); + this.container.setPosition(x, y); + } + + setVisible(visible: boolean, duration = 0): void { + this.container.setVisible(visible, duration); + } + /** * Check if the active missions' status changed */ @@ -38,7 +54,7 @@ module TK.SpaceTac.UI { * Update the current missions list */ private update() { - this.clearContent(); + this.container.removeAll(true); let markers: [StarLocation | Star, string][] = []; @@ -47,8 +63,14 @@ module TK.SpaceTac.UI { let offset = 245 - active.length * spacing; active.forEach((mission, idx) => { let image = mission.main ? "map-mission-main" : "map-mission-standard"; - this.addImage(35, offset + spacing * idx, image); - this.addText(90, offset + spacing * idx, mission.current_part.title, "#d2e1f3", 20, false, false, 430, true); + this.builder.image(image, 35, offset + spacing * idx, true); + this.builder.text(mission.current_part.title, 90, offset + spacing * idx, { + color: "#d2e1f3", + size: 20, + width: 430, + center: false, + vcenter: true + }); let location = mission.current_part.getLocationHint(); if (location) { diff --git a/src/ui/map/MapLocationMenu.ts b/src/ui/map/MapLocationMenu.ts index a7f9748..975c6fb 100644 --- a/src/ui/map/MapLocationMenu.ts +++ b/src/ui/map/MapLocationMenu.ts @@ -1,5 +1,3 @@ -/// - module TK.SpaceTac.UI { /** * Menu to display selected map location, and associated actions diff --git a/src/ui/map/UniverseMapView.ts b/src/ui/map/UniverseMapView.ts index 36a8720..e0d379e 100644 --- a/src/ui/map/UniverseMapView.ts +++ b/src/ui/map/UniverseMapView.ts @@ -105,8 +105,7 @@ module TK.SpaceTac.UI { this.actions = new MapLocationMenu(this, this.layer_overlay, 30, 30); this.missions = new ActiveMissionsDisplay(this, this.player.missions, this.mission_markers); - this.missions.setPosition(20, 720); - this.missions.moveToLayer(this.layer_overlay); + this.missions.moveTo(this.layer_overlay, 20, 720); builder.in(this.layer_overlay, builder => { this.zoom_in = builder.button("map-zoom-in", 1787, 54, () => this.setZoom(this.zoom + 1), "Zoom in");