diff --git a/assets/mjs/wc/game-controls.mjs b/assets/mjs/wc/game-controls.mjs index 8d97306..f20551f 100644 --- a/assets/mjs/wc/game-controls.mjs +++ b/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); diff --git a/assets/mjs/wc/game-engine.mjs b/assets/mjs/wc/game-engine.mjs index fd54813..4110eb6 100644 --- a/assets/mjs/wc/game-engine.mjs +++ b/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); } diff --git a/assets/mjs/wc/lander-vehicle.mjs b/assets/mjs/wc/lander-vehicle.mjs index 6f4222c..6dafe75 100644 --- a/assets/mjs/wc/lander-vehicle.mjs +++ b/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; }