Merge pull request #10310 from DestinyItemManager/loadout-specializat…

…ion-indicators

Loadout specialization indicators

config/i18n.json

@@ -683,6 +683,8 @@
     "EquippableDifferent2": "Maximum Power isn't limited by the \"One Exotic\" rule when determining the Power of your drops, powerful, and pinnacle rewards.",
     "Equipped": "Equipped",
     "Fashion": "Choose fashion",
+    "FashionOnly": "Fashion-only",
+    "ModsOnly": "Mods-only",
     "Filters": "Loadout Filters",
     "FilteredItems": "Filtered Items",
     "FindAnother": "Find another {{name}}",

src/app/loadout-drawer/loadout-utils.ts

@@ -7,7 +7,7 @@ import { DimCharacterStat, DimStore } from 'app/inventory/store-types';
 import { SocketOverrides } from 'app/inventory/store/override-sockets';
 import { isPluggableItem } from 'app/inventory/store/sockets';
 import { findItemsByBucket, getCurrentStore, getStore } from 'app/inventory/stores-helpers';
-import { ArmorEnergyRules } from 'app/loadout-builder/types';
+import { ArmorEnergyRules, LockableBucketHashes } from 'app/loadout-builder/types';
 import { calculateAssumedItemEnergy } from 'app/loadout/armor-upgrade-utils';
 import { isLoadoutBuilderItem } from 'app/loadout/item-utils';
 import { UNSET_PLUG_HASH } from 'app/loadout/known-values';
@@ -44,6 +44,8 @@ import { HashLookup, LookupTable } from 'app/utils/util-types';
 import {
   DestinyClass,
   DestinyInventoryItemDefinition,
+  DestinyItemSubType,
+  DestinyItemType,
   DestinyLoadoutItemComponent,
 } from 'bungie-api-ts/destiny2';
 import deprecatedMods from 'data/d2/deprecated-mods.json';
@@ -712,6 +714,64 @@ export function isMissingItems(
   return false;
 }
 
+export function isFashionOnly(defs: D2ManifestDefinitions, loadout: Loadout): boolean {
+  if (loadout.items.length) {
+    return false;
+  }
+  if (!loadout.parameters?.modsByBucket) {
+    return false;
+  }
+
+  for (const bucketHash in loadout.parameters.modsByBucket) {
+    // if this is mods for a non-armor bucket
+    if (!LockableBucketHashes.includes(Number(bucketHash))) {
+      return false;
+    }
+    const modsForThisArmorSlot = loadout.parameters.modsByBucket[bucketHash];
+    if (modsForThisArmorSlot.some((modHash) => !isFashionPlug(defs, modHash))) {
+      return false;
+    }
+  }
+
+  return true;
+}
+/** not fashion mods, just useful ones */
+export function isArmorModsOnly(defs: D2ManifestDefinitions, loadout: Loadout): boolean {
+  // if it contains armor, it's not a mods-only loadout
+  if (loadout.items.length) {
+    return false;
+  }
+  // if there's no mods at all, this isn't a mods-only loadout
+  if (!loadout.parameters?.mods?.length && !loadout.parameters?.modsByBucket) {
+    return false;
+  }
+  // if there's specific mods, make sure none are fashion
+  if (loadout.parameters?.modsByBucket) {
+    for (const bucketHash in loadout.parameters.modsByBucket) {
+      // if this is mods for a non-armor bucket
+      if (!LockableBucketHashes.includes(Number(bucketHash))) {
+        return false;
+      }
+      const modsForThisArmorSlot = loadout.parameters.modsByBucket[bucketHash];
+      if (modsForThisArmorSlot.some((modHash) => isFashionPlug(defs, modHash))) {
+        return false;
+      }
+    }
+  }
+
+  return true;
+}
+
+/** given a hash we know is a plug, is this a fashion plug? */
+function isFashionPlug(defs: D2ManifestDefinitions, modHash: number) {
+  const def = defs.InventoryItem.get(modHash);
+  return Boolean(
+    def &&
+      (def.itemSubType === DestinyItemSubType.Shader ||
+        def.itemSubType === DestinyItemSubType.Ornament ||
+        def.itemType === DestinyItemType.Armor),
+  );
+}
 /**
  * Returns a flat list of mods as PluggableInventoryItemDefinitions in the Loadout, by default including auto stat mods.
  * This INCLUDES both locked and unlocked mods; `unlockedPlugs` is used to identify if the expensive or cheap copy of an

src/app/loadout/LoadoutView.tsx

@@ -2,6 +2,7 @@ import ClassIcon from 'app/dim-ui/ClassIcon';
 import { PressTip } from 'app/dim-ui/PressTip';
 import ColorDestinySymbols from 'app/dim-ui/destiny-symbols/ColorDestinySymbols';
 import { t } from 'app/i18next-t';
+import type { BucketSortType } from 'app/inventory/inventory-buckets';
 import { DimItem } from 'app/inventory/item-types';
 import { allItemsSelector, createItemContextSelector } from 'app/inventory/selectors';
 import { DimStore } from 'app/inventory/store-types';
@@ -113,11 +114,11 @@ export default function LoadoutView({
 
   const [allMods, modDefinitions] = useLoadoutMods(loadout, store.id);
 
-  const categories = Object.groupBy(
+  const loadoutItemsByCategory: Record<BucketSortType, ResolvedLoadoutItem[]> = Object.groupBy(
     items.concat(warnitems),
     (li) => li.item.bucket.sort ?? 'Unknown',
   );
-  const power = loadoutPower(store, categories);
+  const power = loadoutPower(store, loadoutItemsByCategory);
 
   const selectionProps = $featureFlags.elgatoStreamDeck
     ? // eslint-disable-next-line
@@ -184,7 +185,7 @@ export default function LoadoutView({
                 category={category}
                 subclass={subclass}
                 store={store}
-                items={categories[category]}
+                items={loadoutItemsByCategory[category]}
                 allMods={modDefinitions}
                 modsByBucket={modsByBucket}
                 loadout={loadout}

src/app/loadout/loadout-menu/LoadoutPopup.m.scss

@@ -60,6 +60,16 @@
         }
       }
     }
+
+    .fashionIcon {
+      height: 20px !important;
+      width: 20px !important;
+      margin-right: 5px;
+    }
+    .modificationIcon {
+      height: 18px !important;
+      width: 18px !important;
+    }
   }
 
   &:hover,
@@ -69,9 +79,13 @@
     > span:first-child > :global(.app-icon) {
       color: var(--theme-text-invert) !important;
     }
-    > span:first-child > img:first-child {
+    > span:first-child > img:first-child,
+    .modificationIcon {
       filter: none;
     }
+    .fashionIcon {
+      filter: invert(1);
+    }
 
     .note {
       color: var(--theme-text-invert);

src/app/loadout/loadout-menu/LoadoutPopup.tsx

@@ -21,7 +21,12 @@ import {
 } from 'app/loadout-drawer/loadout-drawer-reducer';
 import { editLoadout } from 'app/loadout-drawer/loadout-events';
 import { InGameLoadout, Loadout } from 'app/loadout-drawer/loadout-types';
-import { isMissingItems, newLoadout } from 'app/loadout-drawer/loadout-utils';
+import {
+  isArmorModsOnly,
+  isFashionOnly,
+  isMissingItems,
+  newLoadout,
+} from 'app/loadout-drawer/loadout-utils';
 import { loadoutsForClassTypeSelector } from 'app/loadout-drawer/loadouts-selector';
 import { makeRoomForPostmaster, totalPostmasterItems } from 'app/loadout-drawer/postmaster';
 import { previousLoadoutSelector } from 'app/loadout-drawer/selectors';
@@ -58,7 +63,12 @@ import { Link } from 'react-router-dom';
 import { InGameLoadoutIconWithIndex } from '../ingame/InGameLoadoutIcon';
 import { applyInGameLoadout } from '../ingame/ingame-loadout-apply';
 import { inGameLoadoutsForCharacterSelector } from '../ingame/selectors';
-import { searchAndSortLoadoutsByQuery, useLoadoutFilterPills } from '../loadout-ui/menu-hooks';
+import {
+  FashionIcon,
+  ModificationsIcon,
+  searchAndSortLoadoutsByQuery,
+  useLoadoutFilterPills,
+} from '../loadout-ui/menu-hooks';
 import styles from './LoadoutPopup.m.scss';
 import { RandomLoadoutOptions, useRandomizeLoadout } from './LoadoutPopupRandomize';
 import MaxlightButton from './MaxlightButton';
@@ -304,6 +314,12 @@ export default function LoadoutPopup({
               title={loadout.notes ? loadout.notes : loadout.name}
               onClick={() => applySavedLoadout(loadout)}
             >
+              {defs.isDestiny2() && isFashionOnly(defs, loadout) && (
+                <FashionIcon className={styles.fashionIcon} />
+              )}
+              {defs.isDestiny2() && isArmorModsOnly(defs, loadout) && (
+                <ModificationsIcon className={styles.modificationIcon} />
+              )}
               {(dimStore.isVault || loadout.classType === DestinyClass.Unknown) && (
                 <ClassIcon className={styles.loadoutTypeIcon} classType={loadout.classType} />
               )}

src/app/loadout/loadout-ui/menu-hooks.m.scss

@@ -12,3 +12,16 @@
     margin: 0 4px 0 4px;
   }
 }
+
+.fashionIcon {
+  background-position: center;
+  background-size: 150%;
+  border-radius: 50%;
+  height: 15px;
+  width: 15px;
+}
+.modificationIcon {
+  height: 13px;
+  width: 13px;
+  filter: invert(0.8);
+}

src/app/loadout/loadout-ui/menu-hooks.tsx

@@ -1,20 +1,25 @@
 import { LoadoutSort } from '@destinyitemmanager/dim-api-types';
+import { bungieBackgroundStyleAdvanced } from 'app/dim-ui/BungieImage';
 import FilterPills, { Option } from 'app/dim-ui/FilterPills';
 import ColorDestinySymbols from 'app/dim-ui/destiny-symbols/ColorDestinySymbols';
 import { DimLanguage } from 'app/i18n';
-import { t } from 'app/i18next-t';
+import { t, tl } from 'app/i18next-t';
 import { getHashtagsFromNote } from 'app/inventory/note-hashtags';
 import { DimStore } from 'app/inventory/store-types';
 import { findingDisplays } from 'app/loadout-analyzer/finding-display';
 import { useSummaryLoadoutsAnalysis } from 'app/loadout-analyzer/hooks';
 import { LoadoutAnalysisSummary, LoadoutFinding } from 'app/loadout-analyzer/types';
 import { Loadout } from 'app/loadout-drawer/loadout-types';
+import { isArmorModsOnly, isFashionOnly } from 'app/loadout-drawer/loadout-utils';
+import { useD2Definitions } from 'app/manifest/selectors';
+import { DEFAULT_ORNAMENTS } from 'app/search/d2-known-values';
 import { faCheckCircle, refreshIcon } from 'app/shell/icons';
 import AppIcon from 'app/shell/icons/AppIcon';
 import { compareBy } from 'app/utils/comparators';
 import { emptyArray } from 'app/utils/empty';
 import { localizedIncludes, localizedSorter } from 'app/utils/intl';
 import clsx from 'clsx';
+import modificationsIcon from 'destiny-icons/general/modifications.svg';
 import _ from 'lodash';
 import { useEffect, useMemo, useState } from 'react';
 import styles from './menu-hooks.m.scss';
@@ -42,11 +47,17 @@ export function useLoadoutFilterPills(
   return useLoadoutFilterPillsInternal(savedLoadouts, store, options);
 }
 
+const loadoutSpecializations = [tl('Loadouts.FashionOnly'), tl('Loadouts.ModsOnly')] as const;
+type LoadoutSpecialization = (typeof loadoutSpecializations)[number];
 type FilterPillType =
   | {
       tag: 'hashtag';
       hashtag: string;
     }
+  | {
+      tag: 'loadout-type';
+      type: LoadoutSpecialization;
+    }
   | { tag: 'finding'; finding: LoadoutFinding };
 
 function useLoadoutFilterPillsInternal(
@@ -65,6 +76,7 @@ function useLoadoutFilterPillsInternal(
   } = {},
 ): [filteredLoadouts: Loadout[], filterPillsElement: React.ReactNode, hasSelectedFilters: boolean] {
   const [selectedFilters, setSelectedFilters] = useState<Option<FilterPillType>[]>(emptyArray());
+  const defs = useD2Definitions();
   const analysisSummary = useSummaryLoadoutsAnalysis(
     savedLoadouts,
     store,
@@ -104,6 +116,35 @@ function useLoadoutFilterPillsInternal(
     (o) => o.key,
   );
 
+  const loadoutsByType = useMemo(() => {
+    const loadoutsByType: Record<LoadoutSpecialization, Loadout[]> | undefined = defs && {
+      'Loadouts.FashionOnly': savedLoadouts.filter((l) => isFashionOnly(defs, l)),
+      'Loadouts.ModsOnly': savedLoadouts.filter((l) => isArmorModsOnly(defs, l)),
+    };
+    return loadoutsByType;
+  }, [defs, savedLoadouts]);
+  if (loadoutsByType) {
+    for (const k of loadoutSpecializations) {
+      if (loadoutsByType[k].length) {
+        filterOptions.push({
+          key: k,
+          value: { tag: 'loadout-type', type: k },
+          content: (
+            <>
+              {k === 'Loadouts.ModsOnly' ? (
+                <ModificationsIcon className="" />
+              ) : (
+                <FashionIcon className="" />
+              )}
+              {t(k)}
+              {` (${loadoutsByType[k].length})`}
+            </>
+          ),
+        });
+      }
+    }
+  }
+
   if (analysisSummary) {
     for (const [finding_, affectedLoadouts] of Object.entries(analysisSummary.loadoutsByFindings)) {
       if (affectedLoadouts.size > 0) {
@@ -136,6 +177,9 @@ function useLoadoutFilterPillsInternal(
                 case 'hashtag': {
                   return loadoutsByHashtag[f.value.hashtag] ?? [];
                 }
+                case 'loadout-type': {
+                  return loadoutsByType?.[f.value.type] ?? [];
+                }
                 case 'finding': {
                   const loadouts = analysisSummary?.loadoutsByFindings[f.value.finding];
                   return loadouts?.size
@@ -146,7 +190,13 @@ function useLoadoutFilterPillsInternal(
             }),
           )
         : savedLoadouts,
-    [selectedFilters, savedLoadouts, loadoutsByHashtag, analysisSummary?.loadoutsByFindings],
+    [
+      selectedFilters,
+      savedLoadouts,
+      loadoutsByHashtag,
+      analysisSummary?.loadoutsByFindings,
+      loadoutsByType,
+    ],
   );
 
   const pills =
@@ -240,3 +290,22 @@ export function searchAndSortLoadoutsByQuery(
       : localizedSorter(language, (l) => l.name),
   );
 }
+
+export function FashionIcon({ className }: { className: string }) {
+  const defs = useD2Definitions();
+  return (
+    defs && (
+      <div
+        className={clsx(className, styles.fashionIcon)}
+        style={bungieBackgroundStyleAdvanced(
+          defs.InventoryItem.get(DEFAULT_ORNAMENTS[2])?.displayProperties.icon,
+          undefined,
+          2,
+        )}
+      />
+    )
+  );
+}
+export function ModificationsIcon({ className }: { className: string }) {
+  return <img className={clsx(className, styles.modificationIcon)} src={modificationsIcon} />;
+}

src/locale/en.json

@@ -736,6 +736,7 @@
     "EquippableDifferent2": "Maximum Power isn't limited by the \"One Exotic\" rule when determining the Power of your drops, powerful, and pinnacle rewards.",
     "Failed": "Loadout failed to apply completely",
     "Fashion": "Choose fashion",
+    "FashionOnly": "Fashion-only",
     "FillFromEquipped": "Fill in using equipped",
     "FillFromInventory": "Fill in using non-equipped",
     "FilteredItems": "Filtered Items",
@@ -792,6 +793,7 @@
       "UpgradeCostsDesc": "Some armor needs energy capacity upgrades to fit the requested mods. In total, these upgrades cost:"
     },
     "Mods": "Mods",
+    "ModsOnly": "Mods-only",
     "MoveItems": "Moving items",
     "NoSpace": "You're out of space in the vault and any other characters.",
     "NoneMatch": "None of your loadouts matched the filters.",