UI complete

module.json

@@ -14,7 +14,8 @@
       "flags": {}
     }
   ],
-  "scripts": [
-    "scripts/configForm.js"
+  "esmodules": [
+    "scripts/configForm.js",
+    "scripts/compass.js"
   ]
 }

scripts/common.js

@@ -0,0 +1,64 @@
+export const moduleID = 'which-way-is-north';
+export const templateFile = 'modules/' + moduleID + '/templates/configForm.handlebars';
+export const defaultFlags = {
+    src: 'modules/' + moduleID + '/assets/images/compass.png',
+    rot: 0,
+    width: 100,
+    height: 100,
+    opacity: 0.5,
+    enabled: false
+}
+
+
+export function addElement(childOf, elementType, elementParams) {
+    const element = document.createElement(elementType);
+    elementParams = elementParams == null ? {} : elementParams;
+
+    applyParams(element, elementParams);
+
+    childOf.appendChild(element);
+    return element;
+}
+
+export function editElement(elementID, elementParams) {
+    const element = document.querySelector('#' + elementID);
+
+    if (element != null) applyParams(element, elementParams);
+    return element
+}
+
+function applyParams(element, elementParams) {
+    for (const [param, value] of Object.entries(elementParams)) {
+        if (typeof value == 'object') {
+            for (const [subParam, subValue] of Object.entries(value)) {
+                element[param][subParam] = subValue;
+            }
+        }
+        else {
+            element[param] = value;
+        }
+    };
+}
+
+export function getMyFlag(flagName, app) {
+    let myFlag = null
+
+    if (app == null) {
+        myFlag = game.scenes.current.getFlag(moduleID, flagName);
+
+        if (myFlag == null) {
+            myFlag = defaultFlags[flagName];
+            game.scenes.current.setFlag(moduleID, flagName, myFlag);
+        }
+    } 
+    else {
+        myFlag = app.object.getFlag(moduleID, flagName);
+
+        if (myFlag == null) {
+            myFlag = defaultFlags[flagName];
+            app.object.setFlag(moduleID, flagName, myFlag);
+        }
+    }
+
+    return myFlag;
+}

scripts/compass.js

@@ -0,0 +1,41 @@
+import { moduleID, addElement, editElement, getMyFlag } from './common.js';
+
+export function updateCompass() {
+    const elementID = moduleID + '-compass';
+    const src = getMyFlag('src');
+    const rot = getMyFlag('rot');
+    const width = getMyFlag('width');
+    const height = getMyFlag('height');
+    const opacity = getMyFlag('opacity');
+    const enabled = getMyFlag('enabled');
+
+    const visibility = enabled ? 'visible' : 'hidden';
+
+    let elementParams = {
+        style: {
+            width: width + 'px',
+            height: height + 'px',
+
+            left: '-' + (Number(width) + 20) + 'px',
+            rotate: rot + 'deg',
+
+            opacity: opacity,
+            visibility: visibility,
+            backgroundImage: 'url(' + src + ')'
+        }
+    }
+
+    if (document.querySelector('#' + elementID) == null) {
+        elementParams.id = elementID;
+        elementParams.style.position = 'absolute';
+        elementParams.style.top = '0px';
+
+        elementParams.style.backgroundSize = 'contain';
+        elementParams.style.backgroundRepeat = 'no-repeat';
+
+        addElement(document.querySelector('#ui-right'), 'figure', elementParams);
+    }
+    else editElement(elementID, elementParams);
+}
+
+Hooks.on('getSceneControlButtons', updateCompass);

scripts/configForm.js

@@ -1,110 +1,22 @@
-function toggle(doc, state = false) {
-    doc.setFlag("myModule", "myFlag", !state);
-    button.textContent = !state ? "on" : "off";
-}
+import { getMyFlag, templateFile } from './common.js';
 
-function createForm(app, html) {
-    let src = getFlag(app, 'src', ''); //TODO change default to file path
-    let rot = getFlag(app, 'rot', 0);
+async function createForm(app, html) {
+    delete _templateCache[templateFile];
 
-    // Basics Tab
     const basicsTab = html.querySelector('div[data-tab="basic"]');
-    addElement(basicsTab, 'hr');
-
-
-    // Image Container
-    const imageContainer = addElement(basicsTab, 'div', {
-        className: 'form-group'
-    });
-
-    // Image Label
-    addElement(imageContainer, 'label', {
-        innerHTML: 'Compass Image'
-    });
-    // Image Fields
-    const imageFields = addElement(imageContainer, 'div', {
-        className: 'form-fields'
-    });
-        // Browse Button
-        const browse = addElement(imageFields, 'button', {
-            type: 'button',
-            className: 'file-picker',
-            dataset: {
-                type: 'imagevideo',
-                target: 'compass.src'
-            },
-            title: 'Browse Files',
-            tabIndex: '-1'
-        });
-        addElement(browse, 'i', {
-            className: 'fas fa-file-import fa-fw',
-        });
-        // Browse File Picker
-        addElement(imageFields, 'input', {
-            className: 'image',
-            type: 'text',
-            name: 'compass.src',
-            placeholder: 'File Path',
-            value: src
-        });
-    // Image Notes
-    addElement(imageContainer, 'p', {
-        className: 'notes',
-        innerHTML: 'Configure the image that is used for the compass.'
-    });
-
-
-    // Rotation Container
-    const rotationContainer = addElement(basicsTab, 'div', {
-        className: 'form-group'
-    });
-
-    // Rotation Label
-    addElement(imageContainer, 'label', {
-        innerHTML: 'Compass Rotation'
-    });
-    // Rotation Fields
-    const rotationFields = addElement(imageContainer, 'div', {
-        className: 'form-fields'
-    });
-        // Rotation Input
-        addElement(rotationFields, 'input', {
-            type: 'number',
-            value: rot,
-            step: '1',
-            name: 'compass.rot'
-        });
-    // Image Notes
-    addElement(imageContainer, 'p', {
-        className: 'notes',
-        innerHTML: 'Value in degrees that the compass image should be rotated by.'
-    });
-
-
-    console.log(basicsTab);
-}
-
-function addElement(childOf, elementType, elementParams) {
-    const element = document.createElement(elementType);
-    elementParams = elementParams == null ? {} : elementParams;
-
-    for ([param, value] of Object.entries(elementParams)) {
-        element[param] = value
-    };
-
-    childOf.appendChild(element);
-    return element
-}
-
-function getFlag(app, flagName, defaultVal) {
-    let myFlag = app.object.getFlag('which-way-is-north', flagName);
-    if (myFlag == null) {
-        myFlag = defaultVal;
-        app.object.setFlag('which-way-is-north', flagName, defaultVal);
-    }
-    return myFlag
+    const renderedHTML = await renderTemplate(templateFile, {
+        src:     getMyFlag('src', app),
+        rot:     getMyFlag('rot', app),
+        width:   getMyFlag('width', app),
+        height:  getMyFlag('height', app),
+        opacity: getMyFlag('opacity', app),
+        enabled: getMyFlag('enabled', app)
+    });
+    basicsTab.insertAdjacentHTML('beforeend', renderedHTML);    
+
+    app.setPosition();
+    //console.log(basicsTab);
 }
 
-Hooks.on("renderSceneConfig", (app, [html]) => {
-    createForm(app, html);
-});
+Hooks.on('init', () => loadTemplates([templateFile]));
+Hooks.on('renderSceneConfig', (app, [html]) => createForm(app, html));

templates/configForm.handlebars

@@ -0,0 +1,40 @@
+<hr>
+
+<div class="form-group">
+    <label>Compass Image</label>
+    <div class="form-fields">
+        <label class="checkbox">
+            <input type="checkbox" name="compass.enabled" {{checked enabled}}>
+        </label>
+        {{filePicker type="image" target="compass.src"}}
+        <input class="image" type="text" name="compass.src" placeholder="File Path" value="{{src}}">
+    </div>
+    <p class="notes">Configure the image that is used for the compass.</p>
+</div>
+
+<div class="form-group slim">
+    <label>Compass Dimensions <span class="units">(Pixels)</span></label>
+    <div class="form-fields">
+        <label>Width</label>
+        <input type="number" step="any" name="compass.width" value="{{width}}">
+        <label>Height</label>
+        <input type="number" step="any" name="compass.height" value="{{height}}">
+    </div>
+</div>
+
+<div class="form-group slim">
+    <label>Compass Rotation <span class="units">(Degrees)</span></label>
+    <div class="form-fields">
+        <label>Rotation</label>
+        <input type="number" step="1" name="compass.rot" value="{{rot}}">
+    </div>
+</div>
+
+<div class="form-group">
+    <label>Compass Opacity <span class="units">(Percentage)</span></label>
+    <div class="form-fields">
+        {{rangePicker name="compass.opacity" value=opacity min="0" max="1" step="0.05"}}
+    </div>
+</div>
+
+