Merge pull request #4 from ndorfin/insturmentation

Insturmentation overhaul

README.md

@@ -72,6 +72,8 @@ This component first renders all the controls that match the given model of metr
 - Deploy landing legs when near landing, or the user must deploy them at the right speed and altitude.
 - Navigate craters, hills, and boulders
 - Massive lateral speed
+- Rapid orbits can affect day/night cycling
+- The higher the altitude, the more round the terrain!
 - Use a parallax or exponentially scaled background, so that the terrain rushes up to the lander as it approaches.
 - Use a fixed fuel-tank, too much thrusting = running out of fuel quicker.
 - Explore multiple planets, with different environments:

assets/css/wc/game-instruments.css

@@ -0,0 +1,30 @@
+game-instruments {
+	display: block;
+}
+
+.instrument {
+	display: block;
+	position: absolute;
+	z-index: 20;
+	border: 2px solid hsl(0, 0%, 50%);
+	background-color: black;
+	box-shadow: inset 0 0 0 2px hsla(0, 0%, 0%, 0.5);
+}
+
+.instrument::after {
+	display: block;
+	position: absolute;
+	inset-block-start: calc(-1em - 6px);
+	inset-inline-start: -2px;
+	inset-inline-end: -2px;
+	line-height: 1;
+	text-align: center;
+	content: attr(label);
+	font-size: 0.875rem;
+	font-weight: 700;
+	text-transform: uppercase;
+	color: black;
+	border: 2px solid hsl(0, 0%, 50%);
+	background-color: hsl(0, 0%, 50%);
+	border-radius: 2px 2px 0 0;
+}

assets/css/wc/instrument-fuel.css

@@ -0,0 +1,16 @@
+instrument-fuel {
+	inset-block-end: calc(0.5 * var(--unit_root));
+	inset-inline-end: calc(5.5 * var(--unit_root));
+	inline-size: calc(2 * var(--unit_root));
+	block-size: calc(10 * var(--unit_root));
+	background-image: linear-gradient(hsl(198.74deg 100% 50%), hsl(218.79deg 100% 50%));
+	background-clip: content-box;
+}
+
+instrument-fuel-amount {
+	display: block;
+	position: absolute;
+	inset: 0;
+	inset-block-end: calc(var(--lander_fuel) * 1%);
+	background-color: black;
+}

assets/css/wc/instrument-map.css

@@ -0,0 +1,35 @@
+instrument-map {
+	inset-block-end: calc(0.5 * var(--unit_root));
+	inset-inline-start: calc(0.5 * var(--unit_root));
+	inline-size: calc(7 * var(--unit_root));
+	block-size: calc(10 * var(--unit_root));
+}
+
+instrument-map-lander {
+	display: block;
+	position: absolute;
+	inline-size: calc(0.5 * var(--unit_root));
+	block-size: calc(0.5 * var(--unit_root));
+	inset-block-end: calc(var(--lander_position_y) * 1%);
+	inset-inline-start: calc(var(--lander_position_x) * 1%);
+	border-radius: calc(0.125 * var(--unit_root));
+	transition-property: inset-block-end, inset-inline-start;
+	transition-duration: 0.05s;
+	transition-timing-function: linear;
+	transform: translateX(-50%);
+	background-color: orange;
+}
+
+.notification {
+	text-transform: uppercase;
+	font-weight: 700;
+	opacity: 0;
+}
+
+.notification.warning {
+	color: gold;
+}
+
+.notification.error {
+	color: red;
+}

assets/css/wc/instrument-rotation.css

@@ -0,0 +1,46 @@
+instrument-rotation {
+	inset-block-end: calc(0.5 * var(--unit_root));
+	inset-inline-start: 50%;
+	transform: translateX(-50%);
+	inline-size: calc(10 * var(--unit_root));
+	block-size: calc(2 * var(--unit_root));
+	background-color: white;
+}
+
+instrument-rotation-amount {
+	/* 
+		The input `--lander_rotation` can be an integer between -100 (full-left rotation) and 100 (full-right rotation).
+		The closer the value is 0, the better.
+	 */
+
+	--rotation-indicator-position: calc(50 - (var(--lander_rotation) / 2));
+
+	/*
+		We want to use hue degrees, where:
+			 -100                   0                    100
+			<----------------------------------------------->
+			 0deg                120deg                 0deg 
+			 (Red)               (Green)               (Red)
+	*/
+
+	/* First strip any negative sign from the rotation amount */
+	--rotation-normalised: calc(
+		var(--lander_rotation) * var(--lander_rotation) / 10000
+	);
+
+	--rotation-indicator-danger-level: calc(
+		120 - (var(--rotation-normalised) * 120)
+	);
+
+	display: block;
+	position: absolute;
+	inset-block-start: 0;
+	inset-block-end: 0;
+	inset-inline-end: calc(var(--rotation-indicator-position) * 1%);
+	inline-size: 6px;
+	transition-property: inset-block-end;
+	transition-duration: 0.05s;
+	transition-timing-function: linear;
+	background-color: grey;
+	background-color: hsl(calc(var(--rotation-indicator-danger-level) * 1deg), 100%, 50%);
+}

assets/css/wc/instrument-thruster.css

@@ -0,0 +1,19 @@
+instrument-thruster {
+	inset-block-end: calc(0.5 * var(--unit_root));
+	inset-inline-end: calc(0.5 * var(--unit_root));
+	inline-size: calc(4 * var(--unit_root));
+	block-size: calc(10 * var(--unit_root));
+	background-image: linear-gradient(hsl(0deg, 100%, 50%), hsl(40deg, 100%, 50%));
+	background-clip: content-box;
+}
+
+instrument-thruster-amount {
+	display: block;
+	position: absolute;
+	inset: 0;
+	inset-block-end: calc(var(--lander_thruster) * 1%);
+	transition-property: inset-block-end;
+	transition-duration: 0.05s;
+	transition-timing-function: linear;
+	background-color: black;
+}

assets/css/wc/lander-vehicle.css

@@ -10,7 +10,7 @@ lander-vehicle {
 	transition-duration: 0.05s;
 	transition-timing-function: linear;
 	transform:
-		translate(-50%, -50%)
+		translateX(-50%)
 		rotate(
 			calc(var(--lander_rotation) * 1deg)
 		);

assets/css/wc/lunar-surface.css

@@ -1,9 +1,10 @@
 lunar-surface {
 	display: block;
-    background-color: hsl(0, 0%, 20%);
 	block-size: calc(10 * var(--unit_root));
 	position: absolute;
 	inset-block-end: 0;
 	inset-inline-start: 0;
 	inset-inline-end: 0;
+  background-color: hsl(0, 0%, 20%);
+	background-image: linear-gradient(hsl(0, 0%, 20%), hsl(0, 0%, 10%) 50%);
 }

assets/mjs/index.mjs

@@ -1,11 +1,11 @@
 import GameEngine from './wc/game-engine.mjs?date=2023-12-26';
-import GameControls from './wc/game-controls.mjs?date=2023-12-26';
+import GameInstruments from './wc/game-instruments.mjs?date=2023-12-26';
 import LanderVehicle from './wc/lander-vehicle.mjs?date=2023-12-26';
 
 const customElementMappings = {
     'game-engine': GameEngine,
-    'game-controls': GameControls,
-    'lander-vehicle': LanderVehicle,       
+    'game-instruments': GameInstruments,
+    'lander-vehicle': LanderVehicle,
 }
 
 for (const [customElementName, customElementClass] of Object.entries(customElementMappings)) {

assets/mjs/model.mjs

@@ -1,53 +1,41 @@
 export const MODEL = {
 	position_x: {
 		name: 'X Position',
-		type: 'integer',
-		formElement: 'range',
 		initial: 50,
 		min: 0,
 		max: 100,
 		affects: 'lander',
 	},
 	position_y: {
 		name: 'Y Position',
-		type: 'integer',
-		formElement: 'range',
 		initial: 60,
 		min: 0,
-		max: 120,
+		max: 100,
 		affects: 'lander',
 	},
 	rotation: {
 		name: 'Rotation',
-		type: 'integer',
-		formElement: 'range',
 		initial: 0,
 		min: -100,
 		max: 100,
 		affects: 'lander',
 	},
 	running: {
 		name: 'Running',
-		type: 'boolean',
-		formElement: 'radio',
 		initial: 'true',
 		labelTrue: 'Running',
 		labelFalse: 'Stopped',
 		affects: 'game',
 	},
 	speed: {
 		name: 'Speed',
-		type: 'integer',
-		formElement: 'range',
 		initial: 50,
 		min: 0,
 		max: 100,
 		affects: 'lander',
 	},
 	thruster: {
 		name: 'Thruster',
-		type: 'integer',
-		formElement: 'range',
 		initial: 0,
 		min: 0,
 		max: 100,
@@ -58,22 +46,22 @@ export const MODEL = {
 export const KEYMAP = {
 	'ArrowUp': {
 		affects: 'thruster',
-		change: 1,
+		change: 5,
 		active: false,
 	},
 	'ArrowDown': {
 		affects: 'thruster',
-		change: -1,
+		change: -5,
 		active: false,
 	},
 	'ArrowLeft': {
 		affects: 'rotation',
-		change: -1,
+		change: -5,
 		active: false,
 	},
 	'ArrowRight': {
 		affects: 'rotation',
-		change: 1,
+		change: 5,
 		active: false,
 	},
 };