Add a helper application to manage attributes on characters

module/apps/AttributeManager.mjs

@@ -0,0 +1,171 @@
+import { __ID__, filePath } from "../consts.mjs";
+import { Logger } from "../utils/Logger.mjs";
+import { toID } from "../utils/toID.mjs";
+
+const { HandlebarsApplicationMixin, ApplicationV2 } = foundry.applications.api;
+const { deepClone, diffObject, randomID, setProperty } = foundry.utils;
+
+export class AttributeManager extends HandlebarsApplicationMixin(ApplicationV2) {
+
+	// #region Options
+	static DEFAULT_OPTIONS = {
+		tag: `form`,
+		classes: [
+			__ID__,
+			`AttributeManager`,
+		],
+		position: {
+			width: 400,
+			height: 350,
+		},
+		window: {
+			resizable: true,
+		},
+		form: {
+			submitOnChange: false,
+			closeOnSubmit: true,
+			handler: this.#onSubmit,
+		},
+		actions: {
+			addNew: this.#addNew,
+			removeAttribute: this.#remove,
+		},
+	};
+
+	static PARTS = {
+		attributes: {
+			template: filePath(`templates/AttributeManager/attribute-list.hbs`),
+		},
+		controls: {
+			template: filePath(`templates/AttributeManager/controls.hbs`),
+		},
+	};
+	// #endregion Options
+
+	// #region Instance Data
+	/** @type {string | null} */
+	#doc = null;
+
+	#attributes;
+
+	constructor({ document , ...options } = {}) {
+		super(options);
+		this.#doc = document;
+		this.#attributes = deepClone(document.system.attr);
+	};
+
+	get title() {
+		return `Attributes: ${this.#doc.name}`;
+	};
+	// #endregion Instance Data
+
+	// #region Lifecycle
+	async _onRender(context, options) {
+		await super._onRender(context, options);
+
+		const elements = this.element
+			.querySelectorAll(`[data-bind]`);
+		for (const input of elements) {
+			input.addEventListener(`change`, this.#bindListener.bind(this));
+		};
+	};
+	// #endregion Lifecycle
+
+	// #region Data Prep
+	async _preparePartContext(partId) {
+		const ctx = {};
+
+		ctx.actor = this.#doc;
+
+		switch (partId) {
+			case `attributes`: {
+				await this._prepareAttributeContext(ctx);
+			};
+		};
+
+		return ctx;
+	};
+
+	async _prepareAttributeContext(ctx) {
+		const attrs = [];
+		for (const [id, data] of Object.entries(this.#attributes)) {
+			if (data == null) { continue };
+			attrs.push({
+				id,
+				name: data.name,
+				isRange: data.isRange,
+				isNew: data.isNew ?? false,
+			});
+		};
+		ctx.attrs = attrs;
+	};
+	// #endregion Data Prep
+
+	// #region Actions
+	/**
+	 * @param {Event} event
+	 */
+	async #bindListener(event) {
+		const target = event.target;
+		const data = target.dataset;
+		const binding = data.bind;
+
+		let value = target.value;
+		switch (target.type) {
+			case `checkbox`: {
+				value = target.checked;
+			};
+		};
+
+		Logger.debug(`Updating ${binding} value to ${value}`);
+		setProperty(this.#attributes, binding, value);
+		await this.render();
+	};
+
+	/** @this {AttributeManager} */
+	static async #addNew() {
+		const id = randomID();
+		this.#attributes[id] = {
+			name: ``,
+			isRange: false,
+			isNew: true,
+		};
+		await this.render({ parts: [ `attributes` ]});
+	};
+
+	/** @this {AttributeManager} */
+	static async #remove($e, element) {
+		const attribute = element.closest(`[data-attribute]`)?.dataset.attribute;
+		if (!attribute) { return };
+		delete this.#attributes[attribute];
+		this.#attributes[`-=${attribute}`] = null;
+		await this.render({ parts: [ `attributes` ] });
+	};
+
+	/** @this {AttributeManager} */
+	static async #onSubmit() {
+		const entries = Object.entries(this.#attributes)
+			.map(([id, attr]) => {
+				if (attr == null) {
+					return [ id, attr ];
+				};
+
+				if (attr.isNew) {
+					delete attr.isNew;
+					return [ toID(attr.name), attr ];
+				};
+
+				return [ id, attr ];
+			});
+		const data = Object.fromEntries(entries);
+
+		const diff = diffObject(
+			this.#doc.system.attr,
+			data,
+			{ inner: false, deletionKeys: true },
+		);
+
+		await this.#doc.update({ "system.attr": diff });
+	};
+	// #endregion Actions
+};

module/apps/PlayerSheet.mjs

@@ -1,4 +1,5 @@
 import { __ID__, filePath } from "../consts.mjs";
+import { AttributeManager } from "./AttributeManager.mjs";
 
 const { HandlebarsApplicationMixin } = foundry.applications.api;
 const { ActorSheetV2 } = foundry.applications.sheets;
@@ -12,17 +13,29 @@ export class PlayerSheet extends HandlebarsApplicationMixin(ActorSheetV2) {
 			`PlayerSheet`,
 		],
 		position: {
-			width: 400,
+			width: 575,
-			height: 500,
+			height: 740,
 		},
 		window: {
 			resizable: true,
+			controls: [
+				{
+					icon: `fa-solid fa-at`,
+					label: `Manage Attributes`,
+					action: `manageAttributes`,
+					visible: () => {
+						return game.user.isGM;
+					},
+				},
+			],
 		},
 		form: {
 			submitOnChange: true,
 			closeOnSubmit: false,
 		},
-		actions: {},
+		actions: {
+			manageAttributes: this.#manageAttributes,
+		},
 	};
 
 	static PARTS = {
@@ -82,5 +95,10 @@ export class PlayerSheet extends HandlebarsApplicationMixin(ActorSheetV2) {
 	// #endregion Data Prep
 
 	// #region Actions
+	/** @this {PlayerSheet} */
+	static async #manageAttributes() {
+		const app = new AttributeManager({ document: this.actor });
+		await app.render({ force: true });
+	};
 	// #endregion Actions
 };

module/utils/toID.mjs

@@ -0,0 +1,13 @@
+/**
+ * A helper method that converts an arbitrary string into a format that can be
+ * used as an object key easily.
+ *
+ * @param {string} text The text to convert
+ * @returns The converted ID
+ */
+export function toID(text) {
+	return text
+		.toLowerCase()
+		.replace(/\s/g, `_`)
+		.replace(/\W/g, ``);
+};

styles/Apps/AttributeManager.css

@@ -0,0 +1,33 @@
+.taf.AttributeManager {
+	.attributes {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.attribute {
+		display: grid;
+		grid-template-columns: 1fr auto auto;
+		align-items: center;
+		gap: 8px;
+		padding: 8px;
+		border: 1px solid rebeccapurple;
+		border-radius: 4px;
+
+		label {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+		}
+	}
+
+	.controls {
+		display: flex;
+		flex-direction: row;
+		gap: 8px;
+
+		button {
+			flex-grow: 1;
+		}
+	}
+}

styles/Apps/PlayerSheet.css

@@ -1,17 +1,10 @@
 .taf.PlayerSheet {
-	> .window-content {
-		padding: 0.5rem;
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-	}
-
 	.sheet-header, fieldset, .content {
 		border-radius: 8px;
 		border: 1px solid rebeccapurple;
 	}
 
-	.window-content > header {
+	.sheet-header {
 		display: flex;
 		flex-direction: row;
 		align-items: center;

styles/Apps/common.css

@@ -0,0 +1,8 @@
+.taf {
+	> .window-content {
+		padding: 0.5rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+}

styles/main.css

@@ -9,4 +9,6 @@
 @import url("./elements/prose-mirror.css") layer(elements);
 
 /* Apps */
+@import url("./Apps/common.css") layer(apps);
 @import url("./Apps/PlayerSheet.css") layer(apps);
+@import url("./Apps/AttributeManager.css") layer(apps);

templates/AttributeManager/attribute-list.hbs

@@ -0,0 +1,35 @@
+<div class="attributes">
+	{{#each attrs as |attr|}}
+		<div
+			class="attribute"
+			data-attribute="{{ attr.id }}"
+		>
+			{{#if attr.isNew}}
+				<input
+					type="text"
+					data-bind="{{ attr.id }}.name"
+					value="{{ attr.name }}"
+					placeholder="Attribute Name..."
+				>
+			{{else}}
+				<span>{{ attr.name }}</span>
+			{{/if}}
+			<label>
+				Has Maximum?
+				<input
+					type="checkbox"
+					data-bind="{{ attr.id }}.isRange"
+					{{ checked attr.isRange }}
+				>
+			</label>
+			<button
+				type="button"
+				data-action="removeAttribute"
+			>
+				Delete
+			</button>
+		</div>
+	{{else}}
+		<p>No attributes yet</p>
+	{{/each}}
+</div>

templates/AttributeManager/controls.hbs

@@ -0,0 +1,13 @@
+<div class="controls">
+	<button
+		type="button"
+		data-action="addNew"
+	>
+		Add New Attribute
+	</button>
+	<button
+		type="submit"
+	>
+		Save and Close
+	</button>
+</div>

templates/PlayerSheet/attributes.hbs

@@ -1,7 +1,7 @@
 {{#if hasAttributes}}
 	<div class="attributes">
 		{{#each attrs as | attr |}}
-			<fieldset>
+			<fieldset data-attribute="{{ attr.id }}">
 				<legend>
 					{{ attr.name }}
 				</legend>