From 4254cc28078d74138132ac1465466ffbce94c104 Mon Sep 17 00:00:00 2001
From: Olivier Gagnon <oli.gagnon4418@gmail.com>
Date: Sat, 25 Sep 2021 02:42:21 -0400
Subject: [PATCH] small improvements to augmentation page.

---
 src/Augmentation/ui/AugmentationsRoot.tsx |  75 ++++----
 src/Augmentation/ui/PlayerMultipliers.tsx | 204 +++++++++++-----------
 src/Augmentation/ui/SourceFiles.tsx       |  11 +-
 3 files changed, 151 insertions(+), 139 deletions(-)

diff --git a/src/Augmentation/ui/AugmentationsRoot.tsx b/src/Augmentation/ui/AugmentationsRoot.tsx
index f164d18e4..656e5a5b0 100644
--- a/src/Augmentation/ui/AugmentationsRoot.tsx
+++ b/src/Augmentation/ui/AugmentationsRoot.tsx
@@ -14,6 +14,7 @@ import { canGetBonus } from "../../ExportBonus";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import Tooltip from "@mui/material/Tooltip";
+import Box from "@mui/material/Box";
 
 interface IProps {
   exportGameFn: () => void;
@@ -36,40 +37,50 @@ export function AugmentationsRoot(props: IProps): React.ReactElement {
   return (
     <>
       <Typography variant="h4">Augmentations</Typography>
-      <Typography>
-        Below is a list of all Augmentations you have purchased but not yet installed. Click the button below to install
-        them.
+      <Box mx={2}>
+        <Typography>
+          Below is a list of all Augmentations you have purchased but not yet installed. Click the button below to
+          install them.
+        </Typography>
+        <Typography>WARNING: Installing your Augmentations resets most of your progress, including:</Typography>
+        <br />
+        <Typography>- Stats/Skill levels and Experience</Typography>
+        <Typography>- Money</Typography>
+        <Typography>- Scripts on every computer but your home computer</Typography>
+        <Typography>- Purchased servers</Typography>
+        <Typography>- Hacknet Nodes</Typography>
+        <Typography>- Faction/Company reputation</Typography>
+        <Typography>- Stocks</Typography>
+        <br />
+        <Typography>
+          Installing Augmentations lets you start over with the perks and benefits granted by all of the Augmentations
+          you have ever installed. Also, you will keep any scripts and RAM/Core upgrades on your home computer (but you
+          will lose all programs besides NUKE.exe)
+        </Typography>
+      </Box>
+      <Typography variant="h4" color="primary">
+        Purchased Augmentations
       </Typography>
-      <Typography>WARNING: Installing your Augmentations resets most of your progress, including:</Typography>
-      <br />
-      <Typography>- Stats/Skill levels and Experience</Typography>
-      <Typography>- Money</Typography>
-      <Typography>- Scripts on every computer but your home computer</Typography>
-      <Typography>- Purchased servers</Typography>
-      <Typography>- Hacknet Nodes</Typography>
-      <Typography>- Faction/Company reputation</Typography>
-      <Typography>- Stocks</Typography>
-      <br />
-      <Typography>
-        Installing Augmentations lets you start over with the perks and benefits granted by all of the Augmentations you
-        have ever installed. Also, you will keep any scripts and RAM/Core upgrades on your home computer (but you will
-        lose all programs besides NUKE.exe)
-      </Typography>
-      <Tooltip title={"'I never asked for this'"}>
-        <Button onClick={props.installAugmentationsFn}>
-          <Typography>Install Augmentations</Typography>
-        </Button>
-      </Tooltip>
-      <Tooltip title={"It's always a good idea to backup/export your save!"}>
-        <Button sx={{ mx: 2 }} onClick={doExport}>
-          <Typography color="error">Backup Save {exportBonusStr()}</Typography>
-        </Button>
-      </Tooltip>
-      <PurchasedAugmentations />
+      <Box mx={2}>
+        <Tooltip title={"'I never asked for this'"}>
+          <Button onClick={props.installAugmentationsFn}>
+            <Typography>Install Augmentations</Typography>
+          </Button>
+        </Tooltip>
+        <Tooltip title={"It's always a good idea to backup/export your save!"}>
+          <Button sx={{ mx: 2 }} onClick={doExport}>
+            <Typography color="error">Backup Save {exportBonusStr()}</Typography>
+          </Button>
+        </Tooltip>
+        <PurchasedAugmentations />
+      </Box>
       <Typography variant="h4">Installed Augmentations</Typography>
-      <Typography>List of all Augmentations that have been installed. You have gained the effects of these.</Typography>
-      <InstalledAugmentations />
-      <br /> <br />
+      <Box mx={2}>
+        <Typography>
+          List of all Augmentations that have been installed. You have gained the effects of these.
+        </Typography>
+        <InstalledAugmentations />
+      </Box>
       <PlayerMultipliers />
       <SourceFiles />
     </>
diff --git a/src/Augmentation/ui/PlayerMultipliers.tsx b/src/Augmentation/ui/PlayerMultipliers.tsx
index ef4f31368..4321472d2 100644
--- a/src/Augmentation/ui/PlayerMultipliers.tsx
+++ b/src/Augmentation/ui/PlayerMultipliers.tsx
@@ -10,6 +10,7 @@ import { Table, TableCell } from "../../ui/React/Table";
 import TableBody from "@mui/material/TableBody";
 import TableRow from "@mui/material/TableRow";
 import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
 
 function calculateAugmentedStats(): any {
   const augP: any = {};
@@ -97,119 +98,116 @@ export function PlayerMultipliers(): React.ReactElement {
 
   return (
     <>
-      <p>
-        <strong>
-          <u>Multipliers:</u>
-        </strong>
-      </p>
-      <br />
-      <MultiplierTable
-        rows={[
-          ["Hacking Chance ", Player.hacking_chance_mult, Player.hacking_chance_mult * mults.hacking_chance_mult],
-          ["Hacking Speed ", Player.hacking_speed_mult, Player.hacking_speed_mult * mults.hacking_speed_mult],
-          ["Hacking Money ", Player.hacking_money_mult, Player.hacking_money_mult * mults.hacking_money_mult],
-          ["Hacking Growth ", Player.hacking_grow_mult, Player.hacking_grow_mult * mults.hacking_grow_mult],
-        ]}
-      />
-      <br />
+      <Typography variant="h4">Multipliers</Typography>
+      <Box mx={2}>
+        <MultiplierTable
+          rows={[
+            ["Hacking Chance ", Player.hacking_chance_mult, Player.hacking_chance_mult * mults.hacking_chance_mult],
+            ["Hacking Speed ", Player.hacking_speed_mult, Player.hacking_speed_mult * mults.hacking_speed_mult],
+            ["Hacking Money ", Player.hacking_money_mult, Player.hacking_money_mult * mults.hacking_money_mult],
+            ["Hacking Growth ", Player.hacking_grow_mult, Player.hacking_grow_mult * mults.hacking_grow_mult],
+          ]}
+        />
+        <br />
 
-      <MultiplierTable
-        rows={[
-          ["Hacking Level ", Player.hacking_mult, Player.hacking_mult * mults.hacking_mult],
-          ["Hacking Experience ", Player.hacking_exp_mult, Player.hacking_exp_mult * mults.hacking_exp_mult],
-        ]}
-      />
-      <br />
+        <MultiplierTable
+          rows={[
+            ["Hacking Level ", Player.hacking_mult, Player.hacking_mult * mults.hacking_mult],
+            ["Hacking Experience ", Player.hacking_exp_mult, Player.hacking_exp_mult * mults.hacking_exp_mult],
+          ]}
+        />
+        <br />
 
-      <MultiplierTable
-        rows={[
-          ["Strength Level ", Player.strength_mult, Player.strength_mult * mults.strength_mult],
-          ["Strength Experience ", Player.strength_exp_mult, Player.strength_exp_mult * mults.strength_exp_mult],
-        ]}
-      />
-      <br />
+        <MultiplierTable
+          rows={[
+            ["Strength Level ", Player.strength_mult, Player.strength_mult * mults.strength_mult],
+            ["Strength Experience ", Player.strength_exp_mult, Player.strength_exp_mult * mults.strength_exp_mult],
+          ]}
+        />
+        <br />
 
-      <MultiplierTable
-        rows={[
-          ["Defense Level ", Player.defense_mult, Player.defense_mult * mults.defense_mult],
-          ["Defense Experience ", Player.defense_exp_mult, Player.defense_exp_mult * mults.defense_exp_mult],
-        ]}
-      />
-      <br />
+        <MultiplierTable
+          rows={[
+            ["Defense Level ", Player.defense_mult, Player.defense_mult * mults.defense_mult],
+            ["Defense Experience ", Player.defense_exp_mult, Player.defense_exp_mult * mults.defense_exp_mult],
+          ]}
+        />
+        <br />
 
-      <MultiplierTable
-        rows={[
-          ["Dexterity Level ", Player.dexterity_mult, Player.dexterity_mult * mults.dexterity_mult],
-          ["Dexterity Experience ", Player.dexterity_exp_mult, Player.dexterity_exp_mult * mults.dexterity_exp_mult],
-        ]}
-      />
-      <br />
+        <MultiplierTable
+          rows={[
+            ["Dexterity Level ", Player.dexterity_mult, Player.dexterity_mult * mults.dexterity_mult],
+            ["Dexterity Experience ", Player.dexterity_exp_mult, Player.dexterity_exp_mult * mults.dexterity_exp_mult],
+          ]}
+        />
+        <br />
 
-      <MultiplierTable
-        rows={[
-          ["Agility Level ", Player.agility_mult, Player.agility_mult * mults.agility_mult],
-          ["Agility Experience ", Player.agility_exp_mult, Player.agility_exp_mult * mults.agility_exp_mult],
-        ]}
-      />
-      <br />
+        <MultiplierTable
+          rows={[
+            ["Agility Level ", Player.agility_mult, Player.agility_mult * mults.agility_mult],
+            ["Agility Experience ", Player.agility_exp_mult, Player.agility_exp_mult * mults.agility_exp_mult],
+          ]}
+        />
+        <br />
 
-      <MultiplierTable
-        rows={[
-          ["Charisma Level ", Player.charisma_mult, Player.charisma_mult * mults.charisma_mult],
-          ["Charisma Experience ", Player.charisma_exp_mult, Player.charisma_exp_mult * mults.charisma_exp_mult],
-        ]}
-      />
-      <br />
+        <MultiplierTable
+          rows={[
+            ["Charisma Level ", Player.charisma_mult, Player.charisma_mult * mults.charisma_mult],
+            ["Charisma Experience ", Player.charisma_exp_mult, Player.charisma_exp_mult * mults.charisma_exp_mult],
+          ]}
+        />
+        <br />
 
-      <MultiplierTable
-        rows={[
-          [
-            "Hacknet Node production ",
-            Player.hacknet_node_money_mult,
-            Player.hacknet_node_money_mult * mults.hacknet_node_money_mult,
-          ],
-          [
-            "Hacknet Node purchase cost ",
-            Player.hacknet_node_purchase_cost_mult,
-            Player.hacknet_node_purchase_cost_mult * mults.hacknet_node_purchase_cost_mult,
-          ],
-          [
-            "Hacknet Node RAM upgrade cost ",
-            Player.hacknet_node_ram_cost_mult,
-            Player.hacknet_node_ram_cost_mult * mults.hacknet_node_ram_cost_mult,
-          ],
-          [
-            "Hacknet Node Core purchase cost ",
-            Player.hacknet_node_core_cost_mult,
-            Player.hacknet_node_core_cost_mult * mults.hacknet_node_core_cost_mult,
-          ],
-          [
-            "Hacknet Node level upgrade cost ",
-            Player.hacknet_node_level_cost_mult,
-            Player.hacknet_node_level_cost_mult * mults.hacknet_node_level_cost_mult,
-          ],
-        ]}
-      />
-      <br />
+        <MultiplierTable
+          rows={[
+            [
+              "Hacknet Node production ",
+              Player.hacknet_node_money_mult,
+              Player.hacknet_node_money_mult * mults.hacknet_node_money_mult,
+            ],
+            [
+              "Hacknet Node purchase cost ",
+              Player.hacknet_node_purchase_cost_mult,
+              Player.hacknet_node_purchase_cost_mult * mults.hacknet_node_purchase_cost_mult,
+            ],
+            [
+              "Hacknet Node RAM upgrade cost ",
+              Player.hacknet_node_ram_cost_mult,
+              Player.hacknet_node_ram_cost_mult * mults.hacknet_node_ram_cost_mult,
+            ],
+            [
+              "Hacknet Node Core purchase cost ",
+              Player.hacknet_node_core_cost_mult,
+              Player.hacknet_node_core_cost_mult * mults.hacknet_node_core_cost_mult,
+            ],
+            [
+              "Hacknet Node level upgrade cost ",
+              Player.hacknet_node_level_cost_mult,
+              Player.hacknet_node_level_cost_mult * mults.hacknet_node_level_cost_mult,
+            ],
+          ]}
+        />
+        <br />
 
-      <MultiplierTable
-        rows={[
-          ["Company reputation gain ", Player.company_rep_mult, Player.company_rep_mult * mults.company_rep_mult],
-          ["Faction reputation gain ", Player.faction_rep_mult, Player.faction_rep_mult * mults.faction_rep_mult],
-          ["Salary ", Player.work_money_mult, Player.work_money_mult * mults.work_money_mult],
-        ]}
-      />
-      <br />
+        <MultiplierTable
+          rows={[
+            ["Company reputation gain ", Player.company_rep_mult, Player.company_rep_mult * mults.company_rep_mult],
+            ["Faction reputation gain ", Player.faction_rep_mult, Player.faction_rep_mult * mults.faction_rep_mult],
+            ["Salary ", Player.work_money_mult, Player.work_money_mult * mults.work_money_mult],
+          ]}
+        />
+        <br />
 
-      <MultiplierTable
-        rows={[
-          ["Crime success ", Player.crime_success_mult, Player.crime_success_mult * mults.crime_success_mult],
-          ["Crime money ", Player.crime_money_mult, Player.crime_money_mult * mults.crime_money_mult],
-        ]}
-      />
-      <br />
+        <MultiplierTable
+          rows={[
+            ["Crime success ", Player.crime_success_mult, Player.crime_success_mult * mults.crime_success_mult],
+            ["Crime money ", Player.crime_money_mult, Player.crime_money_mult * mults.crime_money_mult],
+          ]}
+        />
+        <br />
 
-      <BladeburnerMults />
+        <BladeburnerMults />
+      </Box>
     </>
   );
 }
diff --git a/src/Augmentation/ui/SourceFiles.tsx b/src/Augmentation/ui/SourceFiles.tsx
index e217be25e..1293f2298 100644
--- a/src/Augmentation/ui/SourceFiles.tsx
+++ b/src/Augmentation/ui/SourceFiles.tsx
@@ -4,15 +4,18 @@ import { OwnedSourceFiles } from "./OwnedSourceFiles";
 import List from "@mui/material/List";
 
 import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
 
 export function SourceFiles(): React.ReactElement {
   return (
     <>
       <Typography variant="h4">Source Files</Typography>
-      <List dense>
-        <SourceFileMinus1 />
-        <OwnedSourceFiles />
-      </List>
+      <Box mx={2}>
+        <List dense>
+          <SourceFileMinus1 />
+          <OwnedSourceFiles />
+        </List>
+      </Box>
     </>
   );
 }