Implement the buttons spinbuttons for the inventory area

assets/minus.svg

@@ -0,0 +1,3 @@
+<svg width="100%" height="100%" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+ <path d="m12.633 38.727h74.734c6.2578 0 11.336 6.2266 11.336 11.273 0 6.2266-5.0742 11.273-11.336 11.273h-74.734c-6.2578 0-11.336-6.2266-11.336-11.273 0-6.2266 5.0742-11.273 11.336-11.273z" fill-rule="evenodd"/>
+</svg>

assets/sources.txt

@@ -18,6 +18,9 @@ Fritz Duggan:
 Landan Lloyd:
 	create.svg (https://thenounproject.com/icon/create-1447560/)
 
+Bismillah
+	minus.svg (https://thenounproject.com/icon/minus-1727966/)
+
 Rokhman Kharis:
 	close.svg (https://thenounproject.com/icon/close-4996834/)
 

module/handlebars.mjs

@@ -34,11 +34,11 @@ export const icons = [
 	`close.svg`,
 	`edit.svg`,
 	`sheet.svg`,
+	`minus.svg`,
 ];
 
 
 export async function registerHandlebarsHelpers() {
-	console.log(Handlebars)
 	Handlebars.registerHelper(helpers);
 };
 

module/sheets/GenericActorSheet.mjs

@@ -1,4 +1,5 @@
 import DOTDUNGEON from "../config.mjs";
+import { getPath } from "../utils.mjs";
 
 export class GenericActorSheet extends ActorSheet {
 	_expanded = new Set();
@@ -54,6 +55,10 @@ export class GenericActorSheet extends ActorSheet {
 			.on(`click`, this.actor.genericSendToChat.bind(this.actor));
 		html.find(`[data-embedded-edit]`)
 			.on(`click`, this.actor.openEmbeddedSheet.bind(this.actor));
+		html.find(`button[data-increment]`)
+			.on(`click`, this._incrementValue.bind(this));
+		html.find(`button[data-decrement]`)
+			.on(`click`, this._decrementValue.bind(this));
 	};
 
 	async _handleRoll($e) {
@@ -73,7 +78,27 @@ export class GenericActorSheet extends ActorSheet {
 		});
 	};
 
-	_handleSummaryToggle($e) {
+	async _incrementValue($e) {
+		const target = $e.currentTarget;
+		const data = target.dataset;
+		const value = getPath(data.increment, this.actor);
+		if (typeof value != "number") {
+			return;
+		};
+		this.actor.update({ [data.increment]: value + 1 });
+	};
+
+	async _decrementValue($e) {
+		const target = $e.currentTarget;
+		const data = target.dataset;
+		const value = getPath(data.decrement, this.actor);
+		if (typeof value != "number") {
+			return;
+		};
+		this.actor.update({ [data.decrement]: value - 1 });
+	};
+
+	async _handleSummaryToggle($e) {
 		let data = $e.currentTarget.dataset;
 		let open = $e.currentTarget.parentNode.open;
 		console.debug(`.dungeon | Collapse ID: ${data.collapseId} (open: ${open})`);

module/utils.mjs

@@ -1,13 +1,15 @@
-export function reloadWindows(type = null) {
+/**
-	if (!type) {
+ * @param {string} path
-		for (const window of globalThis.ui.windows) {
+ * @param {object} data
-			window.render(true);
+ * @returns {unknown}
-		};
+ */
-		return;
+export function getPath(path, data) {
-	};
+	if (!path.includes(`.`)) {
-	for (const window of globalThis.ui.windows) {
+		return data[path];
-		if (window instanceof type) {
-			window.render(true);
-		};
 	};
+	let [ key, nextPath ] = path.split(`.`, 2)
+	return getPath(
+		nextPath,
+		data[key]
+	);
 };

styles/sheets/actor/mvp.scss

@@ -79,6 +79,12 @@
 				flex-direction: row;
 				align-items: center;
 			}
+			.grid-row {
+				display: grid;
+				grid-template-columns: 1fr min-content 25% min-content;
+				gap: 4px;
+				align-items: center;
+			}
 			.col {
 				display: flex;
 				flex-direction: column;
@@ -95,11 +101,15 @@
 
 			.bytes-input,
 			.supplies-count,
-			.materials-count {
+			.materials-count,
-				width: 25%;
+			.item-quantity {
 				text-align: center;
 			}
 
+			.item-quantity {
+				width: 25%
+			}
+
 			textarea {
 				resize: vertical;
 			}

templates/actors/char-sheet-mvp/panels/backpack.pc.hbs

@@ -1,9 +1,21 @@
 {{#> dotdungeon.panel class="backpack" title="dotdungeon.actor.pc.panel.backpack"}}
-	<label class="row">
+	<div class="grid-row">
-		<span class="grow">
+		<label
+			for="{{meta.idp}}-bytes-input"
+		>
 			{{localize "dotdungeon.actor.pc.backpack.bytes.label"}}
-		</span>
+		</label>
+		<button
+			class="neutral reduced-padding equal-padding"
+			data-decrement="system.bytes"
+			aria-label="Decrease byte count by one"
+		>
+			<div aria-hidden="true" class="icon icon--16">
+				{{{ icons.minus }}}
+			</div>
+		</button>
 		<input
+			id="{{meta.idp}}-bytes-input"
 			class="bytes-input"
 			type="number"
 			name="system.bytes"
@@ -13,51 +25,89 @@
 			aria-valuemin="0"
 			aria-valuenow="{{system.bytes}}"
 		>
-	</label>
+		<button
-	<label class="row">
+			class="neutral reduced-padding equal-padding"
-		<span class="grow">
+			data-increment="system.bytes"
+			aria-label="Increase byte count by one"
+		>
+			<div aria-hidden="true" class="icon icon--16">
+				{{{ icons.create }}}
+			</div>
+		</button>
+	</div>
+	<div class="grid-row">
+		<label for="{{meta.idp}}-supplies-input">
 			{{localize
 				(concat
 					"dotdungeon.settings.resourcesOrSupplies.option."
 					settings.resourcesOrSupplies
 				)
 			}}
-			{{#if settings.devMode}}
+		</label>
-				<span class="debug-data">
+		<button
-					({{settings.resourcesOrSupplies}})
+			class="neutral reduced-padding equal-padding"
-				</span>
+			data-decrement="system.supplies"
-			{{/if}}
+			aria-label="Decrease supplies count by one"
-		</span>
+		>
+			<div aria-hidden="true" class="icon icon--16">
+				{{{ icons.minus }}}
+			</div>
+		</button>
 		<input
+			id="{{meta.idp}}-supplies-input"
 			class="supplies-count"
 			type="number"
 			name="system.supplies"
 			value="{{system.supplies}}"
 			min="0"
-			max="5"
 			aria-label="{{localize "dotdungeon.aria.actor.pc.input.supplies"}}"
 			aria-valuemin="0"
-			aria-valuemax="5"
 			aria-valuenow="{{system.supplies}}"
 		>
-	</label>
+		<button
-	<label class="row">
+			class="neutral reduced-padding equal-padding"
-		<span class="grow">
+			data-increment="system.supplies"
+			aria-label="Increase supplies count by one"
+		>
+			<div aria-hidden="true" class="icon icon--16">
+				{{{ icons.create }}}
+			</div>
+		</button>
+	</div>
+	<div class="grid-row">
+		<label for="{{meta.idp}}-materials-input">
 			{{localize "dotdungeon.actor.pc.backpack.materials.label"}}
-		</span>
+		</label>
+		<button
+			class="neutral reduced-padding equal-padding"
+			data-decrement="system.materials"
+			aria-label="Decrease materials count by one"
+		>
+			<div aria-hidden="true" class="icon icon--16">
+				{{{ icons.minus }}}
+			</div>
+		</button>
 		<input
+			id="{{meta.idp}}-materials-input"
 			class="materials-count"
 			type="number"
 			name="system.materials"
 			value="{{system.materials}}"
 			min="0"
-			max="5"
 			aria-label="{{localize "dotdungeon.aria.actor.pc.input.materials"}}"
 			aria-valuemin="0"
-			aria-valuemax="5"
 			aria-valuenow="{{system.supplies}}"
 		>
-	</label>
+		<button
+			class="neutral reduced-padding equal-padding"
+			data-increment="system.materials"
+			aria-label="Increase materials count by one"
+		>
+			<div aria-hidden="true" class="icon icon--16">
+				{{{ icons.create }}}
+			</div>
+		</button>
+	</div>
 	<hr>
 	{{#each items.untyped as | item |}}
 		<details {{dd-expanded ../meta.expanded item.uuid}}>
@@ -72,7 +122,7 @@
 					<span class="grow">Quantity</span>
 					<input
 						type="number"
-						class="bytes-input"
+						class="item-quantity"
 						value="{{item.system.quantity}}"
 						data-embedded-update="system.quantity"
 						data-embedded-update-on="blur"
@@ -82,7 +132,7 @@
 				{{#if item.system.description}}
 					<p>{{item.system.description}}</p>
 				{{else}}
-					<p style="opacity: 75;%">
+					<p style="opacity: 75%;">
 						This item hasn't been described yet
 					</p>
 				{{/if}}

templates/actors/char-sheet-mvp/sheet.hbs

@@ -38,37 +38,4 @@
 	{{> dotdungeon.pc.pets }}
 
 	{{> dotdungeon.pc.storage}}
-
-	{{#if settings.devMode}}
-		<div class="debug-data" style="grid-column: 1 / span 3">
-			<div>
-				Settings:
-				<pre><code>{{dd-stringify settings}}</code></pre>
-			</div>
-			<div>
-				Meta:
-				<pre><code>{{dd-stringify meta}}</code></pre>
-			</div>
-			<hr>
-			<div>
-				Config:
-				<pre><code>{{dd-stringify config}}</code></pre>
-			</div>
-			<hr>
-			<div>
-				Items:
-				<pre><code>{{dd-stringify items}}</code></pre>
-			</div>
-			<hr>
-			<div>
-				System:
-				<pre><code>{{dd-stringify system}}</code></pre>
-			</div>
-			<hr>
-			<div>
-				Actor:
-				<pre><code>{{dd-stringify actor}}</code></pre>
-			</div>
-		</div>
-	{{/if}}
 </form>