273 lines
8.7 KiB
TypeScript
273 lines
8.7 KiB
TypeScript
module TK.SpaceTac.UI {
|
|
/**
|
|
* Base class for all game views
|
|
*/
|
|
export class BaseView extends Phaser.State {
|
|
// Link to the root UI
|
|
gameui!: MainUI
|
|
|
|
// Message notifications
|
|
messages!: Messages
|
|
|
|
// Input and key bindings
|
|
inputs!: InputManager
|
|
|
|
// Animations
|
|
animations!: Animations
|
|
|
|
// Timing
|
|
timer!: Timer
|
|
|
|
// Tooltip
|
|
tooltip_layer!: Phaser.Group
|
|
tooltip!: Tooltip
|
|
|
|
// Layers
|
|
layers!: Phaser.Group
|
|
|
|
// Modal dialogs
|
|
dialogs_layer!: Phaser.Group
|
|
dialogs_opened: UIDialog[] = []
|
|
|
|
// Verbose debug output
|
|
readonly debug = false
|
|
|
|
// Get the size of display
|
|
getWidth(): number {
|
|
return this.game.width || 1280;
|
|
}
|
|
getHeight(): number {
|
|
return this.game.height || 720;
|
|
}
|
|
getMidWidth(): number {
|
|
return this.getWidth() / 2;
|
|
}
|
|
getMidHeight(): number {
|
|
return this.getHeight() / 2;
|
|
}
|
|
|
|
init(...args: any[]) {
|
|
this.gameui = <MainUI>this.game;
|
|
this.timer = new Timer(this.gameui.headless);
|
|
}
|
|
|
|
create() {
|
|
// Phaser config
|
|
this.game.stage.backgroundColor = 0x000000;
|
|
this.game.stage.disableVisibilityChange = this.gameui.headless;
|
|
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
|
|
this.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL;
|
|
this.input.maxPointers = 1;
|
|
|
|
// Tools
|
|
this.animations = new Animations(this.game.tweens);
|
|
this.inputs = new InputManager(this);
|
|
|
|
// Layers
|
|
this.layers = this.add.group(undefined, "View layers");
|
|
this.dialogs_layer = this.add.group(undefined, "Dialogs layer");
|
|
this.tooltip_layer = this.add.group(undefined, "Tooltip layer");
|
|
this.tooltip = new Tooltip(this);
|
|
this.messages = new Messages(this);
|
|
this.dialogs_opened = [];
|
|
|
|
// Browser console variable (for debugging purpose)
|
|
if (typeof window != "undefined") {
|
|
let session = this.gameui.session;
|
|
if (session) {
|
|
(<any>window).universe = session.universe;
|
|
(<any>window).player = session.player;
|
|
(<any>window).battle = session.player.getBattle();
|
|
(<any>window).view = this;
|
|
}
|
|
}
|
|
|
|
super.create();
|
|
}
|
|
|
|
shutdown() {
|
|
this.audio.stopMusic();
|
|
|
|
super.shutdown();
|
|
|
|
this.timer.cancelAll(true);
|
|
}
|
|
|
|
get audio() {
|
|
return this.gameui.audio;
|
|
}
|
|
get options() {
|
|
return this.gameui.options;
|
|
}
|
|
get session() {
|
|
return this.gameui.session;
|
|
}
|
|
|
|
/**
|
|
* Go back to the router state
|
|
*/
|
|
backToRouter() {
|
|
this.game.state.start('router');
|
|
}
|
|
|
|
/**
|
|
* Get or create a layer in the view, by its name
|
|
*/
|
|
getLayer(name: string): Phaser.Group {
|
|
let layer = <Phaser.Group>this.layers.getByName(name);
|
|
if (!layer) {
|
|
layer = this.add.group(this.layers, name);
|
|
}
|
|
return layer;
|
|
}
|
|
|
|
/**
|
|
* Get a network connection to the backend server
|
|
*/
|
|
getConnection(): Multi.Connection {
|
|
let device_id = this.gameui.getDeviceId();
|
|
if (device_id) {
|
|
return new Multi.Connection(device_id, new Multi.ParseRemoteStorage());
|
|
} else {
|
|
// TODO Should warn the user !
|
|
return new Multi.Connection("fake", new Multi.FakeRemoteStorage());
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Auto-save current session to cloud
|
|
*
|
|
* This may be called at key points during the gameplay
|
|
*/
|
|
autoSave(): void {
|
|
let session = this.gameui.session;
|
|
if (session.primary) {
|
|
let connection = this.getConnection();
|
|
connection.publish(session, session.getDescription())
|
|
.then(() => this.messages.addMessage("Auto-saved to cloud"))
|
|
.catch(console.error)
|
|
//.catch(() => this.messages.addMessage("Error saving game to cloud"));
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Open options dialog
|
|
*/
|
|
showOptions(): void {
|
|
let dialog = new OptionsDialog(this);
|
|
}
|
|
|
|
/**
|
|
* Set a value in localStorage, if available
|
|
*/
|
|
setStorage(key: string, value: string): void {
|
|
if (typeof localStorage != "undefined") {
|
|
localStorage.setItem("spacetac-" + key, value);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get a value from localStorage
|
|
*/
|
|
getStorage(key: string): string | null {
|
|
if (typeof localStorage != "undefined") {
|
|
return localStorage.getItem("spacetac-" + key);
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Check if the mouse is inside a given area
|
|
*/
|
|
isMouseInside(area: IBounded): boolean {
|
|
let pos = this.input.mousePointer.position;
|
|
return pos.x >= area.x && pos.x < area.x + area.width && pos.y >= area.y && pos.y < area.y + area.height;
|
|
}
|
|
|
|
/**
|
|
* Create a simple text
|
|
*/
|
|
newText(content: string, x = 0, y = 0, size = 16, color = "#ffffff", shadow = true, bold = false, center = true, vcenter = center, width = 0): Phaser.Text {
|
|
let style = { font: `${bold ? "bold " : ""}${size}pt SpaceTac`, fill: color, align: center ? "center" : "left" };
|
|
let text = new Phaser.Text(this.game, x, y, content, style);
|
|
text.anchor.set(center ? 0.5 : 0, vcenter ? 0.5 : 0);
|
|
if (width) {
|
|
text.wordWrap = true;
|
|
text.wordWrapWidth = width;
|
|
}
|
|
if (shadow) {
|
|
text.setShadow(3, 4, "rgba(0,0,0,0.6)", 6);
|
|
}
|
|
return text;
|
|
}
|
|
|
|
/**
|
|
* Get a new image from an atlas name
|
|
*/
|
|
newImage(name: string, x = 0, y = 0): Phaser.Image {
|
|
let info = this.getImageInfo(name);
|
|
let result = this.game.add.image(x, y, info.key, info.frame);
|
|
result.name = name;
|
|
return result;
|
|
}
|
|
|
|
/**
|
|
* Get a new button from an atlas name
|
|
*/
|
|
newButton(name: string, x = 0, y = 0, onclick?: Function): Phaser.Button {
|
|
let info = this.getImageInfo(name);
|
|
let button = new Phaser.Button(this.game, x, y, info.key, onclick || nop, null, info.frame, info.frame);
|
|
let clickable = bool(onclick);
|
|
button.input.useHandCursor = clickable;
|
|
if (clickable) {
|
|
UIComponent.setButtonSound(button);
|
|
}
|
|
return button;
|
|
}
|
|
|
|
/**
|
|
* Update an image from an atlas name
|
|
*/
|
|
changeImage(image: Phaser.Image | Phaser.Button, name: string): void {
|
|
let info = this.getImageInfo(name);
|
|
image.name = name;
|
|
if (image instanceof Phaser.Button) {
|
|
image.loadTexture(info.key);
|
|
image.setFrames(info.frame, info.frame);
|
|
} else {
|
|
image.loadTexture(info.key, info.frame);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Get an image from atlases
|
|
*/
|
|
getImageInfo(name: string): { key: string, frame: number, exists: boolean } {
|
|
// TODO Cache
|
|
if (this.game.cache.checkImageKey(name)) {
|
|
return { key: name, frame: 0, exists: true };
|
|
} else {
|
|
let i = 1;
|
|
while (this.game.cache.checkImageKey(`atlas-${i}`)) {
|
|
let data = this.game.cache.getFrameData(`atlas-${i}`);
|
|
let frames = data.getFrames();
|
|
let frame = first(frames, frame => AssetLoading.getKey(frame.name) == `graphics-exported-${name}`);
|
|
if (frame) {
|
|
return { key: `atlas-${i}`, frame: frame.index, exists: true };
|
|
}
|
|
i++;
|
|
}
|
|
return { key: `-missing-${name}`, frame: 0, exists: false };
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Returns the first image found in atlases
|
|
*/
|
|
getFirstImage(...names: string[]): string {
|
|
return first(names, name => this.getImageInfo(name).key.substr(0, 9) != '-missing-') || names[names.length - 1];
|
|
}
|
|
}
|
|
}
|