Merge pull request #9848 from guise/harmonizable-status-by-pattern-pr…

…ogress

config/i18n.json

@@ -231,6 +231,7 @@
     "Event": "Shows items from which event in Destiny 2 they appeared in.",
     "ExtraPerk": "Shows random-rolled Legendary weapons with an additional selectable perk.",
     "Filter": "Filter",
+    "FilterWith": "Filter with:",
     "Focusable": "Shows items that can be focused at a vendor",
     "Foundry": "Shows items by which foundry created them.",
     "Glimmer": "Shows items that are consumables that are related to gaining glimmer.",

src/app/dim-ui/DestinyTooltipText.tsx

@@ -11,18 +11,19 @@ export function DestinyTooltipText({ item }: { item: DimItem }) {
   }
   return (
     <>
-      {item.tooltipNotifications.map((tip) => (
-        <div
-          key={tip.displayString}
-          className={clsx('quest-expiration item-details', {
-            [styles.seasonalExpiration]: isExpirationTooltip(tip),
-          })}
-        >
-          {isExpirationTooltip(tip) && <AppIcon icon={faClock} />}
-          {isPatternTooltip(tip) && <AppIcon className={styles.shapedIcon} icon={shapedIcon} />}
-          <RichDestinyText text={tip.displayString} ownerId={item.owner} />
-        </div>
-      ))}
+      {!isDeepsightTooltip &&
+        item.tooltipNotifications.map((tip) => (
+          <div
+            key={tip.displayString}
+            className={clsx('quest-expiration item-details', {
+              [styles.seasonalExpiration]: isExpirationTooltip(tip),
+            })}
+          >
+            {isExpirationTooltip(tip) && <AppIcon icon={faClock} />}
+            {isPatternTooltip(tip) && <AppIcon className={styles.shapedIcon} icon={shapedIcon} />}
+            <RichDestinyText text={tip.displayString} ownerId={item.owner} />
+          </div>
+        ))}
     </>
   );
 }
@@ -34,3 +35,7 @@ function isExpirationTooltip(tip: DestinyItemTooltipNotification) {
 function isPatternTooltip(tip: DestinyItemTooltipNotification) {
   return tip.displayStyle === 'ui_display_style_deepsight';
 }
+
+function isDeepsightTooltip(tip: DestinyItemTooltipNotification) {
+  return tip.displayStyle === 'ui_display_style_info';
+}

src/app/dim-ui/PressTip.m.scss

@@ -49,6 +49,10 @@ $horizontal-padding: 11px;
 
   p {
     margin-bottom: 0;
+
+    &:first-of-type {
+      margin: 0;
+    }
   }
 
   .header {

src/app/inventory/store/d2-item-factory.ts

@@ -386,8 +386,6 @@ export function makeItem(
         // why the optional chain? well, somehow, an item can return tooltipNotificationIndexes,
         // but have no tooltipNotifications in its def
         .map((i) => itemDef.tooltipNotifications?.[i])
-        // a temporary filter because as of witch queen, all tooltips are set to "on"
-        .filter((t) => t && t.displayStyle !== 'ui_display_style_info')
     : emptyArray<DestinyItemTooltipNotification>();
 
   // null out falsy values like a blank string for a url

src/app/inventory/store/deepsight.ts

@@ -33,3 +33,13 @@ export function isDeepsightResonanceSocket(socket: DimSocket): boolean {
     socketContainsPlugWithCategory(socket, PlugCategoryHashes.CraftingPlugsWeaponsModsMemories)
   );
 }
+
+export function isHarmonizable(item: DimItem): boolean | undefined {
+  const isItemHarmonizable = item.sockets?.allSockets.some(
+    (s) =>
+      s.plugged?.plugDef.plug.plugCategoryHash ===
+        PlugCategoryHashes.CraftingPlugsWeaponsModsExtractors && s.visibleInGame
+  );
+
+  return isItemHarmonizable;
+}

src/app/inventory/store/objectives.ts

@@ -80,6 +80,17 @@ export function isBooleanObjective(
   );
 }
 
+export function isPatternObjective(
+  objectiveDef: DestinyObjectiveDefinition | D1ObjectiveDefinition
+) {
+  const isD2Def = 'allowOvercompletion' in objectiveDef;
+  // Check if objective is for weapon pattern progress
+  const isPatternProgress =
+    isD2Def && objectiveDef.valueStyle === DestinyUnlockValueUIStyle.Automatic;
+
+  return isPatternProgress;
+}
+
 export function isTrialsPassage(itemHash: number) {
   return trialsHashes.passages.includes(itemHash);
 }

src/app/item-popup/DeepSightHarmonizerIcon.m.scss

@@ -0,0 +1,14 @@
+@use '../variables.scss' as *;
+
+.deepsightHarmonizerIcon {
+  flex-grow: 1;
+  max-width: fit-content;
+
+  img {
+    display: block;
+    width: 15px;
+    height: 15px;
+    border: 1px solid #999;
+    margin-right: 4px;
+  }
+}

src/app/item-popup/DeepsightHarmonizerIcon.tsx

@@ -0,0 +1,35 @@
+import BungieImage from 'app/dim-ui/BungieImage';
+import { PressTip } from 'app/dim-ui/PressTip';
+import { t } from 'app/i18next-t';
+import { DimItem } from 'app/inventory/item-types';
+import { useD2Definitions } from 'app/manifest/selectors';
+import { DEEPSIGHT_HARMONIZER } from 'app/search/d2-known-values';
+import styles from './DeepSightHarmonizerIcon.m.scss';
+
+export function DeepsightHarmonizerIcon({ item }: { item: DimItem }) {
+  const defs = useD2Definitions()!;
+  const harmonizerIcon = defs.InventoryItem.get(DEEPSIGHT_HARMONIZER)?.displayProperties.icon;
+
+  return (
+    <PressTip
+      tooltip={<HarmonizableTooltipContent item={item} />}
+      className={styles.deepsightHarmonizerIcon}
+    >
+      <BungieImage src={harmonizerIcon} />
+    </PressTip>
+  );
+}
+
+function HarmonizableTooltipContent({ item }: { item: DimItem }) {
+  const harmonizableTooltipText = item.tooltipNotifications?.map((t) => t.displayString);
+  const harmonizableTooltip = (
+    <>
+      <p>{harmonizableTooltipText}</p>
+      <p>
+        {t('Filter.FilterWith')} <code>deepsight:harmonizable</code>
+      </p>
+    </>
+  );
+
+  return harmonizableTooltip;
+}

src/app/item-popup/WeaponDeepsightInfo.m.scss

@@ -2,15 +2,18 @@
 
 .deepsightProgress {
   display: flex;
+  padding: 4px 10px;
   gap: 4px;
+  background: var(--theme-item-popup-panel-bg);
+  justify-content: center;
+  align-items: center;
+  align-content: stretch;
 
   :global(.objective-progress) {
     background: var(--theme-item-popup-progress-bar-bg);
   }
 }
 
-.deepsightProgressSection {
-  padding: 4px 10px 4px;
-  background: var(--theme-item-popup-panel-bg);
+.deepsightProgressBar {
   flex-grow: 1;
 }

src/app/item-popup/WeaponDeepsightInfo.tsx

@@ -1,7 +1,8 @@
 import { DimItem } from 'app/inventory/item-types';
+import { isHarmonizable } from 'app/inventory/store/deepsight';
 import Objective from 'app/progress/Objective';
+import { DeepsightHarmonizerIcon } from './DeepsightHarmonizerIcon';
 import styles from './WeaponDeepsightInfo.m.scss';
-
 /**
  * A progress bar that shows a weapon's crafting pattern progress.
  */
@@ -16,11 +17,18 @@ export function WeaponDeepsightInfo({ item }: { item: DimItem }) {
   return (
     <div className={styles.deepsightProgress}>
       {relevantObjectives && relevantObjectives.length > 0 && (
-        <div className={styles.deepsightProgressSection}>
-          {relevantObjectives.map((objective) => (
-            <Objective key={objective.objectiveHash} objective={objective} showHidden />
-          ))}
-        </div>
+        <>
+          {isHarmonizable(item) ? (
+            <DeepsightHarmonizerIcon item={item} />
+          ) : (
+            <div className="objective-checkbox" />
+          )}
+          <div className={styles.deepsightProgressBar}>
+            {relevantObjectives.map((objective) => (
+              <Objective key={objective.objectiveHash} objective={objective} showHidden />
+            ))}
+          </div>
+        </>
       )}
     </div>
   );

src/app/main.scss

@@ -289,6 +289,15 @@ select {
   }
 }
 
+code {
+  position: relative;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+  padding: 0 4px;
+  bottom: 1px;
+}
+
 .horizontal-swipable {
   touch-action: pan-y;
 }

src/app/progress/Objective.tsx

@@ -5,6 +5,7 @@ import {
   getValueStyle,
   isBooleanObjective,
   isFlawlessObjective,
+  isPatternObjective,
   isRoundsWonObjective,
 } from 'app/inventory/store/objectives';
 import { useDefinitions } from 'app/manifest/selectors';
@@ -81,6 +82,7 @@ export default function Objective({
   }
 
   const isBoolean = isBooleanObjective(objectiveDef, progress, completionValue);
+  const showPatternProgress = isPatternObjective(objectiveDef);
   const showAsCounter = isTrialsPassage && isRoundsWonObjective(objective.objectiveHash);
   const passageFlawed =
     isTrialsPassage && isFlawlessObjective(objective.objectiveHash) && !complete;
@@ -100,7 +102,7 @@ export default function Objective({
 
   return (
     <div className={classes}>
-      {!showAsCounter && !isDate && <div className="objective-checkbox" />}
+      {!showPatternProgress && !showAsCounter && !isDate && <div className="objective-checkbox" />}
       <div className="objective-progress">
         {!isBoolean && !isDate && (
           <div className="objective-progress-bar" style={progressBarStyle} />

src/app/search/d2-known-values.ts

@@ -196,6 +196,9 @@ export const pinnacleSources = [
 /** The premium Eververse currency */
 export const silverItemHash = 3147280338; // InventoryItem "Silver"
 
+// Deepsight harmonizer currency for extracting weapon patterns
+export const DEEPSIGHT_HARMONIZER = 2228452164;
+
 // For loadout mods obliterated from the defs, we instead return this def
 export const deprecatedPlaceholderArmorModHash = 3947616002; // InventoryItem "Deprecated Armor Mod"
 

src/locale/en.json

@@ -231,6 +231,7 @@
     "Event": "Shows items from which event in Destiny 2 they appeared in.",
     "ExtraPerk": "Shows random-rolled Legendary weapons with an additional selectable perk.",
     "Filter": "Filter",
+    "FilterWith": "Filter with:",
     "Focusable": "Shows items that can be focused at a vendor",
     "Foundry": "Shows items by which foundry created them.",
     "Glimmer": "Shows items that are consumables that are related to gaining glimmer.",