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
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
export type UIConversationPiece = { interlocutor: Ship, message: string }
|
||||
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 {
|
||||
/**
|
||||
* 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) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
/// <reference path="../common/UIComponent.ts" />
|
||||
|
||||
module TK.SpaceTac.UI {
|
||||
/**
|
||||
* 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.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");
|
||||
|
|
|
|||
Loading…
Reference in New Issue