From d5429b7b34f0a61b869165e0574d5b575d1971d5 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Wed, 3 Apr 2024 23:00:57 -0600 Subject: [PATCH 01/18] 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/18] 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/18] 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/18] 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 17/18] 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 18/18] 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": [],