Merge pull request #2 from ndorfin/template-literals

Use template literals rather than HTML templates or DOM methods
OCBroCode · Feb 13, 2024 · 70b74c8 · 70b74c8
2 parents 15eaa90 + ab746cf
commit 70b74c8
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 57 deletions.
diff --git a/assets/mjs/wc/game-controls.mjs b/assets/mjs/wc/game-controls.mjs
@@ -4,93 +4,60 @@ import { MODEL } from './../model.mjs';
 export default class GameControls extends GameElement {
 	#formElements = MODEL;
 
-	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);
+		let controlId = `rng_${keyName}`;
 
-		wrapper.appendChild(label);
-		wrapper.appendChild(br);
-		wrapper.appendChild(input);
-		return wrapper;
+		return `<div class="control">
+			<label for="${ controlId }">${ modelValue.name }</label><br>
+			<input type="range" min="${ modelValue.min }" max="${ modelValue.max }" id="${ controlId }" name="${ keyName }" value="${ modelValue.initial }">
+			<output for="${ keyName }" name="result_${ keyName }"></output>
+		</div>`;
 	}
 
 	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);
+		let isChecked = null;
 
 		if (modelValue.initial === state) {
-			input.setAttribute('checked', 'checked');
+			isChecked = 'checked';
 		}
 
-		label.prepend(input);
-
-		return label;
+		return `<label for="${ controlId }">
+			<input type="radio" name="${ keyName }" id="${ controlId }" value="${ state }" ${ isChecked }>&nbsp;${ labelValue }
+		</label>`;
 	}
 
 	createRadioControlGroup(keyName, modelValue) {
+		let htmlString = '';
+
 		if (modelValue.type === 'boolean') {
-			let wrapper = this.createFormControlWrapper();
-
-			['true', 'false'].forEach((state) => {
-				wrapper.appendChild(this.createRadioControl(keyName, modelValue, state));
-			});
-
-			return wrapper;
+			htmlString = `<div class="control">
+				${ this.createRadioControl(keyName, modelValue, 'true') }
+				${ this.createRadioControl(keyName, modelValue, 'false') }
+				<output for="${ keyName }" name="result_${ keyName }"></output>
+			</div>`;
 		}
+
+		return htmlString;
 	}
 
 	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);
+					form.innerHTML += this.createRangeControl(key, value);
 					break;
 				case 'radio':
 					// this.createRadioControlGroup(key, value);
-					control = this.createRadioControlGroup(key, value);
+					form.innerHTML += this.createRadioControlGroup(key, value);
 					break;
 			}
-
-			if (control) {
-				form.appendChild(control);
-			}
 		});
 
 		this.appendChild(form);

diff --git a/index.html b/index.html
@@ -15,7 +15,7 @@
 
 <game-scene>
     <game-controls>
-				<!-- 
+			<!-- 
         <form>
             <div class="control">
                 <label for="rng_rotation">Rotation</label><br>
@@ -47,7 +47,7 @@
                 <output for="running" name="result_running"></output>
             </div>
         </form>
-				-->
+			-->
     </game-controls>
     <!--
     <incoming-asteroid></incoming-asteroid>