Removed deprecated UIComponent
This commit is contained in:
parent
3d0ac11c91
commit
296a9d6839
|
@ -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 !== (<any>component).container) {
|
|
||||||
check.fail(`${component} is not at index ${index} in ${layer.name}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Simulate a click on a button
|
* Simulate a click on a button
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -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 = <UIContainer>(<any>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]);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
|
@ -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<T extends UIComponentT>(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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,5 +1,3 @@
|
||||||
/// <reference path="UIComponent.ts" />
|
|
||||||
|
|
||||||
module TK.SpaceTac.UI {
|
module TK.SpaceTac.UI {
|
||||||
export type UIConversationPiece = { interlocutor: Ship, message: string }
|
export type UIConversationPiece = { interlocutor: Ship, message: string }
|
||||||
export type UIConversationCallback = (conversation: UIConversation, step: number) => boolean
|
export type UIConversationCallback = (conversation: UIConversation, step: number) => boolean
|
||||||
|
|
|
@ -1,16 +1,20 @@
|
||||||
/// <reference path="../common/UIComponent.ts" />
|
/// <reference path="../common/UIContainer.ts" />
|
||||||
|
|
||||||
module TK.SpaceTac.UI {
|
module TK.SpaceTac.UI {
|
||||||
/**
|
/**
|
||||||
* Widget to display the active missions list
|
* 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 missions: ActiveMissions
|
||||||
private hash: number
|
private hash: number
|
||||||
private markers?: MissionLocationMarker
|
private markers?: MissionLocationMarker
|
||||||
|
|
||||||
constructor(parent: BaseView, missions: ActiveMissions, markers?: MissionLocationMarker) {
|
constructor(view: BaseView, missions: ActiveMissions, markers?: MissionLocationMarker) {
|
||||||
super(parent, 520, 240);
|
let builder = new UIBuilder(view);
|
||||||
|
this.container = builder.container("active-missions");
|
||||||
|
this.builder = builder.in(this.container);
|
||||||
this.missions = missions;
|
this.missions = missions;
|
||||||
this.hash = missions.getHash();
|
this.hash = missions.getHash();
|
||||||
this.markers = markers;
|
this.markers = markers;
|
||||||
|
@ -18,6 +22,18 @@ module TK.SpaceTac.UI {
|
||||||
this.update();
|
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
|
* Check if the active missions' status changed
|
||||||
*/
|
*/
|
||||||
|
@ -38,7 +54,7 @@ module TK.SpaceTac.UI {
|
||||||
* Update the current missions list
|
* Update the current missions list
|
||||||
*/
|
*/
|
||||||
private update() {
|
private update() {
|
||||||
this.clearContent();
|
this.container.removeAll(true);
|
||||||
|
|
||||||
let markers: [StarLocation | Star, string][] = [];
|
let markers: [StarLocation | Star, string][] = [];
|
||||||
|
|
||||||
|
@ -47,8 +63,14 @@ module TK.SpaceTac.UI {
|
||||||
let offset = 245 - active.length * spacing;
|
let offset = 245 - active.length * spacing;
|
||||||
active.forEach((mission, idx) => {
|
active.forEach((mission, idx) => {
|
||||||
let image = mission.main ? "map-mission-main" : "map-mission-standard";
|
let image = mission.main ? "map-mission-main" : "map-mission-standard";
|
||||||
this.addImage(35, offset + spacing * idx, image);
|
this.builder.image(image, 35, offset + spacing * idx, true);
|
||||||
this.addText(90, offset + spacing * idx, mission.current_part.title, "#d2e1f3", 20, false, false, 430, 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();
|
let location = mission.current_part.getLocationHint();
|
||||||
if (location) {
|
if (location) {
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
/// <reference path="../common/UIComponent.ts" />
|
|
||||||
|
|
||||||
module TK.SpaceTac.UI {
|
module TK.SpaceTac.UI {
|
||||||
/**
|
/**
|
||||||
* Menu to display selected map location, and associated actions
|
* Menu to display selected map location, and associated actions
|
||||||
|
|
|
@ -105,8 +105,7 @@ module TK.SpaceTac.UI {
|
||||||
this.actions = new MapLocationMenu(this, this.layer_overlay, 30, 30);
|
this.actions = new MapLocationMenu(this, this.layer_overlay, 30, 30);
|
||||||
|
|
||||||
this.missions = new ActiveMissionsDisplay(this, this.player.missions, this.mission_markers);
|
this.missions = new ActiveMissionsDisplay(this, this.player.missions, this.mission_markers);
|
||||||
this.missions.setPosition(20, 720);
|
this.missions.moveTo(this.layer_overlay, 20, 720);
|
||||||
this.missions.moveToLayer(this.layer_overlay);
|
|
||||||
|
|
||||||
builder.in(this.layer_overlay, builder => {
|
builder.in(this.layer_overlay, builder => {
|
||||||
this.zoom_in = builder.button("map-zoom-in", 1787, 54, () => this.setZoom(this.zoom + 1), "Zoom in");
|
this.zoom_in = builder.button("map-zoom-in", 1787, 54, () => this.setZoom(this.zoom + 1), "Zoom in");
|
||||||
|
|
Loading…
Reference in a new issue