2017-05-03 18:12:13 +00:00
|
|
|
/// <reference path="UIComponent.ts" />
|
|
|
|
|
|
|
|
module TS.SpaceTac.UI {
|
|
|
|
/**
|
|
|
|
* UI component to allow the user to enter a small text
|
|
|
|
*/
|
|
|
|
export class UITextInput extends UIComponent {
|
|
|
|
private content: Phaser.Text
|
|
|
|
private maxlength: number
|
|
|
|
|
2017-05-04 23:19:28 +00:00
|
|
|
constructor(parent: UIComponent, width: number, height: number, maxlength?: number, fontcolor = "#FFFFFF") {
|
2017-05-03 18:12:13 +00:00
|
|
|
super(parent, width, height);
|
|
|
|
|
|
|
|
let input_bg = new Phaser.Image(this.game, 0, 0, "common-transparent");
|
|
|
|
input_bg.scale.set(width, height);
|
|
|
|
input_bg.inputEnabled = true;
|
|
|
|
input_bg.input.useHandCursor = true;
|
|
|
|
input_bg.events.onInputUp.add(() => this.setKeyboardFocus(key => this.processKey(key)));
|
|
|
|
this.addInternalChild(input_bg);
|
|
|
|
|
|
|
|
let fontsize = Math.ceil(height * 0.8);
|
2017-05-04 23:19:28 +00:00
|
|
|
this.content = new Phaser.Text(this.game, width / 2, height / 2, "", { align: "center", font: `${fontsize}px Arial`, fill: fontcolor });
|
2017-05-03 18:12:13 +00:00
|
|
|
this.content.anchor.set(0.5, 0.5);
|
|
|
|
this.addInternalChild(this.content);
|
|
|
|
|
|
|
|
this.maxlength = maxlength || (width / fontsize);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Process a key press
|
|
|
|
*/
|
|
|
|
processKey(key: string): void {
|
|
|
|
if (key.length == 1 && this.content.text.length < this.maxlength) {
|
|
|
|
this.content.text += key;
|
|
|
|
} else if (key == "Backspace" && this.content.text.length > 0) {
|
|
|
|
this.content.text = this.content.text.substr(0, this.content.text.length - 1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Get current text content
|
|
|
|
*/
|
|
|
|
getContent(): string {
|
|
|
|
return this.content.text;
|
|
|
|
}
|
2017-06-08 21:58:23 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Set the current text content
|
|
|
|
*/
|
|
|
|
setContent(content: string): void {
|
|
|
|
this.content.text = content.slice(0, this.maxlength);
|
|
|
|
}
|
2017-05-03 18:12:13 +00:00
|
|
|
}
|
|
|
|
}
|