Merge branch 'dev' into improvement/purchase-augs-ui

src/PersonObjects/Grafting/ui/GraftingRoot.tsx

@@ -1,6 +1,6 @@
 import { Construction, CheckBox, CheckBoxOutlineBlank } from "@mui/icons-material";
 import { Box, Button, Container, List, ListItemButton, Paper, Typography } from "@mui/material";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Augmentation } from "../../../Augmentation/Augmentation";
 import { Augmentations } from "../../../Augmentation/Augmentations";
 import { AugmentationNames } from "../../../Augmentation/data/AugmentationNames";
@@ -15,7 +15,7 @@ import { ConfirmationModal } from "../../../ui/React/ConfirmationModal";
 import { Money } from "../../../ui/React/Money";
 import { convertTimeMsToTimeElapsedString, formatNumber } from "../../../utils/StringHelperFunctions";
 import { IPlayer } from "../../IPlayer";
-import { getGraftingAvailableAugs } from "../GraftingHelpers";
+import { getGraftingAvailableAugs, calculateGraftingTimeWithBonus } from "../GraftingHelpers";
 import { GraftableAugmentation } from "../GraftableAugmentation";
 
 const GraftableAugmentations: IMap<GraftableAugmentation> = {};
@@ -63,6 +63,16 @@ export const GraftingRoot = (): React.ReactElement => {
   const [selectedAug, setSelectedAug] = useState(getGraftingAvailableAugs(player)[0]);
   const [graftOpen, setGraftOpen] = useState(false);
 
+  const setRerender = useState(false)[1];
+  function rerender(): void {
+    setRerender((old) => !old);
+  }
+
+  useEffect(() => {
+    const id = setInterval(rerender, 200);
+    return () => clearInterval(id);
+  }, []);
+
   return (
     <Container disableGutters maxWidth="lg" sx={{ mx: 0 }}>
       <Button onClick={() => router.toLocation(Locations[LocationName.NewTokyoVitaLife])}>Back</Button>
@@ -133,15 +143,16 @@ export const GraftingRoot = (): React.ReactElement => {
                 <Typography color={Settings.theme.info}>
                   <b>Time to Graft:</b>{" "}
                   {convertTimeMsToTimeElapsedString(
-                    GraftableAugmentations[selectedAug].time / (1 + (player.getIntelligenceBonus(3) - 1) / 3),
+                    calculateGraftingTimeWithBonus(player, GraftableAugmentations[selectedAug]),
                   )}
                   {/* Use formula so the displayed creation time is accurate to player bonus */}
                 </Typography>
+
                 {Augmentations[selectedAug].prereqs.length > 0 && (
                   <AugPreReqsChecklist player={player} aug={Augmentations[selectedAug]} />
                 )}
-
                 <br />
+
                 <Typography>
                   {(() => {
                     const aug = Augmentations[selectedAug];