Begin work on a custom element for incrementer

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);
+};

module/components/index.mjs

@@ -0,0 +1 @@
+import "./incrementer.mjs";

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 () => {

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);
+}

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;
 

templates/actors/char-sheet/v2/partials/inventory/player.v2.pc.hbs

@@ -15,7 +15,8 @@
 		>
 			Supplies
 		</label>
-		<button
+		<dd-incrementer value="{{system.supplies}}"></dd-incrementer>
+		{{!-- <button
 			type="button"
 			class="icon"
 			data-decrement="system.supplies"
@@ -39,7 +40,7 @@
 			<div aria-hidden="true" class="icon icon--14">
 				{{{ icons.create }}}
 			</div>
-		</button>
+		</button> --}}
 	</div>
 	<div class="e-1dp panel bytes-panel">
 		<label
@@ -47,7 +48,7 @@
 		>
 			Bytes
 		</label>
-		<button
+		{{!-- <button
 			type="button"
 			class="equal-padding"
 			data-decrement="system.bytes"
@@ -70,7 +71,7 @@
 		>
 			<div aria-hidden="true" class="icon icon--14">
 				{{{ icons.create }}}
-			</div>
+			</div> --}}
 		</button>
 	</div>
 	<div class="e-1dp panel filter-panel">

templates/items/untyped/v2/tabs/details.v2.untyped.hbs

@@ -73,13 +73,14 @@
 				<label for="{{meta.idp}}-quantity">
 					Quantity
 				</label>
-				<input
+				<dd-incrementer value="{{system.supplies}}"></dd-incrementer>
+				{{!-- <input
 					type="number"
 					min="0"
 					name="system.quantity"
 					value="{{system.quantity}}"
 					id="{{meta.idp}}-quantity"
-				>
+				> --}}
 			{{else}}
 				Quantity
 				{{system.quantity}}