2017-02-09 00:00:35 +00:00
|
|
|
module TS.SpaceTac.UI {
|
2017-08-24 22:47:34 +00:00
|
|
|
/**
|
|
|
|
* Orientation of a ValueBar.
|
|
|
|
*
|
|
|
|
* A EAST bar will have 0 at the west, and 1 at the east.
|
|
|
|
*/
|
|
|
|
export enum ValueBarOrientation {
|
|
|
|
NORTH,
|
|
|
|
SOUTH,
|
|
|
|
EAST,
|
|
|
|
WEST,
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Bar to display a value with a graphical bar
|
|
|
|
*
|
|
|
|
* This will crop the image according to the value
|
|
|
|
*/
|
|
|
|
export class ValueBar {
|
|
|
|
// Phaser node
|
|
|
|
node: Phaser.Image
|
|
|
|
|
|
|
|
// Orientation
|
|
|
|
private orientation: ValueBarOrientation
|
2015-02-22 00:00:00 +00:00
|
|
|
|
2015-01-08 00:00:00 +00:00
|
|
|
// Current value
|
2017-08-24 22:47:34 +00:00
|
|
|
private current: number
|
2015-01-08 00:00:00 +00:00
|
|
|
|
|
|
|
// Maximal value
|
2017-08-24 22:47:34 +00:00
|
|
|
private maximal: number
|
2015-01-08 00:00:00 +00:00
|
|
|
|
|
|
|
// Proportional value
|
2017-08-24 22:47:34 +00:00
|
|
|
private proportional: number
|
|
|
|
|
|
|
|
// Original size
|
|
|
|
private original_width: number
|
|
|
|
private original_height: number
|
|
|
|
private crop_rect: Phaser.Rectangle
|
|
|
|
|
|
|
|
constructor(view: BaseView, name: string, orientation: ValueBarOrientation, x = 0, y = 0) {
|
|
|
|
this.node = view.newImage(name, x, y);
|
|
|
|
this.orientation = orientation;
|
|
|
|
this.original_width = this.node.width;
|
|
|
|
this.original_height = this.node.height;
|
|
|
|
|
|
|
|
this.crop_rect = new Phaser.Rectangle(0, 0, this.original_width, this.original_height);
|
|
|
|
this.node.crop(this.crop_rect);
|
|
|
|
|
|
|
|
if (orientation == ValueBarOrientation.WEST) {
|
|
|
|
this.node.anchor.set(1, 0);
|
|
|
|
} else if (orientation == ValueBarOrientation.NORTH) {
|
|
|
|
this.node.anchor.set(0, 1);
|
|
|
|
}
|
2015-02-22 00:00:00 +00:00
|
|
|
|
2015-01-08 00:00:00 +00:00
|
|
|
this.setValue(0, 1000);
|
|
|
|
}
|
|
|
|
|
2017-08-24 22:47:34 +00:00
|
|
|
/**
|
|
|
|
* Update the phaser graphics to match the value
|
|
|
|
*/
|
2015-01-08 00:00:00 +00:00
|
|
|
update() {
|
2017-08-24 22:47:34 +00:00
|
|
|
// TODO animation
|
|
|
|
switch (this.orientation) {
|
|
|
|
case ValueBarOrientation.EAST:
|
|
|
|
this.crop_rect.width = Math.round(this.original_width * this.proportional);
|
|
|
|
break;
|
|
|
|
case ValueBarOrientation.WEST:
|
|
|
|
this.crop_rect.width = Math.round(this.original_width * this.proportional);
|
|
|
|
this.crop_rect.x = this.original_width - this.crop_rect.width;
|
|
|
|
break;
|
|
|
|
case ValueBarOrientation.NORTH:
|
|
|
|
this.crop_rect.height = Math.round(this.original_height * this.proportional);
|
|
|
|
this.crop_rect.y = this.original_height - this.crop_rect.height;
|
|
|
|
break;
|
|
|
|
case ValueBarOrientation.SOUTH:
|
|
|
|
this.crop_rect.height = Math.round(this.original_height * this.proportional);
|
|
|
|
break;
|
2015-01-08 00:00:00 +00:00
|
|
|
}
|
2017-08-24 22:47:34 +00:00
|
|
|
this.node.updateCrop();
|
2015-01-08 00:00:00 +00:00
|
|
|
}
|
|
|
|
|
2017-06-22 22:37:38 +00:00
|
|
|
/**
|
|
|
|
* Set the current value, and maximal value
|
|
|
|
*/
|
2015-01-08 00:00:00 +00:00
|
|
|
setValue(current: number, maximal: number = -1) {
|
2015-04-28 16:35:48 +00:00
|
|
|
this.current = current > 0 ? current : 0;
|
2015-01-08 00:00:00 +00:00
|
|
|
if (maximal >= 0) {
|
|
|
|
this.maximal = maximal;
|
|
|
|
}
|
|
|
|
if (this.maximal === 0) {
|
|
|
|
this.proportional = 0;
|
|
|
|
} else {
|
|
|
|
this.proportional = this.current / this.maximal;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.update();
|
|
|
|
}
|
|
|
|
|
2017-06-22 22:37:38 +00:00
|
|
|
/**
|
|
|
|
* Get current raw value
|
|
|
|
*/
|
|
|
|
getValue(): number {
|
|
|
|
return this.current;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Get the proportional (in 0.0-1.0 range) value
|
|
|
|
*/
|
2015-01-08 00:00:00 +00:00
|
|
|
getProportionalValue(): number {
|
|
|
|
return this.proportional;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|