WIP: exotic class item perk picker for loadout optimizer

config/i18n.json

@@ -616,6 +616,7 @@
     "SelectModsCount": "{{selected}}/{{maxSelectable}}",
     "SelectModsCountActivityMods": "{{selected}}/{{maxSelectable}} Activity Mods",
     "SelectExotic": "Select exotic",
+    "SelectPerks": "Select perks",
     "SelectMods": "Select Mods",
     "SelectSetBonus": "Select Set Bonuses",
     "AddStack": "Add another copy of this mod",

src/app/loadout-builder/LoadoutBuilder.tsx

@@ -131,6 +131,8 @@
 
   const loadoutParameters = loadout.parameters!;
   const lockedExoticHash = loadoutParameters.exoticArmorHash;
+  const exoticPerk1 = loadoutParameters.perks?.[0];
+  const exoticPerk2 = loadoutParameters.perks?.[1];
   const statConstraints = loadoutParameters.statConstraints!;
   const autoStatMods = Boolean(loadoutParameters.autoStatMods);
   const includeRuntimeStatBenefits = loadoutParameters.includeRuntimeStatBenefits ?? true;

src/app/loadout-builder/filter/ExoticPicker.m.scss

@@ -4,3 +4,20 @@
   padding: 10px 10px 16px 10px;
   gap: 14px;
 }
+
+.footer {
+  composes: flexRow from '../../dim-ui/common.m.scss';
+  align-items: center;
+}
+
+.submitButton {
+  composes: dim-button from global;
+  padding-right: 16px;
+  padding-left: 16px;
+  margin-right: 8px;
+}
+
+.selectedPerks {
+  --item-size: 32px;
+  gap: 10px;
+}

src/app/loadout-builder/filter/ExoticPicker.tsx

@@ -1,18 +1,25 @@
 import { D2ManifestDefinitions } from 'app/destiny2/d2-definitions';
 import { languageSelector } from 'app/dim-api/selectors';
+import { PressTip } from 'app/dim-ui/PressTip';
 import Sheet from 'app/dim-ui/Sheet';
-import { TileGrid } from 'app/dim-ui/TileGrid';
+import { SheetHorizontalScrollContainer } from 'app/dim-ui/SheetHorizontalScrollContainer';
+import { TileGrid, TileGridTile } from 'app/dim-ui/TileGrid';
+import { useHotkey } from 'app/hotkeys/useHotkey';
 import { DimLanguage } from 'app/i18n';
 import { t } from 'app/i18next-t';
 import { DimItem } from 'app/inventory/item-types';
+import { DefItemIcon } from 'app/inventory/ItemIcon';
 import { allItemsSelector } from 'app/inventory/selectors';
+import { PlugDefTooltip } from 'app/item-popup/PlugTooltip';
 import { isLoadoutBuilderItem } from 'app/loadout/loadout-item-utils';
 import { useD2Definitions } from 'app/manifest/selectors';
 import { SearchInput } from 'app/search/SearchInput';
 import { startWordRegexp } from 'app/search/text-utils';
+import { useIsPhonePortrait } from 'app/shell/selectors';
 import { uniqBy } from 'app/utils/collections';
 import { compareBy, compareByIndex } from 'app/utils/comparators';
 import {
+  getExtraIntrinsicPerkSockets,
   socketContainsIntrinsicPlug,
   socketContainsPlugWithCategory,
 } from 'app/utils/socket-utils';
@@ -243,3 +250,165 @@ export default function ExoticPicker({
     </Sheet>
   );
 }
+
+export function ExoticPerkPicker({
+  lockedExoticHash,
+  onSelected,
+  onClose,
+}: {
+  lockedExoticHash?: number;
+  onSelected: (selectedPerk1: number, selectedPerk2: number) => void;
+  onClose: () => void;
+}) {
+  const defs = useD2Definitions()!;
+  const [selectedPerk1, setSelectedPerk1] = useState<number>(0);
+  const [selectedPerk2, setSelectedPerk2] = useState<number>(0);
+
+  const allItems = useSelector(allItemsSelector).filter((item) => item.hash === lockedExoticHash);
+
+  const row1Perks = new Map<number, Set<number>>();
+  const row2Perks = new Map<number, Set<number>>();
+  for (const item of allItems) {
+    const perks = getExtraIntrinsicPerkSockets(item);
+    if (
+      perks &&
+      perks.length === 2 &&
+      perks[0].plugged?.plugDef.hash &&
+      perks[1].plugged?.plugDef.hash
+    ) {
+      row1Perks.set(
+        perks[0].plugged.plugDef.hash,
+        row1Perks.get(perks[0].plugged.plugDef.hash) ?? new Set(),
+      );
+      row1Perks.get(perks[0].plugged.plugDef.hash)!.add(perks[1].plugged.plugDef.hash);
+      row2Perks.set(
+        perks[1].plugged.plugDef.hash,
+        row2Perks.get(perks[1].plugged.plugDef.hash) ?? new Set(),
+      );
+      row2Perks.get(perks[1].plugged.plugDef.hash)!.add(perks[0].plugged.plugDef.hash);
+    }
+  }
+
+  const handlePerk1Click = (perkHash: number) => () => {
+    setSelectedPerk1((perk1) => {
+      if (perk1 === perkHash) {
+        return 0;
+      }
+      return perkHash;
+    });
+  };
+  const handlePerk2Click = (perkHash: number) => () => {
+    setSelectedPerk2((perk2) => {
+      if (perk2 === perkHash) {
+        return 0;
+      }
+      return perkHash;
+    });
+  };
+
+  const footer = ({ onClose }: { onClose: () => void }) => (
+    <Footer
+      selectedPerk1={selectedPerk1}
+      selectedPerk2={selectedPerk2}
+      onSubmit={(event) => {
+        event.preventDefault();
+        onSelected(selectedPerk1, selectedPerk2);
+        onClose();
+      }}
+    />
+  );
+
+  return (
+    <Sheet
+      header={
+        <div>
+          <h1>{t('LB.ChooseAnExotic')}</h1>
+        </div>
+      }
+      footer={footer}
+      onClose={onClose}
+      freezeInitialHeight={true}
+    >
+      <div className={styles.container}>
+        <TileGrid header="Row 1">
+          {row1Perks
+            .keys()
+            .map((perkHash) => defs.InventoryItem.get(perkHash))
+            .map((perkDef) => (
+              <TileGridTile
+                key={perkDef.hash}
+                selected={selectedPerk1 === perkDef.hash}
+                disabled={
+                  selectedPerk2 !== 0 && row2Perks.get(selectedPerk2)?.has(perkDef.hash) === false
+                }
+                title={perkDef.displayProperties.name}
+                icon={<DefItemIcon itemDef={perkDef} />}
+                onClick={handlePerk1Click(perkDef.hash)}
+              >
+                {perkDef.displayProperties.description}
+              </TileGridTile>
+            ))}
+        </TileGrid>
+        <TileGrid header="Row 2">
+          {row2Perks
+            .keys()
+            .map((perkHash) => defs.InventoryItem.get(perkHash))
+            .map((perkDef) => (
+              <TileGridTile
+                key={perkDef.hash}
+                selected={selectedPerk2 === perkDef.hash}
+                disabled={
+                  selectedPerk1 !== 0 && row1Perks.get(selectedPerk1)?.has(perkDef.hash) === false
+                }
+                title={perkDef.displayProperties.name}
+                icon={<DefItemIcon itemDef={perkDef} />}
+                onClick={handlePerk2Click(perkDef.hash)}
+              >
+                {perkDef.displayProperties.description}
+              </TileGridTile>
+            ))}
+        </TileGrid>
+      </div>
+    </Sheet>
+  );
+}
+
+function Footer({
+  selectedPerk1,
+  selectedPerk2,
+  onSubmit,
+}: {
+  selectedPerk1: number;
+  selectedPerk2: number;
+  onSubmit: (event: React.FormEvent | KeyboardEvent) => void;
+}) {
+  const defs = useD2Definitions()!;
+  const acceptButtonText = t('LB.SelectPerks');
+  useHotkey('enter', acceptButtonText, onSubmit);
+  const isPhonePortrait = useIsPhonePortrait();
+
+  const displayPerk = (selectedPerk: number) => {
+    const def = defs.InventoryItem.get(selectedPerk);
+    return (
+      def !== undefined && (
+        <PressTip tooltip={<PlugDefTooltip def={def} />}>
+          <DefItemIcon itemDef={def} />
+          {def.displayProperties.name}
+        </PressTip>
+      )
+    );
+  };
+
+  return (
+    <div className={styles.footer}>
+      <button type="button" className={styles.submitButton} onClick={onSubmit}>
+        {!isPhonePortrait && '⏎ '}
+        {acceptButtonText}
+      </button>
+      <SheetHorizontalScrollContainer className={styles.selectedPerks}>
+        {selectedPerk1 !== 0 && <>{displayPerk(selectedPerk1)}</>}
+        {selectedPerk2 !== 0 && <>{displayPerk(selectedPerk2)}</>}
+      </SheetHorizontalScrollContainer>
+    </div>
+  );
+}

src/app/loadout-builder/filter/ExoticTile.tsx

@@ -4,7 +4,7 @@ import { t } from 'app/i18next-t';
 import { DefItemIcon } from 'app/inventory/ItemIcon';
 import { PluggableInventoryItemDefinition } from 'app/inventory/item-types';
 import { useD2Definitions } from 'app/manifest/selectors';
-import { DestinyInventoryItemDefinition } from 'bungie-api-ts/destiny2';
+import { DestinyInventoryItemDefinition, DestinyItemSubType } from 'bungie-api-ts/destiny2';
 import React from 'react';
 import styles from './ExoticTile.m.scss';
 
@@ -52,7 +52,6 @@ export default function ExoticTile({
 export function exoticTileInfo(defs: D2ManifestDefinitions, exotic: LockedExoticWithPlugs) {
   const { def, exoticPerk, exoticMods } = exotic;
   let perkShortDescription = exoticPerk?.displayProperties.description;
-
   if (exoticPerk) {
     for (const perk of exoticPerk.perks) {
       const description = defs.SandboxPerk.get(perk.perkHash)?.displayProperties.description;
@@ -66,7 +65,10 @@ export function exoticTileInfo(defs: D2ManifestDefinitions, exotic: LockedExotic
   const description = (
     <>
       {exotic.isArmor1 && <div>{t('LB.IncompatibleWithOptimizer')}</div>}
-      {exoticPerk && perkShortDescription}
+      {(exotic.def.itemSubType === DestinyItemSubType.ClassArmor && (
+        <div>{t('LB.SelectPerks')}</div>
+      )) ||
+        (exoticPerk && perkShortDescription)}
       {exoticMods?.map((mod) => (
         <div key={mod.hash} className={styles.perkOrModNameAndImage}>
           <DefItemIcon className={styles.perkOrModImage} itemDef={mod} />

src/app/loadout-builder/filter/LoadoutOptimizerExotic.tsx

@@ -4,7 +4,7 @@
 import { makeFakeItem } from 'app/inventory/store/d2-item-factory';
 import LoadoutEditSection from 'app/loadout/loadout-edit/LoadoutEditSection';
 import { useD2Definitions } from 'app/manifest/selectors';
-import { DestinyClass } from 'bungie-api-ts/destiny2';
+import { DestinyClass, DestinyItemSubType } from 'bungie-api-ts/destiny2';
 import { BucketHashes } from 'data/d2/generated-enums';
 import { sample } from 'es-toolkit';
 import anyExoticIcon from 'images/anyExotic.svg';
@@ -14,7 +14,11 @@
 import { useSelector } from 'react-redux';
 import { LoadoutBuilderAction } from '../loadout-builder-reducer';
 import { LOCKED_EXOTIC_ANY_EXOTIC, LOCKED_EXOTIC_NO_EXOTIC } from '../types';
-import ExoticPicker, { findLockableExotics, resolveExoticInfo } from './ExoticPicker';
+import ExoticPicker, {
+  ExoticPerkPicker,
+  findLockableExotics,
+  resolveExoticInfo,
+} from './ExoticPicker';
 import { exoticTileInfo } from './ExoticTile';
 import styles from './LoadoutOptimizerExotic.m.scss';
 
@@ -23,17 +27,22 @@
   className,
   storeId,
   lockedExoticHash,
+  perk1 = 0,
+  perk2 = 0,
   vendorItems,
   lbDispatch,
 }: {
   classType: DestinyClass;
   storeId: string;
   className?: string;
   lockedExoticHash: number | undefined;
+  perk1: number;
+  perk2: number;
   vendorItems: DimItem[];
   lbDispatch: Dispatch<LoadoutBuilderAction>;
 }) {
   const [showExoticPicker, setShowExoticPicker] = useState(false);
+  const [showExoticPerkPicker, setShowExoticPerkPicker] = useState(false);
   const defs = useD2Definitions()!;
   const allItems = useSelector(allItemsSelector);
 
@@ -57,6 +66,7 @@
   };
 
   const handleClickEdit = () => setShowExoticPicker(true);
+  const handleClickEditPerk = () => setShowExoticPerkPicker(true);
 
   return (
     <LoadoutEditSection
@@ -69,16 +79,40 @@
       <ChosenExoticOption lockedExoticHash={lockedExoticHash} onClick={handleClickEdit} />
       <button type="button" className="dim-button" onClick={handleClickEdit}>
         {t('LB.SelectExotic')}
-      </button>
+      </button>{' '}
+      {lockedExoticHash !== undefined &&
+        defs.InventoryItem.get(lockedExoticHash)?.itemSubType === DestinyItemSubType.ClassArmor && (
+          <button type="button" className="dim-button" onClick={handleClickEditPerk}>
+            {t('LB.SelectPerks')}
+          </button>
+        )}
       {showExoticPicker && (
         <ExoticPicker
           lockedExoticHash={lockedExoticHash}
           vendorItems={vendorItems}
           classType={classType}
-          onSelected={(exotic) => lbDispatch({ type: 'lockExotic', lockedExoticHash: exotic })}
+          onSelected={(exotic) => {
+            lbDispatch({ type: 'lockExotic', lockedExoticHash: exotic });
+            if (
+              exotic &&
+              defs.InventoryItem.get(exotic)?.itemSubType === DestinyItemSubType.ClassArmor
+            ) {
+              setShowExoticPerkPicker(true);
+            }
+          }}
           onClose={() => setShowExoticPicker(false)}
         />
       )}
+      {showExoticPerkPicker && (
+        <ExoticPerkPicker
+          lockedExoticHash={lockedExoticHash}
+          onSelected={(perk1, perk2) =>
+            // TODO properly handle removing perks
+            lbDispatch({ type: 'updatePerks', removed: [], added: [perk1, perk2] })
+          }
+          onClose={() => setShowExoticPerkPicker(false)}
+        />
+      )}
     </LoadoutEditSection>
   );
 });
@@ -87,9 +121,13 @@
 
 function ChosenExoticOption({
   lockedExoticHash,
+  perk1,
+  perk2,
   onClick,
 }: {
   lockedExoticHash: number | undefined;
+  perk1: number | undefined;
+  perk2: number | undefined;
   onClick: () => void;
 }) {
   const defs = useD2Definitions()!;