changes

src/components/EquipmentScreen.tsx

@@ -4,6 +4,7 @@ import {
   craftItem,
   equipItem,
   loadProfile,
+  upgradeItem,
   type CharacterProfile,
   type EquipmentSlot,
   type Item,
@@ -46,6 +47,7 @@ export function EquipmentScreen({ profile, onBack, onUpdated, embedded = false }
   const [equipping, setEquipping] = useState(false)
   const [breakingDown, setBreakingDown] = useState(false)
   const [crafting, setCrafting] = useState(false)
+  const [upgrading, setUpgrading] = useState(false)
   const [showSetBonuses, setShowSetBonuses] = useState(false)
   const [equipmentTab, setEquipmentTab] = useState<'equipment' | 'crafting'>('equipment')
   const [inventoryPage, setInventoryPage] = useState(0)
@@ -59,6 +61,16 @@ export function EquipmentScreen({ profile, onBack, onUpdated, embedded = false }
     firstRecipe?.id ?? null,
   )
   const selectedRecipe = profile.craftingRecipes.find((recipe) => recipe.id === selectedRecipeId)
+  const selectedItemRecipe = selectedItem
+    ? profile.craftingRecipes.find((recipe) => recipe.item.id === selectedItem.id)
+    : undefined
+  const upgradeRecipe = selectedItem && selectedItemRecipe
+    ? profile.craftingRecipes.find((recipe) =>
+      recipe.sourceEncounterId === selectedItemRecipe.sourceEncounterId
+      && recipe.item.slot === selectedItem.slot
+      && recipe.item.itemLevel === selectedItem.itemLevel + 5,
+    )
+    : undefined
   const equippedBySlot = useMemo(
     () => new Map(
       profile.inventory
@@ -189,6 +201,23 @@ export function EquipmentScreen({ profile, onBack, onUpdated, embedded = false }
     }
   }
 
+  async function upgradeSelected() {
+    if (!selectedItem || !upgradeRecipe) return
+    saveScroll()
+    setUpgrading(true)
+    setMessage('')
+    try {
+      const updated = await upgradeItem(selectedItem.id)
+      onUpdated(updated)
+      setSelectedItemId(upgradeRecipe.item.id)
+      setMessage(`${selectedItem.name} upgraded to ${upgradeRecipe.item.name}.`)
+    } catch (reason) {
+      setMessage(reason instanceof Error ? reason.message : 'Unable to upgrade item.')
+    } finally {
+      setUpgrading(false)
+    }
+  }
+
   const content = (
     <>
       {!embedded && (
@@ -259,16 +288,26 @@ export function EquipmentScreen({ profile, onBack, onUpdated, embedded = false }
                     <ComparisonDelta selected={selectedItem} equipped={comparisonItem} />
                     <button
                       className="primary-button"
-                      disabled={selectedItem.equipped || equipping || breakingDown}
+                      disabled={selectedItem.equipped || equipping || breakingDown || upgrading}
                       onClick={equipSelected}
                       type="button"
                     >
                       {selectedItem.equipped ? 'Equipped' : equipping ? 'Equipping...' : 'Equip Item'}
                     </button>
+                    {upgradeRecipe && (
+                      <button
+                        className="primary-button"
+                        disabled={!upgradeRecipe.canCraft || equipping || breakingDown || upgrading}
+                        onClick={upgradeSelected}
+                        type="button"
+                      >
+                        {upgrading ? 'Upgrading...' : `Upgrade to iLvl ${upgradeRecipe.item.itemLevel}`}
+                      </button>
+                    )}
                     {(!selectedItem.equipped || selectedItem.quantity > 1) && (
                       <button
                         className="breakdown-button"
-                        disabled={equipping || breakingDown}
+                        disabled={equipping || breakingDown || upgrading}
                         onClick={breakdownSelected}
                         type="button"
                       >