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