fix issues

package.json

@@ -26,8 +26,9 @@
     },
     "dependencies": {
         "@popperjs/core": "^2.11.6",
+        "@types/pako": "^2.0.0",
         "bootstrap": "^5.3.0",
-        "pako": "^1.0.11",
+        "pako": "^2.0.4",
         "tippy.js": "^6.3.7",
         "tsx-vanilla": "^1.0.0"
     },

ui/core/components/encounter_picker.ts

@@ -128,10 +128,11 @@ export class EncounterPicker extends Component {
 
 			makeTargetInputsPicker(this.rootElem, modEncounter, 0);
 
+			const advancedModal = new AdvancedEncounterModal(simUI.rootElem, simUI, modEncounter);
 			const advancedButton = document.createElement('button');
 			advancedButton.classList.add('advanced-button', 'btn', 'btn-primary');
 			advancedButton.textContent = 'Advanced';
-			advancedButton.addEventListener('click', () => new AdvancedEncounterModal(simUI.rootElem, simUI, modEncounter));
+			advancedButton.addEventListener('click', () => advancedModal.open());
 			this.rootElem.appendChild(advancedButton);
 		});
 	}

ui/core/components/exporters.tsx

@@ -1,3 +1,4 @@
+import * as pako from 'pako';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { element, ref } from 'tsx-vanilla';
 
@@ -17,8 +18,6 @@ import { BooleanPicker } from './boolean_picker';
 import { CopyButton } from './copy_button';
 import { IndividualLinkImporter, IndividualWowheadGearPlannerImporter } from './importers';
 
-declare let pako: any;
-
 interface ExporterOptions {
 	title: string;
 	header?: boolean;
@@ -150,7 +149,10 @@ export class IndividualLinkExporter<SpecType extends Spec> extends Exporter {
 				changedEvent: () => this.changedEvent,
 			});
 		});
+	}
 
+	open() {
+		super.open();
 		this.init();
 	}
 
@@ -190,6 +192,10 @@ export class IndividualJsonExporter<SpecType extends Spec> extends Exporter {
 	constructor(parent: HTMLElement, simUI: IndividualSimUI<SpecType>) {
 		super(parent, simUI, { title: 'JSON Export', allowDownload: true });
 		this.simUI = simUI;
+	}
+
+	open() {
+		super.open();
 		this.init();
 	}
 
@@ -218,14 +224,18 @@ export class IndividualWowheadGearPlannerExporter<SpecType extends Spec> extends
 	constructor(parent: HTMLElement, simUI: IndividualSimUI<SpecType>) {
 		super(parent, simUI, { title: 'Wowhead Export', allowDownload: true });
 		this.simUI = simUI;
+	}
+
+	open() {
+		super.open();
 		this.init();
 	}
 
 	getData(): string {
 		const player = this.simUI.player;
 
-		const classStr = player.getPlayerClass().friendlyName.replaceAll(/\s/, '-').toLowerCase();
-		const raceStr = raceNames.get(player.getRace())!.replaceAll(/\s/, '-').toLowerCase();
+		const classStr = player.getPlayerClass().friendlyName.replaceAll(/\s/g, '-').toLowerCase();
+		const raceStr = raceNames.get(player.getRace())!.replaceAll(/\s/g, '-').toLowerCase();
 		const url = `https://www.wowhead.com/cata/gear-planner/${classStr}/${raceStr}/`;
 
 		// See comments on the importer for how the binary formatting is structured.
@@ -327,6 +337,10 @@ export class Individual80UEPExporter<SpecType extends Spec> extends Exporter {
 	constructor(parent: HTMLElement, simUI: IndividualSimUI<SpecType>) {
 		super(parent, simUI, { title: '80Upgrades EP Export', allowDownload: true });
 		this.simUI = simUI;
+	}
+
+	open() {
+		super.open();
 		this.init();
 	}
 
@@ -415,6 +429,10 @@ export class IndividualPawnEPExporter<SpecType extends Spec> extends Exporter {
 	constructor(parent: HTMLElement, simUI: IndividualSimUI<SpecType>) {
 		super(parent, simUI, { title: 'Pawn EP Export', allowDownload: true });
 		this.simUI = simUI;
+	}
+
+	open() {
+		super.open();
 		this.init();
 	}
 
@@ -504,6 +522,10 @@ export class IndividualCLIExporter<SpecType extends Spec> extends Exporter {
 	constructor(parent: HTMLElement, simUI: IndividualSimUI<SpecType>) {
 		super(parent, simUI, { title: 'CLI Export', allowDownload: true });
 		this.simUI = simUI;
+	}
+
+	open() {
+		super.open();
 		this.init();
 	}
 

ui/core/components/gear_picker/gear_picker.tsx

@@ -349,7 +349,7 @@ export class ItemPicker extends Component {
 
 	private addQuickGemHelpers() {
 		if (!this._equippedItem) return;
-		const openGemDetailTab = (socketIdx: number) => this.openSelectorModal(`Gem ${socketIdx + 1}` as SelectorModalTabs);
+		const openGemDetailTab = (socketIdx: number) => this.openSelectorModal(`Gem${socketIdx + 1}` as SelectorModalTabs);
 		this.itemElem.socketsElem?.forEach(element => {
 			const socketIdx = Number(element.dataset.socketIdx) || 0;
 			element.addEventListener('click', event => {
@@ -453,7 +453,7 @@ export enum SelectorModalTabs {
 export class SelectorModal extends BaseModal {
 	private readonly simUI: SimUI;
 	private player: Player<any>;
-	private gearPicker: GearPicker;
+	private gearPicker: GearPicker | undefined;
 	private ilists: ItemList<any>[] = [];
 	private updateReforgeList: (newReforgeData: Array<ReforgeData & { ep: number }>) => void;
 
@@ -464,7 +464,7 @@ export class SelectorModal extends BaseModal {
 	private currentSlot: ItemSlot = ItemSlot.ItemSlotHead;
 	private currentTab: SelectorModalTabs = SelectorModalTabs.Items;
 
-	constructor(parent: HTMLElement, simUI: SimUI, player: Player<any>, gearPicker: GearPicker) {
+	constructor(parent: HTMLElement, simUI: SimUI, player: Player<any>, gearPicker?: GearPicker) {
 		super(parent, 'selector-modal');
 
 		this.simUI = simUI;
@@ -506,16 +506,29 @@ export class SelectorModal extends BaseModal {
 	private setData(selectedSlot: ItemSlot, selectedTab: SelectorModalTabs, gearData: GearData) {
 		this.tabsElem.innerText = '';
 		this.contentElem.innerText = '';
-
 		this.ilists = [];
 
-		this.currentSlot = selectedSlot;
-		this.currentTab = selectedTab;
-
 		const eligibleItems = this.player.getItems(selectedSlot);
 		const eligibleEnchants = this.player.getEnchants(selectedSlot);
 		const equippedItem = this.player.getEquippedItem(selectedSlot);
 
+		this.currentSlot = selectedSlot;
+
+		// If the enchant tab is selected but the item has no eligible enchants, default to items
+		if (selectedTab == SelectorModalTabs.Enchants && eligibleEnchants.length == 0) {
+			selectedTab = SelectorModalTabs.Items;
+		}
+
+		// If a gem tab is selected but the item has no eligible sockets, default to items
+		if (
+			[SelectorModalTabs.Gem1, SelectorModalTabs.Gem2, SelectorModalTabs.Gem3].includes(selectedTab) &&
+			equippedItem?.numSockets(this.player.isBlacksmithing()) == 0
+		) {
+			selectedTab = SelectorModalTabs.Items;
+		}
+
+		this.currentTab = selectedTab;
+
 		this.addTab<Item>(
 			SelectorModalTabs.Items,
 			gearData,
@@ -587,6 +600,10 @@ export class SelectorModal extends BaseModal {
 	}
 
 	private addItemSlotTabs() {
+		if (!this.gearPicker) {
+			return;
+		}
+
 		this.dialog.prepend(
 			<div className="gear-picker-modal-slots">
 				{this.gearPicker.itemPickers.map(picker => {
@@ -606,6 +623,7 @@ export class SelectorModal extends BaseModal {
 					) as HTMLAnchorElement;
 					picker.onUpdate(() => {
 						if (picker.item) {
+							this.player.setWowheadData(picker.item, anchor);
 							picker.item
 								.asActionId()
 								.fill()
@@ -646,7 +664,7 @@ export class SelectorModal extends BaseModal {
 		const socketBonusEP = this.player.computeStatsEP(new Stats(equippedItem.item.socketBonus)) / (equippedItem.item.gemSockets.length || 1);
 		equippedItem.curSocketColors(this.player.isBlacksmithing()).forEach((socketColor, socketIdx) => {
 			this.addTab<Gem>(
-				SelectorModalTabs[('Gem' + (socketIdx + 1)) as keyof typeof SelectorModalTabs],
+				SelectorModalTabs[`Gem${socketIdx + 1}` as keyof typeof SelectorModalTabs],
 				gearData,
 				this.player.getGems(socketColor).map((gem: Gem) => {
 					return {

ui/core/components/individual_sim_ui/bulk_tab.ts

@@ -13,7 +13,7 @@ import { BaseModal } from '../base_modal';
 import { BooleanPicker } from '../boolean_picker';
 import { Component } from '../component';
 import { ContentBlock } from '../content_block';
-import { ItemData, ItemList, ItemRenderer, SelectorModal, SelectorModalTabs } from '../gear_picker/gear_picker';
+import { GearData, ItemData, ItemList, ItemRenderer, SelectorModal, SelectorModalTabs } from '../gear_picker/gear_picker';
 import { Importer } from '../importers';
 import { ResultsViewer } from '../results_viewer';
 import { SimTab } from '../sim_tab';
@@ -132,6 +132,8 @@ class BulkSimResultRenderer {
 
 export class BulkItemPicker extends Component {
 	private readonly itemElem: ItemRenderer;
+	private readonly selectorModal: SelectorModal;
+
 	readonly simUI: IndividualSimUI<any>;
 	readonly bulkUI: BulkTab;
 	readonly index: number;
@@ -145,39 +147,19 @@ export class BulkItemPicker extends Component {
 		this.index = index;
 		this.item = item;
 		this.itemElem = new ItemRenderer(parent, this.rootElem, simUI.player);
+		this.selectorModal = new SelectorModal(this.bulkUI.rootElem, this.simUI, this.simUI.player);
 
 		this.simUI.sim.waitForInit().then(() => {
 			this.setItem(item);
 			const slot = getEligibleItemSlots(this.item.item)[0];
 			const eligibleEnchants = this.simUI.sim.db.getEnchants(slot);
 			const openEnchantGemSelector = (event: Event) => {
 				event.preventDefault();
-				const changeEvent = new TypedEvent<void>();
-				const modal = new SelectorModal(this.bulkUI.rootElem, this.simUI, this.simUI.player, {
-					selectedTab: SelectorModalTabs.Enchants,
-					slot: slot,
-					equippedItem: this.item,
-					eligibleItems: new Array<UIItem>(),
-					eligibleEnchants: eligibleEnchants,
-					gearData: {
-						equipItem: (eventID: EventID, equippedItem: EquippedItem | null) => {
-							if (equippedItem) {
-								const allItems = this.bulkUI.getItems();
-								allItems[this.index] = equippedItem.asSpec();
-								this.item = equippedItem;
-								this.bulkUI.setItems(allItems);
-								changeEvent.emit(TypedEvent.nextEventID());
-							}
-						},
-						getEquippedItem: () => this.item,
-						changeEvent: changeEvent,
-					},
-				});
 
 				if (eligibleEnchants.length > 0) {
-					modal.openTabName('Enchants');
+					this.selectorModal.openTab(slot, SelectorModalTabs.Enchants, this.createGearData());
 				} else if (this.item._gems.length > 0) {
-					modal.openTabName('Gem1');
+					this.selectorModal.openTab(slot, SelectorModalTabs.Gem1, this.createGearData());
 				}
 
 				const destroyItemButton = document.createElement('button');
@@ -189,11 +171,11 @@ export class BulkItemPicker extends Component {
 							return idx != this.index;
 						}),
 					);
-					modal.close();
+					this.selectorModal.close();
 				};
-				const closeX = modal.header?.querySelector('.close-button');
+				const closeX = this.selectorModal.header?.querySelector('.close-button');
 				if (closeX != undefined) {
-					modal.header?.insertBefore(destroyItemButton, closeX);
+					this.selectorModal.header?.insertBefore(destroyItemButton, closeX);
 				}
 			};
 
@@ -215,6 +197,23 @@ export class BulkItemPicker extends Component {
 			this.itemElem.rootElem.style.alignItems = 'center';
 		}
 	}
+
+	private createGearData(): GearData {
+		const changeEvent = new TypedEvent<void>();
+		return {
+			equipItem: (eventID: EventID, equippedItem: EquippedItem | null) => {
+				if (equippedItem) {
+					const allItems = this.bulkUI.getItems();
+					allItems[this.index] = equippedItem.asSpec();
+					this.item = equippedItem;
+					this.bulkUI.setItems(allItems);
+					changeEvent.emit(TypedEvent.nextEventID());
+				}
+			},
+			getEquippedItem: () => this.item,
+			changeEvent: changeEvent,
+		};
+	}
 }
 
 export class BulkTab extends SimTab {
@@ -924,22 +923,17 @@ class GemSelectorModal extends BaseModal {
 			this.ilist = new ItemList<UIGem>(
 				this.body,
 				this.simUI,
+				ItemSlot.ItemSlotHead,
+				SelectorModalTabs.Gem1,
+				this.simUI.player,
+				'Gem1',
 				{
-					selectedTab: SelectorModalTabs.Gem1,
-					slot: ItemSlot.ItemSlotHead,
-					equippedItem: null,
-					eligibleItems: new Array<UIItem>(),
-					eligibleEnchants: new Array<UIEnchant>(),
-					gearData: {
-						equipItem: (_eventID: EventID, _equippedItem: EquippedItem | null) => {
-							return;
-						},
-						getEquippedItem: () => null,
-						changeEvent: new TypedEvent(), // FIXME
+					equipItem: (_eventID: EventID, _equippedItem: EquippedItem | null) => {
+						return;
 					},
+					getEquippedItem: () => null,
+					changeEvent: new TypedEvent(), // FIXME
 				},
-				this.simUI.player,
-				'Gem1',
 				this.simUI.player.getGems(this.socketColor).map((gem: UIGem) => {
 					return {
 						item: gem,