Add instructions

js/gui/element.mjs

@@ -46,9 +46,8 @@ export default class GuiElement extends Rect {
 	//   - Albert Einstein
 
 	posRelative({x = null, xc = 0, y = null, yc = 0, w = null, h = null}) {
-		if (x !== null) {
+		if (x !== null)
 			this.x = (this.parent.w * x) - (this.w * xc) + this.parent.x;
-		}
 		if (y !== null)
 			this.y = (this.parent.h * y) - (this.h * yc) + this.parent.y;
 		if (w !== null)

js/gui/index.mjs

@@ -7,7 +7,7 @@ export let root;
 export function init() {
 	elements.clear();
 	root = modules.root();
-	changeView('title');
+	changeView('menu');
 }
 
 export function tick() {
@@ -17,13 +17,17 @@ export function tick() {
 export function changeView(view) {
 	root.clear();
 
-	if (view == 'title') {
+	if (view === 'menu') {
 		root.append(modules.title());
 	}
 
-	if (view == 'game') {
+	if (view === 'game') {
 		root.append(modules.game());
 	}
+
+	if (view === 'instructions') {
+		root.append(modules.instructions());
+	}
 }
 
 export function measureText(msg, font) {

js/gui/modules.mjs

@@ -47,6 +47,56 @@ export function title() {
 	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();
 
@@ -137,7 +187,7 @@ export function game() {
 	invShadow.append(inventory);
 	inventory.posRelative({w: 1, h: 1});
 
-	let moduleInfo = new GuiText('test\nline\n', 0, 0, 0, 0, {
+	let moduleInfo = new GuiText('', 0, 0, 0, 0, {
 		size: 12,
 		align: 'left',
 		valign: 'top'