update settings/consumes

ui/balance_druid/sim.ts

@@ -13,7 +13,7 @@ import { getSpecIcon, specNames } from '../core/proto_utils/utils.js';
 import { Player } from '../core/player.js';
 import { IndividualSimUI, registerSpecConfig } from '../core/individual_sim_ui.js';
 
-import * as IconInputs from '../core/components/icon_inputs.js';
+import * as BuffDebuffInputs from '../core/components/inputs/buffs_debuffs.js';
 import * as OtherInputs from '../core/components/other_inputs.js';
 
 import * as DruidInputs from './inputs.js';
@@ -83,13 +83,13 @@ const SPEC_CONFIG = registerSpecConfig(Spec.SpecBalanceDruid, {
 	],
 	// Buff and Debuff inputs to include/exclude, overriding the EP-based defaults.
 	includeBuffDebuffInputs: [
-		IconInputs.MeleeHasteBuff,
-		IconInputs.MeleeCritBuff,
-		IconInputs.AttackPowerPercentBuff,
-		IconInputs.AttackPowerBuff,
-		IconInputs.MajorArmorDebuff,
-		IconInputs.MinorArmorDebuff,
-		IconInputs.PhysicalDamageDebuff,
+		BuffDebuffInputs.MeleeHasteBuff,
+		BuffDebuffInputs.MeleeCritBuff,
+		BuffDebuffInputs.AttackPowerPercentBuff,
+		BuffDebuffInputs.AttackPowerBuff,
+		BuffDebuffInputs.MajorArmorDebuff,
+		BuffDebuffInputs.MinorArmorDebuff,
+		BuffDebuffInputs.PhysicalDamageDebuff,
 	],
 	excludeBuffDebuffInputs: [
 	],

ui/core/components/icon_enum_picker.tsx

@@ -1,10 +1,16 @@
 import { Tooltip } from 'bootstrap';
+// eslint-disable-next-line unused-imports/no-unused-imports
+import { element, fragment } from 'tsx-vanilla';
+
 import { ActionId } from '../proto_utils/action_id.js';
 import { TypedEvent } from '../typed_event.js';
 
 import { Input, InputConfig } from './input.js';
 
-import { element, fragment } from 'tsx-vanilla';
+export enum IconEnumPickerDirection {
+	Vertical = 'vertical',
+	Horizontal = 'Horizontal',
+}
 
 export interface IconEnumValueConfig<ModObject, T> {
 	value: T,
@@ -21,13 +27,15 @@ export interface IconEnumValueConfig<ModObject, T> {
 }
 
 export interface IconEnumPickerConfig<ModObject, T> extends InputConfig<ModObject, T> {
-	numColumns: number,
+	numColumns?: number,
 	values: Array<IconEnumValueConfig<ModObject, T>>;
 	// Value that will be considered inactive.
 	zeroValue: T,
 	// Function for comparing two values.
 	// Tooltip that will be shown whne hovering over the icon-picker-button
 	tooltip?: string,
+	// The direction the menu will open in relative to the root element
+	direction?: IconEnumPickerDirection,
 	equals: (a: T, b: T) => boolean,
 	backupIconUrl?: (value: T) => ActionId,
 	showWhen?: (obj: ModObject) => boolean,
@@ -50,7 +58,7 @@ export class IconEnumPicker<ModObject, T> extends Input<ModObject, T> {
 		this.currentValue = this.config.zeroValue;
 
 		if (config.showWhen) {
-			config.changedEvent(this.modObject).on(eventID => {
+			config.changedEvent(this.modObject).on(_eventID => {
 				const show = config.showWhen && config.showWhen(this.modObject);
 				if (!show)
 					this.rootElem.classList.add('hide');
@@ -89,9 +97,13 @@ export class IconEnumPicker<ModObject, T> extends Input<ModObject, T> {
 		this.buttonText = this.buttonElem.querySelector('.icon-picker-label') as HTMLElement;
 		const dropdownMenu = this.rootElem.querySelector('.dropdown-menu') as HTMLElement;
 
-		dropdownMenu.style.gridTemplateColumns = `repeat(${this.config.numColumns}, 1fr)`;
+		if (this.config.numColumns)
+			dropdownMenu.style.gridTemplateColumns = `repeat(${this.config.numColumns}, 1fr)`;
+
+		if (this.config.direction == IconEnumPickerDirection.Horizontal)
+			dropdownMenu.style.gridAutoFlow = 'column';
 
-		config.values.forEach((valueConfig, i) => {
+		config.values.forEach((valueConfig, _i) => {
 			const optionContainer = document.createElement('li');
 			optionContainer.classList.add('icon-dropdown-option', 'dropdown-option')
 			dropdownMenu.appendChild(optionContainer);
@@ -116,8 +128,11 @@ export class IconEnumPicker<ModObject, T> extends Input<ModObject, T> {
 				});
 			}
 
+			const show = !valueConfig.showWhen || valueConfig.showWhen(this.modObject);
+			if (!show) optionContainer.classList.add('hide')
+
 			if (valueConfig.showWhen) {
-				config.changedEvent(this.modObject).on(eventID => {
+				config.changedEvent(this.modObject).on(_eventID => {
 					const show = valueConfig.showWhen && valueConfig.showWhen(this.modObject);
 					if (show)
 						optionContainer.classList.remove('hide');

ui/core/components/icon_picker.tsx

@@ -1,17 +1,19 @@
+// eslint-disable-next-line unused-imports/no-unused-imports
+import { element, ref } from 'tsx-vanilla';
+
 import { ActionId } from '../proto_utils/action_id.js';
 import { TypedEvent } from '../typed_event.js';
 import { isRightClick } from '../utils.js';
 
 import { Input, InputConfig } from './input.js';
-import { element, ref } from 'tsx-vanilla';
 
 // Data for creating an icon-based input component.
 // 
 // E.g. one of these for arcane brilliance, another for kings, etc.
 // ModObject is the object being modified (Sim, Player, or Target).
 // ValueType is either number or boolean.
 export interface IconPickerConfig<ModObject, ValueType> extends InputConfig<ModObject, ValueType> {
-	id: ActionId;
+	actionId: ActionId;
 
 	// The number of possible 'states' this icon can have. Most inputs will use 2
 	// for a bi-state icon (on or off). 0 indicates an unlimited number of states.
@@ -78,7 +80,7 @@ export class IconPicker<ModObject, ValueType> extends Input<ModObject, ValueType
 		this.improvedAnchor2 = ia2.value!;
 		this.counterElem = ce.value!;
 
-		this.config.id.fillAndSet(this.rootAnchor, true, true);
+		this.config.actionId.fillAndSet(this.rootAnchor, true, true);
 
 		if (this.config.states >= 3 && this.config.improvedId) {
 			this.config.improvedId.fillAndSet(this.improvedAnchor, true, true);
@@ -117,7 +119,7 @@ export class IconPicker<ModObject, ValueType> extends Input<ModObject, ValueType
 		event.preventDefault();
 	}
 
-	handleRightClick = (event: UIEvent) => {
+	handleRightClick = (_event: UIEvent) => {
 		if (this.currentValue > 0) {
 			this.currentValue--;
 		} else { // roll over
@@ -151,13 +153,13 @@ export class IconPicker<ModObject, ValueType> extends Input<ModObject, ValueType
 		if (v == 0) {
 			return null;
 		} else if (v == 1) {
-			return this.config.id;
+			return this.config.actionId;
 		} else if (v == 2 && this.config.improvedId) {
 			return this.config.improvedId;
 		} else if (v == 3 && this.config.improvedId2) {
 			return this.config.improvedId2;
 		} else {
-			return this.config.id;
+			return this.config.actionId;
 		}
 	}