From 70800471229269aa3bbd2fac81ba2c3b83feda71 Mon Sep 17 00:00:00 2001
From: Kayla Glick <kayla-glick@github.com>
Date: Mon, 18 Mar 2024 23:55:43 -0400
Subject: [PATCH] update item swap picker

---
 ...em_swap_picker.ts => item_swap_picker.tsx} | 47 ++++++++++++-------
 1 file changed, 31 insertions(+), 16 deletions(-)
 rename ui/core/components/{item_swap_picker.ts => item_swap_picker.tsx} (70%)

diff --git a/ui/core/components/item_swap_picker.ts b/ui/core/components/item_swap_picker.tsx
similarity index 70%
rename from ui/core/components/item_swap_picker.ts
rename to ui/core/components/item_swap_picker.tsx
index 8d3fd9f6e0..2fc0345d5e 100644
--- a/ui/core/components/item_swap_picker.ts
+++ b/ui/core/components/item_swap_picker.tsx
@@ -1,25 +1,31 @@
-import { Spec, ItemSlot } from '../proto/common.js';
+import { Tooltip } from 'bootstrap';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { element, fragment } from 'tsx-vanilla';
+
 import { Player } from '../player.js';
-import { Component } from './component.js';
-import { IconItemSwapPicker } from './gear_picker.js'
-import { Input } from './input.js'
+import { ItemSlot, Spec } from '../proto/common.js';
 import { SimUI } from '../sim_ui.js';
 import { EventID, TypedEvent } from '../typed_event.js';
 import { BooleanPicker } from './boolean_picker.js';
+import { Component } from './component.js';
+import { IconItemSwapPicker } from './gear_picker.js';
+import { Input } from './input.js';
 
-export interface ItemSwapPickerConfig {
+export interface ItemSwapConfig {
 	itemSlots: Array<ItemSlot>;
+	note?: string;
 }
 
 export class ItemSwapPicker<SpecType extends Spec> extends Component {
 	private readonly itemSlots: Array<ItemSlot>;
 	private readonly enableItemSwapPicker: BooleanPicker<Player<SpecType>>;
 
-	constructor(parentElem: HTMLElement, simUI: SimUI, player: Player<SpecType>, config: ItemSwapPickerConfig) {
+	constructor(parentElem: HTMLElement, simUI: SimUI, player: Player<SpecType>, config: ItemSwapConfig) {
 		super(parentElem, 'item-swap-picker-root');
 		this.itemSlots = config.itemSlots;
 
 		this.enableItemSwapPicker = new BooleanPicker(this.rootElem, player, {
+			reverse: true,
 			label: 'Enable Item Swapping',
 			labelTooltip: 'Allows configuring an Item Swap Set which is used with the <b>Item Swap</b> APL action.',
 			extraCssClasses: ['input-inline'],
@@ -31,34 +37,42 @@ export class ItemSwapPicker<SpecType extends Spec> extends Component {
 		});
 
 		const swapPickerContainer = document.createElement('div');
+		swapPickerContainer.classList.add('input-root', 'input-inline');
 		this.rootElem.appendChild(swapPickerContainer);
+
+		let noteElem: Element;
+		if (config.note) {
+			noteElem = this.rootElem.appendChild(<p className="form-text">{config.note}</p>);
+		}
+
 		const toggleEnabled = () => {
 			if (!player.getEnableItemSwap()) {
 				swapPickerContainer.classList.add('hide');
+				noteElem?.classList.add('hide');
 			} else {
 				swapPickerContainer.classList.remove('hide');
+				noteElem?.classList.remove('hide');
 			}
 		};
 		player.itemSwapChangeEmitter.on(toggleEnabled);
 		toggleEnabled();
 
-		const label = document.createElement("label");
+		const label = document.createElement('label');
 		label.classList.add('form-label');
-		label.textContent = "Item Swap";
+		label.textContent = 'Item Swap';
 		swapPickerContainer.appendChild(label);
 
-		let itemSwapContainer = Input.newGroupContainer();
+		const itemSwapContainer = Input.newGroupContainer();
 		itemSwapContainer.classList.add('icon-group');
 		swapPickerContainer.appendChild(itemSwapContainer);
 
-		let swapButtonFragment = document.createElement('fragment');
+		const swapButtonFragment = document.createElement('fragment');
 		swapButtonFragment.innerHTML = `
 			<a
 				href="javascript:void(0)"
 				class="gear-swap-icon"
 				role="button"
-				data-bs-toggle="tooltip"
-				data-bs-title="Swap Items with Main Gear"
+				data-bs-title="Swap with equipped items"
 			>
 				<i class="fas fa-arrows-rotate me-1"></i>
 			</a>
@@ -67,10 +81,11 @@ export class ItemSwapPicker<SpecType extends Spec> extends Component {
 		const swapButton = swapButtonFragment.children[0] as HTMLElement;
 		itemSwapContainer.appendChild(swapButton);
 
-		swapButton.addEventListener('click', _event => { this.swapWithGear(TypedEvent.nextEventID(), player) });
+		swapButton.addEventListener('click', _event => this.swapWithGear(TypedEvent.nextEventID(), player));
+		Tooltip.getOrCreateInstance(swapButton);
 
 		this.itemSlots.forEach(itemSlot => {
-			new IconItemSwapPicker(itemSwapContainer, simUI, player, itemSlot)
+			new IconItemSwapPicker(itemSwapContainer, simUI, player, itemSlot);
 		});
 	}
 
@@ -82,8 +97,8 @@ export class ItemSwapPicker<SpecType extends Spec> extends Component {
 			const gearItem = player.getGear().getEquippedItem(slot);
 			const swapItem = player.getItemSwapGear().getEquippedItem(slot);
 
-			newGear = newGear.withEquippedItem(slot, swapItem, player.canDualWield2H())
-			newIsg = newIsg.withEquippedItem(slot, gearItem, player.canDualWield2H())
+			newGear = newGear.withEquippedItem(slot, swapItem, player.canDualWield2H());
+			newIsg = newIsg.withEquippedItem(slot, gearItem, player.canDualWield2H());
 		});
 
 		TypedEvent.freezeAllAndDo(() => {