Implement the most basic version of a dice pool configuration

module/Apps/DicePool.mjs

@@ -0,0 +1,158 @@
+import { filePath } from "../consts.mjs";
+import { GenericAppMixin } from "./GenericApp.mjs";
+import { localizer } from "../utils/Localizer.mjs";
+import { Logger } from "../utils/Logger.mjs";
+
+const { Roll } = foundry.dice;
+const { HandlebarsApplicationMixin, ApplicationV2 } = foundry.applications.api;
+
+export class DicePool extends GenericAppMixin(HandlebarsApplicationMixin(ApplicationV2)) {
+	// #region Options
+	static DEFAULT_OPTIONS = {
+		classes: [
+			`ripcrypt--DicePool`,
+		],
+		window: {
+			title: `Dice Pool`,
+			frame: true,
+			positioned: true,
+			resizable: false,
+			minimizable: true,
+		},
+		position: {
+			width: `auto`,
+			height: `auto`,
+		},
+		actions: {
+			diceCountDelta: this.#diceCountDelta,
+			targetDelta: this.#targetDelta,
+			roll: this.#roll,
+		},
+	};
+
+	static PARTS = {
+		numberOfDice: {
+			template: filePath(`templates/Apps/DicePool/numberOfDice.hbs`),
+		},
+		target: {
+			template: filePath(`templates/Apps/DicePool/target.hbs`),
+		},
+		buttons: {
+			template: filePath(`templates/Apps/DicePool/buttons.hbs`),
+		},
+	};
+	// #endregion
+
+	// #region Instance Data
+	_diceCount;
+	_target;
+
+	constructor({
+		diceCount = 1,
+		target,
+		flavor = ``,
+		...opts
+	} = {}) {
+		super(opts);
+
+		this._flavor = flavor;
+		this._diceCount = diceCount;
+		this._target = target ?? game.settings.get(`ripcrypt`, `dc`) ?? 1;
+	};
+
+	get title() {
+		if (!this._flavor) {
+			return super.title;
+		}
+		return `${super.title}: ${this._flavor}`;
+	};
+	// #endregion
+
+	// #region Lifecycle
+	async _preparePartContext(partId, ctx, _opts) {
+		ctx = {};
+
+		switch (partId) {
+			case `numberOfDice`: {
+				this._prepareNumberOfDice(ctx);
+				break;
+			};
+			case `target`: {
+				this._prepareTarget(ctx);
+				break;
+			};
+			case `buttons`: {
+				break;
+			};
+		}
+
+		Logger.debug(`${partId} Context:`, ctx);
+		return ctx;
+	};
+
+	async _prepareNumberOfDice(ctx) {
+		ctx.numberOfDice = this._diceCount;
+		ctx.decrementDisabled = this._diceCount <= 0;
+	};
+
+	async _prepareTarget(ctx) {
+		ctx.target = this._target;
+		ctx.incrementDisabled = this._target >= 8;
+		ctx.decrementDisabled = this._target <= 1;
+	};
+	// #endregion
+
+	// #region Actions
+	static async #diceCountDelta(_event, element) {
+		const delta = parseInt(element.dataset.delta);
+		if (Number.isNaN(delta)) {
+			ui.notifications.error(
+				localizer(`RipCrypt.notifs.error.invalid-delta`, { name: `@RipCrypt.Apps.numberOfDice` }),
+			);
+			return;
+		};
+
+		let newCount = this._diceCount + delta;
+
+		if (newCount < 0) {
+			ui.notifications.warn(
+				localizer(`RipCrypt.notifs.warn.cannot-go-negative`, { name: `@RipCrypt.Apps.numberOfDice` }),
+			);
+		};
+
+		this._diceCount = Math.max(newCount, 0);
+		this.render({ parts: [`numberOfDice`] });
+	};
+
+	static async #targetDelta(_event, element) {
+		const delta = parseInt(element.dataset.delta);
+		if (Number.isNaN(delta)) {
+			ui.notifications.error(
+				localizer(`RipCrypt.notifs.error.invalid-delta`, { name: `@RipCrypt.Apps.rollTarget` }),
+			);
+			return;
+		};
+
+		this._target += delta;
+		this.render({ parts: [`target`] });
+	};
+
+	static async #roll() {
+		const formula = `${this._diceCount}d8rc${this._target}`;
+		Logger.debug(`Attempting to roll formula: ${formula}`);
+
+		let flavor = this._flavor;
+		if (this._flavor) {
+			flavor += ` ` + localizer(`RipCrypt.Apps.difficulty`, { dc: this._target });
+		}
+
+		const roll = new Roll(formula);
+		await roll.evaluate();
+		await roll.toMessage({
+			speaker: ChatMessage.getSpeaker({ actor: this.actor }),
+			flavor,
+		});
+		this.close();
+	};
+	// #endregion
+};

module/Apps/GenericApp.mjs

@@ -1,7 +1,4 @@
-import { localizer } from "../utils/Localizer.mjs";
-import { Logger } from "../utils/Logger.mjs";
-
-const { Roll } = foundry.dice;
+import { DicePool } from "./DicePool.mjs";
 
 /**
  * A mixin that takes the class from HandlebarsApplicationMixin and
@@ -46,20 +43,11 @@ export function GenericAppMixin(HandlebarsApp) {
 		/** @this {GenericRipCryptApp} */
 		static async rollDice(_$e, el) {
 			const data = el.dataset;
-			const formula = data.formula;
-			Logger.debug(`Attempting to roll formula: ${formula}`);
+			const diceCount = parseInt(data.diceCount);
+			const flavor = data.flavor;
 
-			let flavor;
-			if (data.flavor) {
-				flavor = localizer(data.flavor);
-			}
-
-			const roll = new Roll(formula);
-			await roll.evaluate();
-			await roll.toMessage({
-				speaker: ChatMessage.getSpeaker({ actor: this.actor }),
-				flavor,
-			});
+			const dp = new DicePool({ diceCount, flavor });
+			dp.render({ force: true });
 		};
 		// #endregion
 	};

module/Apps/elements/RipCryptBorder.mjs

@@ -0,0 +1,55 @@
+import { StyledShadowElement } from "./mixins/StyledShadowElement.mjs";
+
+/**
+Attributes:
+*/
+export class RipCryptBorder extends StyledShadowElement(HTMLElement) {
+	static elementName = `rc-border`;
+	static formAssociated = false;
+
+	/* Stuff for the mixin to use */
+	static _stylePath = `css/components/rc-border.css`;
+	#container;
+
+	_mounted = false;
+	async connectedCallback() {
+		super.connectedCallback();
+		if (this._mounted) { return };
+
+		/*
+		This converts all of the double-dash prefixed properties on the element to
+		CSS variables so that they don't all need to be provided by doing style=""
+		*/
+		for (const attrVar of this.attributes) {
+			if (attrVar.name?.startsWith(`var:`)) {
+				const prop = attrVar.name.replace(`var:`, ``);
+				this.style.setProperty(`--` + prop, attrVar.value);
+			};
+		};
+
+		this.#container = document.createElement(`div`);
+		this.#container.classList = `rc-border`;
+
+		const titleContainer = document.createElement(`div`);
+		titleContainer.classList = `title`;
+		const titleSlot = document.createElement(`slot`);
+		titleSlot.innerHTML = `No Title`;
+		titleSlot.name = `title`;
+		titleContainer.appendChild(titleSlot.cloneNode(true));
+		this.#container.appendChild(titleContainer.cloneNode(true));
+
+		const contentSlot = document.createElement(`slot`);
+		contentSlot.name = `content`;
+		this.#container.appendChild(contentSlot.cloneNode(true));
+
+		this._shadow.appendChild(this.#container);
+
+		this._mounted = true;
+	};
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		if (!this._mounted) { return };
+		this._mounted = false;
+	};
+};

module/Apps/elements/_index.mjs

@@ -1,10 +1,12 @@
 import { Logger } from "../../utils/Logger.mjs";
+import { RipCryptBorder } from "./RipCryptBorder.mjs";
 import { RipCryptIcon } from "./Icon.mjs";
 import { RipCryptSVGLoader } from "./svgLoader.mjs";
 
 const components = [
 	RipCryptIcon,
 	RipCryptSVGLoader,
+	RipCryptBorder,
 ];
 
 export function registerCustomComponents() {