Handle game state started, paused, unpaused, and ended

assets/mjs/wc/game-controls.mjs

@@ -79,8 +79,6 @@ export default class GameControls extends GameElement {
 	}
 
 	keyboardHandler(event) {
-		console.log(event.key);
-
 		let landerChange = null;
 		let gameChange = null;
 
@@ -110,6 +108,11 @@ export default class GameControls extends GameElement {
 					running: false
 				};
 				break;
+			case 'Enter':
+				gameChange = {
+					running: true
+				};
+				break;
 		}
 
 		if (landerChange) dispatchEventWithDetails('LanderStateChanged', landerChange);

assets/mjs/wc/game-engine.mjs

@@ -6,18 +6,18 @@ export default class GameEngine extends GameElement {
 
 	modelLander = {};
 	#gameRunning;
+	#gameStarted;
+	#gameEnded;
 	#gameEventFrequency = 10; // Milliseconds
 	#gameDuration = 0; // Counts the time elapsed based on multiples of `this.#gameEventFrequency`
 	#gameInterval; // Placeholder for window.setInterval so that it can be cleared later.
 
 	#gameRunningStateChanged = (runningState) => {
 		this.#gameRunning = runningState;
-		console.log('running', runningState);
 		dispatchEventWithDetails('GameStateChange', {running: runningState});
 	}
 
 	#landerStateChanged = (values) => {
-		console.log('new lander state', values);
 		dispatchEventWithDetails('LanderStateChanged', values);
 	}
 
@@ -28,24 +28,41 @@ export default class GameEngine extends GameElement {
 			let currentItem = MODEL[keyName];
 			if (currentItem.affects === 'lander') this.modelLander[keyName] = currentItem.initial;
 		});
+
+		this.handleKeyboardInterrupts = this.handleKeyboardInterrupts.bind(this);
+		this.setInitialValuesAndStart = this.setInitialValuesAndStart.bind(this);
+		this.#gameLoop = this.#gameLoop.bind(this);
 	}
 
 	#gameLoop = function () {
 		this.#gameDuration++;
 
-		if (this.#gameDuration > 1_000) {
-			this.stopGame();
-		}
+		// if (this.#gameDuration > 1_000) {
+		// 	this.stopGame();
+		// }
 	}
 
 	startGame() {
+		this.#gameStarted = true;
 		this.#gameRunningStateChanged(true);
 		this.#gameDuration = 0;
-		this.#gameInterval = window.setInterval(this.#gameLoop.bind(this), this.#gameEventFrequency);
+		this.#gameInterval = window.setInterval(this.#gameLoop, this.#gameEventFrequency);
 	}
 
-	stopGame() {
+	pauseGame() {
+		this.#gameRunning = false;
 		this.#gameRunningStateChanged(false);
+	}
+
+	unpauseGame() {
+		this.#gameRunning = true;
+		this.#gameRunningStateChanged(true);
+	}
+
+	stopGame() {
+		this.#gameEnded = true;
+		console.log('game ended after duration', this.#gameDuration);
+		document.removeEventListener('keyup', this.handleKeyboardInterrupts);
 		window.clearInterval(this.#gameInterval);
 	}
 
@@ -54,9 +71,28 @@ export default class GameEngine extends GameElement {
 		this.startGame();
 	}
 
+	handleKeyboardInterrupts(event) {
+		console.log('event.key', event.key);
+		switch (event.key) {
+			case 'Enter':
+				if (this.#gameStarted && !this.#gameRunning) {
+					this.unpauseGame();
+				} else if (!this.#gameStarted) {
+					this.startGame();
+				}
+				break;
+			case 'Escape':
+				if (this.#gameStarted) {
+					(this.#gameRunning) ? this.pauseGame() : this.stopGame();
+				}
+				break;
+		}
+	}
+
 	connectedCallback() {
 		super.connectedCallback();
-		this.addEventListener('FormElementsAdded', this.setInitialValuesAndStart.bind(this));
+		this.addEventListener('FormElementsAdded', this.setInitialValuesAndStart, {once: true});
+		document.addEventListener('keyup', this.handleKeyboardInterrupts);
 	}
 
 

assets/mjs/wc/lander-vehicle.mjs

@@ -16,10 +16,7 @@ export default class LanderVehicle extends GameElement {
 					propertyName = '--lander_rotation';
 					break;
 				case 'thruster':
-					break;
-				case 'speed':
-					break;
-				case 'altitude':
+					propertyName = '--lander_thruster';
 					break;
 			}