From d5429b7b34f0a61b869165e0574d5b575d1971d5 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Wed, 3 Apr 2024 23:00:57 -0600 Subject: [PATCH 01/51] Begin work on a custom element for incrementer --- module/components/incrementer.mjs | 71 +++++++++++++++++++ module/components/index.mjs | 1 + module/dotdungeon.mjs | 1 + styles/components/incrementer.scss | 55 ++++++++++++++ .../actor/char-sheet/v2/pages/inventory.scss | 2 +- .../v2/partials/inventory/player.v2.pc.hbs | 9 +-- .../untyped/v2/tabs/details.v2.untyped.hbs | 5 +- 7 files changed, 137 insertions(+), 7 deletions(-) create mode 100644 module/components/incrementer.mjs create mode 100644 module/components/index.mjs create mode 100644 styles/components/incrementer.scss diff --git a/module/components/incrementer.mjs b/module/components/incrementer.mjs new file mode 100644 index 0000000..747fa01 --- /dev/null +++ b/module/components/incrementer.mjs @@ -0,0 +1,71 @@ +/** +Attributes: +@property {number} value +@property {number} stepSize +@property {number} largeStepSize +*/ +class DotDungeonIncrementer extends HTMLElement { + + #input; + + constructor() { + super(); + + const sr = this.attachShadow({ mode: `open` }); + const container = document.createElement(`div`); + + const style = document.createElement(`link`); + style.href = `./systems/dotdungeon/.styles/components/incrementer.css`; + style.rel = `stylesheet`; + container.appendChild(style); + + + const input = document.createElement(`input`); + this.#input = input; + input.type = `number`; + input.value = this.getAttribute(`value`); + input.addEventListener(`change`, this.#updateValue.bind(this)); + + const increment = document.createElement(`button`); + increment.innerHTML = `+`; + increment.type = `button`; + increment.classList.value = `increment`; + increment.addEventListener(`click`, this.#increment.bind(this)); + + const decrement = document.createElement(`button`); + decrement.innerHTML = `-`; + decrement.type = `button`; + decrement.classList.value = `decrement`; + decrement.addEventListener(`click`, this.#decrement.bind(this)); + + + // Construct the DOM + container.appendChild(decrement); + container.appendChild(input); + container.appendChild(increment); + sr.appendChild(container); + }; + + #updateValue() { + // TODO: Emit a change event for the new value, and check for cancellation + const event = new Event(`change`); + this.dispatchEvent(event); + }; + + #increment() { + console.log(`increment event`) + this.#input.value++; + this.#updateValue(); + }; + + #decrement() { + console.log(`decrement event`) + this.#input.value--; + this.#updateValue(); + }; +}; + + +if (!window.customElements.get(`dd-incrementer`)) { + window.customElements.define(`dd-incrementer`, DotDungeonIncrementer); +}; diff --git a/module/components/index.mjs b/module/components/index.mjs new file mode 100644 index 0000000..790d271 --- /dev/null +++ b/module/components/index.mjs @@ -0,0 +1 @@ +import "./incrementer.mjs"; \ No newline at end of file diff --git a/module/dotdungeon.mjs b/module/dotdungeon.mjs index 6d76dfb..a7a5ae7 100644 --- a/module/dotdungeon.mjs +++ b/module/dotdungeon.mjs @@ -35,6 +35,7 @@ import "./hooks/hotReload.mjs"; import loadSettings from "./settings/index.mjs"; import { devInit } from "./hooks/devInit.mjs"; import DOTDUNGEON from "./config.mjs"; +import "./components/index.mjs"; Hooks.once(`init`, async () => { diff --git a/styles/components/incrementer.scss b/styles/components/incrementer.scss new file mode 100644 index 0000000..549d1d9 --- /dev/null +++ b/styles/components/incrementer.scss @@ -0,0 +1,55 @@ +/* +Disclaimer: This CSS is used by a custom web component and is scoped to JUST +the corresponding web component. Importing this into other files is forbidden. +*/ + +$default-border-radius: 4px; + +:host { + min-width: max-content; +} + +div { + display: grid; + grid-template-columns: auto 50px auto; + // I dunno why this is needed for the height to not be calculated as 17px, + // but it is for some arcane reason + grid-template-rows: 1fr; +} + +input { + border: none; + outline: none; + font-family: inherit; + text-align: center; + padding: 0; + background: green; + + &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + margin: 0 + } +} + +button { + border: none; + outline: none; + height: 100%; + aspect-ratio: 1 / 1; + padding: 4px; + background: darkgreen; + max-width: 100%; + + &:hover { + cursor: pointer; + } +} + +.increment { + border-radius: 0 var(--border-radius, $default-border-radius) var(--border-radius, 4px) 0; +} +.decrement { + border-radius: var(--border-radius, $default-border-radius) 0 0 var(--border-radius, $default-border-radius); +} diff --git a/styles/sheets/actor/char-sheet/v2/pages/inventory.scss b/styles/sheets/actor/char-sheet/v2/pages/inventory.scss index c301f04..3a1b829 100644 --- a/styles/sheets/actor/char-sheet/v2/pages/inventory.scss +++ b/styles/sheets/actor/char-sheet/v2/pages/inventory.scss @@ -68,7 +68,7 @@ .bytes-panel { display: grid; - grid-template-columns: 1fr min-content 50px min-content; + grid-template-columns: 1fr auto; gap: 8px; align-items: center; diff --git a/templates/actors/char-sheet/v2/partials/inventory/player.v2.pc.hbs b/templates/actors/char-sheet/v2/partials/inventory/player.v2.pc.hbs index 1dd14c2..e3a936c 100644 --- a/templates/actors/char-sheet/v2/partials/inventory/player.v2.pc.hbs +++ b/templates/actors/char-sheet/v2/partials/inventory/player.v2.pc.hbs @@ -15,7 +15,8 @@ > Supplies - + --}}
-
--}}
diff --git a/templates/items/untyped/v2/tabs/details.v2.untyped.hbs b/templates/items/untyped/v2/tabs/details.v2.untyped.hbs index 37591e8..d8bf937 100644 --- a/templates/items/untyped/v2/tabs/details.v2.untyped.hbs +++ b/templates/items/untyped/v2/tabs/details.v2.untyped.hbs @@ -73,13 +73,14 @@ - + {{!-- + > --}} {{else}} Quantity {{system.quantity}} From 9f6a8e5e735fcd8d54fc5fe0570d4ffc49400d69 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Thu, 4 Apr 2024 19:59:23 -0600 Subject: [PATCH 02/51] Get the incrementer being able to be submitted, causing submits, and styling without flickering --- module/components/incrementer.mjs | 65 +++++++++++++++++++++++------- module/components/index.mjs | 2 +- styles/components/incrementer.scss | 14 +++---- 3 files changed, 58 insertions(+), 23 deletions(-) diff --git a/module/components/incrementer.mjs b/module/components/incrementer.mjs index 747fa01..ea658de 100644 --- a/module/components/incrementer.mjs +++ b/module/components/incrementer.mjs @@ -4,27 +4,42 @@ Attributes: @property {number} stepSize @property {number} largeStepSize */ -class DotDungeonIncrementer extends HTMLElement { +export class DotDungeonIncrementer extends HTMLElement { + static elementName = `dd-incrementer`; + + static styles = ``; #input; + #publicInput; + #sr; constructor() { super(); + const value = this.getAttribute(`value`); + + /* + This input exists for the sole purpose of making it so that the form data + works with this input without needing to do jank work arounds (even though + this on it's own is already a sort of jank work around). + */ + const hiddenInput = document.createElement(`input`); + hiddenInput.type = `hidden`; + hiddenInput.name = this.getAttribute(`name`); + hiddenInput.value = value; + this.#publicInput = hiddenInput; + this.appendChild(hiddenInput); + const sr = this.attachShadow({ mode: `open` }); + this.#sr = sr; const container = document.createElement(`div`); - - const style = document.createElement(`link`); - style.href = `./systems/dotdungeon/.styles/components/incrementer.css`; - style.rel = `stylesheet`; - container.appendChild(style); - + if (DotDungeonIncrementer.styles) this.#embedStyles(); const input = document.createElement(`input`); this.#input = input; input.type = `number`; - input.value = this.getAttribute(`value`); input.addEventListener(`change`, this.#updateValue.bind(this)); + input.value = value; const increment = document.createElement(`button`); increment.innerHTML = `+`; @@ -46,26 +61,46 @@ class DotDungeonIncrementer extends HTMLElement { sr.appendChild(container); }; + connectedCallback() { + if (!DotDungeonIncrementer.styles) { + fetch(`./systems/dotdungeon/.styles/components/incrementer.css`) + .then(r => r.text()) + .then(t => { + DotDungeonIncrementer.styles = t; + this.#embedStyles(); + }); + }; + }; + + #embedStyles() { + const style = document.createElement(`style`); + style.innerHTML = DotDungeonIncrementer.styles; + this.#sr.appendChild(style); + }; + #updateValue() { - // TODO: Emit a change event for the new value, and check for cancellation - const event = new Event(`change`); - this.dispatchEvent(event); + this.#publicInput.value = this.#input.value; + const event = new Event(`change`, { bubbles: true }); + this.#publicInput.dispatchEvent(event); }; #increment() { - console.log(`increment event`) + console.log(`increment event`); this.#input.value++; this.#updateValue(); }; #decrement() { - console.log(`decrement event`) + console.log(`decrement event`); this.#input.value--; this.#updateValue(); }; }; -if (!window.customElements.get(`dd-incrementer`)) { - window.customElements.define(`dd-incrementer`, DotDungeonIncrementer); +if (!window.customElements.get(DotDungeonIncrementer.elementName)) { + window.customElements.define( + DotDungeonIncrementer.elementName, + DotDungeonIncrementer + ); }; diff --git a/module/components/index.mjs b/module/components/index.mjs index 790d271..8c92384 100644 --- a/module/components/index.mjs +++ b/module/components/index.mjs @@ -1 +1 @@ -import "./incrementer.mjs"; \ No newline at end of file +import "./incrementer.mjs"; diff --git a/styles/components/incrementer.scss b/styles/components/incrementer.scss index 549d1d9..55ca7fb 100644 --- a/styles/components/incrementer.scss +++ b/styles/components/incrementer.scss @@ -4,6 +4,7 @@ the corresponding web component. Importing this into other files is forbidden. */ $default-border-radius: 4px; +$default-height: 1.25rem; :host { min-width: max-content; @@ -11,10 +12,10 @@ $default-border-radius: 4px; div { display: grid; - grid-template-columns: auto 50px auto; + grid-template-columns: var(--height, $default-height) 50px var(--height, $default-height); // I dunno why this is needed for the height to not be calculated as 17px, // but it is for some arcane reason - grid-template-rows: 1fr; + grid-template-rows: var(--height, $default-height); } input { @@ -23,7 +24,6 @@ input { font-family: inherit; text-align: center; padding: 0; - background: green; &::-webkit-inner-spin-button, &::-webkit-outer-spin-button { -webkit-appearance: none; @@ -36,11 +36,11 @@ input { button { border: none; outline: none; - height: 100%; aspect-ratio: 1 / 1; - padding: 4px; - background: darkgreen; - max-width: 100%; + padding: 0; + display: flex; + justify-content: center; + align-items: center; &:hover { cursor: pointer; From 566faf61d2b1b1220412e593a3d058eeafceb1ca Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Thu, 4 Apr 2024 20:02:19 -0600 Subject: [PATCH 03/51] Remove stray console logs --- module/components/incrementer.mjs | 2 -- 1 file changed, 2 deletions(-) diff --git a/module/components/incrementer.mjs b/module/components/incrementer.mjs index ea658de..d02aa68 100644 --- a/module/components/incrementer.mjs +++ b/module/components/incrementer.mjs @@ -85,13 +85,11 @@ export class DotDungeonIncrementer extends HTMLElement { }; #increment() { - console.log(`increment event`); this.#input.value++; this.#updateValue(); }; #decrement() { - console.log(`decrement event`); this.#input.value--; this.#updateValue(); }; From e0a3b4985bf81a18b90f796aed58e6021bb72c92 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Thu, 4 Apr 2024 22:48:19 -0600 Subject: [PATCH 04/51] Begin making the proper CSS for the component --- module/components/incrementer.mjs | 9 ++++++--- styles/components/incrementer.scss | 7 ++----- .../char-sheet/v2/partials/inventory/player.v2.pc.hbs | 3 ++- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/module/components/incrementer.mjs b/module/components/incrementer.mjs index d02aa68..3e5e55f 100644 --- a/module/components/incrementer.mjs +++ b/module/components/incrementer.mjs @@ -1,8 +1,11 @@ /** Attributes: -@property {number} value -@property {number} stepSize -@property {number} largeStepSize +@property {string} name - The path to the value to update +@property {number} value - The actual value of the input + +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 HTMLElement { static elementName = `dd-incrementer`; diff --git a/styles/components/incrementer.scss b/styles/components/incrementer.scss index 55ca7fb..693e0ec 100644 --- a/styles/components/incrementer.scss +++ b/styles/components/incrementer.scss @@ -6,13 +6,9 @@ the corresponding web component. Importing this into other files is forbidden. $default-border-radius: 4px; $default-height: 1.25rem; -:host { - min-width: max-content; -} - div { display: grid; - grid-template-columns: var(--height, $default-height) 50px var(--height, $default-height); + grid-template-columns: var(--height, $default-height) var(--width, 50px) var(--height, $default-height); // I dunno why this is needed for the height to not be calculated as 17px, // but it is for some arcane reason grid-template-rows: var(--height, $default-height); @@ -41,6 +37,7 @@ button { display: flex; justify-content: center; align-items: center; + background-color: color-mix(in lab, white 5%, transparent); &:hover { cursor: pointer; diff --git a/templates/actors/char-sheet/v2/partials/inventory/player.v2.pc.hbs b/templates/actors/char-sheet/v2/partials/inventory/player.v2.pc.hbs index e3a936c..0249748 100644 --- a/templates/actors/char-sheet/v2/partials/inventory/player.v2.pc.hbs +++ b/templates/actors/char-sheet/v2/partials/inventory/player.v2.pc.hbs @@ -15,7 +15,8 @@ > Supplies - + + {{!-- --}} {{!--
- - {{!-- --}} + {{!-- - - --}}
- {{!-- - - + id="{{meta.idp}}-player-inventory-bytes" + min="0" + >

Show

From a8c94ee16f45d9d34c8192e82b6787ec60b0c090 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Sat, 13 Apr 2024 12:36:32 -0600 Subject: [PATCH 23/51] Add common SCSS for all custom components --- styles/v3/components/common.scss | 7 +++++++ styles/v3/components/icon.scss | 4 +++- styles/v3/components/incrementer.scss | 7 ++++--- 3 files changed, 14 insertions(+), 4 deletions(-) create mode 100644 styles/v3/components/common.scss diff --git a/styles/v3/components/common.scss b/styles/v3/components/common.scss new file mode 100644 index 0000000..59f812d --- /dev/null +++ b/styles/v3/components/common.scss @@ -0,0 +1,7 @@ +// Disclaimer: This CSS is used by a custom web component and is scoped to JUST +// the corresponding web component. This should only be imported by web component +// style files. + +:host { + display: inline-block; +} diff --git a/styles/v3/components/icon.scss b/styles/v3/components/icon.scss index 22cfc17..012593f 100644 --- a/styles/v3/components/icon.scss +++ b/styles/v3/components/icon.scss @@ -1,10 +1,12 @@ /* Disclaimer: This CSS is used by a custom web component and is scoped to JUST -the corresponding web component. Importing this into other files is forbidden. +the corresponding web component. Importing this into other files is forbidden */ $default-size: 1rem; +@use "./common.scss"; + div { display: flex; justify-content: center; diff --git a/styles/v3/components/incrementer.scss b/styles/v3/components/incrementer.scss index c7eb63b..abe9478 100644 --- a/styles/v3/components/incrementer.scss +++ b/styles/v3/components/incrementer.scss @@ -1,13 +1,14 @@ /* Disclaimer: This CSS is used by a custom web component and is scoped to JUST -the corresponding web component. Importing this into other files is forbidden. +the corresponding web component. Importing this into other files is forbidden */ -@use "../mixins/material"; - $default-border-radius: 4px; $default-height: 1.5rem; +@use "../mixins/material"; +@use "./common.scss"; + div { display: grid; grid-template-columns: var(--height, $default-height) var(--width, 50px) var(--height, $default-height); From 1598081e3bfff1b165c99ae9d4837d7affe3ef17 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Sat, 13 Apr 2024 12:40:09 -0600 Subject: [PATCH 24/51] Add the icon element to the html-data spec --- .vscode/components.html-data.json | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/.vscode/components.html-data.json b/.vscode/components.html-data.json index 74f7942..e1c3ebd 100644 --- a/.vscode/components.html-data.json +++ b/.vscode/components.html-data.json @@ -12,6 +12,14 @@ { "name": "smallStep", "description": "The value that the input is changed by when clicking a delta button or using the up/down arrow key" }, { "name": "largeStep", "description": "The value that the input is changed by when clicking a delta button with control held or using the page up/ page down arrow key" } ] + }, + { + "name": "dd-icon", + "description": "Loads an icon asynchronously, caching the result for future uses", + "attributes": [ + { "name": "name", "description": "The name of the icon, this is relative to the assets folder of the dotdungeon system" }, + { "name": "path", "description": "The full path of the icon, this will only be used if `name` isn't provided or fails to fetch." } + ] } ], "globalAttributes": [], From 8c83d304b7c158d3a3dbbba8be49f01bf6aacbd3 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Sat, 13 Apr 2024 17:08:52 -0600 Subject: [PATCH 25/51] Remove the really annoying blur on the incrementer component --- module/components/incrementer.mjs | 3 --- 1 file changed, 3 deletions(-) diff --git a/module/components/incrementer.mjs b/module/components/incrementer.mjs index 26069ee..fd58e70 100644 --- a/module/components/incrementer.mjs +++ b/module/components/incrementer.mjs @@ -127,9 +127,6 @@ export class DotDungeonIncrementer extends StyledShadowElement(HTMLElement) { this.#input.value = value; this.value = value; this.dispatchEvent(new Event(`change`, { bubbles: true })); - - // NOTE: This may be really annoying, in that case, remove it later - this.blur(); }; /** @param {Event} $e */ From 44eaec2d380de9d1cb28b2d20a2a2c2308f8c673 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Sat, 13 Apr 2024 17:09:57 -0600 Subject: [PATCH 26/51] Only listen to custom components that have the name attribute for form submission --- module/sheets/GenericActorSheet.mjs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/module/sheets/GenericActorSheet.mjs b/module/sheets/GenericActorSheet.mjs index 1f39bf3..4c0febc 100644 --- a/module/sheets/GenericActorSheet.mjs +++ b/module/sheets/GenericActorSheet.mjs @@ -57,8 +57,8 @@ export class GenericActorSheet extends ActorSheet { default. */ html.find( - CONFIG.CACHE.componentListeners.join(`,`) - ).on(`change`, this._onChangeInput.bind(this)); + CONFIG.CACHE.componentListeners.map(n => `${n}[name]`).join(`,`) + ).on(`change`, () => this._onChangeInput.bind(this)); /* Utility event listeners that apply From 050fecd4f616f18164e051ce4655fc86e69a41a0 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Sat, 13 Apr 2024 17:10:42 -0600 Subject: [PATCH 27/51] Update the material item to use the incrementer component --- .../actor/char-sheet/v2/pages/inventory.scss | 6 +-- .../inventory/items/material.v2.pc.hbs | 49 ++----------------- 2 files changed, 7 insertions(+), 48 deletions(-) diff --git a/styles/sheets/actor/char-sheet/v2/pages/inventory.scss b/styles/sheets/actor/char-sheet/v2/pages/inventory.scss index 457f9ee..57626fd 100644 --- a/styles/sheets/actor/char-sheet/v2/pages/inventory.scss +++ b/styles/sheets/actor/char-sheet/v2/pages/inventory.scss @@ -49,7 +49,7 @@ &__list { &--material { display: grid; - grid-template-columns: 1fr 1fr; + grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } @@ -164,8 +164,8 @@ @include material.elevate(1); padding: 8px; gap: 8px; - display: grid; - grid-template-columns: 1fr min-content 50px min-content; + display: flex; + justify-content: space-between; align-items: center; border-radius: 4px; diff --git a/templates/actors/char-sheet/v2/partials/inventory/items/material.v2.pc.hbs b/templates/actors/char-sheet/v2/partials/inventory/items/material.v2.pc.hbs index 272702a..ea0a8b3 100644 --- a/templates/actors/char-sheet/v2/partials/inventory/items/material.v2.pc.hbs +++ b/templates/actors/char-sheet/v2/partials/inventory/items/material.v2.pc.hbs @@ -7,52 +7,11 @@ > {{item.name}} - {{#if (eq item.system.quantity 0)}} - - {{else}} - - {{/if}} - - + >
From aa41635f880c7d4cb8e2dd6583dac480145996d2 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Sat, 13 Apr 2024 17:17:15 -0600 Subject: [PATCH 28/51] Update the inventory icons to be using the dd-icon component --- .../char-sheet/v2/partials/inventory/item-list.v2.pc.hbs | 4 +--- .../char-sheet/v2/partials/inventory/items/aspect.v2.pc.hbs | 4 +--- .../char-sheet/v2/partials/inventory/items/pet.v2.pc.hbs | 4 +--- .../char-sheet/v2/partials/inventory/items/untyped.v2.pc.hbs | 4 +--- .../char-sheet/v2/partials/inventory/items/weapon.v2.pc.hbs | 4 +--- 5 files changed, 5 insertions(+), 15 deletions(-) diff --git a/templates/actors/char-sheet/v2/partials/inventory/item-list.v2.pc.hbs b/templates/actors/char-sheet/v2/partials/inventory/item-list.v2.pc.hbs index 3cbaac5..3e5c234 100644 --- a/templates/actors/char-sheet/v2/partials/inventory/item-list.v2.pc.hbs +++ b/templates/actors/char-sheet/v2/partials/inventory/item-list.v2.pc.hbs @@ -17,9 +17,7 @@ data-tooltip="{{filter.createLabel}}" data-tooltip-direction="LEFT" > - +
diff --git a/templates/actors/char-sheet/v2/partials/inventory/items/aspect.v2.pc.hbs b/templates/actors/char-sheet/v2/partials/inventory/items/aspect.v2.pc.hbs index 5d61f2d..c3bc9dc 100644 --- a/templates/actors/char-sheet/v2/partials/inventory/items/aspect.v2.pc.hbs +++ b/templates/actors/char-sheet/v2/partials/inventory/items/aspect.v2.pc.hbs @@ -13,9 +13,7 @@ tabindex="0" aria-label="{{dd-i18n 'dotdungeon.sheet.actor.v2.toggle-item-information' item}}" > - +

{{item.name}} diff --git a/templates/actors/char-sheet/v2/partials/inventory/items/pet.v2.pc.hbs b/templates/actors/char-sheet/v2/partials/inventory/items/pet.v2.pc.hbs index fd481e7..6c07eac 100644 --- a/templates/actors/char-sheet/v2/partials/inventory/items/pet.v2.pc.hbs +++ b/templates/actors/char-sheet/v2/partials/inventory/items/pet.v2.pc.hbs @@ -13,9 +13,7 @@ tabindex="0" aria-label="{{dd-i18n 'dotdungeon.sheet.actor.v2.toggle-item-information' item}}" > - +

{{item.name}} diff --git a/templates/actors/char-sheet/v2/partials/inventory/items/untyped.v2.pc.hbs b/templates/actors/char-sheet/v2/partials/inventory/items/untyped.v2.pc.hbs index 9907578..e0e845e 100644 --- a/templates/actors/char-sheet/v2/partials/inventory/items/untyped.v2.pc.hbs +++ b/templates/actors/char-sheet/v2/partials/inventory/items/untyped.v2.pc.hbs @@ -13,9 +13,7 @@ tabindex="0" aria-label="{{dd-i18n 'dotdungeon.sheet.actor.v2.toggle-item-information' item}}" > - +

{{item.name}} diff --git a/templates/actors/char-sheet/v2/partials/inventory/items/weapon.v2.pc.hbs b/templates/actors/char-sheet/v2/partials/inventory/items/weapon.v2.pc.hbs index 36707d8..8dae2e7 100644 --- a/templates/actors/char-sheet/v2/partials/inventory/items/weapon.v2.pc.hbs +++ b/templates/actors/char-sheet/v2/partials/inventory/items/weapon.v2.pc.hbs @@ -13,9 +13,7 @@ tabindex="0" aria-label="{{dd-i18n 'dotdungeon.sheet.actor.v2.toggle-item-information' item}}" > - +

{{item.name}} From 7e5fc036aab81114fa3d1dd4e8ad2dac9e3827e1 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Sat, 13 Apr 2024 17:24:08 -0600 Subject: [PATCH 29/51] Remove duplicate event listener that's causing an error when editing an item (closes #164) --- module/sheets/GenericActorSheet.mjs | 1 - 1 file changed, 1 deletion(-) diff --git a/module/sheets/GenericActorSheet.mjs b/module/sheets/GenericActorSheet.mjs index 4c0febc..32b6d5e 100644 --- a/module/sheets/GenericActorSheet.mjs +++ b/module/sheets/GenericActorSheet.mjs @@ -83,7 +83,6 @@ export class GenericActorSheet extends ActorSheet { const id = $e.currentTarget.dataset.embeddedEdit; this.openEmbeddedSheet.bind(this)(id); }) - .on(`click`, this.openEmbeddedSheet.bind(this)); html.find(`button[data-increment]`) .on(`click`, this._incrementValue.bind(this)); html.find(`button[data-decrement]`) From 2737c46ffeb1917b00ded8022eacd5d65c1f896c Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Sat, 13 Apr 2024 17:39:20 -0600 Subject: [PATCH 30/51] Optimization & reorganization of icon files --- assets/caret-down.svg | 3 --- assets/caret-right.svg | 3 --- assets/chat-bubble.svg | 3 --- assets/close.svg | 3 --- assets/dice/d10.svg | 4 +-- assets/dice/d12.svg | 4 +-- assets/dice/d20.svg | 4 +-- assets/dice/d4.svg | 4 +-- assets/dice/d6.svg | 4 +-- assets/dice/d8.svg | 4 +-- assets/edit.svg | 7 ----- assets/garbage-bin.svg | 6 ----- assets/minus.svg | 3 --- assets/sheet.svg | 8 ------ assets/sources.txt | 27 ++++++++++--------- assets/ui/caret/down.svg | 1 + assets/ui/caret/right.svg | 1 + assets/ui/chat-bubble.svg | 1 + assets/ui/close.svg | 1 + assets/ui/garbage-bin.svg | 1 + assets/ui/help.svg | 1 + assets/ui/minus.svg | 1 + assets/ui/pencil.svg | 1 + assets/{create.svg => ui/plus.svg} | 0 assets/ui/sheet.svg | 1 + module/components/incrementer.mjs | 6 ++--- .../v2/partials/inventory/item-list.v2.pc.hbs | 2 +- .../partials/inventory/items/aspect.v2.pc.hbs | 2 +- .../v2/partials/inventory/items/pet.v2.pc.hbs | 2 +- .../inventory/items/untyped.v2.pc.hbs | 2 +- .../partials/inventory/items/weapon.v2.pc.hbs | 2 +- 31 files changed, 37 insertions(+), 75 deletions(-) delete mode 100644 assets/caret-down.svg delete mode 100644 assets/caret-right.svg delete mode 100644 assets/chat-bubble.svg delete mode 100644 assets/close.svg delete mode 100644 assets/edit.svg delete mode 100644 assets/garbage-bin.svg delete mode 100644 assets/minus.svg delete mode 100644 assets/sheet.svg create mode 100644 assets/ui/caret/down.svg create mode 100644 assets/ui/caret/right.svg create mode 100644 assets/ui/chat-bubble.svg create mode 100644 assets/ui/close.svg create mode 100644 assets/ui/garbage-bin.svg create mode 100644 assets/ui/help.svg create mode 100644 assets/ui/minus.svg create mode 100644 assets/ui/pencil.svg rename assets/{create.svg => ui/plus.svg} (100%) create mode 100644 assets/ui/sheet.svg diff --git a/assets/caret-down.svg b/assets/caret-down.svg deleted file mode 100644 index 415d3db..0000000 --- a/assets/caret-down.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/caret-right.svg b/assets/caret-right.svg deleted file mode 100644 index 7d1d59b..0000000 --- a/assets/caret-right.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/chat-bubble.svg b/assets/chat-bubble.svg deleted file mode 100644 index 8dde604..0000000 --- a/assets/chat-bubble.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/assets/close.svg b/assets/close.svg deleted file mode 100644 index f6c80ed..0000000 --- a/assets/close.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/dice/d10.svg b/assets/dice/d10.svg index 96a39a1..3debc8e 100644 --- a/assets/dice/d10.svg +++ b/assets/dice/d10.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/assets/dice/d12.svg b/assets/dice/d12.svg index dac2e4c..df2787c 100644 --- a/assets/dice/d12.svg +++ b/assets/dice/d12.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/assets/dice/d20.svg b/assets/dice/d20.svg index 82cf8b3..a829cdf 100644 --- a/assets/dice/d20.svg +++ b/assets/dice/d20.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/assets/dice/d4.svg b/assets/dice/d4.svg index 3388bda..f31809b 100644 --- a/assets/dice/d4.svg +++ b/assets/dice/d4.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/assets/dice/d6.svg b/assets/dice/d6.svg index bea7528..00dfed7 100644 --- a/assets/dice/d6.svg +++ b/assets/dice/d6.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/assets/dice/d8.svg b/assets/dice/d8.svg index ca3b00b..7731f96 100644 --- a/assets/dice/d8.svg +++ b/assets/dice/d8.svg @@ -1,3 +1 @@ - - - + \ No newline at end of file diff --git a/assets/edit.svg b/assets/edit.svg deleted file mode 100644 index 7cc344b..0000000 --- a/assets/edit.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/assets/garbage-bin.svg b/assets/garbage-bin.svg deleted file mode 100644 index b9268a5..0000000 --- a/assets/garbage-bin.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/assets/minus.svg b/assets/minus.svg deleted file mode 100644 index 171613e..0000000 --- a/assets/minus.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/assets/sheet.svg b/assets/sheet.svg deleted file mode 100644 index eaf555b..0000000 --- a/assets/sheet.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/assets/sources.txt b/assets/sources.txt index b002fc2..2896d5f 100644 --- a/assets/sources.txt +++ b/assets/sources.txt @@ -1,12 +1,15 @@ +Disclaimer: + All icons included in this repo have been scaled and optimized as needed. + Amer Alamer - caret-right.svg (https://thenounproject.com/icon/arrow-caret-right-1143917/) - caret-down.svg (https://thenounproject.com/icon/arrow-caret-down-1143911/) + ui/caret/right.svg (https://thenounproject.com/icon/arrow-caret-right-1143917/) + ui/caret/down.svg (https://thenounproject.com/icon/arrow-caret-down-1143911/) Alice Design: - garbage-bin.svg (https://thenounproject.com/icon/garbage-2025492/) + ui/garbage-bin.svg (https://thenounproject.com/icon/garbage-2025492/) zapesicon: - chat-bubble.svg (https://thenounproject.com/icon/chat-6423186/) + ui/chat-bubble.svg (https://thenounproject.com/icon/chat-6423186/) Fritz Duggan: dice/d4.svg (https://thenounproject.com/icon/d4-4570604/) @@ -17,21 +20,19 @@ Fritz Duggan: dice/d20.svg (https://thenounproject.com/icon/d20-4570607/) Landan Lloyd: - create.svg (https://thenounproject.com/icon/create-1447560/) + ui/plus.svg (https://thenounproject.com/icon/create-1447560/) Bismillah - minus.svg (https://thenounproject.com/icon/minus-1727966/) + ui/minus.svg (https://thenounproject.com/icon/minus-1727966/) Rokhman Kharis: - close.svg (https://thenounproject.com/icon/close-4996834/) + ui/close.svg (https://thenounproject.com/icon/close-4996834/) Athok: - sheet.svg (https://thenounproject.com/icon/sheet-5939348/) + ui/sheet.svg (https://thenounproject.com/icon/sheet-5939348/) Icon Depot: - edit.svg (https://thenounproject.com/icon/edit-1489252/) + ui/pencil.svg (https://thenounproject.com/icon/edit-1489252/) -Oliver Akins: - chat-bubble.svg : Scaling - create.svg : Scaling, Optimization - sheet.svg : Scaling \ No newline at end of file +Muhammad Ahsanu Nadia: + ui/help.svg (https://thenounproject.com/icon/help-6778522/) diff --git a/assets/ui/caret/down.svg b/assets/ui/caret/down.svg new file mode 100644 index 0000000..5c15836 --- /dev/null +++ b/assets/ui/caret/down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/ui/caret/right.svg b/assets/ui/caret/right.svg new file mode 100644 index 0000000..3b19a49 --- /dev/null +++ b/assets/ui/caret/right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/ui/chat-bubble.svg b/assets/ui/chat-bubble.svg new file mode 100644 index 0000000..a9182c1 --- /dev/null +++ b/assets/ui/chat-bubble.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/ui/close.svg b/assets/ui/close.svg new file mode 100644 index 0000000..3082802 --- /dev/null +++ b/assets/ui/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/ui/garbage-bin.svg b/assets/ui/garbage-bin.svg new file mode 100644 index 0000000..dd96a44 --- /dev/null +++ b/assets/ui/garbage-bin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/ui/help.svg b/assets/ui/help.svg new file mode 100644 index 0000000..bd06071 --- /dev/null +++ b/assets/ui/help.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/ui/minus.svg b/assets/ui/minus.svg new file mode 100644 index 0000000..d1d3e94 --- /dev/null +++ b/assets/ui/minus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/ui/pencil.svg b/assets/ui/pencil.svg new file mode 100644 index 0000000..455379f --- /dev/null +++ b/assets/ui/pencil.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/create.svg b/assets/ui/plus.svg similarity index 100% rename from assets/create.svg rename to assets/ui/plus.svg diff --git a/assets/ui/sheet.svg b/assets/ui/sheet.svg new file mode 100644 index 0000000..32a3268 --- /dev/null +++ b/assets/ui/sheet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/module/components/incrementer.mjs b/module/components/incrementer.mjs index fd58e70..68e426a 100644 --- a/module/components/incrementer.mjs +++ b/module/components/incrementer.mjs @@ -85,8 +85,8 @@ export class DotDungeonIncrementer extends StyledShadowElement(HTMLElement) { input.value = value; // plus button - const increment = document.createElement("dd-icon"); - increment.setAttribute(`name`, `create`); + 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; @@ -95,7 +95,7 @@ export class DotDungeonIncrementer extends StyledShadowElement(HTMLElement) { // minus button const decrement = document.createElement(DotDungeonIcon.elementName); - decrement.setAttribute(`name`, `minus`); + decrement.setAttribute(`name`, `ui/minus`); decrement.setAttribute(`var:size`, `0.75rem`); decrement.setAttribute(`var:fill`, `currentColor`); decrement.ariaHidden = true; diff --git a/templates/actors/char-sheet/v2/partials/inventory/item-list.v2.pc.hbs b/templates/actors/char-sheet/v2/partials/inventory/item-list.v2.pc.hbs index 3e5c234..73926f9 100644 --- a/templates/actors/char-sheet/v2/partials/inventory/item-list.v2.pc.hbs +++ b/templates/actors/char-sheet/v2/partials/inventory/item-list.v2.pc.hbs @@ -17,7 +17,7 @@ data-tooltip="{{filter.createLabel}}" data-tooltip-direction="LEFT" > - +
diff --git a/templates/actors/char-sheet/v2/partials/inventory/items/aspect.v2.pc.hbs b/templates/actors/char-sheet/v2/partials/inventory/items/aspect.v2.pc.hbs index c3bc9dc..ff106e6 100644 --- a/templates/actors/char-sheet/v2/partials/inventory/items/aspect.v2.pc.hbs +++ b/templates/actors/char-sheet/v2/partials/inventory/items/aspect.v2.pc.hbs @@ -13,7 +13,7 @@ tabindex="0" aria-label="{{dd-i18n 'dotdungeon.sheet.actor.v2.toggle-item-information' item}}" > - +

{{item.name}} diff --git a/templates/actors/char-sheet/v2/partials/inventory/items/pet.v2.pc.hbs b/templates/actors/char-sheet/v2/partials/inventory/items/pet.v2.pc.hbs index 6c07eac..dc0e1a8 100644 --- a/templates/actors/char-sheet/v2/partials/inventory/items/pet.v2.pc.hbs +++ b/templates/actors/char-sheet/v2/partials/inventory/items/pet.v2.pc.hbs @@ -13,7 +13,7 @@ tabindex="0" aria-label="{{dd-i18n 'dotdungeon.sheet.actor.v2.toggle-item-information' item}}" > - +

{{item.name}} diff --git a/templates/actors/char-sheet/v2/partials/inventory/items/untyped.v2.pc.hbs b/templates/actors/char-sheet/v2/partials/inventory/items/untyped.v2.pc.hbs index e0e845e..de3abdc 100644 --- a/templates/actors/char-sheet/v2/partials/inventory/items/untyped.v2.pc.hbs +++ b/templates/actors/char-sheet/v2/partials/inventory/items/untyped.v2.pc.hbs @@ -13,7 +13,7 @@ tabindex="0" aria-label="{{dd-i18n 'dotdungeon.sheet.actor.v2.toggle-item-information' item}}" > - +

{{item.name}} diff --git a/templates/actors/char-sheet/v2/partials/inventory/items/weapon.v2.pc.hbs b/templates/actors/char-sheet/v2/partials/inventory/items/weapon.v2.pc.hbs index 8dae2e7..6b0fe0f 100644 --- a/templates/actors/char-sheet/v2/partials/inventory/items/weapon.v2.pc.hbs +++ b/templates/actors/char-sheet/v2/partials/inventory/items/weapon.v2.pc.hbs @@ -13,7 +13,7 @@ tabindex="0" aria-label="{{dd-i18n 'dotdungeon.sheet.actor.v2.toggle-item-information' item}}" > - +

{{item.name}} From c3bb67ad7c072d1b8cf5cfa0b17bcf3b82a8584f Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Mon, 15 Apr 2024 23:49:50 -0600 Subject: [PATCH 31/51] Get the calculated capacity "tooltip" implemented (closes #147 and closes #125) --- langs/en-ca.2.json | 10 ++- module/sheets/Items/GenericItemSheet.mjs | 16 ++++ module/utils/DialogManager.mjs | 85 +++++++++++++++++++ styles/v3/layouts/items/untyped/v2.scss | 9 ++ .../untyped/v2/tabs/settings.v2.untyped.hbs | 14 ++- 5 files changed, 131 insertions(+), 3 deletions(-) create mode 100644 module/utils/DialogManager.mjs diff --git a/langs/en-ca.2.json b/langs/en-ca.2.json index 82a260e..c1d67b1 100644 --- a/langs/en-ca.2.json +++ b/langs/en-ca.2.json @@ -81,10 +81,18 @@ "send-to-chat": "Send to Chat", "edit": "Edit", "delete": "Delete", - "empty": "---" + "empty": "---", + "help": "Help", + "gm": "Server" }, "sheet-names": { "*DataSheet": "Data Sheet" + }, + "help-tooltips": { + "calculated-capacity": { + "title": "What is Calculated Capacity?", + "content": "

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.

" + } } }, "TYPES": { diff --git a/module/sheets/Items/GenericItemSheet.mjs b/module/sheets/Items/GenericItemSheet.mjs index 0776648..883050e 100644 --- a/module/sheets/Items/GenericItemSheet.mjs +++ b/module/sheets/Items/GenericItemSheet.mjs @@ -1,3 +1,4 @@ +import { DialogManager } from "../../utils/DialogManager.mjs"; import DOTDUNGEON from "../../config.mjs"; export class GenericItemSheet extends ItemSheet { @@ -45,6 +46,10 @@ export class GenericItemSheet extends ItemSheet { .on(`click`, this._incrementValue.bind(this)); html.find(`button[data-decrement]`) .on(`click`, this._decrementValue.bind(this)); + + + html.find(`[data-help-id]`) + .on(`click`, this._helpPopup.bind(this)); }; async _incrementValue($e) { @@ -66,4 +71,15 @@ export class GenericItemSheet extends ItemSheet { }; this.actor.update({ [data.decrement]: value - 1 }); }; + + async _helpPopup($e) { + const target = $e.currentTarget; + const data = target.dataset; + if (!data.helpId) return; + DialogManager.helpDialog( + data.helpId, + data.helpContent, + data.helpTitle + ); + }; }; diff --git a/module/utils/DialogManager.mjs b/module/utils/DialogManager.mjs new file mode 100644 index 0000000..da28478 --- /dev/null +++ b/module/utils/DialogManager.mjs @@ -0,0 +1,85 @@ +import { localizer } from "./localizer.mjs"; + +/** + * A utility class that allows managing Dialogs that are created for various + * purposes such as deleting items, help popups, etc. This is a singleton class + * that upon instantiating after the first time will just return the first instance + */ +export class DialogManager { + + /** @type {Map} */ + static #dialogs = new Map(); + + /** + * Focuses a dialog if it already exists, or creates a new one and renders it. + * + * @param {string} dialogId The ID to associate with the dialog, should be unique + * @param {object} data The data to pass to the Dialog constructor + * @param {DialogOptions} opts The options to pass to the Dialog constructor + * @returns {Dialog} The Dialog instance + */ + static async createOrFocus(dialogId, data, opts = {}) { + if (DialogManager.#dialogs.has(dialogId)) { + const dialog = DialogManager.#dialogs.get(dialogId); + dialog.bringToTop(); + return dialog; + }; + + /* + This makes sure that if I provide a close function as a part of the data, + that the dialog still gets removed from the set once it's closed, otherwise + it could lead to dangling references that I don't care to keep. Or if I don't + provide the close function, it just sets the function as there isn't anything + extra that's needed to be called. + */ + if (data?.close) { + const provided = data.close; + data.close = () => { + DialogManager.#dialogs.delete(dialogId); + provided(); + }; + } + else { + data.close = () => DialogManager.#dialogs.delete(dialogId); + }; + + // Create the Dialog with the modified data + const dialog = new Dialog(data, opts); + DialogManager.#dialogs.set(dialogId, dialog); + dialog.render(true); + return dialog; + }; + + /** + * Closes a dialog if it is rendered + * + * @param {string} dialogId The ID of the dialog to close + */ + static async close(dialogId) { + const dialog = DialogManager.#dialogs.get(dialogId); + dialog?.close(); + }; + + static async helpDialog( + helpId, + helpContent, + helpTitle = `dotdungeon.common.help`, + localizationData = {}, + ) { + DialogManager.createOrFocus( + helpId, + { + title: localizer(helpTitle, localizationData), + content: localizer(helpContent, localizationData), + buttons: {}, + }, + { resizable: true, } + ); + }; + + static get size() { + return DialogManager.#dialogs.size; + } +}; + +globalThis.DialogManager = DialogManager; \ No newline at end of file diff --git a/styles/v3/layouts/items/untyped/v2.scss b/styles/v3/layouts/items/untyped/v2.scss index 8c18cd3..b3dc3a2 100644 --- a/styles/v3/layouts/items/untyped/v2.scss +++ b/styles/v3/layouts/items/untyped/v2.scss @@ -58,5 +58,14 @@ @include utils.tab("settings") { @extend %flex-col; + + .capacity { + &--calculated { + display: flex; + flex-direction: row; + align-items: center; + gap: 8px; + } + } } } diff --git a/templates/items/untyped/v2/tabs/settings.v2.untyped.hbs b/templates/items/untyped/v2/tabs/settings.v2.untyped.hbs index e9fd907..c69757f 100644 --- a/templates/items/untyped/v2/tabs/settings.v2.untyped.hbs +++ b/templates/items/untyped/v2/tabs/settings.v2.untyped.hbs @@ -16,7 +16,17 @@ (GM Only) {{/if}} -
- Total Capacity Used: +
+ Capacity Used: + +
+ 5
From 6d41a33b0c41f25c507f48a46958a8bebd1df631 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Mon, 15 Apr 2024 23:56:50 -0600 Subject: [PATCH 32/51] Remove DialogManager from the globalThis --- module/utils/DialogManager.mjs | 2 -- 1 file changed, 2 deletions(-) diff --git a/module/utils/DialogManager.mjs b/module/utils/DialogManager.mjs index da28478..7c40407 100644 --- a/module/utils/DialogManager.mjs +++ b/module/utils/DialogManager.mjs @@ -81,5 +81,3 @@ export class DialogManager { return DialogManager.#dialogs.size; } }; - -globalThis.DialogManager = DialogManager; \ No newline at end of file From 48ceade1d119b67b8d6a7acb2f6cad67a03f4e22 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Wed, 17 Apr 2024 22:31:45 -0600 Subject: [PATCH 33/51] Implement the toggle for capacity usage. (closes #156) --- styles/v3/elements/checkbox.scss | 24 +++++++++++++++++++ styles/v3/index.scss | 1 + styles/v3/layouts/items/untyped/v2.scss | 5 ++++ styles/v3/themes/dark.css | 2 ++ .../untyped/v2/tabs/settings.v2.untyped.hbs | 19 +++++++++++---- 5 files changed, 47 insertions(+), 4 deletions(-) create mode 100644 styles/v3/elements/checkbox.scss diff --git a/styles/v3/elements/checkbox.scss b/styles/v3/elements/checkbox.scss new file mode 100644 index 0000000..d3bae5f --- /dev/null +++ b/styles/v3/elements/checkbox.scss @@ -0,0 +1,24 @@ +.dotdungeon.style-v3 { + input[type="checkbox"] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border-radius: 2px; + margin: 0; + cursor: pointer; + + background: var(--elevation-8dp-bg); + position: relative; + &:checked::before { + content: ""; + background: var(--checkbox-checked); + border-radius: 3px; + $margin: 4px; + top: $margin; + bottom: $margin; + left: $margin; + right: $margin; + position: absolute; + } + } +} diff --git a/styles/v3/index.scss b/styles/v3/index.scss index 1814eac..85ec4bf 100644 --- a/styles/v3/index.scss +++ b/styles/v3/index.scss @@ -5,6 +5,7 @@ /* Element-Styling */ @use "./elements/utilities.scss"; @use "./elements/button.scss"; +@use "./elements/checkbox.scss"; @use "./elements/select.scss"; @use "./elements/text-input.scss"; @use "./elements/number-input.scss"; diff --git a/styles/v3/layouts/items/untyped/v2.scss b/styles/v3/layouts/items/untyped/v2.scss index b3dc3a2..a93307d 100644 --- a/styles/v3/layouts/items/untyped/v2.scss +++ b/styles/v3/layouts/items/untyped/v2.scss @@ -60,6 +60,11 @@ @extend %flex-col; .capacity { + &--usage, &--quantity { + display: flex; + align-items: center; + } + &--calculated { display: flex; flex-direction: row; diff --git a/styles/v3/themes/dark.css b/styles/v3/themes/dark.css index a5cbc65..374056f 100644 --- a/styles/v3/themes/dark.css +++ b/styles/v3/themes/dark.css @@ -4,4 +4,6 @@ --surface: #121212; --on-surface: white; + + --checkbox-checked: #00d300; } diff --git a/templates/items/untyped/v2/tabs/settings.v2.untyped.hbs b/templates/items/untyped/v2/tabs/settings.v2.untyped.hbs index c69757f..75b1167 100644 --- a/templates/items/untyped/v2/tabs/settings.v2.untyped.hbs +++ b/templates/items/untyped/v2/tabs/settings.v2.untyped.hbs @@ -5,10 +5,21 @@ {{/if}} {{#if isGM}} -
- Uses Capacity? -
- (GM Only) +
+ +
+
Quantity Affects Capacity? From c6a7f8692695d9a4a61192982aa3258e2f0255cf Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Wed, 17 Apr 2024 22:34:08 -0600 Subject: [PATCH 34/51] Implement the Quantity affecting Capacity toggle (closes #157) --- .../untyped/v2/tabs/settings.v2.untyped.hbs | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/templates/items/untyped/v2/tabs/settings.v2.untyped.hbs b/templates/items/untyped/v2/tabs/settings.v2.untyped.hbs index 75b1167..6be77e4 100644 --- a/templates/items/untyped/v2/tabs/settings.v2.untyped.hbs +++ b/templates/items/untyped/v2/tabs/settings.v2.untyped.hbs @@ -21,10 +21,19 @@ {{checked system.uses_inventory_slot}} >
-
- Quantity Affects Capacity? -
- (GM Only) +
+ +
+
{{/if}}
From 10449acf372622c8e98db6b523ec61e34880f497 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Wed, 17 Apr 2024 22:36:04 -0600 Subject: [PATCH 35/51] Makes the calculated capacity viewable on the sheet (closes #158) --- templates/items/untyped/v2/tabs/settings.v2.untyped.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/items/untyped/v2/tabs/settings.v2.untyped.hbs b/templates/items/untyped/v2/tabs/settings.v2.untyped.hbs index 6be77e4..ec26790 100644 --- a/templates/items/untyped/v2/tabs/settings.v2.untyped.hbs +++ b/templates/items/untyped/v2/tabs/settings.v2.untyped.hbs @@ -47,6 +47,6 @@ data-help-title="dotdungeon.help-tooltips.calculated-capacity.title" >
- 5 + {{item.usedCapacity}}
From 2df7d2243f7cd6062032b6dc72109e26d100b316 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Wed, 17 Apr 2024 22:41:04 -0600 Subject: [PATCH 36/51] Get the combat relevance toggle working (closes #155) --- styles/v3/layouts/items/untyped/v2.scss | 10 +++++----- .../items/untyped/v2/tabs/settings.v2.untyped.hbs | 15 ++++++++++++--- 2 files changed, 17 insertions(+), 8 deletions(-) diff --git a/styles/v3/layouts/items/untyped/v2.scss b/styles/v3/layouts/items/untyped/v2.scss index a93307d..ce6300f 100644 --- a/styles/v3/layouts/items/untyped/v2.scss +++ b/styles/v3/layouts/items/untyped/v2.scss @@ -59,12 +59,12 @@ @include utils.tab("settings") { @extend %flex-col; - .capacity { - &--usage, &--quantity { - display: flex; - align-items: center; - } + .capacity-usage, .quantity-capacity, .combat-relevant { + display: flex; + align-items: center; + } + .capacity { &--calculated { display: flex; flex-direction: row; diff --git a/templates/items/untyped/v2/tabs/settings.v2.untyped.hbs b/templates/items/untyped/v2/tabs/settings.v2.untyped.hbs index ec26790..b24584a 100644 --- a/templates/items/untyped/v2/tabs/settings.v2.untyped.hbs +++ b/templates/items/untyped/v2/tabs/settings.v2.untyped.hbs @@ -1,11 +1,20 @@
{{#if meta.isEmbedded}}
- Useful in Combat? + +
+
{{/if}} {{#if isGM}} -
+
-
+
{{/each}} - From 2c2c4cc83f35a14043d7b1efe7f7999a7e717d62 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Tue, 23 Apr 2024 23:19:23 -0600 Subject: [PATCH 48/51] Make the AE deletion context menu option actually work --- langs/en-ca.2.json | 6 ++++++ module/sheets/Items/UntypedItemSheet.mjs | 26 ++++++++++++++++++++++-- 2 files changed, 30 insertions(+), 2 deletions(-) diff --git a/langs/en-ca.2.json b/langs/en-ca.2.json index cc81d0a..dce0efa 100644 --- a/langs/en-ca.2.json +++ b/langs/en-ca.2.json @@ -95,6 +95,12 @@ "title": "What is Calculated Capacity?", "content": "

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": { diff --git a/module/sheets/Items/UntypedItemSheet.mjs b/module/sheets/Items/UntypedItemSheet.mjs index 99f6862..5ae0f24 100644 --- a/module/sheets/Items/UntypedItemSheet.mjs +++ b/module/sheets/Items/UntypedItemSheet.mjs @@ -1,4 +1,5 @@ import { GenericContextMenu } from "../../utils/GenericContextMenu.mjs"; +import { DialogManager } from "../../utils/DialogManager.mjs"; import { GenericItemSheet } from "./GenericItemSheet.mjs"; import { localizer } from "../../utils/localizer.mjs"; @@ -75,8 +76,29 @@ export class UntypedItemSheet extends GenericItemSheet { }, { name: localizer(`dotdungeon.common.delete`), - callback: async () => { - (await fromUuid(html.closest(`.effect`)[0].dataset.embeddedId))?.delete(true); + callback: async (html) => { + const target = html.closest(`.effect`)[0]; + const data = target.dataset; + const id = data.embeddedId; + const doc = await fromUuid(id); + DialogManager.createOrFocus( + `${doc.uuid}-delete`, + { + title: localizer(`dotdungeon.delete.ActiveEffect.title`, doc), + content: localizer(`dotdungeon.delete.ActiveEffect.content`, doc), + buttons: { + yes: { + label: localizer(`Yes`), + callback() { + doc.delete(); + }, + }, + no: { + label: localizer(`No`), + } + } + } + ); }, } ]); From e2579e12f881d95781899333dca38398a98b71c2 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Tue, 23 Apr 2024 23:19:59 -0600 Subject: [PATCH 49/51] Ignore all ref files in the root rather than just the foundry.js file --- .gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 4c1e822..4beb05c 100644 --- a/.gitignore +++ b/.gitignore @@ -6,7 +6,7 @@ references/ /.*/ !/.vscode/ !/.github/ -/foundry.js +/*.ref.* *.lock *.zip From f8364888f2238fce5a971d1accdb9d0166df4691 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Sat, 27 Apr 2024 00:37:30 -0600 Subject: [PATCH 50/51] Fix issues with the localizer's replacement to be more reliable --- module/utils/localizer.mjs | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/module/utils/localizer.mjs b/module/utils/localizer.mjs index 550c1cb..7cfebb0 100644 --- a/module/utils/localizer.mjs +++ b/module/utils/localizer.mjs @@ -18,12 +18,20 @@ export function localizer(key, args = {}, depth = 0) { return localized; }; + /* + Helps prevent recursion on the same key so that we aren't doing excess work. + */ + const localizedSubkeys = new Map(); for (const match of subkeys) { const subkey = match.groups.key; - localized = - localized.slice(0, match.index) - + localizer(subkey, args, depth + 1) - + localized.slice(match.index + subkey.length + 1) + if (localizedSubkeys.has(subkey)) continue; + localizedSubkeys.set(subkey, localizer(subkey, args, depth + 1)); }; - return localized; + + return localized.replace( + localizerConfig.subKeyPattern, + (_fullMatch, subkey) => { + return localizedSubkeys.get(subkey); + } + ); }; From cf13b986d4ceeca7a17bc882f04d88c1da75e239 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Sat, 27 Apr 2024 00:37:49 -0600 Subject: [PATCH 51/51] Change how embedded ActiveEffects are created --- module/sheets/Actors/PC/PlayerSheetV2.mjs | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/module/sheets/Actors/PC/PlayerSheetV2.mjs b/module/sheets/Actors/PC/PlayerSheetV2.mjs index 0968a6e..ac1a378 100644 --- a/module/sheets/Actors/PC/PlayerSheetV2.mjs +++ b/module/sheets/Actors/PC/PlayerSheetV2.mjs @@ -39,9 +39,8 @@ export class PlayerSheetv2 extends GenericActorSheet { html.find(`.create-ae`).on(`click`, async ($e) => { console.debug(`Creating an ActiveEffect?`); - ActiveEffect.implementation.create({ - name: "Default AE", - }, { parent: this.actor, renderSheet: true }); + const ae = this.actor.createEmbeddedDocuments(`ActiveEffect`, [{name: "Default AE"}]); + ae.sheet.render(true); }); html.find(`[data-filter-toggle]`).on(`change`, ($e) => { const target = $e.delegateTarget;