Re-jig lander X/Y position

OCBroCode · Feb 17, 2024 · 2177d72 · 2177d72
1 parent 3faeb2d
commit 2177d72
Show file tree

Hide file tree

Showing 8 changed files with 148 additions and 151 deletions.
diff --git a/assets/css/wc/lander-vehicle.css b/assets/css/wc/lander-vehicle.css
@@ -1,17 +1,44 @@
 lander-vehicle {
 	display: block;
 	position: absolute;
-	inset-block-start: calc(var(--lander_position_y) * 1%);
+	inset-block-end: calc(var(--lander_position_y) * 1%);
 	inset-inline-start: calc(var(--lander_position_x) * 1%);
 	inline-size: calc(5 * var(--unit_root));
 	block-size: calc(4 * var(--unit_root));
 	transform-origin: 50% 50%;
-	transition-property: transform;
-	transition-duration: 1s;
+	transition-property: transform, inset-block-end, inset-inline-start;
+	transition-duration: 0.35s;
 	transition-timing-function: linear;
 	transform:
 		translate(-50%, -50%)
 		rotate(
 			calc(var(--lander_rotation) * 1deg)
 		);
+}
+
+lander-vehicle .leg {
+	transition-property: transform;
+	transition-duration: 0.5s;
+	transition-timing-function: linear;
+	transform: rotate(0deg);
+}
+
+lander-vehicle #leg-left {
+	transform-origin: 0% 25%;
+}
+
+lander-vehicle #leg-right {
+	transform-origin: 100% 25%;
+}
+
+lander-vehicle [data-gear-mode="flight"] #leg-left {
+	transform: rotate(-20deg);
+}
+
+lander-vehicle [data-gear-mode="flight"] #leg-right {
+	transform: rotate(20deg);
+}
+
+lander-vehicle [data-gear-mode="flight"] #leg-front {
+	transform: translateY(-8%);
 }
diff --git a/assets/css/wc/vehicle-booster.css b/assets/css/wc/vehicle-booster.css
@@ -22,7 +22,7 @@ vehicle-booster {
     display: block;
     position: absolute;
     z-index: -1;
-    inset-block-start: 99%;
+    inset-block-start: 100%;
     inset-inline-start: 50%;
     block-size: calc(var(--booster_length) * var(--unit_root));
     inline-size: calc(var(--unit_root) / 2);

diff --git a/assets/img/lander.svg b/assets/img/lander.svg
diff --git a/assets/mjs/model.mjs b/assets/mjs/model.mjs
@@ -1,52 +1,62 @@
 export const MODEL = {
-    altitude: {
-        name: 'Altitude',
-        type: 'integer',
-        formElement: 'range',
-        initial: 100,
-        min: 0,
-        max: 120,
-				affects: 'lander',
-				eventName: 'LanderStateChanged',
-    },
-    rotation: {
-        name: 'Rotation',
-        type: 'integer',
-        formElement: 'range',
-        initial: 0,
-        min: -100,
-        max: 100,
-				affects: 'lander',
-				eventName: 'LanderStateChanged',
-    },
-    running: {
-        name: 'Running',
-        type: 'boolean',
-        formElement: 'radio',
-        initial: 'true',
-				labelTrue: 'Running',
-				labelFalse: 'Stopped',
-				affects: 'game',
-				eventName: 'GameStateChanged',
-    },
-    speed: {
-        name: 'Speed',
-        type: 'integer',
-        formElement: 'range',
-        initial: 50,
-        min: 0,
-        max: 100,
-				affects: 'lander',
-				eventName: 'LanderStateChanged',
-    },
-    thruster: {
-        name: 'Thruster',
-        type: 'integer',
-        formElement: 'range',
-        initial: 0,
-        min: 0,
-        max: 100,
-				affects: 'lander',
-				eventName: 'LanderStateChanged',
-    },
+	position_y: {
+		name: 'Y Position',
+		type: 'integer',
+		formElement: 'range',
+		initial: 100,
+		min: 0,
+		max: 120,
+		affects: 'lander',
+		eventName: 'LanderStateChanged',
+	},
+	position_x: {
+		name: 'X Position',
+		type: 'integer',
+		formElement: 'range',
+		initial: 50,
+		min: 0,
+		max: 100,
+		affects: 'lander',
+		eventName: 'LanderStateChanged',
+	},
+	rotation: {
+		name: 'Rotation',
+		type: 'integer',
+		formElement: 'range',
+		initial: 0,
+		min: -100,
+		max: 100,
+		affects: 'lander',
+		eventName: 'LanderStateChanged',
+	},
+	running: {
+		name: 'Running',
+		type: 'boolean',
+		formElement: 'radio',
+		initial: 'true',
+		labelTrue: 'Running',
+		labelFalse: 'Stopped',
+		affects: 'game',
+		eventName: 'GameStateChanged',
+	},
+	speed: {
+		name: 'Speed',
+		type: 'integer',
+		formElement: 'range',
+		initial: 50,
+		min: 0,
+		max: 100,
+		affects: 'lander',
+		eventName: 'LanderStateChanged',
+	},
+	thruster: {
+		name: 'Thruster',
+		type: 'integer',
+		formElement: 'range',
+		initial: 0,
+		min: 0,
+		max: 100,
+		affects: 'lander',
+		eventName: 'LanderStateChanged',
+	},
 };
diff --git a/assets/mjs/wc/game-controls.mjs b/assets/mjs/wc/game-controls.mjs
@@ -8,14 +8,15 @@ export default class GameControls extends GameElement {
 	constructor() {
 		super();
 		this.registerHandlers();
+		this.addEventListener('change', event => {console.log(event.target)});
 	}
 
 	createRangeControl(keyName, modelValue) {
 		let controlId = `rng_${keyName}`;
 
 		return `<div class="control">
 			<label for="${controlId}">${modelValue.name}</label><br>
-			<input type="range" min="${modelValue.min}" max="${modelValue.max}" id="${controlId}" name="${keyName}">
+			<input type="range" min="${modelValue.min}" max="${modelValue.max}" id="${controlId}" name="${keyName}" value="${modelValue.initial}">
 			<output for="${keyName}" name="result_${keyName}"></output>
 		</div>`;
 	}

diff --git a/assets/mjs/wc/game-engine.mjs b/assets/mjs/wc/game-engine.mjs
@@ -8,7 +8,7 @@ export default class GameEngine extends GameElement {
 	#gameRunning;
 	#gameStarted;
 	#gameEnded;
-	#gameEventFrequency = 10; // Milliseconds
+	#gameEventFrequency = 100; // 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.
 
@@ -24,18 +24,17 @@ export default class GameEngine extends GameElement {
 	constructor() {
 		super();
 
-		Object.keys(MODEL).forEach((keyName) => {
-			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++;
+		this.#gameDuration = this.#gameDuration + this.#gameEventFrequency;
+		let newPositionYAdjustment = -1;
+
+		this.modelLander.position_y = this.modelLander.position_y + newPositionYAdjustment;
+		this.#landerStateChanged({position_y: newPositionYAdjustment});
 	}
 
 	startGame() {
@@ -48,11 +47,15 @@ export default class GameEngine extends GameElement {
 	pauseGame() {
 		this.#gameRunning = false;
 		this.#gameRunningStateChanged(false);
+		window.clearInterval(this.#gameInterval);
 	}
 
 	unpauseGame() {
-		this.#gameRunning = true;
-		this.#gameRunningStateChanged(true);
+		if (!this.#gameRunning) {
+			this.#gameRunning = true;
+			this.#gameRunningStateChanged(true);
+			this.#gameInterval = window.setInterval(this.#gameLoop, this.#gameEventFrequency);
+		}
 	}
 
 	stopGame() {
@@ -63,6 +66,11 @@ export default class GameEngine extends GameElement {
 	}
 
 	setInitialValuesAndStart() {
+		Object.keys(MODEL).forEach((keyName) => {
+			let currentItem = MODEL[keyName];
+			if (currentItem.affects === 'lander') this.modelLander[keyName] = currentItem.initial;
+			this.style.setProperty(`--lander_${keyName}`, currentItem.initial);
+		});
 		this.#landerStateChanged(this.modelLander);
 		this.startGame();
 	}

diff --git a/assets/mjs/wc/lander-vehicle.mjs b/assets/mjs/wc/lander-vehicle.mjs
@@ -9,20 +9,11 @@ export default class LanderVehicle extends GameElement {
 
 		Object.keys(changes).forEach((keyName) => {
 			let newValue = changes[keyName];
-			let propertyName = null;
+			let propertyName = `--lander_${keyName}`;
+			let currentValue = parseFloat(getComputedStyle(this.gameEngineElement).getPropertyValue(propertyName));
 
-			switch (keyName) {
-				case 'rotation':
-					propertyName = '--lander_rotation';
-					break;
-				case 'thruster':
-					propertyName = '--lander_thruster';
-					break;
-			}
-
-			if (propertyName) {
-				let currentValue = parseInt(getComputedStyle(this.gameEngineElement).getPropertyValue(propertyName));
-				this.gameEngineElement.style.setProperty(propertyName, currentValue += newValue);
+			if (currentValue) {
+				this.gameEngineElement.style.setProperty(propertyName, currentValue + newValue);
 			}
 		});
 	}