261 lines
6.3 KiB
JavaScript
261 lines
6.3 KiB
JavaScript
import * as gui from './index.mjs';
|
|
import {message as editMessage} from '../game/edit.mjs';
|
|
import {images as assets} from '../assets.mjs';
|
|
import {canvas} from '../graphics/index.mjs';
|
|
import GuiFrame from './frame.mjs';
|
|
import GuiImage from './image.mjs';
|
|
import GuiButton from './button.mjs';
|
|
import GuiEdit from './edit.mjs';
|
|
import GuiText from './text.mjs';
|
|
import GuiInventory from './inventory.mjs';
|
|
import * as events from '../game/events.mjs';
|
|
import {state} from '../game/index.mjs';
|
|
import * as world from '../world/index.mjs';
|
|
|
|
export function root() {
|
|
return new GuiFrame(0, 0, canvas.width, canvas.height, {
|
|
draw: false
|
|
});
|
|
}
|
|
|
|
export function title() {
|
|
let shadow = root();
|
|
let logo = new GuiImage(assets.title.logo);
|
|
shadow.append(logo);
|
|
logo.scaleImage({ w: shadow.w * 0.7 });
|
|
logo.posRelative({ x: 0.5, xc: 0.5, y: 0.2 });
|
|
|
|
// TODO: Implement call to change view to game.
|
|
let startFunction = events.startGame;
|
|
let start = new GuiButton('Start game', events.startGame, 0, 0, 200);
|
|
shadow.append(start);
|
|
start.posRelative({ x: 0.5, xc: 0.5, y: 1 });
|
|
start.y -= 160;
|
|
|
|
let secondFunction = () => {};
|
|
let second = new GuiButton('Don\'t start game', secondFunction, 0, 0, 200);
|
|
shadow.append(second);
|
|
second.posRelative({ x: 0.5, xc: 0.5, y: 1 });
|
|
second.y -= 110;
|
|
|
|
let thirdFunction = events.howToPlay;
|
|
let third = new GuiButton('How to play', thirdFunction, 0, 0, 200);
|
|
shadow.append(third);
|
|
third.posRelative({ x: 0.5, xc: 0.5, y: 1 });
|
|
third.y -= 60;
|
|
|
|
return shadow;
|
|
}
|
|
|
|
const instructionText = `\
|
|
Flight controls
|
|
|
|
WAD: Movement
|
|
Shift + WAD: Fine movement
|
|
E: Open/close inventory
|
|
R: Toggle item markers
|
|
T: Toggle path prediction
|
|
P: Pause/unpause
|
|
M: Toggle music
|
|
|
|
|
|
Ship editing and inventory controls
|
|
|
|
Left click: Select module in inventory
|
|
Right click: Toss away module in inventory
|
|
Left click: Place module on ship
|
|
Right click: Remove module from ship
|
|
Escape: Exit ship editing screen
|
|
|
|
|
|
Fly around collecting modules and fuel, and land to build your ship using \
|
|
those collected modules. Get the highest score possible without crashing or \
|
|
running out of fuel.
|
|
`;
|
|
|
|
export function instructions() {
|
|
let shadow = root();
|
|
|
|
let frame = new GuiFrame();
|
|
shadow.append(frame);
|
|
frame.posRelative({x: 0.1, y: 0.1, w: 0.8, h: 0.8});
|
|
|
|
let back = new GuiButton('Return to menu', events.toMenu, 0, 0, 200);
|
|
frame.append(back);
|
|
back.posRelative({ x: 0.5, xc: 0.5, y: 1 });
|
|
back.y -= 60;
|
|
|
|
let text = new GuiText(instructionText, 0, 0, 0, 0, {
|
|
size: 12,
|
|
align: 'left',
|
|
valign: 'top'
|
|
});
|
|
frame.append(text);
|
|
text.posRelative({x: 0.05, y: 0.05, w: 0.9, h: 0.9});
|
|
text.splitLines();
|
|
|
|
return shadow;
|
|
}
|
|
|
|
export function game() {
|
|
let shadow = root();
|
|
|
|
let editButton = new GuiButton('Edit rocket', events.toggleEdit, 0, 0, 200);
|
|
shadow.append(editButton);
|
|
editButton.posRelative({ x: 0.5, xc: 0.5, y: 1 });
|
|
editButton.y -= 45;
|
|
editButton.tick = () => {
|
|
editButton.options.draw = state.landed;
|
|
editButton.options.disabled = state.editing && editMessage !== '';
|
|
if (state.editing) {
|
|
editButton.text = 'Finish';
|
|
if (editMessage !== '') editButton.text = '(' + editMessage + ')';
|
|
} else {
|
|
editButton.text = 'Edit rocket';
|
|
}
|
|
}
|
|
|
|
let fuel = new GuiText('', 0, 0, 0, 0, {
|
|
size: 14,
|
|
align: 'right',
|
|
valign: 'bottom'
|
|
});
|
|
shadow.append(fuel);
|
|
fuel.posRelative({x: 1, y: 1});
|
|
fuel.y -= 10;
|
|
fuel.x -= 10;
|
|
fuel.tick = () => {
|
|
let ship = world.playerShip;
|
|
fuel.text = 'Fuel: ' + ship.fuel.toFixed(1) + '/' +
|
|
ship.maxFuel.toFixed(1);
|
|
};
|
|
|
|
let score = new GuiText('', 0, 0, 0, 0, {
|
|
size: 14,
|
|
align: 'left',
|
|
valign: 'bottom'
|
|
});
|
|
shadow.append(score);
|
|
score.posRelative({x: 0, y: 1});
|
|
score.y -= 10;
|
|
score.x += 10;
|
|
score.tick = () => {
|
|
score.text = 'Score: ' + events.score
|
|
};
|
|
|
|
|
|
let editShadow = root();
|
|
shadow.append(editShadow);
|
|
editShadow.posRelative({x: 0.45, y: 0, w: 0.55, h: 0.6});
|
|
editShadow.x -= 10;
|
|
editShadow.y += 10;
|
|
|
|
let edit = new GuiEdit(0, 0, 0, 0);
|
|
editShadow.append(edit);
|
|
edit.posRelative({w: 1, h: 1});
|
|
|
|
let editInfoText = new GuiText('', 0, 0, 0, 0, {
|
|
size: 12,
|
|
align: 'right'
|
|
});
|
|
editShadow.append(editInfoText);
|
|
editInfoText.posRelative({x: 1, y: 1});
|
|
editInfoText.y += 5;
|
|
editInfoText.x -= 20;
|
|
|
|
let editWarnText = new GuiText('', 0, 0, 0, 0, {
|
|
size: 12,
|
|
align: 'center'
|
|
});
|
|
editShadow.append(editWarnText);
|
|
editWarnText.posRelative({x: 0.5, y: 1});
|
|
editWarnText.y += 20;
|
|
|
|
edit.textElements = {
|
|
info: editInfoText,
|
|
warn: editWarnText
|
|
};
|
|
|
|
|
|
let invShadow = root();
|
|
shadow.append(invShadow);
|
|
invShadow.posRelative({x: 0, w: 0.4, h: 0.6});
|
|
invShadow.x += 10;
|
|
invShadow.y += 10;
|
|
|
|
let inventory = new GuiInventory(0, 0, 0, 0);
|
|
invShadow.append(inventory);
|
|
inventory.posRelative({w: 1, h: 1});
|
|
|
|
let moduleInfo = new GuiText('', 0, 0, 0, 0, {
|
|
size: 12,
|
|
align: 'left',
|
|
valign: 'top'
|
|
});
|
|
invShadow.append(moduleInfo);
|
|
moduleInfo.posRelative({x: 0, y: 1, w: 1});
|
|
moduleInfo.splitLines();
|
|
moduleInfo.y += 5;
|
|
inventory.guiInfo = moduleInfo;
|
|
|
|
edit.guiInventory = inventory;
|
|
|
|
|
|
let notification = new GuiText('', 0, 0, 0, 0, {
|
|
size: 14,
|
|
align: 'center',
|
|
valign: 'top'
|
|
});
|
|
shadow.append(notification);
|
|
notification.posRelative({x: 0.5});
|
|
notification.y += 10;
|
|
events.setNotificationElement(notification);
|
|
|
|
|
|
let gameOver = root();
|
|
shadow.append(gameOver);
|
|
gameOver.posRelative({x: 0.2, y: 0.2, w: 0.6, h: 0.6});
|
|
|
|
let gameOverMain = new GuiText('Game over', 0, 0, 0, 0, {
|
|
size: 48,
|
|
align: 'center',
|
|
valign: 'top'
|
|
});
|
|
gameOver.append(gameOverMain);
|
|
gameOverMain.posRelative({x: 0.5});
|
|
gameOverMain.y += 10;
|
|
gameOver.tick = () => {
|
|
gameOver.options.drawChildren = state.gameOver;
|
|
};
|
|
|
|
let gameOverReason = new GuiText('', 0, 0, 0, 0, {
|
|
size: 14,
|
|
align: 'center',
|
|
valign: 'top'
|
|
});
|
|
gameOver.append(gameOverReason);
|
|
gameOverReason.posRelative({x: 0.5});
|
|
gameOverReason.y += 100;
|
|
gameOverReason.tick = () => {
|
|
gameOverReason.text = events.gameOverReason;
|
|
};
|
|
|
|
let gameOverScore = new GuiText('', 0, 0, 0, 0, {
|
|
size: 14,
|
|
align: 'center',
|
|
valign: 'top'
|
|
});
|
|
gameOver.append(gameOverScore);
|
|
gameOverScore.posRelative({x: 0.5});
|
|
gameOverScore.y += 200;
|
|
gameOverScore.tick = () => {
|
|
gameOverScore.text = events.scoreText;
|
|
};
|
|
|
|
let gameOverExit = new GuiButton('Main menu', events.toMenu, 0, 0, 200);
|
|
gameOver.append(gameOverExit);
|
|
gameOverExit.posRelative({ x: 0.5, xc: 0.5, y: 1 });
|
|
gameOverExit.y -= 10;
|
|
|
|
return shadow;
|
|
}
|