Add instructions

js/assets.mjs

@@ -42,7 +42,8 @@ export const audio = {
 	engine: 'rocket2.ogg',
 	music: 'music2.mp3',
 	toss: 'thunk1.mp3',
-	crash: 'crash2.mp3'
+	crash: 'crash2.mp3',
+	pause: 'swoosh1.mp3'
 };
 
 export async function init() {

js/game/control.mjs

@@ -46,7 +46,7 @@ export function tick() {
 }
 
 function tickPlaying() {
-	if (held[mapping.thrust]) {
+	if (held[mapping.thrust] && playerShip.fuel !== 0) {
 		playerShip.applyThrust({ forward: 1 });
 		let vol = Math.min(0.7, graphics.perspective.zoom / 10);
 		audio.volume('engine', vol);
@@ -55,7 +55,11 @@ function tickPlaying() {
 	}
 
 	if (pressed[mapping.thrust]) {
+		if (playerShip.fuel !== 0) {
 			audio.start('engine');
+		} else {
+			audio.stop('engine');
+		}
 	}
 
 	if (held[mapping.left]) {

js/game/events.mjs

@@ -17,7 +17,7 @@ let landedPlanets = new Set();
 
 export function playMusic() {
 	audio.start('music');
-	audio.volume('music', 0.8);
+	audio.volume('music', 0.4);
 }
 
 export function stopMusic() {
@@ -45,6 +45,14 @@ export function startGame() {
 	graphics.perspective.focusPlayer();
 }
 
+export function toMenu() {
+	game.changeView('menu');
+}
+
+export function togglePause() {
+	game.state.paused = !game.state.paused;
+}
+
 export function landShip(planet) {
 	shipLanded = true;
 	if (!landedPlanets.has(planet)) {
@@ -54,7 +62,7 @@ export function landShip(planet) {
 }
 
 export function howToPlay() {
-	game.state.controls = true;
+	game.changeView('instructions');
 }
 
 function newPlanet(planet) {

js/game/index.mjs

@@ -41,12 +41,17 @@ export function changeView(view) {
 	state.view = view;
 	gui.changeView(view);
 
-	if (view == 'game') {
+	if (view === 'game') {
 		state.playing = true;
 		state.editing = false;
 		state.paused = false;
 		world.init();
 		inventory.init();
+	} else if (view === 'instructions') {
+		state.playing = false;
+		gui.changeView('instructions');
+	} else if (view === 'menu') {
+		gui.changeView('menu');
 	}
 }
 

js/graphics/gui.mjs

@@ -22,8 +22,11 @@ function renderElement(element) {
 }
 
 function renderFrame(element) {
-	context.fillStyle = '#eb9';
+	context.fillStyle = '#a3977c';
 	context.fillRect(...element.shape);
+	context.lineWidth = 3;
+	context.strokeStyle = '#6d634b'
+	context.strokeRect(...element.shape);
 }
 
 function renderImage(element) {
@@ -53,15 +56,33 @@ function renderButton(element) {
 		context.globalAlpha = 0.5;
 	}
 
-	context.fillRect(...element.shape);
+	let [sx, sy, w, h] = element.shape;
+	let [ex, ey] = [sx + w, sy + h];
+	let rad = 5;
+
+	context.beginPath();
+	context.moveTo(sx + rad, sy);
+	context.lineTo(ex - rad, sy);
+	context.quadraticCurveTo(ex, sy, ex, sy + rad);
+	context.lineTo(ex, ey - rad);
+	context.quadraticCurveTo(ex, ey, ex - rad, ey);
+	context.lineTo(sx + rad, ey);
+	context.quadraticCurveTo(sx, ey, sx, ey - rad);
+	context.lineTo(sx, sy + rad);
+	context.quadraticCurveTo(sx, sy, sx + rad, sy);
+	context.closePath();
+
+	context.fill();
 	context.strokeStyle = '#541';
-	context.strokeWidth = 4;
+	context.lineWidth = 2;
-	context.strokeRect(...element.shape);
+	context.stroke();
+
 	context.textAlign = 'center';
 	context.textBaseline = 'middle';
 	context.fillStyle = '#fff';
 	context.font = '12pt Consolas';
 	context.fillText(element.text, ...element.center);
+
 	context.globalAlpha = 1;
 }
 

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'

js/world/particle.mjs

@@ -29,7 +29,7 @@ export function createEndEditBurst(ship) {
 
 export function createCrash(ship) {
 	for (let i = 0; i < ship.mass + 3; i++) {
-		particles.add(new Particle(...ship.poc, {
+		particles.add(new Particle(...ship.com, {
 			color: '#f2e860',
 			lifetime: Math.random() * 50 + 40,
 			size: Math.random() * 0.2 + 0.2,
@@ -38,7 +38,7 @@ export function createCrash(ship) {
 		}));
 	}
 	for (let i = 0; i < ship.mass + 3; i++) {
-		particles.add(new Particle(...ship.poc, {
+		particles.add(new Particle(...ship.com, {
 			color: '#f75722',
 			lifetime: Math.random() * 50 + 40,
 			size: Math.random() * 0.2 + 0.2,
@@ -47,7 +47,7 @@ export function createCrash(ship) {
 		}));
 	}
 	for (let i = 0; i < ship.mass * 2 + 3; i++) {
-		particles.add(new Particle(...ship.poc, {
+		particles.add(new Particle(...ship.com, {
 			color: '#888',
 			lifetime: Math.random() * 30 + 55,
 			size: Math.random() * 0.5 + 0.4,

js/world/ship.mjs

@@ -161,6 +161,7 @@ export default class Ship extends Body {
 	}
 
 	moduleCollided(module) {
+		if (this.landed) return;
 		let speed = Math.sqrt(this.xvel ** 2 + this.yvel ** 2);
 		if (module.type !== 'thruster' || speed > consts.CRASH_SPEED) {
 			events.crash();
@@ -202,13 +203,18 @@ export default class Ship extends Body {
 
 		let thrustForce = -forward * consts.THRUST_POWER * this.thrust;
 		let turnForce = (turnRight - turnLeft) * consts.TURN_POWER;
-		turnForce *= this.rotationPower;
+		if (this.fuel <= 0) {
+			this.fuel = 0;
+			thrustForce = 0;
+		} else {
 			this.fuel -= Math.abs(thrustForce) * consts.FUEL_BURN_RATE;
+		}
+		turnForce *= this.rotationPower;
 
 		this.applyDirectionalForce(0, thrustForce, turnForce);
 
 		this.modules.forEach(m => {
-			if (m.type !== 'thruster') return;
+			if (m.type !== 'thruster' || thrustForce == 0) return;
 			m.power += forward;
 		});