Merge pull request #10331 from robojumper/stat-constraints-missing-max

Fix max stat constraints sometimes being not shown in loadout parameters

Author: bhollis

src/app/loadout/ingame/EditInGameLoadout.tsx

@@ -107,7 +107,7 @@ export default function EditInGameLoadout({
             colorIcon,
             icon,
             index: slot,
-            characterId: characterId!,
+            characterId,
             items: [],
             id: `ingame-${characterId}-${slot}`,
           }),

src/app/loadout/loadout-ui/LoadoutParametersDisplay.tsx

@@ -4,7 +4,7 @@ import { PressTip } from 'app/dim-ui/PressTip';
 import { t } from 'app/i18next-t';
 import ExoticArmorChoice, { getLockedExotic } from 'app/loadout-builder/filter/ExoticArmorChoice';
 import { useD2Definitions } from 'app/manifest/selectors';
-import { AppIcon, equalsIcon, greaterThanIcon, searchIcon } from 'app/shell/icons';
+import { AppIcon, equalsIcon, greaterThanIcon, lessThanIcon, searchIcon } from 'app/shell/icons';
 import clsx from 'clsx';
 import { includesRuntimeStatMods } from '../stats';
 import styles from './LoadoutParametersDisplay.m.scss';
@@ -77,41 +77,63 @@ export default function LoadoutParametersDisplay({ params }: { params: LoadoutPa
 }
 
 export function StatConstraintRange({
-  statConstraint: s,
+  statConstraint,
   className,
 }: {
   statConstraint: StatConstraint;
   className?: string;
 }) {
   className = clsx(className, styles.constraintRange);
-  return s.minTier !== undefined && s.minTier !== 0 ? (
-    <span className={className}>
-      {(s.maxTier === 10 || s.maxTier === undefined) && s.minTier !== 10 ? (
-        <>
-          <AppIcon icon={greaterThanIcon} />
-          {t('LoadoutBuilder.TierNumber', {
-            tier: s.minTier,
-          })}
-        </>
-      ) : s.maxTier !== undefined && s.maxTier !== s.minTier ? (
-        `${t('LoadoutBuilder.TierNumber', {
-          tier: s.minTier,
-        })}-${s.maxTier}`
-      ) : (
-        <>
-          <AppIcon icon={equalsIcon} />
-          {t('LoadoutBuilder.TierNumber', {
-            tier: s.minTier,
-          })}
-        </>
-      )}
-    </span>
-  ) : (
+
+  return (
     <span className={className}>
-      <AppIcon icon={greaterThanIcon} />
-      {t('LoadoutBuilder.TierNumber', {
-        tier: 0,
-      })}
+      <StatConstraintRangeExpression statConstraint={statConstraint} />
     </span>
   );
 }
+
+function StatConstraintRangeExpression({ statConstraint }: { statConstraint: StatConstraint }) {
+  const min = statConstraint.minTier ?? 0;
+  const max = statConstraint.maxTier ?? 10;
+
+  if (min === max) {
+    // =Tmin
+    return (
+      <>
+        <AppIcon icon={equalsIcon} />
+        {t('LoadoutBuilder.TierNumber', {
+          tier: min,
+        })}
+      </>
+    );
+  } else if (max === 10) {
+    // >= Tmin
+    return (
+      <>
+        <AppIcon icon={greaterThanIcon} />
+        {t('LoadoutBuilder.TierNumber', {
+          tier: min,
+        })}
+      </>
+    );
+  } else if (min === 0) {
+    // <= Tmax
+    return (
+      <>
+        <AppIcon icon={lessThanIcon} />
+        {t('LoadoutBuilder.TierNumber', {
+          tier: max,
+        })}
+      </>
+    );
+  } else {
+    // Tmin-Tmax
+    return (
+      <>
+        {`${t('LoadoutBuilder.TierNumber', {
+          tier: min,
+        })}-${max}`}
+      </>
+    );
+  }
+}

src/app/shell/icons/Library.js

@@ -91,6 +91,7 @@ export const faDiscord = 'fab fa-discord';
 export const faGithub = 'fab fa-github';
 export const saveIcon = 'fas fa-save';
 export const greaterThanIcon = 'fas fa-greater-than-equal';
+export const lessThanIcon = 'fas fa-less-than-equal';
 export const equalsIcon = 'fas fa-equals';
 export const stackIcon = 'fas fa-layer-group';
 export const slashIcon = 'fas fa-slash';