Get the GameControls class to generate the form elements

OCBroCode · Feb 11, 2024 · 15eaa90 · 15eaa90
1 parent 543a47b
commit 15eaa90
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 14 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = tab
+indent_size = 2
+end_of_line = crlf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false
diff --git a/assets/mjs/model.mjs b/assets/mjs/model.mjs
@@ -1,29 +1,41 @@
 export const MODEL = {
     altitude: {
+        name: 'Altitude',
         type: 'integer',
         formElement: 'range',
+        initial: 100,
         min: 0,
         max: 120,
     },
     rotation: {
+        name: 'Rotation',
         type: 'integer',
         formElement: 'range',
+        initial: 0,
         min: -100,
         max: 100,
     },
     running: {
+        name: 'Running',
         type: 'boolean',
         formElement: 'radio',
+        initial: 'true',
+				labelTrue: 'Running',
+				labelFalse: 'Stopped'
     },
     speed: {
+        name: 'Speed',
         type: 'integer',
         formElement: 'range',
+        initial: 50,
         min: 0,
         max: 100,
     },
     thruster: {
+        name: 'Thruster',
         type: 'integer',
         formElement: 'range',
+        initial: 0,
         min: 0,
         max: 100,
     },

diff --git a/assets/mjs/wc/game-controls.mjs b/assets/mjs/wc/game-controls.mjs
@@ -2,12 +2,103 @@ import GameElement from './game-element.mjs';
 import { MODEL } from './../model.mjs';
 
 export default class GameControls extends GameElement {
-    #formElements = MODEL;
+	#formElements = MODEL;
 
-    connectedCallback() {
-        super.connectedCallback();
-        console.log('MODEL', MODEL);
-        console.log(Object.entries(this.#formElements));
-    }
+	createFormControlWrapper() {
+		let wrapper = document.createElement('div');
+		wrapper.className = 'control';
+
+		return wrapper;
+	}
+
+	createFormControlLabel(labelValue, controlId) {
+		let label = document.createElement('label');
+
+		label.setAttribute('for', controlId);
+		label.textContent = labelValue;
+
+		return label;
+	}
+
+	createRangeControl(keyName, modelValue) {
+		let wrapper = this.createFormControlWrapper();
+		let br = document.createElement('br');
+		let label = this.createFormControlLabel(modelValue.name, `rng_${keyName}`);
+		let input = document.createElement('input');
+
+		input.setAttribute('type', 'range');
+		input.setAttribute('min', modelValue.min);
+		input.setAttribute('max', modelValue.max);
+		input.setAttribute('name', keyName);
+		input.setAttribute('id', `rng_${keyName}`);
+		input.setAttribute('value', modelValue.initial);
+
+		wrapper.appendChild(label);
+		wrapper.appendChild(br);
+		wrapper.appendChild(input);
+		return wrapper;
+	}
+
+	createRadioControl(keyName, modelValue, state) {
+		let controlId = `rdo_${keyName}_${state}`;
+		let labelValue = state === 'true' ? modelValue.labelTrue : modelValue.labelFalse;
+		let label = this.createFormControlLabel(labelValue, controlId);
+		let input = document.createElement('input');
+
+		input.setAttribute('type', 'radio');
+		input.setAttribute('name', controlId);
+		input.setAttribute('value', state);
+
+		if (modelValue.initial === state) {
+			input.setAttribute('checked', 'checked');
+		}
+
+		label.prepend(input);
+
+		return label;
+	}
+
+	createRadioControlGroup(keyName, modelValue) {
+		if (modelValue.type === 'boolean') {
+			let wrapper = this.createFormControlWrapper();
+
+			['true', 'false'].forEach((state) => {
+				wrapper.appendChild(this.createRadioControl(keyName, modelValue, state));
+			});
+
+			return wrapper;
+		}
+	}
+
+	associateWithFormControls() {
+		let form = document.createElement('form');
+
+		Object.keys(this.#formElements).forEach((key) => {
+			let value = this.#formElements[key];
+			let control = null;
+
+			switch (value.formElement) {
+				case 'range':
+					// this.createRangeControl(key, value);
+					control = this.createRangeControl(key, value);
+					break;
+				case 'radio':
+					// this.createRadioControlGroup(key, value);
+					control = this.createRadioControlGroup(key, value);
+					break;
+			}
+
+			if (control) {
+				form.appendChild(control);
+			}
+		});
+
+		this.appendChild(form);
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this.associateWithFormControls();
+	}
 }
 
diff --git a/assets/mjs/wc/game-element.mjs b/assets/mjs/wc/game-element.mjs
@@ -1,10 +1,4 @@
 export default class GameElement extends HTMLElement {
-
-    constructor() {
-        // Always call super first in constructor
-        super();
-    }
-
     connectedCallback() {
         console.log(`Custom element ${this.constructor.name} added to page.`);
     }

diff --git a/index.html b/index.html
@@ -15,6 +15,7 @@
 
 <game-scene>
     <game-controls>
+				<!-- 
         <form>
             <div class="control">
                 <label for="rng_rotation">Rotation</label><br>
@@ -38,14 +39,15 @@
             </div>
             <div class="control">
                 <label for="rdo_running_start">
-                    <input type="radio" name="running" id="rdo_running_start" value="start">&nbsp;Start
+                    <input type="radio" name="running" id="rdo_running_start" value="true">&nbsp;Start
                 </label>
                 <label for="rdo_running_stop">
-                    <input type="radio" name="running" id="rdo_running_stop" value="stop">&nbsp;Stop
+                    <input type="radio" name="running" id="rdo_running_stop" value="false">&nbsp;Stop
                 </label>
                 <output for="running" name="result_running"></output>
             </div>
         </form>
+				-->
     </game-controls>
     <!--
     <incoming-asteroid></incoming-asteroid>