fix aug page

src/Augmentation/AugmentationHelpers.jsx

@@ -211,7 +211,7 @@ function initAugmentations() {
     name: AugmentationNames.Targeting3,
     moneyCost: 1.15e8,
     repCost: 2.75e4,
-    info: "The latest version of the 'Augmented Targeting' implant adds the ability to " + "lock-on and track threats.",
+    info: "The latest version of the 'Augmented Targeting' implant adds the ability to lock-on and track threats.",
     prereqs: [AugmentationNames.Targeting2],
     dexterity_mult: 1.3,
   });

src/Faction/ui/AugmentationsPage.tsx

@@ -36,7 +36,6 @@ export function AugmentationsPage(props: IProps): React.ReactElement {
   }
 
   function getAugs(): string[] {
-    console.log(props.faction.augmentations);
     if (isPlayersGang) {
       const augs: string[] = [];
       for (const augName in Augmentations) {

src/Faction/ui/Info.tsx

@@ -44,13 +44,15 @@ export function Info(props: IProps): React.ReactElement {
       <Box display="flex">
         <Tooltip
           title={
-            <Typography>
-              You will have {Favor(props.faction.favor + favorGain)} faction favor after installing an Augmentation.
+            <>
+              <Typography>
+                You will have {Favor(props.faction.favor + favorGain)} faction favor after installing an Augmentation.
+              </Typography>
               <MathComponent tex={String.raw`\large{r = \text{total faction reputation}}`} />
               <MathComponent
                 tex={String.raw`\large{favor=\left\lfloor\log_{1.02}\left(\frac{r+25000}{25500}\right)\right\rfloor}`}
               />
-            </Typography>
+            </>
           }
         >
           <Typography>Reputation: {Reputation(props.faction.playerReputation)}</Typography>
@@ -62,13 +64,15 @@ export function Info(props: IProps): React.ReactElement {
       <Box display="flex">
         <Tooltip
           title={
-            <Typography>
-              Faction favor increases the rate at which you earn reputation for this faction by 1% per favor. Faction
-              favor is gained whenever you install an Augmentation. The amount of favor you gain depends on the total
-              amount of reputation you earned with this faction. Across all resets.
+            <>
+              <Typography>
+                Faction favor increases the rate at which you earn reputation for this faction by 1% per favor. Faction
+                favor is gained whenever you install an Augmentation. The amount of favor you gain depends on the total
+                amount of reputation you earned with this faction. Across all resets.
+              </Typography>
               <MathComponent tex={String.raw`\large{r = reputation}`} />
               <MathComponent tex={String.raw`\large{\Delta r = \Delta r \times \frac{100+favor}{100}}`} />
-            </Typography>
+            </>
           }
         >
           <Typography>Faction Favor: {Favor(props.faction.favor)}</Typography>

src/Faction/ui/PurchaseableAugmentation.tsx

@@ -40,24 +40,29 @@ function Requirements(props: IReqProps): React.ReactElement {
   const aug = Augmentations[props.augName];
   if (!props.hasReq) {
     return (
-      <TableCell colSpan={2}>
-        <Typography color="error">Requires {aug.prereqs.map((aug) => AugFormat(aug))}</Typography>
+      <TableCell key={1} colSpan={2}>
+        <Typography color="error">
+          Requires{" "}
+          {aug.prereqs.map((aug, i) => (
+            <AugFormat key={i} name={aug} />
+          ))}
+        </Typography>
       </TableCell>
     );
   }
 
-  let color = !props.hasRep && !props.hasCost ? "error" : "primary";
+  let color = !props.hasRep || !props.hasCost ? "error" : "primary";
   return (
-    <>
-      <TableCell>
+    <React.Fragment key="f">
+      <TableCell key={1}>
         <Typography color={color}>
           <Money money={props.cost} player={props.p} />
         </Typography>
       </TableCell>
-      <TableCell>
+      <TableCell key={2}>
         <Typography color={color}>Requires {Reputation(props.rep)} faction reputation</Typography>
       </TableCell>
-    </>
+    </React.Fragment>
   );
 }
 
@@ -122,38 +127,10 @@ export function PurchaseableAugmentation(props: IProps): React.ReactElement {
   const repCost = getRepCost();
   const hasReq = hasPrereqs();
   const hasRep = hasReputation();
-  const hasCost = aug.baseCost !== 0 && props.p.money.lt(aug.baseCost * props.faction.getInfo().augmentationPriceMult);
+  const hasCost = aug.baseCost !== 0 && props.p.money.gt(aug.baseCost * props.faction.getInfo().augmentationPriceMult);
 
   // Determine UI properties
-  let disabled = false;
-  let status: JSX.Element | null = null;
-  let color: "primary" | "error" = "primary";
-  if (!hasReq) {
-    disabled = true;
-    status = <>LOCKED (Requires {aug.prereqs.map((aug) => AugFormat(aug))} as prerequisite)</>;
-    color = "error";
-  } else if (aug.name !== AugmentationNames.NeuroFluxGovernor && (aug.owned || owned())) {
-    disabled = true;
-  } else if (hasRep) {
-    status = (
-      <>
-        UNLOCKED (at {Reputation(repCost)} faction reputation) - <Money money={moneyCost} player={props.p} />
-      </>
-    );
-  } else {
-    disabled = true;
-    status = (
-      <>
-        LOCKED (Requires {Reputation(repCost)} faction reputation - <Money money={moneyCost} player={props.p} />)
-      </>
-    );
-    color = "error";
-  }
-
-  if (hasCost) {
-    disabled = true;
-    color = "error";
-  }
+  const color: "error" | "primary" = !hasReq || !hasRep || !hasCost ? "error" : "primary";
 
   // Determine button txt
   let btnTxt = aug.name;
@@ -162,16 +139,16 @@ export function PurchaseableAugmentation(props: IProps): React.ReactElement {
   }
 
   let tooltip = <></>;
-  if (typeof aug.info === "string")
+  if (typeof aug.info === "string") {
     tooltip = (
       <>
-        <span dangerouslySetInnerHTML={{ __html: aug.info }} />
+        <span>{aug.info}</span>
         <br />
         <br />
         {aug.stats}
       </>
     );
-  else
+  } else
     tooltip = (
       <>
         {aug.info}
@@ -182,7 +159,7 @@ export function PurchaseableAugmentation(props: IProps): React.ReactElement {
     );
 
   function handleClick(): void {
-    if (disabled) return;
+    if (color === "error") return;
     if (!Settings.SuppressBuyAugmentationConfirmation) {
       const popupId = "purchase-augmentation-popup";
       createPopup(popupId, PurchaseAugmentationPopup, {
@@ -201,15 +178,13 @@ export function PurchaseableAugmentation(props: IProps): React.ReactElement {
   return (
     <TableRow>
       {!props.owned && (
-        <TableCell>
-          {status && (
-            <Button onClick={handleClick} color={color}>
-              Buy
-            </Button>
-          )}
+        <TableCell key={0}>
+          <Button onClick={handleClick} color={color}>
+            Buy
+          </Button>
         </TableCell>
       )}
-      <TableCell>
+      <TableCell key={1}>
         <Box display="flex">
           <Tooltip
             title={<Typography>{tooltip}</Typography>}
@@ -225,6 +200,7 @@ export function PurchaseableAugmentation(props: IProps): React.ReactElement {
       </TableCell>
       {!props.owned && (
         <Requirements
+          key={2}
           augName={props.augName}
           p={props.p}
           cost={moneyCost}

src/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 
-import { TTheme as Theme } from "./ui/React/Theme";
+import { TTheme as Theme, colors, refreshTheme } from "./ui/React/Theme";
 import { LoadingScreen } from "./ui/LoadingScreen";
 import "./engineStyle";
 
@@ -11,3 +11,14 @@ ReactDOM.render(
   </Theme>,
   document.getElementById("mainmenu-container"),
 );
+
+// setTimeout(() => {
+//   colors.primary = "#fff";
+//   refreshTheme();
+//   ReactDOM.render(
+//     <Theme>
+//       <LoadingScreen />
+//     </Theme>,
+//     document.getElementById("mainmenu-container"),
+//   );
+// }, 5000);

src/ui/React/Augmentation.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-export function Augmentation(name: string): JSX.Element {
+export function Augmentation({ name }: { name: string }): JSX.Element {
   return (
     <span className={"samefont"} style={{ color: "white" }}>
       {name}

src/ui/React/Theme.tsx

@@ -25,7 +25,7 @@ declare module "@mui/material/styles" {
     };
   }
 }
-export const colors = {
+export let colors = {
   primarylight: "#0f0",
   primary: "#0c0",
   primarydark: "#090",
@@ -60,235 +60,241 @@ export const colors = {
   rep: "#faffdf",
 };
 
-export const theme = createTheme({
-  colors: {
-    hp: "#dd3434",
-    money: "#ffd700",
-    hack: "#adff2f",
-    combat: "#faffdf",
-    cha: "#a671d1",
-    int: "#6495ed",
-    rep: "#faffdf",
-  },
-  palette: {
-    primary: {
-      light: colors.primarylight,
-      main: colors.primary,
-      dark: colors.primarydark,
+export let theme: Theme;
+
+export function refreshTheme() {
+  theme = createTheme({
+    colors: {
+      hp: "#dd3434",
+      money: "#ffd700",
+      hack: "#adff2f",
+      combat: "#faffdf",
+      cha: "#a671d1",
+      int: "#6495ed",
+      rep: "#faffdf",
     },
-    secondary: {
-      light: colors.secondarylight,
-      main: colors.secondary,
-      dark: colors.secondarydark,
+    palette: {
+      primary: {
+        light: colors.primarylight,
+        main: colors.primary,
+        dark: colors.primarydark,
+      },
+      secondary: {
+        light: colors.secondarylight,
+        main: colors.secondary,
+        dark: colors.secondarydark,
+      },
+      error: {
+        light: colors.errorlight,
+        main: colors.error,
+        dark: colors.errordark,
+      },
+      info: {
+        light: colors.infolight,
+        main: colors.info,
+        dark: colors.infodark,
+      },
+      warning: {
+        light: colors.warninglight,
+        main: colors.warning,
+        dark: colors.warningdark,
+      },
+      background: {
+        default: colors.black,
+        paper: colors.well,
+      },
     },
-    error: {
-      light: colors.errorlight,
-      main: colors.error,
-      dark: colors.errordark,
+    typography: {
+      fontFamily: "monospace",
+      button: {
+        textTransform: "none",
+      },
     },
-    info: {
-      light: colors.infolight,
-      main: colors.info,
-      dark: colors.infodark,
-    },
-    warning: {
-      light: colors.warninglight,
-      main: colors.warning,
-      dark: colors.warningdark,
-    },
-    background: {
-      default: colors.black,
-      paper: colors.well,
-    },
-  },
-  typography: {
-    fontFamily: "monospace",
-    button: {
-      textTransform: "none",
-    },
-  },
-  components: {
-    MuiInputBase: {
-      styleOverrides: {
-        root: {
-          backgroundColor: colors.well,
-          color: colors.primary,
+    components: {
+      MuiInputBase: {
+        styleOverrides: {
+          root: {
+            backgroundColor: colors.well,
+            color: colors.primary,
+          },
+          input: {
+            "&::placeholder": {
+              userSelect: "none",
+              color: colors.primarydark,
+            },
+          },
         },
-        input: {
-          "&::placeholder": {
+      },
+
+      MuiInput: {
+        styleOverrides: {
+          root: {
+            backgroundColor: colors.well,
+            borderBottomColor: "#fff",
+          },
+          underline: {
+            "&:hover": {
+              borderBottomColor: colors.primarydark,
+            },
+            "&:before": {
+              borderBottomColor: colors.primary,
+            },
+            "&:after": {
+              borderBottomColor: colors.primarylight,
+            },
+          },
+        },
+      },
+
+      MuiInputLabel: {
+        styleOverrides: {
+          root: {
+            color: colors.primarydark, // why is this switched?
             userSelect: "none",
-            color: colors.primarydark,
+            "&:before": {
+              color: colors.primarylight,
+            },
           },
         },
       },
-    },
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            backgroundColor: "#333",
+            border: "1px solid " + colors.well,
+            // color: colors.primary,
+            margin: "5px",
+            padding: "3px 5px",
+            "&:hover": {
+              backgroundColor: colors.black,
+            },
 
-    MuiInput: {
-      styleOverrides: {
-        root: {
-          backgroundColor: colors.well,
-          borderBottomColor: "#fff",
-        },
-        underline: {
-          "&:hover": {
-            borderBottomColor: colors.primarydark,
-          },
-          "&:before": {
-            borderBottomColor: colors.primary,
-          },
-          "&:after": {
-            borderBottomColor: colors.primarylight,
+            borderRadius: 0,
           },
         },
       },
-    },
-
-    MuiInputLabel: {
-      styleOverrides: {
-        root: {
-          color: colors.primarydark, // why is this switched?
-          userSelect: "none",
-          "&:before": {
-            color: colors.primarylight,
+      MuiSelect: {
+        styleOverrides: {
+          icon: {
+            color: colors.primary,
           },
         },
       },
-    },
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          backgroundColor: "#333",
-          border: "1px solid " + colors.well,
-          // color: colors.primary,
-          margin: "5px",
-          padding: "3px 5px",
-          "&:hover": {
+      MuiMenu: {
+        styleOverrides: {
+          list: {
+            backgroundColor: colors.well,
+          },
+        },
+      },
+      MuiMenuItem: {
+        styleOverrides: {
+          root: {
+            color: colors.primary,
+          },
+        },
+      },
+      MuiAccordionSummary: {
+        styleOverrides: {
+          root: {
+            backgroundColor: "#111",
+          },
+        },
+      },
+      MuiAccordionDetails: {
+        styleOverrides: {
+          root: {
             backgroundColor: colors.black,
           },
-
-          borderRadius: 0,
         },
       },
-    },
-    MuiSelect: {
-      styleOverrides: {
-        icon: {
-          color: colors.primary,
-        },
-      },
-    },
-    MuiMenu: {
-      styleOverrides: {
-        list: {
-          backgroundColor: colors.well,
-        },
-      },
-    },
-    MuiMenuItem: {
-      styleOverrides: {
-        root: {
-          color: colors.primary,
-        },
-      },
-    },
-    MuiAccordionSummary: {
-      styleOverrides: {
-        root: {
-          backgroundColor: "#111",
-        },
-      },
-    },
-    MuiAccordionDetails: {
-      styleOverrides: {
-        root: {
-          backgroundColor: colors.black,
-        },
-      },
-    },
-    MuiIconButton: {
-      styleOverrides: {
-        root: {
-          color: colors.primary,
-        },
-      },
-    },
-    MuiTooltip: {
-      styleOverrides: {
-        tooltip: {
-          fontSize: "1em",
-          color: colors.primary,
-          backgroundColor: colors.well,
-          borderRadius: 0,
-          border: "2px solid white",
-          maxWidth: "100vh",
-        },
-      },
-    },
-    MuiSlider: {
-      styleOverrides: {
-        valueLabel: {
-          color: colors.primary,
-          backgroundColor: colors.well,
-        },
-      },
-    },
-    MuiDrawer: {
-      styleOverrides: {
-        paper: {
-          "&::-webkit-scrollbar": {
-            // webkit
-            display: "none",
+      MuiIconButton: {
+        styleOverrides: {
+          root: {
+            color: colors.primary,
           },
-          scrollbarWidth: "none", // firefox
-          backgroundColor: colors.black,
         },
-        paperAnchorDockedLeft: {
-          borderRight: "1px solid " + colors.welllight,
+      },
+      MuiTooltip: {
+        styleOverrides: {
+          tooltip: {
+            fontSize: "1em",
+            color: colors.primary,
+            backgroundColor: colors.well,
+            borderRadius: 0,
+            border: "2px solid white",
+            maxWidth: "100vh",
+          },
+        },
+      },
+      MuiSlider: {
+        styleOverrides: {
+          valueLabel: {
+            color: colors.primary,
+            backgroundColor: colors.well,
+          },
+        },
+      },
+      MuiDrawer: {
+        styleOverrides: {
+          paper: {
+            "&::-webkit-scrollbar": {
+              // webkit
+              display: "none",
+            },
+            scrollbarWidth: "none", // firefox
+            backgroundColor: colors.black,
+          },
+          paperAnchorDockedLeft: {
+            borderRight: "1px solid " + colors.welllight,
+          },
+        },
+      },
+      MuiDivider: {
+        styleOverrides: {
+          root: {
+            backgroundColor: colors.welllight,
+          },
+        },
+      },
+      MuiFormControlLabel: {
+        styleOverrides: {
+          root: {
+            color: colors.primary,
+          },
+        },
+      },
+      MuiSwitch: {
+        styleOverrides: {
+          switchBase: {
+            color: colors.primarydark,
+          },
+          track: {
+            backgroundColor: colors.welllight,
+          },
+        },
+      },
+      MuiPaper: {
+        styleOverrides: {
+          root: {
+            borderRadius: 0,
+            backgroundColor: colors.black,
+            border: "1px solid " + colors.welllight,
+          },
+        },
+      },
+      MuiTablePagination: {
+        styleOverrides: {
+          select: {
+            color: colors.primary,
+          },
         },
       },
     },
-    MuiDivider: {
-      styleOverrides: {
-        root: {
-          backgroundColor: colors.welllight,
-        },
-      },
-    },
-    MuiFormControlLabel: {
-      styleOverrides: {
-        root: {
-          color: colors.primary,
-        },
-      },
-    },
-    MuiSwitch: {
-      styleOverrides: {
-        switchBase: {
-          color: colors.primarydark,
-        },
-        track: {
-          backgroundColor: colors.welllight,
-        },
-      },
-    },
-    MuiPaper: {
-      styleOverrides: {
-        root: {
-          borderRadius: 0,
-          backgroundColor: colors.black,
-          border: "1px solid " + colors.welllight,
-        },
-      },
-    },
-    MuiTablePagination: {
-      styleOverrides: {
-        select: {
-          color: colors.primary,
-        },
-      },
-    },
-  },
-});
+  });
+  console.log("refreshed");
+}
+refreshTheme();
 
 interface IProps {
   children: JSX.Element[] | JSX.Element;