Remove system control from scene controls

- move system control tools to right above the player list
- move combat hud controls to combat tracker

Author: Shourn

module/documents/items/classFeature/invoker/invoker-integration.mjs

@@ -57,25 +57,27 @@ const renderApp = () => (gameWellspringManager ??= new GameWellspringManager()).
 
 const regExp = /^\/(ws|wellsprings?)$/i;
 
-function onChatMessage(chatLog, message, data) {
+function onChatMessage(chatLog, message) {
 	if (game.user.isGM && regExp.test(message)) {
 		renderApp();
 		return false;
 	}
 }
 
-function initialize() {
-	const name = GameWellspringManager.name;
-	Hooks.on(SystemControls.HOOK_GET_SYSTEM_TOOLS, (tools) => {
-		tools[name] = {
-			name: name,
-			title: 'FU.ClassFeatureInvocationsWellspringManagerTitle',
-			icon: 'fas fa-earth-asia',
-			button: true,
-			visible: game.user.isGM,
-			onChange: () => renderApp(),
-		};
+/**
+ * @param {SystemControlTool[]} tools
+ */
+function onGetSystemTools(tools) {
+	tools.push({
+		name: 'FU.ClassFeatureInvocationsWellspringManagerTitle',
+		icon: 'fas fa-earth-asia',
+		visible: game.user.isGM,
+		onClick: () => renderApp(),
 	});
+}
+
+function initialize() {
+	Hooks.on(SystemControls.HOOK_GET_SYSTEM_TOOLS, onGetSystemTools);
 
 	Hooks.on('projectfu.actor.dataPrepared', ActorWellspringManager.onActorPrepared);
 

module/helpers/system-controls.mjs

@@ -1,71 +1,62 @@
 import { SYSTEM } from './config.mjs';
 
 /**
- * @typedef SceneControlTool
- * The data structure for a single tool in the {@link SceneControl#tools} record.
+ * @typedef SystemControlTool
  * @property {string} name
- * @property {number} order
- * @property {string} title
  * @property {string} icon
  * @property {boolean} [visible]
  * @property {boolean} [toggle]
  * @property {boolean} [active]
- * @property {boolean} [button]
- * @property {(event: Event, active: boolean) => void} [onChange]   A callback invoked when the tool is activated
- * or deactivated
- * @property {ToolclipConfiguration} [toolclip]                     Configuration for rendering the tool's toolclip
+ * @property {(event: Event, active: boolean) => void} [onClick]
  */
 
-/**
- * @typedef SceneControl
- * The data structure for a set of controls in the {@link SceneControls#controls} record.
- * @property {string} name
- * @property {number} order
- * @property {string} title
- * @property {string} icon
- * @property {boolean} [visible]
- * @property {Record<string, SceneControlTool>} tools
- * @property {string} activeTool
- * @property {(event: Event, active: boolean) => void} [onChange]
- * A callback invoked when control set is activated or deactivated
- * @property {(event: Event, tool: SceneControlTool) => void} [onToolChange]
- * A callback invoked when the active tool changes
- */
-
-/**
- * @param {Record<string, SceneControl>} controls
- * @remarks {@link https://foundryvtt.com/api/v13/classes/foundry.applications.ui.SceneControls.html#controls}
- */
-function initializeSystemControl(controls) {
-	/** @type SceneControlTool[] */
-	const tools = {};
-
-	Hooks.callAll(SystemControls.HOOK_GET_SYSTEM_TOOLS, tools);
-
-	controls[SYSTEM] = {
-		name: SYSTEM,
-		title: 'FU.UiControlTitle',
-		icon: 'fus-star2',
-		tools: tools,
-		activeTool: '',
-		onChange: (event, active) => {},
-		layer: SYSTEM,
-	};
-}
-
 // Register the hook into Foundry
 let initialized;
-class SystemControlsLayer extends foundry.canvas.layers.InteractionLayer {}
 export const SystemControls = Object.freeze({
 	initialize() {
 		if (!initialized) {
-			initialized = true;
-			CONFIG.Canvas.layers[SYSTEM] = {
-				layerClass: SystemControlsLayer,
-				group: 'interface',
-			};
+			Hooks.on('renderPlayers', (app, element) => {
+				const containerElement = document.createElement('div');
+				containerElement.classList.add('system-controls');
+
+				/** @type {SystemControlTool[]} */
+				const systemTools = [];
+				Hooks.callAll(SystemControls.HOOK_GET_SYSTEM_TOOLS, systemTools);
+
+				const menuItems = systemTools
+					.filter((tool) => tool.visible !== false)
+					.map((tool) => {
+						const toolButton = document.createElement('button');
+						toolButton.type = 'button';
+						toolButton.classList.add('control', 'ui-control');
+						toolButton.innerHTML = `<i class="${tool.icon}"></i>`;
+						toolButton.dataset.tooltip = game.i18n.localize(tool.name);
+						toolButton.dataset.tooltipDirection = game.tooltip.constructor.TOOLTIP_DIRECTIONS.UP;
+
+						if (tool.toggle) {
+							let active = tool.active;
+							toolButton.classList.add('toggle');
+							toolButton.ariaPressed = active;
+							toolButton.addEventListener('click', (e) => {
+								active = !active;
+								toolButton.ariaPressed = active;
+								if (tool.onClick) {
+									tool.onClick(e, active);
+								}
+							});
+						} else {
+							if (tool.onClick) {
+								toolButton.addEventListener('click', (e) => {
+									tool.onClick(e, false);
+								});
+							}
+						}
+						return toolButton;
+					});
 
-			Hooks.on('getSceneControlButtons', initializeSystemControl);
+				containerElement.append(...menuItems);
+				element.prepend(containerElement);
+			});
 		}
 	},
 	HOOK_GET_SYSTEM_TOOLS: `${SYSTEM}.getSystemControlTools`,

module/sheets/actor-party-sheet.mjs

@@ -332,7 +332,7 @@ export class FUPartySheet extends FUActorSheet {
 	 * @param {HTMLElement} target   The capturing HTML element which defined a [data-action]
 	 * @returns {Promise<void>}
 	 */
-	static async #revealMetaCurrency(event, target) {
+	static async #revealMetaCurrency() {
 		MetaCurrencyTrackerApplication.renderApp();
 	}
 
@@ -603,22 +603,20 @@ export class FUPartySheet extends FUActorSheet {
  */
 
 // Set up sidebar menu option
-Hooks.on(SystemControls.HOOK_GET_SYSTEM_TOOLS, (tools) => {
-	const name = 'FU.Party';
-	tools[name] = {
-		name: name,
-		title: 'FU.Party',
+Hooks.on(SystemControls.HOOK_GET_SYSTEM_TOOLS, onGetSystemTools);
+
+/**
+ * @param {SystemControlTool[]} tools
+ */
+function onGetSystemTools(tools) {
+	tools.push({
+		name: 'FU.Party',
 		icon: 'fa-solid fa fa-users',
-		button: true,
-		active: false,
-		toggle: false,
-		onChange: (event, active) => {
-			if (active) {
-				FUPartySheet.toggleActive();
-			}
+		onClick: () => {
+			FUPartySheet.toggleActive();
 		},
-	};
-});
+	});
+}
 
 /**
  * @param {StudyEvent} ev
@@ -665,7 +663,7 @@ async function onRenderChatMessage(message, html) {
 	for (const el of elements) {
 		el.addEventListener(
 			'click',
-			async (event) => {
+			async () => {
 				const uuid = el.dataset.uuid;
 				const party = await FUPartySheet.getActive();
 				return party.sheet.revealNpc(uuid);

module/ui/combat-hud.mjs

@@ -1,19 +1,67 @@
 import { SETTINGS } from '../settings.js';
-import { SystemControls } from '../helpers/system-controls.mjs';
 import { SYSTEM } from '../helpers/config.mjs';
 import { FUHooks } from '../hooks.mjs';
 import { FUCombat } from './combat.mjs';
 import { FUPartySheet } from '../sheets/actor-party-sheet.mjs';
 import { systemTemplatePath } from '../helpers/system-utils.mjs';
 
 Hooks.once('setup', () => {
-	if (game.settings.get(SYSTEM, SETTINGS.experimentalCombatHud)) {
-		Hooks.on(SystemControls.HOOK_GET_SYSTEM_TOOLS, (tools) => {
-			tools['projectfu-combathud-toggle'] = CombatHUD.getToggleControlButton();
-			tools['projectfu-combathud-saved-toggle'] = CombatHUD.getSavedControlButton();
-			tools['projectfu-combathud-reset'] = CombatHUD.getResetControlButton();
-		});
+	/**
+	 * @typedef HudButtonData
+	 * @property {string} name
+	 * @property {string} icon
+	 * @property {boolean} [visible]
+	 * @property {boolean} [toggle]
+	 * @property {boolean} [active]
+	 * @property {(event: Event, active: boolean) => void} [onClick]   A callback invoked when the tool is activated
+	 * or deactivated
+	 */
+
+	/**
+	 * @param {HTMLElement} containerElement
+	 * @param {HudButtonData} buttonData
+	 */
+	function createButton(containerElement, buttonData) {
+		const button = document.createElement('button');
+		button.type = 'button';
+		button.classList.add('control', 'ui-control');
+		button.innerHTML = `<i class="${buttonData.icon}"></i>`;
+		button.dataset.tooltip = game.i18n.localize(buttonData.name);
+
+		if (buttonData.toggle) {
+			let active = buttonData.active;
+			button.classList.add('toggle');
+			button.ariaPressed = active;
+			button.addEventListener('click', (e) => {
+				active = !active;
+				button.ariaPressed = active;
+				if (buttonData.onClick) {
+					buttonData.onClick(e, active);
+				}
+			});
+		} else {
+			if (buttonData.onClick) {
+				button.addEventListener('click', (e) => {
+					buttonData.onClick(e, false);
+				});
+			}
+		}
+
+		containerElement.appendChild(button);
 	}
+
+	Hooks.on('renderCombatTracker', (app, element) => {
+		if (game.settings.get(SYSTEM, SETTINGS.experimentalCombatHud)) {
+			const containerElement = document.createElement('div');
+			containerElement.id = 'combat-hud-controls';
+			createButton(containerElement, CombatHUD.getToggleControlButton());
+			createButton(containerElement, CombatHUD.getSavedControlButton());
+			createButton(containerElement, CombatHUD.getResetControlButton());
+
+			const combatTrackerSection = element.querySelector('#combat-tracker').parentElement;
+			combatTrackerSection.prepend(containerElement);
+		}
+	});
 });
 
 export class CombatHUD extends foundry.applications.api.HandlebarsApplicationMixin(foundry.applications.api.ApplicationV2) {
@@ -433,7 +481,7 @@ export class CombatHUD extends foundry.applications.api.HandlebarsApplicationMix
 	/**
 	 * Determine whether or not the current user has sufficient permission to edit
 	 * @param {HTMLElement} elem - The HTMLElement (or jQuery wrapper) for the ActiveEffect in question
-	 * @param {"update" | "delete"} op - The operation to check -- either "update" or "delete"
+	 * @param {'update' | 'delete'} op - The operation to check -- either "update" or "delete"
 	 * @returns
 	 */
 	_canModifyEffectContextMenu(elem, op = 'update') {
@@ -918,7 +966,7 @@ export class CombatHUD extends foundry.applications.api.HandlebarsApplicationMix
 		this.render(true);
 	}
 
-	_onUpdateCombatant(combatant, changes) {
+	_onUpdateCombatant() {
 		this._onUpdateHUD();
 	}
 
@@ -1161,17 +1209,18 @@ export class CombatHUD extends foundry.applications.api.HandlebarsApplicationMix
 		CombatHUD.update();
 	}
 
+	/**
+	 * @return {HudButtonData}
+	 */
 	static getToggleControlButton() {
 		return {
-			name: 'projectfu-combathud-toggle',
-			title: game.i18n.localize('FU.CombatHudControlButtonTitle'),
+			name: game.i18n.localize('FU.CombatHudControlButtonTitle'),
 			icon: 'fas fa-thumbtack',
-			button: false,
 			toggle: true,
 			visible: game.combat ? game.combat.isActive : false,
 			active: !game.settings.get(SYSTEM, SETTINGS.optionCombatHudMinimized),
 
-			onChange: () => {
+			onClick: () => {
 				console.log('Click toggle');
 				if (game.settings.get(SYSTEM, SETTINGS.optionCombatHudMinimized)) {
 					CombatHUD.restore();
@@ -1182,32 +1231,34 @@ export class CombatHUD extends foundry.applications.api.HandlebarsApplicationMix
 		};
 	}
 
+	/**
+	 * @return {HudButtonData}
+	 */
 	static getSavedControlButton() {
 		return {
-			name: 'projectfu-combathud-saved-toggle',
-			title: game.i18n.localize('FU.CombatHudSaveButtonTitle'),
+			name: game.i18n.localize('FU.CombatHudSaveButtonTitle'),
 			icon: 'fas fa-lock',
-			button: false,
 			toggle: true,
 			visible: game.combat ? game.combat.isActive : false,
 			active: game.settings.get(SYSTEM, SETTINGS.optionCombatHudSaved),
-			onChange: () => {
+			onClick: () => {
 				console.log('Click save');
 				const isSaved = game.settings.get(SYSTEM, SETTINGS.optionCombatHudSaved);
 				game.settings.set(SYSTEM, SETTINGS.optionCombatHudSaved, !isSaved);
 			},
 		};
 	}
 
+	/**
+	 * @return {HudButtonData}
+	 */
 	static getResetControlButton() {
 		return {
-			name: 'projectfu-combathud-reset',
-			title: game.i18n.localize('FU.CombatHudResetButtonTitle'),
+			name: game.i18n.localize('FU.CombatHudResetButtonTitle'),
 			icon: 'fas fa-undo',
-			button: true,
 			// visible: game.combat ? game.combat.isActive : false,
 			visible: true,
-			onChange: () => {
+			onClick: () => {
 				console.log('Click reset');
 				CombatHUD.reset();
 			},
@@ -1224,7 +1275,10 @@ export class CombatHUD extends foundry.applications.api.HandlebarsApplicationMix
 	async _getCombatantThumbnail(combatant) {
 		if (combatant._videoSrc && !combatant.img) {
 			if (combatant._thumb) return combatant._thumb;
-			return (combatant._thumb = await game.video.createThumbnail(combatant._videoSrc, { width: 200, height: 200 }));
+			return (combatant._thumb = await game.video.createThumbnail(combatant._videoSrc, {
+				width: 200,
+				height: 200,
+			}));
 		}
 		return combatant.img ?? CONST.DEFAULT_TOKEN;
 	}