Fix item swap issues (#4213)

* fix gear comparison index issue with item swap

* little bit of cleanup

* import missing stylesheet

ui/core/components/gear_picker.tsx

@@ -2,7 +2,6 @@ import { difficultyNames, professionNames, slotNames } from '../proto_utils/name
 import { BaseModal } from './base_modal';
 import { Component } from './component';
 import { FiltersMenu } from './filters_menu';
-import { Input, InputConfig } from './input';
 import {
 	makePhaseSelector,
 	makeShow1hWeaponsSelector,
@@ -21,18 +20,15 @@ import { formatDeltaTextElem } from '../utils';
 import { ActionId } from '../proto_utils/action_id';
 import { getEnchantDescription, getUniqueEnchantString } from '../proto_utils/enchants';
 import { EquippedItem } from '../proto_utils/equipped_item';
-import { ItemSwapGear } from '../proto_utils/gear'
 import { getEmptyGemSocketIconUrl, gemMatchesSocket } from '../proto_utils/gems';
 import { Stats } from '../proto_utils/stats';
 
 import {
 	Class,
-	Spec,
 	GemColor,
 	ItemQuality,
 	ItemSlot,
 	ItemSpec,
-	ItemSwap,
 	ItemType,
 } from '../proto/common';
 import {
@@ -43,6 +39,7 @@ import {
 } from '../proto/ui.js';
 import { IndividualSimUI } from '../individual_sim_ui.js';
 import { Tooltip } from 'bootstrap';
+// eslint-disable-next-line unused-imports/no-unused-imports
 import { element, fragment, ref } from 'tsx-vanilla';
 
 import { Clusterize } from './virtual_scroll/clusterize.js';
@@ -331,12 +328,10 @@ export class IconItemSwapPicker extends Component {
 			this._items = this.player.getItems(slot);
 			this._enchants = this.player.getEnchants(slot);
 			const gearData = {
-				equipItem: (eventID: EventID, equippedItem: EquippedItem | null) => {
-					let curIsg = player.getItemSwapGear();
-					curIsg = curIsg.withEquippedItem(slot, equippedItem, player.canDualWield2H())
-					player.setItemSwapGear(eventID, curIsg);
+				equipItem: (eventID: EventID, newItem: EquippedItem | null) => {
+					player.equipItemSwapitem(eventID, this.slot, newItem)
 				},
-				getEquippedItem: () => this.player.getItemSwapGear().getEquippedItem(this.slot),
+				getEquippedItem: () => player.getItemSwapItem(this.slot),
 				changeEvent: player.itemSwapChangeEmitter,
 			}
 

ui/core/player.ts

@@ -624,6 +624,14 @@ export class Player<SpecType extends Spec> {
 		this.itemSwapChangeEmitter.emit(eventID);
 	}
 
+	equipItemSwapitem(eventID: EventID, slot: ItemSlot, newItem: EquippedItem | null) {
+		this.setItemSwapGear(eventID, this.itemSwapGear.withEquippedItem(slot, newItem, this.canDualWield2H()));
+	}
+
+	getItemSwapItem(slot: ItemSlot): EquippedItem | null {
+		return this.itemSwapGear.getEquippedItem(slot);
+	}
+
 	getItemSwapGear(): ItemSwapGear {
 		return this.itemSwapGear;
 	}

ui/core/proto_utils/gear.ts

@@ -38,7 +38,8 @@ abstract class BaseGear {
 	abstract getItemSlots(): ItemSlot[]
 
 	equals(other: BaseGear): boolean {
-		return this.asArray().every((thisItem, slot) => equalsOrBothNull(thisItem, other.getEquippedItem(slot), (a, b) => a.equals(b)));
+		const otherArray = other.asArray();
+		return this.asArray().every((thisItem, slot) => equalsOrBothNull(thisItem, otherArray[slot], (a, b) => a.equals(b)))
 	}
 
 	getEquippedItem(slot: ItemSlot): EquippedItem | null {

ui/scss/core/individual_sim_ui/index.scss

@@ -16,6 +16,7 @@
 @import "../components/icon_enum_picker";
 @import "../components/icon_picker";
 @import "../components/importers";
+@import "../components/item_swap_picker";
 @import "../components/multi_icon_picker";
 @import "../components/number_list_picker";
 @import "../components/number_picker";