Levelup Remake (#100)

* Set up DhLevelTier datamodel

* Added Levelup data model and started at the render

* Fixed data handling in the LevelUp view

* Added back the save function

* Finalised levelup selections and propagating to PC

* Added level advancement selection data

* Added DomainCard selection

* Css merge commit

* Added PC level/delevel benefits of leveling up

* Fixed sticky previous selections on continous leveling

* Fixed up Summary. Fixed multiclass/subclass blocking on selection

* Removed unused level.hbs

* Fixed attribute base for PC

* Improved naming of attribute properties

* Renamed/structured resources/evasion/proficiency

* Improved trait marking

* Rework to level up once at a time

* Added markers

* Removed tabs when in Summary

* Fixed multilevel buttons

* Improved multiclass/subclass recognition

* Fixed tagify error on selection

* Review fixes

module/helpers/handlebarsHelper.mjs

@@ -3,22 +3,19 @@ import { getWidthOfText } from './utils.mjs';
 export default class RegisterHandlebarsHelpers {
     static registerHelpers() {
         Handlebars.registerHelper({
-            looseEq: this.looseEq,
             times: this.times,
             join: this.join,
             add: this.add,
             subtract: this.subtract,
             objectSelector: this.objectSelector,
             includes: this.includes,
-            simpleEditor: this.simpleEditor,
-            debug: this.debug
+            debug: this.debug,
+            signedNumber: this.signedNumber,
+            switch: this.switch,
+            case: this.case
         });
     }
 
-    static looseEq(a, b) {
-        return a == b;
-    }
-
     static times(nr, block) {
         var accum = '';
         for (var i = 0; i < nr; ++i) accum += block.fn(i);
@@ -77,33 +74,25 @@ export default class RegisterHandlebarsHelpers {
         return new Handlebars.SafeString(html);
     }
 
-    static rangePicker(options) {
-        let { name, value, min, max, step } = options.hash;
-        name = name || 'range';
-        value = value ?? '';
-        if (Number.isNaN(value)) value = '';
-        const html = `<input type="range" name="${name}" value="${value}" min="${min}" max="${max}" step="${step}"/>
-         <span class="range-value">${value}</span>`;
-        return new Handlebars.SafeString(html);
-    }
-
     static includes(list, item) {
         return list.includes(item);
     }
 
-    static simpleEditor(content, options) {
-        const {
-            target,
-            editable = true,
-            button,
-            engine = 'tinymce',
-            collaborate = false,
-            class: cssClass
-        } = options.hash;
-        const config = { name: target, value: content, button, collaborate, editable, engine };
-        const element = foundry.applications.fields.createEditorInput(config);
-        if (cssClass) element.querySelector('.editor-content').classList.add(cssClass);
-        return new Handlebars.SafeString(element.outerHTML);
+    static signedNumber(number) {
+        return number >= 0 ? `+${number}` : number;
+    }
+
+    static switch(value, options) {
+        this.switch_value = value;
+        this.switch_break = false;
+        return options.fn(this);
+    }
+
+    static case(value, options) {
+        if (value == this.switch_value) {
+            this.switch_break = true;
+            return options.fn(this);
+        }
     }
 
     static debug(a) {

module/helpers/utils.mjs

@@ -1,4 +1,5 @@
 import { getDiceSoNicePresets } from '../config/generalConfig.mjs';
+import Tagify from '@yaireo/tagify';
 
 export const loadCompendiumOptions = async compendiums => {
     const compendiumValues = [];
@@ -131,3 +132,93 @@ export const setDiceSoNiceForDualityRoll = (rollResult, advantage, disadvantage)
         rollResult.dice[2].options.appearance = diceSoNicePresets.disadvantage;
     }
 };
+
+export const chunkify = (array, chunkSize, mappingFunc) => {
+    var chunkifiedArray = [];
+    for (let i = 0; i < array.length; i += chunkSize) {
+        const chunk = array.slice(i, i + chunkSize);
+        if (mappingFunc) {
+            chunkifiedArray.push(mappingFunc(chunk));
+        } else {
+            chunkifiedArray.push(chunk);
+        }
+    }
+
+    return chunkifiedArray;
+};
+
+export const tagifyElement = (element, options, onChange, tagifyOptions = {}) => {
+    const { maxTags } = tagifyOptions;
+    const tagifyElement = new Tagify(element, {
+        tagTextProp: 'name',
+        enforceWhitelist: true,
+        whitelist: Object.keys(options).map(key => {
+            const option = options[key];
+            return {
+                value: key,
+                name: game.i18n.localize(option.label),
+                src: option.src
+            };
+        }),
+        maxTags: maxTags,
+        dropdown: {
+            mapValueTo: 'name',
+            searchKeys: ['name'],
+            enabled: 0,
+            maxItems: 20,
+            closeOnSelect: true,
+            highlightFirst: false
+        },
+        templates: {
+            tag(tagData) {
+                return `<tag title="${tagData.title || tagData.value}"
+                    contenteditable='false'
+                    spellcheck='false'
+                    tabIndex="${this.settings.a11y.focusableTags ? 0 : -1}"
+                    class="${this.settings.classNames.tag} ${tagData.class ? tagData.class : ''}"
+                    ${this.getAttributes(tagData)}> 
+            <x class="${this.settings.classNames.tagX}" role='button' aria-label='remove tag'></x>
+            <div>
+                <span class="${this.settings.classNames.tagText}">${tagData[this.settings.tagTextProp] || tagData.value}</span>
+                ${tagData.src ? `<img src="${tagData.src}"></i>` : ''}
+            </div>
+            </tag>`;
+            }
+        }
+    });
+
+    const onSelect = async event => {
+        const inputElement = event.detail.tagify.DOM.originalInput;
+        const selectedOptions = event.detail?.value ? JSON.parse(event.detail.value) : [];
+
+        const unusedDropDownItems = event.detail.tagify.suggestedListItems;
+        const missingOptions = Object.keys(options).filter(x => !unusedDropDownItems.find(item => item.value === x));
+        const removedItem = missingOptions.find(x => !selectedOptions.find(item => item.value === x));
+        const addedItem = removedItem
+            ? null
+            : selectedOptions.find(x => !missingOptions.find(item => item === x.value));
+
+        const changedItem = { option: removedItem ?? addedItem.value, removed: Boolean(removedItem) };
+
+        onChange(selectedOptions, changedItem, inputElement);
+    };
+    tagifyElement.on('change', onSelect);
+};
+
+export const getDeleteKeys = (property, innerProperty, innerPropertyDefaultValue) => {
+    return Object.keys(property).reduce((acc, key) => {
+        if (innerProperty) {
+            if (innerPropertyDefaultValue !== undefined) {
+                acc[`${key}`] = {
+                    [innerProperty]: innerPropertyDefaultValue
+                };
+            } else {
+                acc[`${key}.-=${innerProperty}`] = null;
+            }
+        } else {
+            acc[`-=${key}`] = null;
+        }
+
+        return acc;
+    }, {});
+};