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-07 00:05:06 +00:00
|
|
|
static returned = false
|
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);
|
|
|
|
|
2018-04-12 16:30:08 +00:00
|
|
|
// Layers
|
|
|
|
let layer_background = this.getLayer("background");
|
|
|
|
let layer_presents = this.getLayer("presents");
|
|
|
|
let layer_title = this.getLayer("title");
|
2015-04-28 16:35:48 +00:00
|
|
|
|
2018-04-12 16:30:08 +00:00
|
|
|
// Background
|
|
|
|
builder.in(layer_background, builder => {
|
|
|
|
builder.image("menu-background");
|
|
|
|
});
|
2017-01-22 17:41:32 +00:00
|
|
|
|
2017-12-04 18:30:18 +00:00
|
|
|
// Presents...
|
2018-04-12 16:30:08 +00:00
|
|
|
builder.in(layer_presents, builder => {
|
2018-05-15 14:57:45 +00:00
|
|
|
builder.styled({ center: true, color: "#FFFFFF", shadow: true }, builder => {
|
2017-12-04 18:30:18 +00:00
|
|
|
builder.text("Michael Lemaire", this.getMidWidth(), this.getHeight() * 0.4, { size: 32 });
|
|
|
|
builder.text("presents", this.getMidWidth(), this.getHeight() * 0.6, { size: 24 });
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2018-04-12 16:30:08 +00:00
|
|
|
builder.styled({ color: "#9fc4d6", size: 40, shadow: true }).in(layer_title, builder => {
|
|
|
|
// Title
|
|
|
|
let title = builder.in(layer_title).image("menu-title", 960, 784, true);
|
|
|
|
|
|
|
|
// Buttons
|
2018-05-15 14:57:45 +00:00
|
|
|
let group_new_game = builder.container("new-game", 0, 0, false);
|
|
|
|
let group_load_game = builder.container("load-game", 0, 0, false);
|
|
|
|
let group_join_game = builder.container("join-game", 0, 0, false);
|
|
|
|
let group_skirmish = builder.in(group_new_game).container("skirmish", 0, 0, false);
|
2018-04-12 16:30:08 +00:00
|
|
|
let button_new_game = builder.button("menu-button", 280, 106, undefined, "Start a new game", (on: boolean) => {
|
|
|
|
if (on) {
|
|
|
|
this.animations.show(group_new_game, 200);
|
2018-05-15 14:57:45 +00:00
|
|
|
button_load_game.toggle(false);
|
|
|
|
button_join_game.toggle(false);
|
2018-04-12 16:30:08 +00:00
|
|
|
} else {
|
|
|
|
this.animations.hide(group_new_game, 200);
|
|
|
|
}
|
|
|
|
return on;
|
|
|
|
}, { text: "New game", center: true, on_bottom: true });
|
|
|
|
let button_campaign = builder.in(group_new_game).button("menu-button", 770, 106, () => this.startCampaign(), "Start a campaign in story mode", undefined, {
|
|
|
|
text: "Campaign", center: true
|
|
|
|
});
|
|
|
|
let button_skirmish = builder.in(group_new_game).button("menu-button", 770, 266, undefined, "Start a quick battle", (on: boolean) => {
|
|
|
|
this.animations.setVisible(group_skirmish, on, 200);
|
|
|
|
return on;
|
|
|
|
}, { text: "Skirmish", center: true, on_bottom: true });
|
|
|
|
let button_skirmish_shipcount = this.addNumberSelector(builder.in(group_skirmish), 1130, 266, "Ships", 2, 5, 3);
|
|
|
|
let button_skirmish_level = this.addNumberSelector(builder.in(group_skirmish), 1386, 266, "Level", 1, 10, 1);
|
|
|
|
let button_skirmish_go = builder.in(group_skirmish).button("menu-button-small", 1632, 266, () => {
|
|
|
|
this.startSkirmish(button_skirmish_shipcount(), button_skirmish_level())
|
|
|
|
}, "Start the skirmish with selected settings", undefined, { text: "Go", center: true });
|
|
|
|
let button_load_game = builder.button("menu-button", 280, 266, undefined, "Load a previously saved game", (on: boolean) => {
|
|
|
|
if (on) {
|
|
|
|
this.animations.show(group_load_game, 200);
|
2018-05-15 14:57:45 +00:00
|
|
|
button_new_game.toggle(false);
|
|
|
|
button_join_game.toggle(false);
|
2018-04-12 16:30:08 +00:00
|
|
|
} else {
|
|
|
|
this.animations.hide(group_load_game, 200);
|
|
|
|
}
|
|
|
|
return on;
|
|
|
|
}, { text: "Load game", center: true, on_bottom: true });
|
|
|
|
builder.in(group_load_game, builder => {
|
|
|
|
let input = new InputSavegames(this, builder, 770, 266);
|
|
|
|
builder.button("menu-button-small", 1112, 266, () => input.load(), "Load the selected save game", undefined, {
|
|
|
|
text: "Go", center: true
|
|
|
|
});
|
|
|
|
})
|
|
|
|
let button_join_game = builder.button("menu-button", 280, 426, undefined, "Join a friend's game", (on: boolean) => {
|
|
|
|
if (on) {
|
|
|
|
this.animations.show(group_join_game, 200);
|
2018-05-15 14:57:45 +00:00
|
|
|
button_new_game.toggle(false);
|
|
|
|
button_load_game.toggle(false);
|
2018-04-12 16:30:08 +00:00
|
|
|
} else {
|
|
|
|
this.animations.hide(group_join_game, 200);
|
|
|
|
}
|
|
|
|
return on;
|
|
|
|
}, { text: "Join game", center: true, on_bottom: true });
|
|
|
|
builder.in(group_join_game, builder => {
|
|
|
|
let input = new InputInviteCode(this, builder, 770, 426);
|
|
|
|
builder.button("menu-button-small", 1112, 426, () => input.join(), "Join the game", undefined, {
|
|
|
|
text: "Go", center: true
|
|
|
|
});
|
|
|
|
})
|
2018-04-12 22:03:29 +00:00
|
|
|
let button_options = builder.button("menu-button-small", 1780, 106, () => this.showOptions(true), "Options", undefined, {
|
2018-04-12 16:30:08 +00:00
|
|
|
center: true,
|
|
|
|
icon: "menu-icon-options",
|
|
|
|
});
|
|
|
|
});
|
2017-05-02 22:49:35 +00:00
|
|
|
|
2017-12-04 18:30:18 +00:00
|
|
|
// Animations
|
2018-04-12 16:30:08 +00:00
|
|
|
layer_background.visible = false;
|
|
|
|
layer_presents.visible = false;
|
|
|
|
layer_title.visible = false;
|
|
|
|
this.animations.show(layer_presents, 500);
|
|
|
|
this.animations.show(layer_background, 5000);
|
2017-06-07 17:08:53 +00:00
|
|
|
let fading = this.timer.schedule(5000, () => {
|
2018-04-12 16:30:08 +00:00
|
|
|
this.animations.show(layer_title, 1000);
|
|
|
|
this.animations.hide(layer_presents, 300);
|
2017-12-07 00:05:06 +00:00
|
|
|
});
|
|
|
|
let pass = () => {
|
2017-06-07 17:08:53 +00:00
|
|
|
this.timer.cancel(fading);
|
2018-04-12 16:30:08 +00:00
|
|
|
this.animations.show(layer_background, 0);
|
|
|
|
this.animations.show(layer_title, 0);
|
|
|
|
this.animations.hide(layer_presents, 0);
|
2017-12-07 00:05:06 +00:00
|
|
|
};
|
|
|
|
if (MainMenu.returned) {
|
|
|
|
pass();
|
|
|
|
} else {
|
2018-05-15 14:57:45 +00:00
|
|
|
this.input.on("pointerup", pass);
|
2017-12-07 00:05:06 +00:00
|
|
|
MainMenu.returned = true;
|
|
|
|
}
|
2017-06-01 22:37:43 +00:00
|
|
|
|
2018-05-15 14:57:45 +00:00
|
|
|
this.audio.startMusic("supernatural");
|
2015-03-12 00:00:00 +00:00
|
|
|
}
|
|
|
|
|
2018-04-12 16:30:08 +00:00
|
|
|
/**
|
|
|
|
* Add a number selector in a given range
|
|
|
|
*/
|
|
|
|
addNumberSelector(builder: UIBuilder, x: number, y: number, label: string, min: number, max: number, initial: number): () => number {
|
|
|
|
let value = initial;
|
|
|
|
builder.in(builder.image("menu-input-small", x, y + 30, true), builder => {
|
|
|
|
let display = builder.text(`${value}`, 0, -32);
|
|
|
|
builder.text(label, 0, 54, { color: "#6690a4", size: 28 });
|
|
|
|
builder.button("menu-arrow-left", -68, -32, () => {
|
|
|
|
value = Math.max(min, value - 1);
|
|
|
|
builder.change(display, `${value}`);
|
|
|
|
}, undefined, undefined, { center: true });
|
|
|
|
builder.button("menu-arrow-right", 68, -32, () => {
|
|
|
|
value = Math.min(max, value + 1);
|
|
|
|
builder.change(display, `${value}`);
|
|
|
|
}, undefined, undefined, { center: true });
|
|
|
|
});
|
|
|
|
return () => value;
|
2015-03-19 00:00:00 +00:00
|
|
|
}
|
|
|
|
|
2018-04-12 16:30:08 +00:00
|
|
|
/**
|
|
|
|
* Start a campaign mode
|
|
|
|
*/
|
|
|
|
startCampaign(): void {
|
|
|
|
this.session.startNewGame(false);
|
|
|
|
this.backToRouter();
|
2015-03-12 00:00:00 +00:00
|
|
|
}
|
|
|
|
|
2018-04-12 16:30:08 +00:00
|
|
|
/**
|
|
|
|
* Start a skirmish
|
|
|
|
*/
|
|
|
|
startSkirmish(shipcount: number, level: number): void {
|
|
|
|
this.session.startQuickBattle(true, level, shipcount);
|
|
|
|
this.backToRouter();
|
2015-03-12 00:00:00 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|