From bde31aa89103364300559c2eaac2d0077d5319c3 Mon Sep 17 00:00:00 2001
From: Shaun O'Connell <ndorfin@gmail.com>
Date: Sun, 11 Feb 2024 16:42:35 +1300
Subject: [PATCH 1/3] Switch to templates for HTML authoring

---
 assets/mjs/wc/game-controls.mjs | 60 +++++++++++++--------------------
 index.html                      | 20 +++++++++--
 2 files changed, 41 insertions(+), 39 deletions(-)

diff --git a/assets/mjs/wc/game-controls.mjs b/assets/mjs/wc/game-controls.mjs
index 90cbb0a..65ab00d 100644
--- a/assets/mjs/wc/game-controls.mjs
+++ b/assets/mjs/wc/game-controls.mjs
@@ -4,63 +4,49 @@ 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');
+	createRangeControl(keyName, modelValue) {
+		let controlId = `rng_${keyName}`;
+		let wrapper = this.querySelector('#tmpl_control_range').content.cloneNode(true);
 
+		let label = wrapper.querySelector('label');
+		label.textContent = modelValue.name;
 		label.setAttribute('for', controlId);
-		label.textContent = labelValue;
 
-		return label;
-	}
+		let input = wrapper.querySelector('input');
+		input.min = modelValue.min;
+		input.max = modelValue.max;
+		input.name = keyName;
+		input.id = controlId;
+		input.value = modelValue.initial;
+
+		let output = wrapper.querySelector('output');
+		output.setAttribute('for', keyName);
+		output.name = `result_${keyName}`;
 
-	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);
+		let label = this.querySelector('#tmpl_control_radio').content.children[0].cloneNode(true);
+		label.setAttribute('for', controlId);
+		label.append(labelValue);
 
+		let input = label.querySelector('input');
+		input.name = keyName;
+		input.id = controlId;
+		input.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();
+			let wrapper = this.querySelector('#tmpl_control_boolean').content.children[0].cloneNode(true);
 
 			['true', 'false'].forEach((state) => {
 				wrapper.appendChild(this.createRadioControl(keyName, modelValue, state));
diff --git a/index.html b/index.html
index 764abb6..3f18a14 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,23 @@
 
 <game-scene>
     <game-controls>
-				<!-- 
+			<template id="tmpl_control_range">
+				<div class="control">
+					<label for="">[LABEL]</label><br>
+					<input type="range" min="" max="" id="" name="">
+					<output for="" name="result_"></output>
+				</div>
+			</template>
+			<template id="tmpl_control_radio">
+				<label>
+					<input type="radio" name="" id="" value="">&nbsp;
+				</label>
+			</template>
+			<template id="tmpl_control_boolean">
+				<div class="control">
+				</div>
+			</template>
+			<!-- 
         <form>
             <div class="control">
                 <label for="rng_rotation">Rotation</label><br>
@@ -47,7 +63,7 @@
                 <output for="running" name="result_running"></output>
             </div>
         </form>
-				-->
+			-->
     </game-controls>
     <!--
     <incoming-asteroid></incoming-asteroid>

From 3ac1886832bf173685f41c4fc61f46db3cfa3bdd Mon Sep 17 00:00:00 2001
From: Shaun O'Connell <ndorfin@gmail.com>
Date: Sun, 11 Feb 2024 16:58:16 +1300
Subject: [PATCH 2/3] Split up the form controls wrapper into another template

---
 assets/mjs/wc/game-controls.mjs | 14 +++++++++-----
 index.html                      | 15 ++++++---------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/assets/mjs/wc/game-controls.mjs b/assets/mjs/wc/game-controls.mjs
index 65ab00d..d5e9f3b 100644
--- a/assets/mjs/wc/game-controls.mjs
+++ b/assets/mjs/wc/game-controls.mjs
@@ -4,25 +4,29 @@ import { MODEL } from './../model.mjs';
 export default class GameControls extends GameElement {
 	#formElements = MODEL;
 
+
 	createRangeControl(keyName, modelValue) {
+		let wrapper = this.querySelector('#tmpl_control_group_wrapper').content.children[0].cloneNode(true);
+		let rangeFragement = this.querySelector('#tmpl_control_range').content.cloneNode(true);
 		let controlId = `rng_${keyName}`;
-		let wrapper = this.querySelector('#tmpl_control_range').content.cloneNode(true);
 
-		let label = wrapper.querySelector('label');
+		let label = rangeFragement.querySelector('label');
 		label.textContent = modelValue.name;
 		label.setAttribute('for', controlId);
 
-		let input = wrapper.querySelector('input');
+		let input = rangeFragement.querySelector('input');
 		input.min = modelValue.min;
 		input.max = modelValue.max;
 		input.name = keyName;
 		input.id = controlId;
 		input.value = modelValue.initial;
 
-		let output = wrapper.querySelector('output');
+		let output = rangeFragement.querySelector('output');
 		output.setAttribute('for', keyName);
 		output.name = `result_${keyName}`;
 
+		wrapper.append(rangeFragement);
+
 		return wrapper;
 	}
 
@@ -46,7 +50,7 @@ export default class GameControls extends GameElement {
 
 	createRadioControlGroup(keyName, modelValue) {
 		if (modelValue.type === 'boolean') {
-			let wrapper = this.querySelector('#tmpl_control_boolean').content.children[0].cloneNode(true);
+			let wrapper = this.querySelector('#tmpl_control_group_wrapper').content.children[0].cloneNode(true);
 
 			['true', 'false'].forEach((state) => {
 				wrapper.appendChild(this.createRadioControl(keyName, modelValue, state));
diff --git a/index.html b/index.html
index 3f18a14..07a0e96 100644
--- a/index.html
+++ b/index.html
@@ -16,20 +16,17 @@
 <game-scene>
     <game-controls>
 			<template id="tmpl_control_range">
-				<div class="control">
-					<label for="">[LABEL]</label><br>
-					<input type="range" min="" max="" id="" name="">
-					<output for="" name="result_"></output>
-				</div>
+				<label for=""></label><br>
+				<input type="range" min="" max="" id="" name="">
+				<output for="" name=""></output>
 			</template>
 			<template id="tmpl_control_radio">
 				<label>
-					<input type="radio" name="" id="" value="">&nbsp;
+					<input type="radio" name="" id="" value="">
 				</label>
 			</template>
-			<template id="tmpl_control_boolean">
-				<div class="control">
-				</div>
+			<template id="tmpl_control_group_wrapper">
+				<div class="control"></div>
 			</template>
 			<!-- 
         <form>

From ab746cf335f66b6a1fce72fc5e4eec872f6c0874 Mon Sep 17 00:00:00 2001
From: Shaun O'Connell <ndorfin@gmail.com>
Date: Wed, 14 Feb 2024 03:41:48 +1300
Subject: [PATCH 3/3] Use template literals in place of HTML templates

---
 assets/mjs/wc/game-controls.mjs | 65 +++++++++++----------------------
 index.html                      | 13 -------
 2 files changed, 21 insertions(+), 57 deletions(-)

diff --git a/assets/mjs/wc/game-controls.mjs b/assets/mjs/wc/game-controls.mjs
index d5e9f3b..2dca5f4 100644
--- a/assets/mjs/wc/game-controls.mjs
+++ b/assets/mjs/wc/game-controls.mjs
@@ -4,60 +4,42 @@ import { MODEL } from './../model.mjs';
 export default class GameControls extends GameElement {
 	#formElements = MODEL;
 
-
 	createRangeControl(keyName, modelValue) {
-		let wrapper = this.querySelector('#tmpl_control_group_wrapper').content.children[0].cloneNode(true);
-		let rangeFragement = this.querySelector('#tmpl_control_range').content.cloneNode(true);
 		let controlId = `rng_${keyName}`;
 
-		let label = rangeFragement.querySelector('label');
-		label.textContent = modelValue.name;
-		label.setAttribute('for', controlId);
-
-		let input = rangeFragement.querySelector('input');
-		input.min = modelValue.min;
-		input.max = modelValue.max;
-		input.name = keyName;
-		input.id = controlId;
-		input.value = modelValue.initial;
-
-		let output = rangeFragement.querySelector('output');
-		output.setAttribute('for', keyName);
-		output.name = `result_${keyName}`;
-
-		wrapper.append(rangeFragement);
-
-		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.querySelector('#tmpl_control_radio').content.children[0].cloneNode(true);
-		label.setAttribute('for', controlId);
-		label.append(labelValue);
+		let isChecked = null;
 
-		let input = label.querySelector('input');
-		input.name = keyName;
-		input.id = controlId;
-		input.value = state;
 		if (modelValue.initial === state) {
-			input.setAttribute('checked', 'checked');
+			isChecked = 'checked';
 		}
 
-		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.querySelector('#tmpl_control_group_wrapper').content.children[0].cloneNode(true);
-
-			['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() {
@@ -65,22 +47,17 @@ export default class GameControls extends GameElement {
 
 		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
index 07a0e96..6c667af 100644
--- a/index.html
+++ b/index.html
@@ -15,19 +15,6 @@
 
 <game-scene>
     <game-controls>
-			<template id="tmpl_control_range">
-				<label for=""></label><br>
-				<input type="range" min="" max="" id="" name="">
-				<output for="" name=""></output>
-			</template>
-			<template id="tmpl_control_radio">
-				<label>
-					<input type="radio" name="" id="" value="">
-				</label>
-			</template>
-			<template id="tmpl_control_group_wrapper">
-				<div class="control"></div>
-			</template>
 			<!-- 
         <form>
             <div class="control">