diff --git a/assets/images/compass.png b/assets/images/compass.png
new file mode 100644
index 0000000..15332c3
Binary files /dev/null and b/assets/images/compass.png differ
diff --git a/module.json b/module.json
index 2a57965..d016224 100644
--- a/module.json
+++ b/module.json
@@ -14,7 +14,8 @@
"flags": {}
}
],
- "scripts": [
- "scripts/configForm.js"
+ "esmodules": [
+ "scripts/configForm.js",
+ "scripts/compass.js"
]
}
\ No newline at end of file
diff --git a/scripts/common.js b/scripts/common.js
new file mode 100644
index 0000000..1e7da99
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/scripts/compass.js b/scripts/compass.js
new file mode 100644
index 0000000..0b69069
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/scripts/configForm.js b/scripts/configForm.js
index 472cc07..971382e 100644
--- a/scripts/configForm.js
+++ b/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);
-});
\ No newline at end of file
+Hooks.on('init', () => loadTemplates([templateFile]));
+Hooks.on('renderSceneConfig', (app, [html]) => createForm(app, html));
\ No newline at end of file
diff --git a/templates/configForm.handlebars b/templates/configForm.handlebars
new file mode 100644
index 0000000..7756036
--- /dev/null
+++ b/templates/configForm.handlebars
@@ -0,0 +1,40 @@
+
+
+
+
+
+
+
+
+
+
+