Overhaul PlayerMultipliers columns logic

src/Augmentation/ui/PlayerMultipliers.tsx

@@ -1,18 +1,22 @@
 /**
  * React component for displaying the player's multipliers on the Augmentation UI page
  */
-import { Box, Typography, List, ListItemText, ListItem, Paper } from "@mui/material";
+import { DoubleArrow } from "@mui/icons-material";
+import { List, ListItem, ListItemText, Paper, Typography } from "@mui/material";
 import * as React from "react";
 import { BitNodeMultipliers } from "../../BitNode/BitNodeMultipliers";
 import { Player } from "../../Player";
+import { Settings } from "../../Settings/Settings";
+import { SourceFileFlags } from "../../SourceFile/SourceFileFlags";
 import { numeralWrapper } from "../../ui/numeralFormat";
 import { Augmentations } from "../Augmentations";
-import { DoubleArrow } from "@mui/icons-material";
-import { SourceFileFlags } from "../../SourceFile/SourceFileFlags";
-import { Settings } from "../../Settings/Settings";
 
-function calculateAugmentedStats(): any {
-  const augP: any = {};
+interface IAugmentedStats {
+  [index: string]: number;
+}
+
+function calculateAugmentedStats(): IAugmentedStats {
+  const augP: IAugmentedStats = {};
   for (const aug of Player.queuedAugmentations) {
     const augObj = Augmentations[aug.name];
     for (const mult of Object.keys(augObj.mults)) {
@@ -23,13 +27,13 @@ function calculateAugmentedStats(): any {
   return augP;
 }
 
-interface BitNodeModifiedStatsProps {
+interface IBitNodeModifiedStatsProps {
   base: number;
   mult: number;
   color: string;
 }
 
-function BitNodeModifiedStats(props: BitNodeModifiedStatsProps): React.ReactElement {
+function BitNodeModifiedStats(props: IBitNodeModifiedStatsProps): React.ReactElement {
   if (props.mult === 1 || SourceFileFlags[5] === 0)
     return <Typography color={props.color}>{numeralWrapper.formatPercentage(props.base)}</Typography>;
 
@@ -41,19 +45,27 @@ function BitNodeModifiedStats(props: BitNodeModifiedStatsProps): React.ReactElem
   );
 }
 
-interface MultListProps {
-  rows: (string | number)[][];
-  color: string;
+type MultiplierListItemData = [
+  multiplier: string,
+  currentValue: number,
+  augmentedValue: number,
+  bitNodeMultiplier: number,
+  color: string,
+];
+
+interface IMultiplierListProps {
+  rows: MultiplierListItemData[];
   noMargin?: boolean;
 }
 
-function MultiplierList({ rows, color, noMargin = false }: MultListProps): React.ReactElement {
+function MultiplierList({ rows, noMargin = false }: IMultiplierListProps): React.ReactElement {
   const listItems = rows
     .map((data) => {
-      const mult = data[0] as string,
-        value = data[1] as number,
-        improved = data[2] as number | null,
-        bnMult = data[3] as number;
+      const mult = data[0],
+        value = data[1],
+        improved = data[2],
+        bnMult = data[3],
+        color = data[4];
 
       if (improved) {
         return (
@@ -94,59 +106,12 @@ function MultiplierList({ rows, color, noMargin = false }: MultListProps): React
 export function PlayerMultipliers(): React.ReactElement {
   const mults = calculateAugmentedStats();
 
-  function BladeburnerMults(): React.ReactElement {
-    if (!Player.canAccessBladeburner()) return <></>;
-    return (
-      <>
-        <MultiplierList
-          rows={[
-            [
-              "Bladeburner Success Chance",
-              Player.bladeburner_success_chance_mult,
-              Player.bladeburner_success_chance_mult * mults.bladeburner_success_chance_mult,
-              1,
-            ],
-            [
-              "Bladeburner Max Stamina",
-              Player.bladeburner_max_stamina_mult,
-              Player.bladeburner_max_stamina_mult * mults.bladeburner_max_stamina_mult,
-              1,
-            ],
-            [
-              "Bladeburner Stamina Gain",
-              Player.bladeburner_stamina_gain_mult,
-              Player.bladeburner_stamina_gain_mult * mults.bladeburner_stamina_gain_mult,
-              1,
-            ],
-            [
-              "Bladeburner Field Analysis",
-              Player.bladeburner_analysis_mult,
-              Player.bladeburner_analysis_mult * mults.bladeburner_analysis_mult,
-              1,
-            ],
-          ]}
-          color={Settings.theme.primary}
-        />
-        <br />
-      </>
-    );
-  }
-
-  return (
-    <Paper sx={{ p: 1, maxHeight: 400, overflowY: "scroll", display: "grid", gridTemplateColumns: "repeat(2, 1fr)" }}>
-      <Box>
-        <MultiplierList
-          rows={[
+  const leftColData: MultiplierListItemData[] = [
+    ...[
       ["Hacking Chance ", Player.hacking_chance_mult, Player.hacking_chance_mult * mults.hacking_chance_mult, 1],
       ["Hacking Speed ", Player.hacking_speed_mult, Player.hacking_speed_mult * mults.hacking_speed_mult, 1],
       ["Hacking Money ", Player.hacking_money_mult, Player.hacking_money_mult * mults.hacking_money_mult, 1],
       ["Hacking Growth ", Player.hacking_grow_mult, Player.hacking_grow_mult * mults.hacking_grow_mult, 1],
-          ]}
-          color={Settings.theme.hack}
-        />
-
-        <MultiplierList
-          rows={[
       [
         "Hacking Level ",
         Player.hacking_mult,
@@ -159,12 +124,8 @@ export function PlayerMultipliers(): React.ReactElement {
         Player.hacking_exp_mult * mults.hacking_exp_mult,
         BitNodeMultipliers.HackExpGain,
       ],
-          ]}
-          color={Settings.theme.hack}
-        />
-
-        <MultiplierList
-          rows={[
+    ].map((data): MultiplierListItemData => (data as any).concat([Settings.theme.hack])),
+    ...[
       [
         "Strength Level ",
         Player.strength_mult,
@@ -172,12 +133,6 @@ export function PlayerMultipliers(): React.ReactElement {
         BitNodeMultipliers.StrengthLevelMultiplier,
       ],
       ["Strength Experience ", Player.strength_exp_mult, Player.strength_exp_mult * mults.strength_exp_mult, 1],
-          ]}
-          color={Settings.theme.combat}
-        />
-
-        <MultiplierList
-          rows={[
       [
         "Defense Level ",
         Player.defense_mult,
@@ -185,30 +140,13 @@ export function PlayerMultipliers(): React.ReactElement {
         BitNodeMultipliers.DefenseLevelMultiplier,
       ],
       ["Defense Experience ", Player.defense_exp_mult, Player.defense_exp_mult * mults.defense_exp_mult, 1],
-          ]}
-          color={Settings.theme.combat}
-        />
-
-        <MultiplierList
-          rows={[
       [
         "Dexterity Level ",
         Player.dexterity_mult,
         Player.dexterity_mult * mults.dexterity_mult,
         BitNodeMultipliers.DexterityLevelMultiplier,
       ],
-            [
-              "Dexterity Experience ",
-              Player.dexterity_exp_mult,
-              Player.dexterity_exp_mult * mults.dexterity_exp_mult,
-              1,
-            ],
-          ]}
-          color={Settings.theme.combat}
-        />
-
-        <MultiplierList
-          rows={[
+      ["Dexterity Experience ", Player.dexterity_exp_mult, Player.dexterity_exp_mult * mults.dexterity_exp_mult, 1],
       [
         "Agility Level ",
         Player.agility_mult,
@@ -216,27 +154,24 @@ export function PlayerMultipliers(): React.ReactElement {
         BitNodeMultipliers.AgilityLevelMultiplier,
       ],
       ["Agility Experience ", Player.agility_exp_mult, Player.agility_exp_mult * mults.agility_exp_mult, 1],
-          ]}
-          color={Settings.theme.combat}
-        />
-
-        <MultiplierList
-          rows={[
+    ].map((data): MultiplierListItemData => (data as any).concat([Settings.theme.combat])),
     [
       "Charisma Level ",
       Player.charisma_mult,
       Player.charisma_mult * mults.charisma_mult,
       BitNodeMultipliers.CharismaLevelMultiplier,
+      Settings.theme.cha,
     ],
-            ["Charisma Experience ", Player.charisma_exp_mult, Player.charisma_exp_mult * mults.charisma_exp_mult, 1],
-          ]}
-          color={Settings.theme.cha}
-        />
-      </Box>
-
-      <Box>
-        <MultiplierList
-          rows={[
+    [
+      "Charisma Experience ",
+      Player.charisma_exp_mult,
+      Player.charisma_exp_mult * mults.charisma_exp_mult,
+      1,
+      Settings.theme.cha,
+    ],
+  ];
+  const rightColData: MultiplierListItemData[] = [
+    ...[
       [
         "Hacknet Node production ",
         Player.hacknet_node_money_mult,
@@ -267,12 +202,6 @@ export function PlayerMultipliers(): React.ReactElement {
         Player.hacknet_node_level_cost_mult * mults.hacknet_node_level_cost_mult,
         1,
       ],
-          ]}
-          color={Settings.theme.primary}
-        />
-
-        <MultiplierList
-          rows={[
       ["Company reputation gain ", Player.company_rep_mult, Player.company_rep_mult * mults.company_rep_mult, 1],
       [
         "Faction reputation gain ",
@@ -280,31 +209,76 @@ export function PlayerMultipliers(): React.ReactElement {
         Player.faction_rep_mult * mults.faction_rep_mult,
         BitNodeMultipliers.FactionWorkRepGain,
       ],
+    ].map((data): MultiplierListItemData => (data as any).concat([Settings.theme.primary])),
     [
       "Salary ",
       Player.work_money_mult,
       Player.work_money_mult * mults.work_money_mult,
       BitNodeMultipliers.CompanyWorkMoney,
+      Settings.theme.money,
+    ],
+    [
+      "Crime success ",
+      Player.crime_success_mult,
+      Player.crime_success_mult * mults.crime_success_mult,
+      1,
+      Settings.theme.combat,
     ],
-          ]}
-          color={Settings.theme.primary}
-        />
-
-        <MultiplierList
-          rows={[
-            ["Crime success ", Player.crime_success_mult, Player.crime_success_mult * mults.crime_success_mult, 1],
     [
       "Crime money ",
       Player.crime_money_mult,
       Player.crime_money_mult * mults.crime_money_mult,
       BitNodeMultipliers.CrimeMoney,
+      Settings.theme.money,
     ],
-          ]}
-          color={Settings.theme.combat}
-        />
+  ];
 
-        <BladeburnerMults />
-      </Box>
+  if (Player.canAccessBladeburner()) {
+    rightColData.push(
+      ...[
+        [
+          "Bladeburner Success Chance",
+          Player.bladeburner_success_chance_mult,
+          Player.bladeburner_success_chance_mult * mults.bladeburner_success_chance_mult,
+          1,
+        ],
+        [
+          "Bladeburner Max Stamina",
+          Player.bladeburner_max_stamina_mult,
+          Player.bladeburner_max_stamina_mult * mults.bladeburner_max_stamina_mult,
+          1,
+        ],
+        [
+          "Bladeburner Stamina Gain",
+          Player.bladeburner_stamina_gain_mult,
+          Player.bladeburner_stamina_gain_mult * mults.bladeburner_stamina_gain_mult,
+          1,
+        ],
+        [
+          "Bladeburner Field Analysis",
+          Player.bladeburner_analysis_mult,
+          Player.bladeburner_analysis_mult * mults.bladeburner_analysis_mult,
+          1,
+        ],
+      ].map((data): MultiplierListItemData => (data as any).concat([Settings.theme.primary])),
+    );
+  }
+
+  const hasLeftImprovements = +!!(leftColData.filter((item) => item[2] !== 0).length > 0),
+    hasRightImprovements = +!!(rightColData.filter((item) => item[2] !== 0).length > 0);
+
+  return (
+    <Paper
+      sx={{
+        p: 1,
+        maxHeight: 400,
+        overflowY: "scroll",
+        display: "grid",
+        gridTemplateColumns: `repeat(${hasLeftImprovements + hasRightImprovements}, 1fr)`,
+      }}
+    >
+      <MultiplierList rows={leftColData} />
+      <MultiplierList rows={rightColData} />
     </Paper>
   );
 }