v1 release

Nysterian · Dec 1, 2023 · 1c28b0d · 1c28b0d
1 parent 6510259
commit 1c28b0d
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 29 deletions.
diff --git a/scripts/common.js b/scripts/common.js
@@ -1,10 +1,10 @@
 export const moduleID = 'which-way-is-north';
-export const templateFile = 'modules/' + moduleID + '/templates/configForm.handlebars';
+export const templateFile = `modules/${moduleID}/templates/configForm.html`;
 export const defaultFlags = {
-    src: 'modules/' + moduleID + '/assets/images/compass.png',
+    src: `modules/${moduleID}/assets/images/compass.png`,
     rot: 0,
-    width: 100,
-    height: 100,
+    width: 150,
+    height: 150,
     opacity: 0.5,
     enabled: false
 }
@@ -21,7 +21,7 @@ export function addElement(childOf, elementType, elementParams) {
 }
 
 export function editElement(elementID, elementParams) {
-    const element = document.querySelector('#' + elementID);
+    const element = document.querySelector(`#${elementID}`);
 
     if (element != null) applyParams(element, elementParams);
     return element

diff --git a/scripts/compass.js b/scripts/compass.js
@@ -1,7 +1,7 @@
 import { moduleID, addElement, editElement, getMyFlag } from './common.js';
 
 export function updateCompass() {
-    const elementID = moduleID + '-compass';
+    const elementID = `${moduleID}-compass`;
     const src = getMyFlag('src');
     const rot = getMyFlag('rot');
     const width = getMyFlag('width');
@@ -10,22 +10,23 @@ export function updateCompass() {
     const enabled = getMyFlag('enabled');
 
     const visibility = enabled ? 'visible' : 'hidden';
+    const hrzOffset = Number(width) + 20
 
     let elementParams = {
         style: {
-            width: width + 'px',
-            height: height + 'px',
+            width: `${width}px`,
+            height: `${height}px`,
 
-            left: '-' + (Number(width) + 20) + 'px',
-            rotate: rot + 'deg',
+            left: `-${hrzOffset}px`,
+            rotate: `${rot}deg`,
 
             opacity: opacity,
             visibility: visibility,
-            backgroundImage: 'url(' + src + ')'
+            backgroundImage: `url(${src})`
         }
     }
 
-    if (document.querySelector('#' + elementID) == null) {
+    if (document.querySelector(`#${elementID}`) == null) {
         elementParams.id = elementID;
         elementParams.style.position = 'absolute';
         elementParams.style.top = '0px';

diff --git a/scripts/configForm.js b/scripts/configForm.js
@@ -1,22 +1,27 @@
-import { getMyFlag, templateFile } from './common.js';
+import { getMyFlag, templateFile, moduleID } from './common.js';
+import { updateCompass } from './compass.js';
 
-async function createForm(app, html) {
+async function createForm(app, [html]) {
     delete _templateCache[templateFile];
 
     const basicsTab = html.querySelector('div[data-tab="basic"]');
     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)
+        moduleID: moduleID,
+        flagPath: `flags.${moduleID}`,
+        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);    
+    basicsTab.insertAdjacentHTML('beforeend', renderedHTML);
+    app.activateListeners($('div[data-tab="basic"]'));
 
     app.setPosition();
     //console.log(basicsTab);
 }
 
 Hooks.on('init', () => loadTemplates([templateFile]));
-Hooks.on('renderSceneConfig', (app, [html]) => createForm(app, html));
+Hooks.on('renderSceneConfig', createForm);
+Hooks.on('updateScene', updateCompass);
diff --git a/templates/configForm.handlebars → templates/configForm.html b/templates/configForm.handlebars → templates/configForm.html
@@ -5,10 +5,10 @@
     <label>{{ localize "which-way-is-north.sceneSettings.image.label" }}</label>
     <div class="form-fields">
         <label class="checkbox">
-            <input type="checkbox" name="compass.enabled" {{checked enabled}}>
+            <input type="checkbox" name="{{flagPath}}.enabled" {{checked enabled}}>
         </label>
-        {{filePicker type="image" target="compass.src"}}
-        <input class="image" type="text" name="compass.src" placeholder="File Path" value="{{src}}">
+        {{filePicker id=(concat moduleID "-filePicker") type="image" target=(concat flagPath ".src")}}
+        <input class="image" type="text" name="{{flagPath}}.src" placeholder="File Path" value="{{src}}">
     </div>
     <p class="notes">{{ localize "which-way-is-north.sceneSettings.image.notes" }}</p>
 </div>
@@ -18,9 +18,9 @@
     <label>{{ localize "which-way-is-north.sceneSettings.dimensions.label" }} <span class="units">({{ localize "which-way-is-north.sceneSettings.dimensions.unit" }})</span></label>
     <div class="form-fields">
         <label>{{ localize "which-way-is-north.sceneSettings.dimensions.formFields.width.label" }}</label>
-        <input type="number" step="any" name="compass.width" value="{{width}}">
+        <input type="number" step="any" name="{{flagPath}}.width" value="{{width}}">
         <label>{{ localize "which-way-is-north.sceneSettings.dimensions.formFields.height.label" }}</label>
-        <input type="number" step="any" name="compass.height" value="{{height}}">
+        <input type="number" step="any" name="{{flagPath}}.height" value="{{height}}">
     </div>
 </div>
 
@@ -29,15 +29,15 @@
     <label>{{ localize "which-way-is-north.sceneSettings.rotation.label" }} <span class="units">({{ localize "which-way-is-north.sceneSettings.rotation.unit" }})</span></label>
     <div class="form-fields">
         <label>{{ localize "which-way-is-north.sceneSettings.rotation.formFields.rotation.label" }}</label>
-        <input type="number" step="1" name="compass.rot" value="{{rot}}">
+        <input type="number" step="1" name="{{flagPath}}.rot" value="{{rot}}">
     </div>
 </div>
 
 {{! Opacity }}
 <div class="form-group">
     <label>{{ localize "which-way-is-north.sceneSettings.opacity.label" }} <span class="units">({{ localize "which-way-is-north.sceneSettings.opacity.unit" }})</span></label>
     <div class="form-fields">
-        {{rangePicker name="compass.opacity" value=opacity min="0" max="1" step="0.05"}}
+        {{rangePicker name=(concat flagPath ".opacity") value=opacity min="0" max="1" step="0.05"}}
     </div>
 </div>