70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
module TK.SpaceTac.UI {
|
|
/**
|
|
* Style for a message display
|
|
*/
|
|
export class ProgressiveMessageStyle {
|
|
// Center the message or not
|
|
center = false
|
|
|
|
// Padding between the content and the external border
|
|
padding = 10
|
|
|
|
// Background fill color
|
|
background = 0x202225
|
|
alpha = 0.9
|
|
|
|
// Border color and width
|
|
border = 0x404450
|
|
border_width = 2
|
|
|
|
// Text font style
|
|
text_color = "#ffffff"
|
|
text_size = 20
|
|
text_bold = true
|
|
|
|
// Portrait or image to display (from atlases)
|
|
image = ""
|
|
image_size = 0
|
|
image_caption = ""
|
|
}
|
|
|
|
/**
|
|
* Rectangle to display a message that may appear progressively, as in dialogs
|
|
*/
|
|
export class ProgressiveMessage extends UIComponent {
|
|
constructor(parent: BaseView | UIComponent, width: number, height: number, message: string, style = new ProgressiveMessageStyle()) {
|
|
super(parent, width, height);
|
|
|
|
this.drawBackground(style.background, style.border, style.border_width, style.alpha);
|
|
|
|
let offset = 0;
|
|
if (style.image_size && style.image) {
|
|
offset = style.image_size + style.padding;
|
|
width -= offset;
|
|
|
|
let ioffset = style.padding + Math.floor(style.image_size / 2);
|
|
this.addImage(ioffset, ioffset, style.image);
|
|
|
|
if (style.image_caption) {
|
|
let text_size = Math.ceil(style.text_size * 0.6);
|
|
this.addText(ioffset, style.padding + style.image_size + text_size, style.image_caption,
|
|
style.text_color, text_size, false, true, style.image_size);
|
|
}
|
|
}
|
|
|
|
let text = this.addText(offset + (style.center ? width / 2 : style.padding), style.center ? height / 2 : style.padding, message,
|
|
style.text_color, style.text_size, style.text_bold, style.center, width - style.padding * 2, style.center);
|
|
|
|
let i = 0;
|
|
let colorchar = () => {
|
|
text.clearColors();
|
|
if (i < message.length) {
|
|
text.addColor("transparent", i);
|
|
i++;
|
|
this.view.timer.schedule(10, colorchar);
|
|
}
|
|
}
|
|
colorchar();
|
|
}
|
|
}
|
|
} |