Merge pull request #10828 from DestinyItemManager/stat-bar-width-fix

Item Stat Bars: fix length capping logic
DestinyItemManager · Dec 6, 2024 · dba3339 · dba3339
2 parents ad312a2 + 6a132b0
commit dba3339
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 20 deletions.
diff --git a/src/app/item-popup/ItemStat.m.scss b/src/app/item-popup/ItemStat.m.scss
@@ -54,6 +54,7 @@
 }
 
 .statBarSegment {
+  order: 1;
   display: block;
   height: 100%;
   float: left;
@@ -65,12 +66,13 @@
 
   &.negative {
     background-color: #7a2727;
-    order: 1; // Push negative segments to the right side of the bar
+    order: 5; // Push negative segments to the right side of the bar
   }
 
   // An assumption: never more than 4 part effects in a single stat?
   // 3 have been observed on weapons with a barrel + mag + grip.
   &.parts {
+    order: 2;
     opacity: 0.88;
     & + &.parts {
       opacity: 0.76;
@@ -84,6 +86,7 @@
   }
 
   &.mod {
+    order: 3;
     background-color: $stat-modded;
     & + &.mod {
       opacity: 0.8;
@@ -95,6 +98,7 @@
 
   // Colors for the stat bars
   &.masterwork {
+    order: 4;
     background-color: $stat-masterworked;
   }
 }

diff --git a/src/app/item-popup/ItemStat.tsx b/src/app/item-popup/ItemStat.tsx
@@ -214,25 +214,29 @@ function StatBar({ segments, stat }: { segments: StatSegments; stat: DimStat })
         className={styles.barContainer}
         tooltip={<StatBarTooltip segments={segments} stat={stat} />}
       >
-        {segments.map(([val, statType], index) => {
-          let segmentLength = Math.abs(val) / stat.maximumValue;
-          if (val < 0) {
-            segmentLength = Math.min(segmentLength, remainingEmpty);
-            remainingEmpty -= segmentLength;
-          } else {
-            segmentLength = Math.min(segmentLength, remainingFilled);
-            remainingFilled -= segmentLength;
-          }
-          return (
-            <div
-              key={index}
-              className={clsx(styles.statBarSegment, statStyles[statType][0], {
-                [styles.negative]: val < 0 && statType !== 'masterwork',
-              })}
-              style={{ width: percent(segmentLength) }}
-            />
-          );
-        })}
+        {segments
+          // Process base stats last, letting them be the most likely to hit cap and lose display length
+          .toSorted(([, statType]) => (statType === 'base' ? 1 : 0))
+          .map(([val, statType], index) => {
+            let segmentLength = Math.abs(val);
+            if (val < 0) {
+              segmentLength = Math.min(segmentLength, remainingEmpty);
+              remainingEmpty -= segmentLength;
+            } else {
+              segmentLength = Math.min(segmentLength, remainingFilled);
+              remainingFilled -= segmentLength;
+            }
+            return (
+              <div
+                key={index}
+                className={clsx(
+                  styles.statBarSegment,
+                  val < 0 && statType !== 'masterwork' ? styles.negative : statStyles[statType][0],
+                )}
+                style={{ width: percent(segmentLength / stat.maximumValue) }}
+              />
+            );
+          })}
       </PressTip>
     </div>
   );