diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..f9399ff --- /dev/null +++ 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 \ No newline at end of file diff --git a/assets/mjs/model.mjs b/assets/mjs/model.mjs index 85085c4..a88e01b 100644 --- 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 index 2c44172..90cbb0a 100644 --- 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 index f9ba391..37b3b8f 100644 --- 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 index 44641a1..764abb6 100644 --- a/index.html +++ b/index.html @@ -15,6 +15,7 @@ +