Fix/damage customizer theming (#955)

* Fix damage customizer theming
* Fix up the damage customizer!
* Add an array sorting handlebars helper
* Update the charname container
* Fix item quality cost template
* Update icon insert window
* Use scrolling for the character list
* Add zoom/panning to the bonds graph
* Fix line scaling on tab switching
* Get the import journal entry working!
* Fix double open for the inline codex handler
* Set max height in dialogs

Author: Azurelol

lang/en.json

@@ -1935,6 +1935,7 @@
 		"Codex": "Codex",
 		"Tags": "Tags",
 		"Hidden": "Hidden",
+		"Entry": "Entry",
 		"BrowseImage": "Browse Image",
 		"UploadClipboardImage": "Upload Clipboard Image",
 		"CodexUploadDirectory": "Codex Upload Directory",

module/enrichers/inline-common.mjs

@@ -135,9 +135,16 @@ const inlineCodexEnricher = {
 	onRender: async (element) => {
 		const renderContext = await InlineHelper.getRenderContext(element);
 		const entry = renderContext.dataset.entry;
-		element.addEventListener('click', async function (event) {
-			return FUPartySheet.viewCodexEntry(entry);
-		});
+
+		element._codexAbort?.abort();
+		element._codexAbort = new AbortController();
+		element.addEventListener(
+			'click',
+			async function (event) {
+				return FUPartySheet.viewCodexEntry(entry);
+			},
+			{ signal: element._codexAbort.signal },
+		);
 	},
 };
 

module/helpers/config.mjs

@@ -94,16 +94,16 @@ FU.damageTypes = {
  * @type {Object<DamageType, string>}
  */
 FU.affIcon = {
-	physical: 'fua fu-physical',
-	air: 'fua fu-air',
-	bolt: 'fua fu-bolt',
-	dark: 'fua fu-dark',
-	earth: 'fua fu-earth',
-	fire: 'fua fu-fire',
-	ice: 'fua fu-ice',
-	light: 'fua fu-light',
-	poison: 'fua fu-poison',
-	untyped: 'fua fu-untyped',
+	physical: 'fu-physical',
+	air: 'fu-air',
+	bolt: 'fu-bolt',
+	dark: 'fu-dark',
+	earth: 'fu-earth',
+	fire: 'fu-fire',
+	ice: 'fu-ice',
+	light: 'fu-light',
+	poison: 'fu-poison',
+	untyped: 'fu-untyped',
 };
 
 /**
@@ -133,6 +133,7 @@ FU.checkIcons = {
 	ritual: 'fu-check-ritual',
 	difficulty: 'fu-roll-difficulty',
 	result: 'fu-roll-result',
+	base: 'fu-roll-base',
 	mod: 'fu-roll-modifier',
 	hr: 'fu-roll-high',
 	target: 'fu-roll-target',

module/helpers/foundry-utils.mjs

@@ -3,6 +3,7 @@ import { systemTemplatePath } from './system-utils.mjs';
 import { TextEditor } from './text-editor.mjs';
 import { CompendiumIndex } from '../ui/compendium/compendium-index.mjs';
 import { ObjectUtils } from './object-utils.mjs';
+import { ItemSelectionDialog } from '../ui/features/item-selection-dialog.mjs';
 
 const { api, fields, handlebars } = foundry.applications;
 
@@ -451,7 +452,6 @@ export default class FoundryUtils {
 	}
 
 	/**
-	 *
 	 * @param {String} title
 	 * @param {String} message
 	 * @returns {Promise<Boolean>}
@@ -475,6 +475,28 @@ export default class FoundryUtils {
 		});
 	}
 
+	/**
+	 * @param {String} title
+	 * @param {String} content
+	 * @returns {Promise<Boolean>}
+	 */
+	static async confirm(title, content) {
+		return foundry.applications.api.DialogV2.confirm({
+			window: {
+				title: title,
+			},
+			classes: ['projectfu', 'sheet', 'backgroundstyle', 'fu-dialog'],
+			content: content,
+			rejectClose: false,
+			yes: {
+				label: 'FU.Confirm',
+			},
+			no: {
+				label: 'FU.Cancel',
+			},
+		});
+	}
+
 	/**
 	 * @param {Record<String, String>} record
 	 * @param {((key: string, value: string) => string)} labelSelector
@@ -649,6 +671,56 @@ export default class FoundryUtils {
 		});
 	}
 
+	/**
+	 * @returns {Promise<JournalEntryData[]>}
+	 */
+	static async selectJournalEntries() {
+		const journals = game.journal.contents;
+		if (!journals.length) {
+			ui.notifications.warn('No journal entries found in this world.');
+			return;
+		}
+
+		const title = `${StringUtils.localize('CONTROLS.CommonSelect')} ${StringUtils.localize('DOCUMENT.JournalEntry')}`;
+
+		const data = {
+			title: title,
+			style: 'list',
+			items: journals,
+			getDescription: async (item) => {
+				const text = item.name ?? '';
+				return text;
+			},
+		};
+		const dialog = new ItemSelectionDialog(data);
+		return await dialog.open();
+	}
+
+	/**
+	 * @returns {Promise<FUActor[]>}
+	 */
+	static async selectActors() {
+		const actors = game.actors.contents;
+		if (!actors.length) {
+			ui.notifications.warn('No actors found in this world.');
+			return;
+		}
+		const title = `${StringUtils.localize('CONTROLS.CommonSelect')} ${StringUtils.localize('DOCUMENT.Actor')}`;
+
+		const data = {
+			title: title,
+			style: 'list',
+			items: actors,
+			getDescription: async (item) => {
+				const text = item.name ?? '';
+				return text;
+			},
+		};
+		const dialog = new ItemSelectionDialog(data);
+		const result = await dialog.open();
+		return result;
+	}
+
 	/**
 	 * @desc Migrates the data of an item onto another.
 	 * @param {FUItem} sourceItem

module/helpers/handlebars.mjs

@@ -192,6 +192,10 @@ export const FUHandlebars = Object.freeze({
 			return new Handlebars.SafeString(`<span>${resourceName}</span><span class="digit-row">${digitBoxes}</span>`);
 		});
 
+		Handlebars.registerHelper('pfuSort', (array, key) => {
+			return [...array].sort((a, b) => (a[key] > b[key] ? 1 : -1));
+		});
+
 		Handlebars.registerHelper('pfuMath', function (left, operator, right) {
 			left = parseFloat(left);
 			right = parseFloat(right);

module/helpers/object-utils.mjs

@@ -76,11 +76,21 @@ function deepFreeze(obj) {
 	return Object.freeze(obj);
 }
 
+/**
+ * @param {Object[]} array
+ * @param {String} property
+ * @returns {*[]}
+ */
+function sortArray(array, property) {
+	return [...array].sort((a, b) => (a[property] > b[property] ? 1 : -1));
+}
+
 export const ObjectUtils = Object.freeze({
 	mergeRecursive,
 	getProperty,
 	setProperty,
 	cleanObject,
 	pick,
 	deepFreeze,
+	sortArray,
 });

module/helpers/text-editor-command-dropdown.mjs

@@ -1,5 +1,6 @@
 import { FU } from './config.mjs';
 import { InlineEffects } from '../enrichers/inline-effects.mjs';
+import FoundryUtils from './foundry-utils.mjs';
 
 async function promptDamageDialog(state, dispatch, view) {
 	const result = await foundry.applications.api.DialogV2.prompt({
@@ -86,11 +87,15 @@ async function promptResourceLossDialog(state, dispatch, view) {
 }
 
 async function promptIconSelectionDialog(state, dispatch, view) {
-	const result = await foundry.applications.api.DialogV2.prompt({
+	const content = await FoundryUtils.renderTemplate('dialog/dialog-command-icon', { allIcon: FU.allIcon });
+	const result = await FoundryUtils.prompt({
 		window: { title: game.i18n.localize('FU.TextEditorDialogSelectIconTitle') },
+		position: {
+			width: 600,
+			height: 480,
+		},
+		content,
 		label: game.i18n.localize('FU.TextEditorDialogButtonInsert'),
-		content: await foundry.applications.handlebars.renderTemplate('systems/projectfu/templates/dialog/dialog-command-icon.hbs', { allIcon: FU.allIcon }),
-		options: { classes: ['projectfu', 'unique-dialog', 'backgroundstyle'] },
 		ok: {
 			callback: (event, button, dialog) => {
 				const icon = dialog.element.querySelector('.icon-radio:checked').value;

module/helpers/typedefs.mjs

@@ -30,6 +30,50 @@ export {};
  * @extends {DataModel<DocumentData, DocumentContext>}
  */
 
+/**
+ * @typedef JournalEntryData
+ * @property {string|null} _id                              The _id which uniquely identifies this JournalEntry document
+ * @property {string} name                                  The name of this JournalEntry
+ * @property {JournalEntryPageData[]} pages                 The pages contained within this JournalEntry document
+ * @property {string|null} folder                           The _id of a Folder which contains this JournalEntry
+ * @property {JournalEntryCategoryData[]} categories        The categories contained within this JournalEntry.
+ * @property {number} [sort]                                The numeric sort value which orders this JournalEntry
+ *                                                          relative to its siblings
+ * @property {object} [ownership]                           An object which configures ownership of this JournalEntry
+ * @property {DocumentFlags} flags                          An object of optional key/value flags
+ * @property {DocumentStats} _stats                         An object of creation and access information
+ */
+
+/**
+ * @typedef JournalEntryPageImageData
+ * @property {string} [caption]           A caption for the image.
+ */
+
+/**
+ * @typedef JournalEntryPageTextData
+ * @property {string} [content]           The content of the JournalEntryPage in a format appropriate for its type.
+ * @property {string} [markdown]          The original markdown source, if applicable.
+ * @property {number} format              The format of the page's content, in CONST.JOURNAL_ENTRY_PAGE_FORMATS.
+ */
+
+/**
+ * @typedef JournalEntryPageData
+ * @property {string|null} _id            The _id which uniquely identifies this JournalEntryPage embedded document.
+ * @property {string} name                The text name of this page.
+ * @property {'image'|'text'} type                The type of this page.
+ * @property {JournalEntryPageTitleData} title  Data that control's the display of this page's title.
+ * @property {JournalEntryPageImageData} image  Data particular to image journal entry pages.
+ * @property {JournalEntryPageTextData} text    Data particular to text journal entry pages.
+ * @property {JournalEntryPageVideoData} video  Data particular to video journal entry pages.
+ * @property {string} [src]               The URI of the image or other external media to be used for this page.
+ * @property {object} system              System-specific data.
+ * @property {string} [category]          An optional category that this page belongs to.
+ * @property {number} sort                The numeric sort value which orders this page relative to its siblings.
+ * @property {object} [ownership]         An object which configures the ownership of this page.
+ * @property {DocumentFlags} flags        An object of optional key/value flags
+ * @property {DocumentStats} _stats       An object of creation and access information
+ */
+
 // TODO: Figure out how to remove warnings
 /**
  * @global

module/pipelines/damage-customizer.mjs

@@ -22,7 +22,7 @@ import { FU, systemPath } from '../helpers/config.mjs';
 /**
  * Displays a dialog to customize damage.
  *
- * @param {TableDamageData} damage - The damage object containing type and total.
+ * @param {DamageData} damage - The damage object containing type and total.
  * @param {FUActor[]} targets - The specified targets.
  * @param {DamageOverrideCallback} callback - The function to call when the user confirms.
  * @param {() => void} onCancel - The function to call when the user cancels.
@@ -31,7 +31,7 @@ export async function DamageCustomizer(damage, targets, callback, onCancel) {
 	// Create and render the dialog
 	const result = await foundry.applications.api.DialogV2.input({
 		window: {
-			title: game.i18n.localize('FU.DamageCustomizer'),
+			title: game.i18n.localize('FU.AutomationApplyDamage'),
 		},
 		position: {
 			width: 440,
@@ -40,6 +40,7 @@ export async function DamageCustomizer(damage, targets, callback, onCancel) {
 		content: await foundry.applications.handlebars.renderTemplate(systemPath('templates/dialog/dialog-damage-customizer.hbs'), {
 			FU,
 			damage,
+			targets,
 		}),
 		rejectClose: false,
 		ok: {
@@ -49,24 +50,32 @@ export async function DamageCustomizer(damage, targets, callback, onCancel) {
 		render: (event, dialog) => {
 			// Cache selectors
 			const hrZeroCheckbox = dialog.element.querySelector('#hr-zero');
-			const totalDamageSpan = dialog.element.querySelector('#total-damage');
 			const damageTypeSelect = dialog.element.querySelector('#damage-type');
 			const extraDamageInput = dialog.element.querySelector('#extra-damage');
-			const totalDamageIcon = dialog.element.querySelector('#total-damage-icon');
 			const checkAllButton = dialog.element.querySelector('#check-all');
 			const checkNoneButton = dialog.element.querySelector('#check-none');
 			const ignoreCheckboxes = dialog.element.querySelectorAll('.ignore');
 
 			// Function to update total damage and icons based on HR Zero status, and extra damage
+			const totalDamageSection = dialog.element.querySelector('#total-damage');
+			const baseDamageText = totalDamageSection.querySelector('#base');
+			const hrDamageText = totalDamageSection.querySelector('#hr');
+			const extraDamageText = totalDamageSection.querySelector('#extra');
+			const totalDamageText = totalDamageSection.querySelector('#total');
+			const damageTypeIcon = totalDamageSection.querySelector('#damage-type-icon');
+
 			function updateTotalDamage() {
 				const extraDamage = parseInt(extraDamageInput.value, 10) || 0;
 				const selectedDamageType = damageTypeSelect.value;
-				const baseDamage = hrZeroCheckbox.checked ? damage.modifierTotal : damage.total;
-				const totalDamage = baseDamage + extraDamage;
+				const baseDamage = damage.modifiers[0].amount;
+				const hrDamage = hrZeroCheckbox.checked ? 0 : damage.hr;
+				const totalDamage = baseDamage + hrDamage + extraDamage;
 
-				totalDamageSpan.textContent = `${baseDamage} (Base) + ${extraDamage} (Extra Damage) = ${totalDamage} ${game.i18n.localize(FU.damageTypes[selectedDamageType])}`;
-				// Update icons
-				totalDamageIcon.classList.value = `icon ${FU.affIcon[selectedDamageType]}`;
+				baseDamageText.textContent = baseDamage;
+				hrDamageText.textContent = hrDamage;
+				extraDamageText.textContent = extraDamage;
+				totalDamageText.textContent = totalDamage;
+				damageTypeIcon.classList.value = `fu-icon--sm glow ${FU.affIcon[selectedDamageType]}`;
 			}
 
 			// Initial update