Add number inputs into the supported structures, and redesign the sheet to make it actually look good

langs/en-ca.json

@@ -74,7 +74,10 @@
 				"guts-value-edit": "The current amount of guts the character has",
 				"guts-value-readonly": "The current amount of guts the character has",
 				"guts-max-readonly": "The maximum amount of guts the character can have"
-			}
+			},
+			"traits-placeholder": "New Trait...",
+			"short-range": "Short @RipCrypt.common.range",
+			"long-range": "Long @RipCrypt.common.range"
 		}
 	}
 }

module/data/Item/Weapon.mjs

@@ -62,14 +62,33 @@ export class WeaponData extends foundry.abstract.TypeDataModel {
 			{
 				type: `string-set`,
 				label: `RipCrypt.common.traits`,
+				placeholder: `RipCrypt.Apps.traits-placeholder`,
 				path: `system.traits`,
-				value: this.traitString,
+				value: ctx.meta.limited ? `???` : this.traitString,
 			},
-			{ type: `integer`, label: `Short Range` },
+			{
-			{ type: `integer`, label: `Long Range` },
+				type: `integer`,
-			{ type: `integer`, label: `Damage` },
+				label: `RipCrypt.Apps.short-range`,
-			{ type: `bar`, label: `Wear` },
+				path: `system.range.short`,
-			{ type: `dropdown`, label: `Access` },
+				value: ctx.meta.limited ? `???` : (this.range.short ?? ``),
+				min: 0,
+			},
+			{
+				type: `integer`,
+				label: `RipCrypt.Apps.long-range`,
+				path: `system.range.long`,
+				value: ctx.meta.limited ? `???` : (this.range.long ?? ``),
+				min: 0,
+			},
+			{
+				type: `integer`,
+				label: `RipCrypt.common.damage`,
+				path: `system.damage`,
+				value: ctx.meta.limited ? `???` : this.damage,
+				min: 0,
+			},
+			// { type: `bar`, label: `Wear` },
+			// { type: `dropdown`, label: `Access` },
 		];
 
 		if (this.parent.isEmbedded) {

module/handlebarHelpers/inputs/formFields.mjs

@@ -1,8 +1,9 @@
+import { numberInput } from "./numberInput.mjs";
 import { stringSet } from "./stringSet.mjs";
 
 const inputTypes = {
 	"string-set": stringSet,
-	integer: displayOnly,
+	integer: numberInput,
 	bar: displayOnly,
 	dropdown: displayOnly,
 	boolean: displayOnly,
@@ -13,10 +14,10 @@ function displayOnly(input) {
 };
 
 export function formFields(inputs, opts) {
-	let htmlString = ``;
+	const fields = [];
 	for (const input of inputs) {
 		if (inputTypes[input.type] == null) { continue };
-		htmlString += inputTypes[input.type](input, opts.data.root);
+		fields.push(inputTypes[input.type](input, opts.data.root));
 	};
-	return htmlString;
+	return fields.join(opts.hash?.joiner ?? `<hr />`);
 };

module/handlebarHelpers/inputs/numberInput.mjs

@@ -0,0 +1,35 @@
+import { localizer } from "../../utils/Localizer.mjs";
+
+const { randomID } = foundry.utils;
+
+export function numberInput(input, data) {
+	const label = localizer(input.label);
+	const id = `${data.meta.idp}-${randomID(10)}`;
+
+	if (!data.meta.editable) {
+		return `<div data-input-type="integer">
+			<span class="label">${label}</span>
+			<span class="value">${data.meta.limited ? `???` : input.value}</span>
+		</div>`;
+	};
+
+	let attrs = ``;
+	if (input.min) { attrs += ` min="${input.min}"` };
+	if (input.max) { attrs += ` max="${input.max}"` };
+	if (input.step) { attrs += `step="${input.step}"` };
+
+	return `<div data-input-type="integer">
+		<label
+			for="${id}"
+		>
+			${label}
+		</label>
+		<input
+			type="number"
+			id="${id}"
+			value="${input.value}"
+			name="${input.path}"
+			${attrs}
+		/>
+	</div>`;
+};

module/handlebarHelpers/inputs/stringSet.mjs

@@ -4,12 +4,34 @@ const { randomID } = foundry.utils;
 
 export function stringSet(input, data) {
 	const label = localizer(input.label);
+	const placeholder = localizer(input.placeholder ?? ``);
 	const id = `${data.meta.idp}-${randomID(10)}`;
 
 	if (!data.meta.editable) {
+		const tagList = input.value
+			.split(/,\s*/)
+			.filter(t => t.length > 0)
+			.map(t => {
+				return `<div class="tag">${t.trim()}</div>`;
+			});
+		let tags = tagList.join(``);
+
+		if (tagList.length === 0) {
+			tags = `---`;
+		};
+
+		if (data.meta.limited) {
+			tags = `???`;
+		};
+
 		return `<div data-input-type="string-set">
 			<span class="label">${label}</span>
-			<span>${input.value}</span>
+			<div
+				class="input-element-tags tags ${tags.length == 0 ? `empty` : ``}"
+				data-tag-count="${tagList.length}"
+			>
+				${tags}
+			</div>
 		</div>`;
 	};
 
@@ -21,6 +43,7 @@ export function stringSet(input, data) {
 		</label>
 		<string-tags
 			id="${id}"
+			placeholder="${placeholder}"
 			value="${input.value}"
 			name="${input.path}"
 		/>

templates/Apps/AllItemSheetV1/content.hbs

@@ -1,10 +1,10 @@
 <div class="AllItemSheetV1">
-	<div>
 	{{#if meta.editable}}
 		<label for="{{meta.idp}}-name">Name</label>
 		<input
 			type="text"
 			id="{{meta.idp}}-name"
+			class="name"
 			name="name"
 			value="{{item.name}}"
 		>
@@ -12,6 +12,6 @@
 		<span class="label">Name</span>
 		<span class="value">{{item.name}}</span>
 	{{/if}}
-	</div>
+	<hr>
 	{{{ rc-formFields formFields }}}
 </div>

templates/Apps/AllItemSheetV1/style.css

@@ -1,32 +1,42 @@
 .ripcrypt .AllItemSheetV1 {
 	--input-height: 1rem;
+	--input-underline: none;
 	--col-gap: 8px;
+	--row-gap: 8px;
 
 	--string-tags-tag-text: var(--header-text);
 	--string-tags-tag-background: var(--header-background);
 	--string-tags-add-text: white;
 	--string-tags-add-background: var(--accent-1);
+	--string-tags-input-text: white;
+	--string-tags-input-background: var(--accent-1);
 
 	display: grid;
-	grid-template-rows: minmax(0, 1fr);
+	grid-template-columns: auto minmax(0, 1fr);
-	grid-auto-rows: minmax(0, 1fr);
 	column-gap: var(--col-gap);
+	row-gap: var(--row-gap);
 
+	padding: 8px;
 	background: var(--base-background);
 	color: var(--base-text);
 
-	> :nth-child(odd) {
+	> [data-input-type] {
-		background: var(--alt-row-background);
+		display: contents;
-		color: var(--alt-row-text);
+	}
 
-		--string-tags-tag-text: var(--header-text);
+	hr {
-		--string-tags-tag-background: var(--header-background);
+		background: var(--accent-1);
-		--string-tags-add-text: var(--button-text);
+		grid-column: 1 / -1;
-		--string-tags-add-background: var(--button-background);
+		height: 1px;
+		width: 90%;
+		margin: 0 auto;
 	}
 
 	label, .label {
+		display: flex;
+		align-items: center;
 		box-sizing: border-box;
+
 		padding: 2px 4px;
 		text-transform: uppercase;
 		font-size: var(--font-size-14);
@@ -35,15 +45,17 @@
 		font-weight: bold;
 	}
 
-	[data-input-type="string-set"] {
+	input, .value, [data-tag-count] {
+		border-radius: 4px;
 		padding: 2px 4px;
-		display: flex;
+	}
-		flex-direction: row;
+	input {
-		column-gap: var(--col-gap);
+		background: var(--accent-2);
-		grid-row: span 2;
+	}
-
+	.value, [data-tag-count="0"] {
-		label, .label {
+		border: 2px solid var(--accent-2);
-			padding: 0;
+	}
-		}
+	[data-tag-count="0"] {
+		justify-content: start;
 	}
 }

templates/css/elements/input.css

@@ -15,5 +15,9 @@
 		&[type="number"] {
 			border-bottom: var(--input-underline);
 		}
+
+		&::placeholder {
+			color: var(--input-placeholder-text);
+		}
 	}
 }

templates/css/elements/span.css

@@ -2,4 +2,8 @@
 	&.small {
 		font-size: var(--font-size-10)
 	}
+
+	&:empty::before {
+		content: "\200b";
+	}
 }

templates/css/elements/string-tags.css

@@ -5,16 +5,14 @@
 	grid-template-columns: 1fr min-content;
 	grid-template-rows: repeat(2, minmax(0, 1fr));
 
-	padding: 2px;
 	border: var(--string-tags-border);
 
 	.tags {
 		grid-column: 1 / -1;
 	}
 
-	.tag {
+	input[type="text"] {
-		background: var(--tag-background, var(--header-background));
+		border-radius: 4px;
-		color: var(--tag-text, var(--header-text));
 		padding: 2px 4px;
 	}
 
@@ -25,4 +23,14 @@
 		width: 30px;
 		border-radius: 4px;
 	}
+
+	&:has(.tags.input-element-tags:empty) {
+		grid-template-rows: auto;
+	}
+}
+
+.ripcrypt .tag {
+	background: var(--tag-background, var(--header-background));
+	color: var(--tag-text, var(--header-text));
+	padding: 2px 4px;
 }

templates/css/themes/dark.css

@@ -19,10 +19,14 @@
 	--input-underline: 2px dashed var(--accent-3);
 	--input-background: inherit;
 	--input-text: white;
+	--input-placeholder-text: rgba(255,255,255, 0.5);
 
 	--button-background: black;
 	--button-text: var(--accent-3);
 
+	--col-gap: 2px;
+	--row-gap: 0px;
+
 	/* Additional Variables */
 	--string-tags-border: inherit;
 	--string-tags-tag-background: inherit;