ENH: Hide all non-visible layers by default from the layering screen

BondageClub/CSS/Styles.css

@@ -886,12 +886,16 @@ input[type="checkbox"]:checked::before {
 	gap: var(--button-gap);
 	overflow: unset !important;
 	grid-template-columns: repeat(var(--max-rows), var(--button-size));
-	grid-template-rows: repeat(auto-fit, var(--button-size));
 	direction: rtl;
 	width: 100%;
 	height: 100%;
 }
 
+.layering-button-grid > button {
+	width: var(--button-size);
+	height: var(--button-size);
+}
+
 #layering-button-grid {
 	grid-area: button-grid;
 }
@@ -912,6 +916,18 @@ input[type="checkbox"]:checked::before {
 	background-image: url("../Icons/Lock.png");
 }
 
+#layering-hide-button {
+	background-image: url("../Icons/Visibility.png");
+}
+
+#layering-hide-button[aria-checked="false"] #layering-hide-button-tooltip-show {
+	display: none;
+}
+
+#layering-hide-button[aria-checked="true"] #layering-hide-button-tooltip-hide {
+	display: none;
+}
+
 #layering-asset-grid {
 	grid-area: asset-grid;
 	min-height: min(9vh, 4.5vw);

BondageClub/Screens/Interface.csv

@@ -136,9 +136,11 @@ Intensity2,Item intensity: High
 Intensity3,Item intensity: Maximum
 LayeringAsset,Configure total priority
 LayeringExit,Exit
+LayeringHide,Hide hidden layers
 LayeringLayer,Configure layer-specific priority
 LayeringLock,Item configuration locked
 LayeringReset,Reset layering
+LayeringShow,Show hidden layers
 Locking,Locking...
 LockMemberNumber,Member number on lock:
 LockZoneBlocked,Another item is blocking access to this lock

BondageClub/Scripts/Layering.js

@@ -146,6 +146,8 @@ var Layering = {
 		buttonGrid: "layering-button-grid",
 		resetButton: "layering-reset-button",
 		exitButton: "layering-exit-button",
+		hideButton: "layering-hide-button",
+		hideTooltip: "layering-hide-button-tooltip",
 		lockButton: "layering-lock-button",
 
 		assetHeader: "layering-asset-header",
@@ -272,6 +274,26 @@ var Layering = {
 		Layering._CharacterRefresh(Layering.Character, false, false);
 	},
 
+	/**
+	 * Event listener for `click` events of the show hidden layers button
+	 * @this {HTMLButtonElement}
+	 * @param {Event} ev
+	 * @private
+	 */
+	_ShowLayersClickListener(ev) {
+		const elements = Array.from(document.querySelectorAll("[data-layer-priority]"));
+		if (this.ariaChecked === "true") {
+			const typeRecord = Layering.Item.Property?.TypeRecord;
+			const layers = elements.map(e => {
+				const asset = Layering.Asset;
+				return /** @type {const} */([e, Layering.Asset.Layer.find(l => l.Name === e.getAttribute("data-name")) ?? asset.Layer[0]]);
+			});
+			layers.forEach(([e, layer]) => e.parentElement.style.display = CharacterAppearanceIsLayerVisible(Layering.Character, layer, layer.Asset, typeRecord) ? "" : "none");
+		} else {
+			elements.forEach(e => e.parentElement.style.display = "");
+		}
+	},
+
 	/**
 	 * Update the background colors of the `number`-based input elements, the color change depending on whether one is changing an asset- or layer-specific priority.
 	 * @private
@@ -421,6 +443,17 @@ var Layering = {
 					[
 						ElementButton.Create(this.ID.exitButton, () => this.Exit(), { tooltip: InterfaceTextGet("LayeringExit") }),
 						ElementButton.Create(this.ID.resetButton, this._ResetClickListener, { tooltip: InterfaceTextGet("LayeringReset") }),
+						ElementButton.Create(
+							this.ID.hideButton, this._ShowLayersClickListener,
+							{ role: "menuitemcheckbox" },
+							{
+								button: { attributes: { "aria-checked": true } },
+								tooltip: { children: [
+									{ tag: "span", attributes: { id: `${this.ID.hideTooltip}-show` }, children: [InterfaceTextGet("LayeringShow")] },
+									{ tag: "span", attributes: { id: `${this.ID.hideTooltip}-hide` }, children: [InterfaceTextGet("LayeringHide")] },
+								]},
+							},
+						),
 						ElementButton.Create(
 							this.ID.lockButton, () => null, { tooltip: InterfaceTextGet("LayeringLock") },
 							{ button: { attributes: { "aria-disabled": true } } },
@@ -474,20 +507,21 @@ var Layering = {
 									{
 										tag: "div",
 										classList: ["layering-layer-inner-grid"],
-										children: layerList.map(({ Name, Priority }) => {
+										children: layerList.map((layer) => {
+											const name = layer.Name ?? this.Asset.Name;
 											/** @type {number} */
-											const layerPriority = this.OverridePriority?.[Name] ?? Priority;
+											const layerPriority = this.OverridePriority?.[name] ?? layer.Priority;
 											/** @type {number} */
-											const defaultLayerPriority = this._PriorityDefault?.[Name] ?? Priority;
-											Name ??= this.Asset.Name;
+											const defaultLayerPriority = this._PriorityDefault?.[name] ?? layer.Priority;
 											return {
 												tag: "div",
 												classList: ["layering-pair"],
+												style: { display: CharacterAppearanceIsLayerVisible(Layering.Character, layer, layer.Asset, this.Item.Property?.TypeRecord) ? "" : "none" },
 												children: [
 													{
 														tag: "input",
-														attributes: { type: "number", min: "-99", max: "99", value: layerPriority, defaultValue: defaultLayerPriority.toString(), inputMode: "numeric", id: `layering-input-${layerGroupName}-${Name}` },
-														dataAttributes: { layerPriority: defaultLayerPriority.toString(), name: Name },
+														attributes: { type: "number", min: "-99", max: "99", value: layerPriority, defaultValue: defaultLayerPriority.toString(), inputMode: "numeric", id: `layering-input-${layerGroupName}-${name}` },
+														dataAttributes: { layerPriority: defaultLayerPriority.toString(), name },
 														classList: priorityIsObject ? [] : ["layering-input-unfocused"],
 														eventListeners: {
 															input: (event) => this._LayerInputListener(event),
@@ -497,9 +531,9 @@ var Layering = {
 													},
 													{
 														tag: "label",
-														attributes: { for: `layering-input-${layerGroupName}-${Name}` },
+														attributes: { for: `layering-input-${layerGroupName}-${name}` },
 														classList: ["layering-pair-text"],
-														children: [Name],
+														children: [name],
 													},
 												],
 											};