Initial aug page overhaul work

src/Augmentation/ui/InstalledAugmentations.tsx

@@ -5,29 +5,24 @@
  * It also contains 'configuration' buttons that allow you to change how the
  * Augs/SF's are displayed
  */
+import { Box, ListItemButton, Paper, Typography } from "@mui/material";
+import Button from "@mui/material/Button";
+import List from "@mui/material/List";
+import Tooltip from "@mui/material/Tooltip";
 import React, { useState } from "react";
-
-import { AugmentationAccordion } from "../../ui/React/AugmentationAccordion";
-import { Augmentations } from "../Augmentations";
-import { AugmentationNames } from "../data/AugmentationNames";
-
+import { OwnedAugmentationsOrderSetting } from "../../Settings/SettingEnums";
 import { Settings } from "../../Settings/Settings";
 import { use } from "../../ui/Context";
-import { OwnedAugmentationsOrderSetting } from "../../Settings/SettingEnums";
-import Button from "@mui/material/Button";
-import Tooltip from "@mui/material/Tooltip";
-import List from "@mui/material/List";
-import { ExpandLess, ExpandMore } from "@mui/icons-material";
-import { Box, Paper, ListItemButton, ListItemText, Typography, Collapse } from "@mui/material";
-import { CONSTANTS } from "../../Constants";
-import { formatNumber } from "../../utils/StringHelperFunctions";
+import { Augmentations } from "../Augmentations";
+import { AugmentationNames } from "../data/AugmentationNames";
 
 export function InstalledAugmentations(): React.ReactElement {
   const setRerender = useState(true)[1];
   const player = use.Player();
-
   const sourceAugs = player.augmentations.slice();
 
+  const [selectedAug, setSelectedAug] = useState(sourceAugs[0]);
+
   if (Settings.OwnedAugmentationsOrder === OwnedAugmentationsOrderSetting.Alphabetically) {
     sourceAugs.sort((aug1, aug2) => {
       return aug1.name.localeCompare(aug2.name);
@@ -49,59 +44,62 @@ export function InstalledAugmentations(): React.ReactElement {
   }
 
   return (
-    <>
-      <Tooltip title={"Sorts the Augmentations alphabetically in numeral order"}>
-        <Button onClick={sortInOrder}>Sort in Order</Button>
-      </Tooltip>
-      <Tooltip title={"Sorts the Augmentations based on when you acquired them (same as default)"}>
-        <Button sx={{ mx: 2 }} onClick={sortByAcquirementTime}>
-          Sort by Acquirement Time
-        </Button>
-      </Tooltip>
-      <List dense>
-        {player.entropy > 0 &&
-          (() => {
-            const [open, setOpen] = useState(false);
+    <Box sx={{ width: "100%" }}>
+      <Paper sx={{ p: 1 }}>
+        <Typography variant="h5">Installed Augmentations</Typography>
+        <Box sx={{ display: "grid", gridTemplateColumns: "1fr 1fr" }}>
+          <Tooltip title={"Sorts the Augmentations alphabetically in numeral order"}>
+            <Button sx={{ width: "100%" }} onClick={sortInOrder}>
+              Sort in Order
+            </Button>
+          </Tooltip>
+          <Tooltip title={"Sorts the Augmentations based on when you acquired them (same as default)"}>
+            <Button sx={{ width: "100%" }} onClick={sortByAcquirementTime}>
+              Sort by Time of Acquirement
+            </Button>
+          </Tooltip>
+        </Box>
+      </Paper>
+      {sourceAugs.length > 0 ? (
+        <Paper sx={{ display: "grid", gridTemplateColumns: "1fr 3fr" }}>
+          <Box>
+            <List sx={{ maxHeight: 400, overflowY: "scroll", borderRight: `1px solid ${Settings.theme.welllight}` }}>
+              {sourceAugs
+                .filter((aug) => aug.name !== AugmentationNames.NeuroFluxGovernor)
+                .map((k, i) => (
+                  <ListItemButton key={i + 1} onClick={() => setSelectedAug(k)} selected={selectedAug === k}>
+                    <Typography>{k.name}</Typography>
+                  </ListItemButton>
+                ))}
+            </List>
+          </Box>
+          <Box sx={{ m: 1 }}>
+            <Typography variant="h6" sx={{ display: "flex", alignItems: "center", flexWrap: "wrap" }}>
+              {selectedAug.name}
+            </Typography>
+            <Typography sx={{ maxHeight: 305, overflowY: "scroll" }}>
+              {(() => {
+                const aug = Augmentations[selectedAug.name];
 
-            return (
-              <Box component={Paper}>
-                <ListItemButton onClick={() => setOpen((old) => !old)}>
-                  <ListItemText
-                    primary={
-                      <Typography color={Settings.theme.hp} style={{ whiteSpace: "pre-wrap" }}>
-                        Entropy Virus - Level {player.entropy}
-                      </Typography>
-                    }
-                  />
-                  {open ? (
-                    <ExpandLess sx={{ color: Settings.theme.hp }} />
-                  ) : (
-                    <ExpandMore sx={{ color: Settings.theme.hp }} />
-                  )}
-                </ListItemButton>
-                <Collapse in={open} unmountOnExit>
-                  <Box m={4}>
-                    <Typography color={Settings.theme.hp}>
-                      <b>All multipliers decreased by:</b>{" "}
-                      {formatNumber((1 - CONSTANTS.EntropyEffect ** player.entropy) * 100, 3)}% (multiplicative)
-                    </Typography>
-                  </Box>
-                </Collapse>
-              </Box>
-            );
-          })()}
-
-        {sourceAugs.map((e) => {
-          const aug = Augmentations[e.name];
-
-          let level = null;
-          if (e.name === AugmentationNames.NeuroFluxGovernor) {
-            level = e.level;
-          }
-
-          return <AugmentationAccordion key={aug.name} aug={aug} level={level} />;
-        })}
-      </List>
-    </>
+                const info = typeof aug.info === "string" ? <span>{aug.info}</span> : aug.info;
+                const tooltip = (
+                  <>
+                    {info}
+                    <br />
+                    <br />
+                    {aug.stats}
+                  </>
+                );
+                return tooltip;
+              })()}
+            </Typography>
+          </Box>
+        </Paper>
+      ) : (
+        <Paper sx={{ p: 1 }}>
+          <Typography>No Augmentations have been installed yet</Typography>
+        </Paper>
+      )}
+    </Box>
   );
 }