2017-05-02 22:49:35 +00:00
|
|
|
/// <reference path="../BaseView.ts"/>
|
2015-04-07 00:00:00 +00:00
|
|
|
|
2017-09-24 22:23:22 +00:00
|
|
|
module TK.SpaceTac.UI {
|
2017-05-02 22:49:35 +00:00
|
|
|
/**
|
|
|
|
* Main menu (first interactive screen)
|
|
|
|
*/
|
2015-04-07 00:00:00 +00:00
|
|
|
export class MainMenu extends BaseView {
|
2017-12-04 18:30:18 +00:00
|
|
|
layer_stars: Phaser.Group
|
|
|
|
layer_presents: Phaser.Group
|
|
|
|
layer_title: Phaser.Group
|
|
|
|
button_new_game: Phaser.Button
|
|
|
|
button_quick_battle: Phaser.Button
|
|
|
|
button_load_game: Phaser.Button
|
|
|
|
dialog_load_game: LoadDialog
|
2015-03-12 00:00:00 +00:00
|
|
|
|
2015-04-28 16:35:48 +00:00
|
|
|
create() {
|
2017-03-15 21:40:19 +00:00
|
|
|
super.create();
|
|
|
|
|
2017-12-04 18:30:18 +00:00
|
|
|
let builder = new UIBuilder(this);
|
|
|
|
|
2017-10-11 20:58:08 +00:00
|
|
|
this.layer_stars = this.getLayer("stars");
|
2017-12-04 18:30:18 +00:00
|
|
|
this.layer_presents = this.getLayer("presents");
|
2017-10-11 20:58:08 +00:00
|
|
|
this.layer_title = this.getLayer("title");
|
2015-04-28 16:35:48 +00:00
|
|
|
|
2017-01-22 17:41:32 +00:00
|
|
|
// Stars
|
|
|
|
for (let i = 0; i < 300; i++) {
|
|
|
|
let fade = Math.random() * 0.5 + 0.5;
|
|
|
|
let x = Math.random() * 0.998 + 0.001;
|
2017-06-04 20:26:11 +00:00
|
|
|
let star = this.add.image(1920 * x, Math.random() * 1080, "common-particles", 32, this.layer_stars);
|
2017-01-22 17:41:32 +00:00
|
|
|
star.anchor.set(0.5, 0.5);
|
2017-06-04 20:26:11 +00:00
|
|
|
star.angle = 225;
|
2017-01-22 17:41:32 +00:00
|
|
|
star.alpha = 0.7 * fade;
|
2017-06-04 20:26:11 +00:00
|
|
|
star.scale.set(0.8 * fade, 0.8 * fade);
|
2017-01-22 17:41:32 +00:00
|
|
|
this.tweens.create(star).to({ x: -30 }, 30000 * x / fade).to({ x: 1950 }, 0.00001).to({ x: 1920 * x }, 30000 * (1 - x) / fade).loop().start();
|
|
|
|
}
|
|
|
|
|
2017-12-04 18:30:18 +00:00
|
|
|
// Presents...
|
|
|
|
builder.in(this.layer_presents, builder => {
|
|
|
|
builder.styled({ center: true }, builder => {
|
|
|
|
builder.text("Michael Lemaire", this.getMidWidth(), this.getHeight() * 0.4, { size: 32 });
|
|
|
|
builder.text("presents", this.getMidWidth(), this.getHeight() * 0.6, { size: 24 });
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2015-04-28 16:35:48 +00:00
|
|
|
// Menu buttons
|
2017-05-15 23:15:07 +00:00
|
|
|
this.button_new_game = this.addButton(322, 674, "New Game", "Start a new campaign in a generated universe", () => this.onNewGame());
|
|
|
|
this.button_load_game = this.addButton(960, 674, "Load / Join", "Load a saved game or join a friend", () => this.onLoadGame());
|
|
|
|
this.button_quick_battle = this.addButton(1606, 674, "Quick Battle", "Play a single generated battle", () => this.onQuickBattle());
|
|
|
|
|
|
|
|
// Fullscreen button
|
2017-06-08 17:32:57 +00:00
|
|
|
let button = new Phaser.Button(this.game, this.getWidth(), 0, "options-options", () => this.options.toggleBoolean("fullscreen"), null, 2, 2);
|
|
|
|
button.anchor.set(1, 0);
|
2017-05-15 23:15:07 +00:00
|
|
|
this.tooltip.bindStaticText(button, "Toggle full-screen");
|
|
|
|
this.layer_title.add(button);
|
2017-01-22 16:17:59 +00:00
|
|
|
|
|
|
|
// Title
|
2017-03-15 21:40:19 +00:00
|
|
|
let title = this.add.image(960, 225, "menu-title", 0, this.layer_title);
|
2017-01-22 16:17:59 +00:00
|
|
|
title.anchor.set(0.5, 0);
|
2017-01-23 18:12:36 +00:00
|
|
|
|
2017-05-02 22:49:35 +00:00
|
|
|
// Dialogs
|
|
|
|
this.dialog_load_game = new LoadDialog(this);
|
|
|
|
this.dialog_load_game.setPosition(264, 160);
|
2017-05-31 23:11:29 +00:00
|
|
|
this.dialog_load_game.moveToLayer(this.layer_title);
|
2017-05-02 22:49:35 +00:00
|
|
|
this.dialog_load_game.setVisible(false);
|
|
|
|
|
2017-12-04 18:30:18 +00:00
|
|
|
// Animations
|
|
|
|
this.layer_stars.visible = false;
|
|
|
|
this.layer_presents.visible = false;
|
2017-06-07 17:08:53 +00:00
|
|
|
this.layer_title.visible = false;
|
2017-12-04 18:30:18 +00:00
|
|
|
this.animations.show(this.layer_presents, 500);
|
|
|
|
this.animations.show(this.layer_stars, 5000);
|
2017-06-07 17:08:53 +00:00
|
|
|
let fading = this.timer.schedule(5000, () => {
|
|
|
|
this.animations.show(this.layer_title, 1000);
|
2017-12-04 18:30:18 +00:00
|
|
|
this.animations.hide(this.layer_presents, 300);
|
2017-06-07 17:08:53 +00:00
|
|
|
})
|
|
|
|
this.input.onTap.addOnce(() => {
|
|
|
|
this.timer.cancel(fading);
|
|
|
|
this.animations.show(this.layer_title, 0);
|
2017-12-04 18:30:18 +00:00
|
|
|
this.animations.hide(this.layer_presents, 0);
|
2017-06-07 17:08:53 +00:00
|
|
|
});
|
2017-06-01 22:37:43 +00:00
|
|
|
|
|
|
|
this.gameui.audio.startMusic("supernatural");
|
2015-03-12 00:00:00 +00:00
|
|
|
}
|
|
|
|
|
2017-03-15 21:40:19 +00:00
|
|
|
addButton(x: number, y: number, caption: string, tooltip: string, callback: Function): Phaser.Button {
|
2017-06-08 17:32:57 +00:00
|
|
|
var button = this.add.button(x - 20, y + 20, "menu-button", callback);
|
2017-01-22 16:17:59 +00:00
|
|
|
button.anchor.set(0.5, 0);
|
2015-03-12 00:00:00 +00:00
|
|
|
button.input.useHandCursor = true;
|
|
|
|
|
2017-07-19 23:22:18 +00:00
|
|
|
UIComponent.setButtonSound(button);
|
|
|
|
|
2017-01-22 16:17:59 +00:00
|
|
|
var text = new Phaser.Text(this.game, 0, 76, caption,
|
2017-08-15 22:30:19 +00:00
|
|
|
{ align: "center", font: "bold 40pt SpaceTac", fill: "#529aee" });
|
2015-03-12 00:00:00 +00:00
|
|
|
text.anchor.set(0.5, 0.5);
|
|
|
|
button.addChild(text);
|
|
|
|
|
2017-01-23 18:12:36 +00:00
|
|
|
button.onInputOver.add(() => {
|
|
|
|
button.loadTexture("menu-button-hover");
|
|
|
|
text.fill = "#54b9ff";
|
|
|
|
});
|
|
|
|
button.onInputOut.add(() => {
|
|
|
|
button.loadTexture("menu-button");
|
|
|
|
text.fill = "#529aee";
|
|
|
|
});
|
|
|
|
|
2017-03-15 21:40:19 +00:00
|
|
|
this.tooltip.bindStaticText(button, tooltip);
|
|
|
|
|
2017-05-15 23:15:07 +00:00
|
|
|
this.layer_title.add(button);
|
|
|
|
|
2015-03-12 00:00:00 +00:00
|
|
|
return button;
|
|
|
|
}
|
|
|
|
|
2015-03-19 00:00:00 +00:00
|
|
|
// Called when "New Game" is clicked
|
|
|
|
onNewGame(): void {
|
2017-02-09 00:00:35 +00:00
|
|
|
var gameui = <MainUI>this.game;
|
2015-03-19 00:00:00 +00:00
|
|
|
|
2017-05-31 23:11:29 +00:00
|
|
|
gameui.session.startNewGame(false);
|
2015-03-19 00:00:00 +00:00
|
|
|
|
|
|
|
this.game.state.start("router");
|
|
|
|
}
|
|
|
|
|
2015-03-12 00:00:00 +00:00
|
|
|
// Called when "Quick Battle" is clicked
|
|
|
|
onQuickBattle(): void {
|
2017-02-09 00:00:35 +00:00
|
|
|
var gameui = <MainUI>this.game;
|
2015-03-12 00:00:00 +00:00
|
|
|
|
2015-04-07 00:00:00 +00:00
|
|
|
gameui.session.startQuickBattle(true);
|
2015-03-12 00:00:00 +00:00
|
|
|
|
|
|
|
this.game.state.start("router");
|
|
|
|
}
|
|
|
|
|
2015-03-19 00:00:00 +00:00
|
|
|
// Called when "Load Game" is clicked
|
2015-03-12 00:00:00 +00:00
|
|
|
onLoadGame(): void {
|
2017-05-02 22:49:35 +00:00
|
|
|
this.dialog_load_game.setVisible(true);
|
2015-03-12 00:00:00 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|