RC-90 | Add support for bar-input controls in item sheets

langs/en-ca.json

@@ -83,7 +83,9 @@
 			},
 			"traits-placeholder": "New Trait...",
 			"short-range": "Short @RipCrypt.common.range",
-			"long-range": "Long @RipCrypt.common.range"
+			"long-range": "Long @RipCrypt.common.range",
+			"current-wear": "Current @RipCrypt.common.wear",
+			"max-wear": "Maximum @RipCrypt.common.wear"
 		}
 	}
 }

module/data/Item/Weapon.mjs

@@ -87,12 +87,28 @@ export class WeaponData extends foundry.abstract.TypeDataModel {
 				value: this.damage,
 				min: 0,
 			},
-			// { type: `bar`, label: `Wear` },
+			{
+				type: `bar`,
+				label: `RipCrypt.common.wear`,
+				value: {
+					label: `RipCrypt.Apps.current-wear`,
+					path: `system.wear.value`,
+					value: this.wear.value,
+					min: 0, max: this.wear.max,
+				},
+				max: {
+					label: `RipCrypt.Apps.max-wear`,
+					path: `system.wear.max`,
+					value: this.wear.max,
+					min: 0,
+				},
+			},
 			{
 				type: `dropdown`,
 				label: `Access`,
 				path: `system.access`,
 				value: this.access,
+				limited: false,
 				options: [
 					{
 						label: `RipCrypt.common.empty`,

module/handlebarHelpers/inputs/barInput.mjs

@@ -0,0 +1,36 @@
+import { localizer } from "../../utils/Localizer.mjs";
+
+export function barInput(input, data) {
+	const label = localizer(input.label);
+
+	// Trying to do limited bar info is... annoying to do.
+	if (data.meta.limited && input.limited) {
+		return ``;
+	};
+
+	return `<div data-input-type="bar">
+		<span class="label" aria-hidden="true">
+			${label}
+		</span>
+		<div class="pill-bar">
+			<input
+				type="number"
+				aria-label="${localizer(input.value.label)}"
+				${data.meta.editable ? `` : `disabled`}
+				name="${input.value.path}"
+				value="${input.value.value}"
+				min="${input.value.min ?? ``}"
+				max="${input.value.max ?? ``}"
+			>
+			<input
+				type="number"
+				aria-label="${localizer(input.max.label)}"
+				${data.meta.editable ? `` : `disabled`}
+				name="${input.max.path}"
+				value="${input.max.value}"
+				min="${input.max.min ?? ``}"
+				max="${input.max.max ?? ``}"
+			>
+		</div>
+	</div>`;
+};

module/handlebarHelpers/inputs/dropdownInput.mjs

@@ -10,7 +10,7 @@ export function dropdownInput(input, data) {
 	if (!data.meta.editable) {
 		return `<div data-input-type="dropdown">
 			<span class="label">${label}</span>
-			<span class="value">${data.meta.limited ? `???` : input.value}</span>
+			<span class="value">${data.meta.limited && input.limited ? `???` : input.value}</span>
 		</div>`;
 	};
 

module/handlebarHelpers/inputs/formFields.mjs

@@ -1,15 +1,20 @@
+import { barInput } from "./barInput.mjs";
 import { dropdownInput } from "./dropdownInput.mjs";
 import { numberInput } from "./numberInput.mjs";
 import { stringSet } from "./stringSet.mjs";
 
+const { getType } = foundry.utils;
+
 const inputTypes = {
 	"string-set": stringSet,
 	integer: numberInput,
-	bar: displayOnly,
+	bar: barInput,
 	dropdown: dropdownInput,
 	boolean: displayOnly,
 };
 
+const typesToSanitize = new Set([ `string`, `number` ]);
+
 function displayOnly(input) {
 	return `<div data-input-type="${input.type}">${input.label}</div>`;
 };
@@ -18,8 +23,15 @@ export function formFields(inputs, opts) {
 	const fields = [];
 	for (const input of inputs) {
 		if (inputTypes[input.type] == null) { continue };
-		input.value = Handlebars.escapeExpression(input.value);
+
+		input.limited ??= true;
+
+		if (typesToSanitize.has(getType(input.value))) {
+			input.value = Handlebars.escapeExpression(input.value);
+		};
 		fields.push(inputTypes[input.type](input, opts.data.root));
 	};
-	return fields.join(opts.hash?.joiner ?? `<hr />`);
+	return fields
+		.filter(i => i.length > 0)
+		.join(opts.hash?.joiner ?? `<hr />`);
 };

module/handlebarHelpers/inputs/numberInput.mjs

@@ -9,7 +9,7 @@ export function numberInput(input, data) {
 	if (!data.meta.editable) {
 		return `<div data-input-type="integer">
 			<span class="label">${label}</span>
-			<span class="value">${data.meta.limited ? `???` : input.value}</span>
+			<span class="value">${data.meta.limited && input.limited ? `???` : input.value}</span>
 		</div>`;
 	};
 

module/handlebarHelpers/inputs/stringSet.mjs

@@ -14,21 +14,23 @@ export function stringSet(input, data) {
 			.map(t => {
 				return `<div class="tag">${t.trim()}</div>`;
 			});
+		let count = tagList.length;
 		let tags = tagList.join(``);
 
 		if (tagList.length === 0) {
 			tags = `---`;
 		};
 
-		if (data.meta.limited) {
+		if (data.meta.limited && input.limited) {
+			count = 0;
 			tags = `???`;
 		};
 
 		return `<div data-input-type="string-set">
 			<span class="label">${label}</span>
 			<div
-				class="input-element-tags tags ${tags.length == 0 ? `empty` : ``}"
-				data-tag-count="${tagList.length}"
+				class="input-element-tags tags ${count == 0 ? `empty` : ``}"
+				data-tag-count="${count}"
 			>
 				${tags}
 			</div>

templates/Apps/AllItemSheetV1/style.css

@@ -14,8 +14,11 @@
 	--input-text: white;
 	--input-background: var(--accent-2);
 
+	--pill-width: 100%;
+	--pill-border-radius: 4px;
+
 	display: grid;
-	grid-template-columns: auto minmax(0, 1fr);
+	grid-template-columns: auto 200px;
 	column-gap: var(--col-gap);
 	row-gap: var(--row-gap);
 

templates/css/common.css

@@ -3,6 +3,7 @@
 @import url("./elements/button.css");
 @import url("./elements/input.css");
 @import url("./elements/lists.css");
+@import url("./elements/pill-bar.css");
 @import url("./elements/select.css");
 @import url("./elements/span.css");
 @import url("./elements/string-tags.css");

templates/css/elements/pill-bar.css

@@ -0,0 +1,47 @@
+.ripcrypt > .window-content .pill-bar {
+	display: flex;
+	flex-direction: row;
+	width: var(--pill-width, 100px);
+	border: 2px solid var(--pill-border);
+	border-radius: var(--pill-border-radius, 999px);
+	background: var(--pill-background);
+	align-items: center;
+	gap: 8px;
+
+	> input {
+		color: var(--pill-input-text);
+		background: var(--pill-input-background);
+		border-radius: var(--pill-border-radius, 999px);
+		flex-shrink: 1;
+		flex-grow: 1;
+		min-width: 50px;
+		max-width: unset;
+		width: initial;
+		flex-basis: 50px;
+		text-align: center;
+
+		&:disabled {
+			color: var(--pill-input-disabled-text);
+			background: var(--pill-input-disabled-background);
+		}
+	}
+
+	> :first-child {
+		order: 1;
+	}
+	> :last-child {
+		order: 3;
+	}
+
+	&::after {
+		display: block;
+		content: "";
+		order: 1;
+		position: relative;
+		width: 2px;
+		height: 75%;
+		transform: rotate(30deg);
+		background: var(--pill-divider, var(--pill-border));
+		z-index: 1;
+	}
+}

templates/css/elements/string-tags.css

@@ -2,8 +2,8 @@
 	--input-background: var(--string-tags-input-background);
 
 	display: grid;
-	grid-template-columns: 1fr min-content;
-	grid-template-rows: repeat(2, minmax(0, 1fr));
+	grid-template-columns: minmax(0, 1fr) min-content;
+	grid-template-rows: repeat(2, min-content);
 
 	border: var(--string-tags-border);
 

templates/css/themes/dark.css

@@ -33,4 +33,12 @@
 	--string-tags-tag-text: inherit;
 	--string-tags-add-background: inherit;
 	--string-tags-add-text: var(--accent-3);
+
+	--pill-border: var(--accent-2);
+	--pill-background: var(--accent-2);
+	--pill-divider: var(--accent-3);
+	--pill-input-text: white;
+	--pill-input-background: var(--accent-2);
+	--pill-input-disabled-text: white;
+	--pill-input-disabled-background: black;
 }