The calculated capacity is how much space in your inventory that the item will take up, the way it is calculated is determined by the item. Usually the main thing that affects the capacity is the item's quantity, but this can be turned off by the @dotdungeon.common.gm, which means that no matter the quantity it will only use up one capacity. The @dotdungeon.common.gm can also entirely disable capacity usage which will make the used capacity always be zero.
" + } + }, + "delete": { + "ActiveEffect": { + "title": "Delete Effect", + "content": "Are you sure you would like to delete the active effect: {name}
" + } } }, "TYPES": { @@ -95,6 +121,9 @@ "legendaryItem": "Legendary Item", "spell": "Spell", "untyped": "Custom" + }, + "ActiveEffect": { + "base": "Effect" } } } \ No newline at end of file diff --git a/module/components/icon.mjs b/module/components/icon.mjs new file mode 100644 index 0000000..8c70d40 --- /dev/null +++ b/module/components/icon.mjs @@ -0,0 +1,125 @@ +import { StyledShadowElement } from "./mixins/Styles.mjs"; + +/** +Attributes: +@property {string} name - The name of the icon, takes precedence over the path +@property {string} path - The path of the icon file +*/ +export class DotDungeonIcon extends StyledShadowElement(HTMLElement) { + static elementName = `dd-icon`; + static formAssociated = false; + + /* Stuff for the mixin to use */ + static _stylePath = `v3/components/icon.css`; + + + static _cache = new Map(); + #container; + /** @type {null | string} */ + _name; + /** @type {null | string} */ + _path; + + /* Stored IDs for all of the hooks that are in this component */ + #svgHmr; + + constructor() { + super(); + // this._shadow = this.attachShadow({ mode: `open`, delegatesFocus: true }); + + this.#container = document.createElement(`div`); + this._shadow.appendChild(this.#container); + }; + + _mounted = false; + async connectedCallback() { + super.connectedCallback(); + if (this._mounted) return; + + this._name = this.getAttribute(`name`); + this._path = this.getAttribute(`path`); + + /* + This converts all of the double-dash prefixed properties on the element to + CSS variables so that they don't all need to be provided by doing style="" + */ + for (const attrVar of this.attributes) { + if (attrVar.name?.startsWith(`var:`)) { + const prop = attrVar.name.replace(`var:`, ``); + this.style.setProperty(`--` + prop, attrVar.value); + }; + }; + + /* + Try to retrieve the icon if it isn't present, try the path then default to + the slot content, as then we can have a default per-icon usage + */ + let content; + if (this._name) { + content = await this.#getIcon(`./systems/dotdungeon/assets/${this._name}.svg`); + }; + + if (this._path && !content) { + content = await this.#getIcon(this._path); + }; + + if (content) { + this.#container.appendChild(content.cloneNode(true)); + }; + + /* + This is so that when we get an HMR event from Foundry we can appropriately + handle it using our logic to update the component and the icon cache. + */ + if (game.settings.get(`dotdungeon`, `devMode`)) { + this.#svgHmr = Hooks.on(`dd-hmr:svg`, (iconName, data) => { + if (this._name === iconName || this._path?.endsWith(data.path)) { + const svg = this.#parseSVG(data.content); + this.constructor._cache.set(iconName, svg); + this.#container.replaceChildren(svg.cloneNode(true)); + }; + }); + }; + + this._mounted = true; + }; + + disconnectedCallback() { + super.disconnectedCallback(); + if (!this._mounted) return; + + Hooks.off(`dd-hmr:svg`, this.#svgHmr); + + this._mounted = false; + }; + + async #getIcon(path) { + // Cache hit! + if (this.constructor._cache.has(path)) { + console.debug(`.dungeon | Icon ${path} cache hit`); + return this.constructor._cache.get(path); + }; + + const r = await fetch(path); + switch (r.status) { + case 200: + case 201: + break; + default: + console.error(`.dungeon | Failed to fetch icon: ${path}`); + return; + }; + + console.debug(`.dungeon | Adding icon ${path} to the cache`); + const svg = this.#parseSVG(await r.text()); + this.constructor._cache.set(path, svg); + return svg; + }; + + /** Takes an SVG string and returns it as a DOM node */ + #parseSVG(content) { + const temp = document.createElement(`div`); + temp.innerHTML = content; + return temp.querySelector(`svg`); + }; +}; diff --git a/module/components/incrementer.mjs b/module/components/incrementer.mjs new file mode 100644 index 0000000..68e426a --- /dev/null +++ b/module/components/incrementer.mjs @@ -0,0 +1,149 @@ +import { DotDungeonIcon } from "./icon.mjs"; +import { StyledShadowElement } from "./mixins/Styles.mjs"; + +/** +Attributes: +@property {string} name - The path to the value to update +@property {number} value - The actual value of the input +@property {number} min - The minimum value of the input +@property {number} max - The maximum value of the input +@property {number?} smallStep - The step size used for the buttons and arrow keys +@property {number?} largeStep - The step size used for the buttons + Ctrl and page up / down + +Styling: +- `--height`: Controls the height of the element + the width of the buttons (default: 1.25rem) +- `--width`: Controls the width of the number input (default 50px) +*/ +export class DotDungeonIncrementer extends StyledShadowElement(HTMLElement) { + static elementName = `dd-incrementer`; + static formAssociated = true; + + static _stylePath = `v3/components/incrementer.css`; + + _internals; + #input; + + _min; + _max; + _smallStep; + _largeStep; + + constructor() { + super(); + + // Form internals + this._internals = this.attachInternals(); + this._internals.role = `spinbutton`; + }; + + get form() { + return this._internals.form; + } + + get name() { + return this.getAttribute(`name`); + } + set name(value) { + this.setAttribute(`name`, value); + } + + get value() { + return this.getAttribute(`value`); + }; + set value(value) { + this.setAttribute(`value`, value); + }; + + get type() { + return `number`; + } + + connectedCallback() { + super.connectedCallback(); + this.replaceChildren(); + + // Attribute parsing / registration + const value = this.getAttribute(`value`); + this._min = parseInt(this.getAttribute(`min`) ?? 0); + this._max = parseInt(this.getAttribute(`max`) ?? 0); + this._smallStep = parseInt(this.getAttribute(`smallStep`) ?? 1); + this._largeStep = parseInt(this.getAttribute(`largeStep`) ?? 5); + + this._internals.ariaValueMin = this._min; + this._internals.ariaValueMax = this._max; + + const container = document.createElement(`div`); + + // The input that the user can see / modify + const input = document.createElement(`input`); + this.#input = input; + input.type = `number`; + input.ariaHidden = true; + input.min = this.getAttribute(`min`); + input.max = this.getAttribute(`max`); + input.addEventListener(`change`, this.#updateValue.bind(this)); + input.value = value; + + // plus button + const increment = document.createElement(DotDungeonIcon.elementName); + increment.setAttribute(`name`, `ui/plus`); + increment.setAttribute(`var:size`, `0.75rem`); + increment.setAttribute(`var:fill`, `currentColor`); + increment.ariaHidden = true; + increment.classList.value = `increment`; + increment.addEventListener(`mousedown`, this.#increment.bind(this)); + + // minus button + const decrement = document.createElement(DotDungeonIcon.elementName); + decrement.setAttribute(`name`, `ui/minus`); + decrement.setAttribute(`var:size`, `0.75rem`); + decrement.setAttribute(`var:fill`, `currentColor`); + decrement.ariaHidden = true; + decrement.classList.value = `decrement`; + decrement.addEventListener(`mousedown`, this.#decrement.bind(this)); + + // Construct the DOM + container.appendChild(decrement); + container.appendChild(input); + container.appendChild(increment); + this._shadow.appendChild(container); + + /* + This converts all of the namespace prefixed properties on the element to + CSS variables so that they don't all need to be provided by doing style="" + */ + for (const attrVar of this.attributes) { + if (attrVar.name?.startsWith(`var:`)) { + const prop = attrVar.name.replace(`var:`, ``); + this.style.setProperty(`--` + prop, attrVar.value); + }; + }; + }; + + #updateValue() { + let value = parseInt(this.#input.value); + if (this.getAttribute(`min`)) value = Math.max(this._min, value); + if (this.getAttribute(`max`)) value = Math.min(this._max, value); + this.#input.value = value; + this.value = value; + this.dispatchEvent(new Event(`change`, { bubbles: true })); + }; + + /** @param {Event} $e */ + #increment($e) { + $e.preventDefault(); + let value = parseInt(this.#input.value); + value += $e.ctrlKey ? this._largeStep : this._smallStep; + this.#input.value = value; + this.#updateValue(); + }; + + /** @param {Event} $e */ + #decrement($e) { + $e.preventDefault(); + let value = parseInt(this.#input.value); + value -= $e.ctrlKey ? this._largeStep : this._smallStep; + this.#input.value = value; + this.#updateValue(); + }; +}; diff --git a/module/components/index.mjs b/module/components/index.mjs new file mode 100644 index 0000000..f4d39e9 --- /dev/null +++ b/module/components/index.mjs @@ -0,0 +1,23 @@ +import { DotDungeonIncrementer } from "./incrementer.mjs"; +import { DotDungeonIcon } from "./icon.mjs"; + +const components = [ + DotDungeonIcon, + DotDungeonIncrementer, +]; + +export function registerCustomComponents() { + (CONFIG.CACHE ??= {}).componentListeners ??= []; + for (const component of components) { + if (!window.customElements.get(component.elementName)) { + console.debug(`.dungeon | Registering component "${component.elementName}"`); + window.customElements.define( + component.elementName, + component + ); + if (component.formAssociated) { + CONFIG.CACHE.componentListeners.push(component.elementName); + } + }; + } +}; diff --git a/module/components/mixins/Styles.mjs b/module/components/mixins/Styles.mjs new file mode 100644 index 0000000..33d5eb5 --- /dev/null +++ b/module/components/mixins/Styles.mjs @@ -0,0 +1,80 @@ +/** + * @param {HTMLElement} Base + */ +export function StyledShadowElement(Base) { + return class extends Base { + /** + * The path to the CSS that is loaded + * @type {string} + */ + static _stylePath; + + /** + * The stringified CSS to use + * @type {string} + */ + static _styles; + + /** + * The HTML element of the stylesheet + * @type {HTMLStyleElement} + */ + _style; + + /** @type {ShadowRoot} */ + _shadow; + + /** + * The hook ID for this element's CSS hot reload + * @type {number} + */ + #cssHmr; + + constructor() { + super(); + + this._shadow = this.attachShadow({ mode: `open` }); + this._style = document.createElement(`style`); + this._shadow.appendChild(this._style); + }; + + #mounted = false; + connectedCallback() { + if (this.#mounted) return; + + this._getStyles(); + + if (game.settings.get(`dotdungeon`, `devMode`)) { + this.#cssHmr = Hooks.on(`dd-hmr:css`, (data) => { + if (data.path.endsWith(this.constructor._stylePath)) { + this._style.innerHTML = data.content; + }; + }); + }; + + this.#mounted = true; + }; + + disconnectedCallback() { + if (!this.#mounted) return; + if (this.#cssHmr != null) { + Hooks.off(`dd-hmr:css`, this.#cssHmr); + this.#cssHmr = null; + }; + this.#mounted = false; + }; + + _getStyles() { + if (this.constructor._styles) { + this._style.innerHTML = this.constructor._styles; + } else { + fetch(`./systems/dotdungeon/.styles/${this.constructor._stylePath}`) + .then(r => r.text()) + .then(t => { + this.constructor._styles = t; + this._style.innerHTML = t; + }); + } + }; + }; +}; diff --git a/module/config.mjs b/module/config.mjs index 591fd84..56a0fb4 100644 --- a/module/config.mjs +++ b/module/config.mjs @@ -34,8 +34,10 @@ export const skills = { export const defaultItemTier = `simple`; export const itemTiers = [ - `simple`, `greater`, - `rare`, `legendary` + { value: `simple`, label: `dotdungeon.rarity.simple` }, + { value: `greater`, label: `dotdungeon.rarity.greater` }, + { value: `rare`, label: `dotdungeon.rarity.rare` }, + { value: `legendary`, label: `dotdungeon.rarity.legendary` }, ]; export const syncMilestones = [ diff --git a/module/dialogs/DiceList.mjs b/module/dialogs/DiceList.mjs index f9793de..3c305c8 100644 --- a/module/dialogs/DiceList.mjs +++ b/module/dialogs/DiceList.mjs @@ -12,7 +12,7 @@ export class DiceList extends GenericDialog { }; static get defaultOptions() { - const opts = mergeObject({ + const opts = foundry.utils.mergeObject({ ...super.defaultOptions, template: `systems/dotdungeon/templates/dialogs/diceList.hbs`, width: 275, diff --git a/module/dialogs/PopoutTextEditor.mjs b/module/dialogs/PopoutTextEditor.mjs deleted file mode 100644 index fc74b62..0000000 --- a/module/dialogs/PopoutTextEditor.mjs +++ /dev/null @@ -1,51 +0,0 @@ -export class PopoutTextEditor extends FormApplication { - - /** - * Creates a form - */ - static create(value) {}; - - /** @override */ - constructor(actor, property, options = {}) { - super(actor, options); - this.property = property; - }; - - static get defaultOptions() { - const opts = mergeObject({ - ...super.defaultOptions, - title: `Rich Text Editor`, - template: `systems/dotdungeon/templates/dialogs/text-editor.hbs`, - width: 500, - height: 600, - submitOnClose: false, - resizable: true, - }); - return opts; - }; - - async getData() { - const ctx = await super.getData(); - - ctx.editor = { - engine: `prosemirror`, - collaborate: true, - content: await TextEditor.enrichHTML( - await getProperty(this.document, this.property), - { - relativeTo: this.object, - secrets: this.object.isOwner, - async: true - } - ), - target: this.property, - }; - - return ctx; - }; - - async _updateObject(_event, formData) { - console.log(formData); - this.document.update({ [this.property]: formData["text"] }) - }; -}; diff --git a/module/documents/ActiveEffect/GenericActiveEffect.mjs b/module/documents/ActiveEffect/GenericActiveEffect.mjs new file mode 100644 index 0000000..8ee70f3 --- /dev/null +++ b/module/documents/ActiveEffect/GenericActiveEffect.mjs @@ -0,0 +1,7 @@ +export class DotDungeonActiveEffect extends ActiveEffect { + + // Invert the logic of the disabled property so it's easier to modify via + // embedded controls + get enabled() { return !this.disabled }; + set enabled(newValue) { this.disabled = !newValue }; +}; diff --git a/module/documents/ActiveEffect/_proxy.mjs b/module/documents/ActiveEffect/_proxy.mjs new file mode 100644 index 0000000..4b51b54 --- /dev/null +++ b/module/documents/ActiveEffect/_proxy.mjs @@ -0,0 +1,42 @@ +import { DotDungeonActiveEffect } from "./GenericActiveEffect.mjs"; + +const classes = {}; + +const defaultClass = DotDungeonActiveEffect; + +export const ActiveEffectProxy = new Proxy(function () {}, { + construct(target, args) { + const [data] = args; + + if (!classes.hasOwnProperty(data.type)) { + return new defaultClass(...args); + } + + return new classes[data.type](...args); + }, + get(target, prop, receiver) { + + if (["create", "createDocuments"].includes(prop)) { + return function (data, options) { + if (data.constructor === Array) { + return data.map(i => ActiveEffectProxy.create(i, options)) + } + + if (!classes.hasOwnProperty(data.type)) { + return defaultClass.create(data, options); + } + + return classes[data.type].create(data, options); + }; + }; + + if (prop == Symbol.hasInstance) { + return function (instance) { + if (instance instanceof defaultClass) return true; + return Object.values(classes).some(i => instance instanceof i); + }; + }; + + return defaultClass[prop]; + }, +}); diff --git a/module/documents/Actor/GenericActor.mjs b/module/documents/Actor/GenericActor.mjs index d52b185..171af63 100644 --- a/module/documents/Actor/GenericActor.mjs +++ b/module/documents/Actor/GenericActor.mjs @@ -1,4 +1,15 @@ export class DotDungeonActor extends Actor { + + /* + Using this to take a "snapshot" of the system data prior to applying AE's so + that the inputs can still have the non-modified value in them, while we still + provide all that data to AE's without needing to disable any inputs. + */ + prepareEmbeddedDocuments() { + this.preAE = foundry.utils.deepClone(this.system); + super.prepareEmbeddedDocuments(); + }; + async createEmbeddedItem(defaults, opts = {}) { let items = await this.createEmbeddedDocuments(`Item`, defaults); if (!Array.isArray(items)) items = items ? [items] : []; diff --git a/module/documents/Actor/Player.mjs b/module/documents/Actor/Player.mjs index ff54481..2c5840d 100644 --- a/module/documents/Actor/Player.mjs +++ b/module/documents/Actor/Player.mjs @@ -1,8 +1,22 @@ import { DotDungeonActor } from "./GenericActor.mjs"; -import { DotDungeonItem } from "../Item/GenericItem.mjs"; export class Player extends DotDungeonActor { + applyActiveEffects() { + super.applyActiveEffects(); + + /* + These are the (groups of) fields that ActiveEffects may modify safely and + remain editable in the sheet. This needs to be done because of default + Foundry behaviour that otherwise prevents these fields from being edited. + The deletes must use optional chaining otherwise they can cause issues + during the document preparation lifecycle as an actor with no AE's affecting + anything in one of these areas will result in these paths being undefined. + */ + delete this.overrides.system?.stats; + delete this.overrides.system?.skills; + }; + async createCustomPet() { const body = new URLSearchParams({ number: 1, diff --git a/module/documents/Actor/Sync.mjs b/module/documents/Actor/Sync.mjs index 1542b3e..171a67c 100644 --- a/module/documents/Actor/Sync.mjs +++ b/module/documents/Actor/Sync.mjs @@ -1,4 +1,5 @@ import { DotDungeonActor } from "./GenericActor.mjs"; +import { syncMilestones } from "../../config.mjs"; export class Sync extends DotDungeonActor { async useRestDie() { diff --git a/module/documents/Item/GenericItem.mjs b/module/documents/Item/GenericItem.mjs index b52ddcd..786824e 100644 --- a/module/documents/Item/GenericItem.mjs +++ b/module/documents/Item/GenericItem.mjs @@ -6,13 +6,19 @@ export class DotDungeonItem extends Item { }; get usedCapacity() { - let capacity = 0; - if (this.system.uses_inventory_slot && this.system.quantity > 0) { - capacity = 1; + if (!this.system.uses_inventory_slot) return 0; + if (!this.system.quantity_affects_used_capacity) { + return 1; }; - if (this.system.quantity_affects_used_capacity) { - capacity = this.system.quantity; - }; - return capacity; + return this.system.quantity; + }; + + get availableLocations() { + return [ + { value: null, label: `dotdungeon.location.unknown` }, + { value: `inventory`, label: `dotdungeon.location.inventory` }, + { value: `equipped`, label: `dotdungeon.location.equipped` }, + { value: `storage`, label: `dotdungeon.location.storage` }, + ]; }; }; diff --git a/module/documents/Item/Material.mjs b/module/documents/Item/Material.mjs index 15d2a58..c6c5b72 100644 --- a/module/documents/Item/Material.mjs +++ b/module/documents/Item/Material.mjs @@ -5,4 +5,11 @@ export class Material extends DotDungeonItem { let affects = game.settings.get(`dotdungeon`, `materialsAffectCapacity`); return affects ? super.usedCapacity : 0; }; + + get availableLocations() { + return [ + { value: null, label: `dotdungeon.location.unknown` }, + { value: `inventory`, label: `dotdungeon.location.inventory` }, + ]; + }; }; diff --git a/module/dotdungeon.mjs b/module/dotdungeon.mjs index b4c597f..8731314 100644 --- a/module/dotdungeon.mjs +++ b/module/dotdungeon.mjs @@ -10,6 +10,7 @@ import { SyncData } from "./models/Actor/Sync.mjs"; import { MobData } from "./models/Actor/Mob.mjs"; // Main Documents +import { ActiveEffectProxy } from "./documents/ActiveEffect/_proxy.mjs"; import { ActorProxy } from "./documents/Actor/_proxy.mjs"; import { ItemProxy } from "./documents/Item/_proxy.mjs"; @@ -32,12 +33,15 @@ import * as hbs from "./handlebars.mjs"; import "./hooks/hotReload.mjs"; // Misc Imports +import { registerCustomComponents } from "./components/index.mjs"; import loadSettings from "./settings/index.mjs"; +import { devInit } from "./hooks/devInit.mjs"; import DOTDUNGEON from "./config.mjs"; Hooks.once(`init`, async () => { console.debug(`.dungeon | Initializing`); + CONFIG.ActiveEffect.legacyTransferral = false; loadSettings(); @@ -53,6 +57,7 @@ Hooks.once(`init`, async () => { CONFIG.Item.dataModels.pet = PetItemData; CONFIG.Actor.documentClass = ActorProxy; CONFIG.Item.documentClass = ItemProxy; + CONFIG.ActiveEffect.documentClass = ActiveEffectProxy; CONFIG.DOTDUNGEON = DOTDUNGEON; @@ -101,12 +106,13 @@ Hooks.once(`init`, async () => { label: "dotdungeon.sheet-names.PetSheet" }); + if (true || game.settings.get(`dotdungeon`, `devMode`)) { + devInit(); + }; hbs.registerHandlebarsHelpers(); hbs.preloadHandlebarsTemplates(); - - CONFIG.CACHE = {}; - CONFIG.CACHE.icons = await hbs.preloadIcons(); + registerCustomComponents(); }); diff --git a/module/handlebars.mjs b/module/handlebars.mjs index 596f9dd..cdaa1b7 100644 --- a/module/handlebars.mjs +++ b/module/handlebars.mjs @@ -30,31 +30,19 @@ export const partials = [ `actors/char-sheet/v2/partials/inventory/items/untyped.v2.pc.hbs`, `actors/char-sheet/v2/partials/inventory/items/aspect.v2.pc.hbs`, `actors/char-sheet/v2/partials/inventory/items/weapon.v2.pc.hbs`, + `actors/char-sheet/v2/partials/inventory/items/pet.v2.pc.hbs`, + + // The v2 Untyped sheet partials + `items/untyped/v2/tabs/general.v2.untyped.hbs`, + `items/untyped/v2/tabs/details.v2.untyped.hbs`, + `items/untyped/v2/tabs/effects.v2.untyped.hbs`, + `items/untyped/v2/tabs/settings.v2.untyped.hbs`, ]; export const preAliasedPartials = { "dotdungeon.pc.v2.foil": "actors/char-sheet/v2/partials/inventory/items/untyped.v2.pc.hbs", }; -export const icons = [ - `caret-right.svg`, - `caret-down.svg`, - `garbage-bin.svg`, - `chat-bubble.svg`, - `dice/d4.svg`, - `dice/d6.svg`, - `dice/d8.svg`, - `dice/d10.svg`, - `dice/d12.svg`, - `dice/d20.svg`, - `create.svg`, - `close.svg`, - `edit.svg`, - `sheet.svg`, - `minus.svg`, -]; - - export async function registerHandlebarsHelpers() { Handlebars.registerHelper(helpers); }; @@ -90,38 +78,3 @@ export async function preloadHandlebarsTemplates() { console.groupEnd(); return loadTemplates(paths); }; - -/** - * Loads all of the icons that are needed in the handlebars templating to make - * the sheet look nicer. - * - * @returns An object containing icon names to the corresponding HTML data for - * displaying the icon - */ -export async function preloadIcons() { - const pathPrefix = `systems/dotdungeon/assets/` - const parsedIcons = {}; - - for (const icon of icons) { - const iconName = icon.split(`/`).slice(-1)[0].slice(0, -4); - if (icon.endsWith(`.svg`)) { - try { - const response = await fetchWithTimeout(`${pathPrefix}${icon}`); - if (response.status !== 200) { continue }; - const svgData = await response.text(); - parsedIcons[iconName] = svgData; - } catch { - console.error(`.dungeon | Failed to fetch/parse icon: ${icon}`); - continue; - }; - } - else if (icon.endsWith(`.png`)) { - parsedIcons[iconName] = `