From 05078ffb0820ebc79bb08eb2d3197362f5773add Mon Sep 17 00:00:00 2001
From: nickofolas <nickofolas@gmail.com>
Date: Mon, 2 May 2022 15:36:21 -0500
Subject: [PATCH 01/10] Move `ProgressBar` component

---
 src/Infiltration/ui/GameTimer.tsx | 20 ++++----------------
 src/ui/React/Progress.tsx         | 13 +++++++++++++
 2 files changed, 17 insertions(+), 16 deletions(-)
 create mode 100644 src/ui/React/Progress.tsx

diff --git a/src/Infiltration/ui/GameTimer.tsx b/src/Infiltration/ui/GameTimer.tsx
index c6ea60f44..6af6351f3 100644
--- a/src/Infiltration/ui/GameTimer.tsx
+++ b/src/Infiltration/ui/GameTimer.tsx
@@ -1,20 +1,8 @@
-import LinearProgress from "@mui/material/LinearProgress";
-import React, { useState, useEffect } from "react";
-import withStyles from "@mui/styles/withStyles";
-import { Theme } from "@mui/material/styles";
 import Grid from "@mui/material/Grid";
-import { use } from "../../ui/Context";
+import React, { useEffect, useState } from "react";
 import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
-
-const TimerProgress = withStyles((theme: Theme) => ({
-  root: {
-    backgroundColor: theme.palette.background.paper,
-  },
-  bar: {
-    transition: "none",
-    backgroundColor: theme.palette.primary.main,
-  },
-}))(LinearProgress);
+import { use } from "../../ui/Context";
+import { ProgressBar } from "../../ui/React/Progress";
 
 interface IProps {
   millis: number;
@@ -44,7 +32,7 @@ export function GameTimer(props: IProps): React.ReactElement {
   // bar physically reaches the end
   return (
     <Grid item xs={12}>
-      <TimerProgress variant="determinate" value={v} color="primary" />
+      <ProgressBar variant="determinate" value={v} color="primary" />
     </Grid>
   );
 }
diff --git a/src/ui/React/Progress.tsx b/src/ui/React/Progress.tsx
new file mode 100644
index 000000000..0a29ae311
--- /dev/null
+++ b/src/ui/React/Progress.tsx
@@ -0,0 +1,13 @@
+import LinearProgress from "@mui/material/LinearProgress";
+import { Theme } from "@mui/material/styles";
+import withStyles from "@mui/styles/withStyles";
+
+export const ProgressBar = withStyles((theme: Theme) => ({
+  root: {
+    backgroundColor: theme.palette.background.paper,
+  },
+  bar: {
+    transition: "none",
+    backgroundColor: theme.palette.primary.main,
+  },
+}))(LinearProgress);

From 35fa6dcca116d89c538691349ce6c6805ce9ed59 Mon Sep 17 00:00:00 2001
From: nickofolas <nickofolas@gmail.com>
Date: Mon, 2 May 2022 16:34:17 -0500
Subject: [PATCH 02/10] Basic `WorkInfo` implementation

---
 src/ui/WorkInProgressRoot.tsx | 67 +++++++++++++++++++++++++++++++++--
 1 file changed, 65 insertions(+), 2 deletions(-)

diff --git a/src/ui/WorkInProgressRoot.tsx b/src/ui/WorkInProgressRoot.tsx
index cce3a056c..13fc2b919 100644
--- a/src/ui/WorkInProgressRoot.tsx
+++ b/src/ui/WorkInProgressRoot.tsx
@@ -21,6 +21,24 @@ import { createProgressBarText } from "../utils/helpers/createProgressBarText";
 
 const CYCLES_PER_SEC = 1000 / CONSTANTS.MilliPerCycle;
 
+interface IWorkInfo {
+  buttons: {
+    cancel: () => void;
+    unfocus?: () => void;
+  };
+  title: string | React.ReactElement;
+
+  description?: string | React.ReactElement;
+  gains?: (string | React.ReactElement)[];
+  progress?: {
+    elapsed?: number;
+    percentage?: number;
+  };
+
+  stopText: string;
+  stopTooltip?: string | React.ReactElement;
+}
+
 export function WorkInProgressRoot(): React.ReactElement {
   const setRerender = useState(false)[1];
   function rerender(): void {
@@ -527,7 +545,52 @@ export function WorkInProgressRoot(): React.ReactElement {
     );
   }
 
-  if (!player.workType) router.toTerminal();
+  return (
+    <Container
+      maxWidth="md"
+      sx={{ display: "flex", flexDirection: "column", justifyContent: "center", height: "calc(100vh - 16px)" }}
+    >
+      <Paper sx={{ p: 1, mb: 1 }}>
+        <Typography variant="h6">{workInfo.title}</Typography>
+        <Typography>{workInfo.description}</Typography>
+      </Paper>
+      <Paper sx={{ mb: 1, p: 1 }}>
+        {workInfo.progress !== undefined && (
+          <Box sx={{ mb: 1 }}>
+            <Box
+              display="grid"
+              sx={{
+                gridTemplateColumns: `repeat(${Object.keys(workInfo.progress).length}, 1fr)`,
+                width: "100%",
+                justifyItems: "center",
+              }}
+            >
+              {workInfo.progress.elapsed !== undefined && (
+                <Typography>{convertTimeMsToTimeElapsedString(workInfo.progress.elapsed)} elapsed</Typography>
+              )}
+              {workInfo.progress.percentage !== undefined && (
+                <Typography>{workInfo.progress.percentage.toFixed(2)}% done</Typography>
+              )}
+            </Box>
+            {workInfo.progress.percentage !== undefined && (
+              <ProgressBar variant="determinate" value={workInfo.progress.percentage} color="primary" />
+            )}
+          </Box>
+        )}
 
-  return <></>;
+        <Box display="grid" sx={{ gridTemplateColumns: `repeat(${Object.keys(workInfo.buttons).length}, 1fr)` }}>
+          {workInfo.stopTooltip ? (
+            <Tooltip title={tooltipInfo}>
+              <Button onClick={workInfo.buttons.cancel}>{workInfo.stopText}</Button>
+            </Tooltip>
+          ) : (
+            <Button onClick={workInfo.buttons.cancel}>{workInfo.stopText}</Button>
+          )}
+          {workInfo.buttons.unfocus && (
+            <Button onClick={workInfo.buttons.unfocus}>Do something else simultaneously</Button>
+          )}
+        </Box>
+      </Paper>
+    </Container>
+  );
 }

From 4c15b77d21e7cfa02d972999bdab81d777089605 Mon Sep 17 00:00:00 2001
From: nickofolas <nickofolas@gmail.com>
Date: Mon, 2 May 2022 17:05:25 -0500
Subject: [PATCH 03/10] Update `StatsRow`

---
 src/ui/React/StatsRow.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/ui/React/StatsRow.tsx b/src/ui/React/StatsRow.tsx
index 405abcc26..030670791 100644
--- a/src/ui/React/StatsRow.tsx
+++ b/src/ui/React/StatsRow.tsx
@@ -16,19 +16,21 @@ interface IProps {
   name: string;
   color: string;
   classes?: any;
-  data: ITableRowData;
+  data?: ITableRowData;
   children?: React.ReactElement;
 }
 
 export const StatsRow = ({ name, color, classes = useStyles(), children, data }: IProps): React.ReactElement => {
-  let content;
+  let content = "";
 
-  if (data.content !== undefined) {
-    content = data.content;
-  } else if (data.level !== undefined && data.exp !== undefined) {
-    content = `${formatNumber(data.level, 0)} (${numeralWrapper.formatExp(data.exp)} exp)`;
-  } else if (data.level !== undefined && data.exp === undefined) {
-    content = `${formatNumber(data.level, 0)}`;
+  if (data) {
+    if (data.content !== undefined) {
+      content = data.content;
+    } else if (data.level !== undefined && data.exp !== undefined) {
+      content = `${formatNumber(data.level, 0)} (${numeralWrapper.formatExp(data.exp)} exp)`;
+    } else if (data.level !== undefined && data.exp === undefined) {
+      content = `${formatNumber(data.level, 0)}`;
+    }
   }
 
   return (

From e859759ebd224eeee3a1d2c2a6d8b97292f77221 Mon Sep 17 00:00:00 2001
From: nickofolas <nickofolas@gmail.com>
Date: Mon, 2 May 2022 17:31:40 -0500
Subject: [PATCH 04/10] First pass on work in progress root

---
 src/ui/WorkInProgressRoot.tsx | 763 ++++++++++++++++------------------
 1 file changed, 355 insertions(+), 408 deletions(-)

diff --git a/src/ui/WorkInProgressRoot.tsx b/src/ui/WorkInProgressRoot.tsx
index 13fc2b919..db5b9e721 100644
--- a/src/ui/WorkInProgressRoot.tsx
+++ b/src/ui/WorkInProgressRoot.tsx
@@ -1,23 +1,24 @@
-import React, { useState, useEffect } from "react";
-import { use } from "./Context";
+import { Box, Container, Paper, Table, TableBody, Tooltip } from "@mui/material";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+import { uniqueId } from "lodash";
+import React, { useEffect, useState } from "react";
+import { Companies } from "../Company/Companies";
+import { Company } from "../Company/Company";
 import { CONSTANTS } from "../Constants";
+import { Factions } from "../Faction/Factions";
+import { LocationName } from "../Locations/data/LocationNames";
+import { Locations } from "../Locations/Locations";
+import { Settings } from "../Settings/Settings";
+import { convertTimeMsToTimeElapsedString } from "../utils/StringHelperFunctions";
+import { use } from "./Context";
 import { numeralWrapper } from "./numeralFormat";
+import { Money } from "./React/Money";
+import { MoneyRate } from "./React/MoneyRate";
+import { ProgressBar } from "./React/Progress";
 import { Reputation } from "./React/Reputation";
 import { ReputationRate } from "./React/ReputationRate";
-import { MoneyRate } from "./React/MoneyRate";
-import { Money } from "./React/Money";
-import { convertTimeMsToTimeElapsedString } from "../utils/StringHelperFunctions";
-import { Factions } from "../Faction/Factions";
-import { Company } from "../Company/Company";
-import { Companies } from "../Company/Companies";
-import { Locations } from "../Locations/Locations";
-import { LocationName } from "../Locations/data/LocationNames";
-
-import Typography from "@mui/material/Typography";
-import Grid from "@mui/material/Grid";
-import Button from "@mui/material/Button";
-
-import { createProgressBarText } from "../utils/helpers/createProgressBarText";
+import { StatsRow } from "./React/StatsRow";
 
 const CYCLES_PER_SEC = 1000 / CONSTANTS.MilliPerCycle;
 
@@ -32,6 +33,7 @@ interface IWorkInfo {
   gains?: (string | React.ReactElement)[];
   progress?: {
     elapsed?: number;
+    remaining?: number;
     percentage?: number;
   };
 
@@ -53,18 +55,102 @@ export function WorkInProgressRoot(): React.ReactElement {
   const player = use.Player();
   const router = use.Router();
 
+  const expGains = [
+    player.workHackExpGained > 0 ? (
+      <StatsRow
+        name="Hacking Exp"
+        color={Settings.theme.hack}
+        data={{
+          content: `${numeralWrapper.formatExp(player.workHackExpGained)} (${numeralWrapper.formatExp(
+            player.workHackExpGainRate * CYCLES_PER_SEC,
+          )} / sec)`,
+        }}
+      />
+    ) : (
+      <></>
+    ),
+    player.workStrExpGained > 0 ? (
+      <StatsRow
+        name="Strength Exp"
+        color={Settings.theme.combat}
+        data={{
+          content: `${numeralWrapper.formatExp(player.workStrExpGained)} (${numeralWrapper.formatExp(
+            player.workStrExpGainRate * CYCLES_PER_SEC,
+          )} / sec)`,
+        }}
+      />
+    ) : (
+      <></>
+    ),
+    player.workDefExpGained > 0 ? (
+      <StatsRow
+        name="Defense Exp"
+        color={Settings.theme.combat}
+        data={{
+          content: `${numeralWrapper.formatExp(player.workDefExpGained)} (${numeralWrapper.formatExp(
+            player.workDefExpGainRate * CYCLES_PER_SEC,
+          )} / sec)`,
+        }}
+      />
+    ) : (
+      <></>
+    ),
+    player.workDexExpGained > 0 ? (
+      <StatsRow
+        name="Dexterity Exp"
+        color={Settings.theme.combat}
+        data={{
+          content: `${numeralWrapper.formatExp(player.workDexExpGained)} (${numeralWrapper.formatExp(
+            player.workDexExpGainRate * CYCLES_PER_SEC,
+          )} / sec)`,
+        }}
+      />
+    ) : (
+      <></>
+    ),
+    player.workAgiExpGained > 0 ? (
+      <StatsRow
+        name="Agility Exp"
+        color={Settings.theme.combat}
+        data={{
+          content: `${numeralWrapper.formatExp(player.workAgiExpGained)} (${numeralWrapper.formatExp(
+            player.workAgiExpGainRate * CYCLES_PER_SEC,
+          )} / sec)`,
+        }}
+      />
+    ) : (
+      <></>
+    ),
+    player.workChaExpGained > 0 ? (
+      <StatsRow
+        name="Charisma Exp"
+        color={Settings.theme.cha}
+        data={{
+          content: `${numeralWrapper.formatExp(player.workChaExpGained)} (${numeralWrapper.formatExp(
+            player.workChaExpGainRate * CYCLES_PER_SEC,
+          )} / sec)`,
+        }}
+      />
+    ) : (
+      <></>
+    ),
+  ];
+
+  let workInfo: IWorkInfo | null;
+
   if (player.workType == CONSTANTS.WorkTypeFaction) {
     const faction = Factions[player.currentWorkFactionName];
     if (!faction) {
-      return (
-        <>
-          <Typography variant="h4" color="primary">
-            You have not joined {player.currentWorkFactionName || "(Faction not found)"} yet or cannot work at this
-            time, please try again if you think this should have worked
-          </Typography>
-          <Button onClick={() => router.toFactions()}>Back to Factions</Button>
-        </>
-      );
+      workInfo = {
+        buttons: {
+          cancel: () => router.toFactions(),
+        },
+        title:
+          `You have not joined ${player.currentWorkFactionName || "(Faction not found)"} at this time,` +
+          " please try again if you think this should have worked",
+
+        stopText: "Back to Factions",
+      };
     }
 
     function cancel(): void {
@@ -75,81 +161,45 @@ export function WorkInProgressRoot(): React.ReactElement {
       router.toFaction(faction);
       player.stopFocusing();
     }
-    return (
-      <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
-        <Grid item>
-          <Typography>
-            You are currently {player.currentWorkFactionDescription} for your faction {faction.name}
-            <br />
-            (Current Faction Reputation: <Reputation reputation={faction.playerReputation} />
-            ). <br />
-            You have been doing this for {convertTimeMsToTimeElapsedString(player.timeWorked)}
-            <br />
-            <br />
-            You have earned: <br />
-            <br />
-            <Money money={player.workMoneyGained} /> (<MoneyRate money={player.workMoneyGainRate * CYCLES_PER_SEC} />){" "}
-            <br />
-            <br />
-            <Reputation reputation={player.workRepGained} /> (
-            <ReputationRate reputation={player.workRepGainRate * CYCLES_PER_SEC} />) reputation for this faction <br />
-            <br />
-            {player.workHackExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workHackExpGained)} (
-                {numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec) hacking exp <br />
-              </>
-            )}
-            <br />
-            {player.workStrExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workStrExpGained)} (
-                {numeralWrapper.formatExp(player.workStrExpGainRate * CYCLES_PER_SEC)} / sec) strength exp <br />
-              </>
-            )}
-            {player.workDefExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workDefExpGained)} (
-                {numeralWrapper.formatExp(player.workDefExpGainRate * CYCLES_PER_SEC)} / sec) defense exp <br />
-              </>
-            )}
-            {player.workDexExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workDexExpGained)} (
-                {numeralWrapper.formatExp(player.workDexExpGainRate * CYCLES_PER_SEC)} / sec) dexterity exp <br />
-              </>
-            )}
-            {player.workAgiExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workAgiExpGained)} (
-                {numeralWrapper.formatExp(player.workAgiExpGainRate * CYCLES_PER_SEC)} / sec) agility exp <br />
-              </>
-            )}
-            <br />
-            {player.workChaExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workChaExpGained)} (
-                {numeralWrapper.formatExp(player.workChaExpGainRate * CYCLES_PER_SEC)} / sec) charisma exp <br />
-              </>
-            )}
-            <br />
-            You will automatically finish after working for 20 hours. You can cancel earlier if you wish.
-            <br />
-            There is no penalty for cancelling earlier.
-          </Typography>
-        </Grid>
-        <Grid item>
-          <Button sx={{ mx: 2 }} onClick={cancel}>
-            Stop Faction Work
-          </Button>
-          <Button onClick={unfocus}>Do something else simultaneously</Button>
-        </Grid>
-      </Grid>
-    );
-  }
 
-  const className = player.className;
-  if (player.className !== "") {
+    workInfo = {
+      buttons: {
+        cancel: cancel,
+        unfocus: unfocus,
+      },
+      title: (
+        <>
+          You are currently {player.currentWorkFactionDescription} for your faction <b>{faction.name}</b>
+        </>
+      ),
+
+      description: (
+        <>
+          Current Faction Reputation: <Reputation reputation={faction.playerReputation} />
+        </>
+      ),
+      gains: [
+        <StatsRow name="Money" color={Settings.theme.money}>
+          <Typography>
+            <Money money={player.workMoneyGained} /> (<MoneyRate money={player.workMoneyGainRate * CYCLES_PER_SEC} />)
+          </Typography>
+        </StatsRow>,
+        <StatsRow name="Faction Reputation" color={Settings.theme.rep}>
+          <Typography>
+            <Reputation reputation={player.workRepGained} /> (
+            <ReputationRate reputation={player.workRepGainRate * CYCLES_PER_SEC} />)
+          </Typography>
+        </StatsRow>,
+        ...expGains,
+      ],
+      progress: {
+        elapsed: player.timeWorked,
+      },
+
+      stopText: "Stop Faction work",
+    };
+  } else if (player.className !== "") {
+    const className = player.className;
     function cancel(): void {
       player.finishClass(true);
       router.toCity();
@@ -172,79 +222,44 @@ export function WorkInProgressRoot(): React.ReactElement {
       stopText = "Stop taking course";
     }
 
-    return (
-      <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
-        <Grid item>
-          <Typography>
-            You have been {className} for {convertTimeMsToTimeElapsedString(player.timeWorked)}
-            <br />
-            <br />
-            This has cost you: <br />
-            <Money money={-player.workMoneyGained} /> (<MoneyRate money={player.workMoneyLossRate * CYCLES_PER_SEC} />){" "}
-            <br />
-            <br />
-            You have gained: <br />
-            {player.workHackExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workHackExpGained)} (
-                {numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec) hacking exp <br />
-              </>
-            )}
-            {player.workStrExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workStrExpGained)} (
-                {numeralWrapper.formatExp(player.workStrExpGainRate * CYCLES_PER_SEC)} / sec) strength exp <br />
-              </>
-            )}
-            {player.workDefExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workDefExpGained)} (
-                {numeralWrapper.formatExp(player.workDefExpGainRate * CYCLES_PER_SEC)} / sec) defense exp <br />
-              </>
-            )}
-            {player.workDexExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workDexExpGained)} (
-                {numeralWrapper.formatExp(player.workDexExpGainRate * CYCLES_PER_SEC)} / sec) dexterity exp <br />
-              </>
-            )}
-            {player.workAgiExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workAgiExpGained)} (
-                {numeralWrapper.formatExp(player.workAgiExpGainRate * CYCLES_PER_SEC)} / sec) agility exp <br />
-              </>
-            )}
-            {player.workChaExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workChaExpGained)} (
-                {numeralWrapper.formatExp(player.workChaExpGainRate * CYCLES_PER_SEC)} / sec) charisma exp <br />
-              </>
-            )}
-            You may cancel at any time
-          </Typography>
-        </Grid>
-        <Grid item>
-          <Button sx={{ mx: 2 }} onClick={cancel}>
-            {stopText}
-          </Button>
-          <Button onClick={unfocus}>Do something else simultaneously</Button>
-        </Grid>
-      </Grid>
-    );
-  }
+    workInfo = {
+      buttons: {
+        cancel: cancel,
+        unfocus: unfocus,
+      },
+      title: (
+        <>
+          You are currently <b>{className}</b>
+        </>
+      ),
 
-  if (player.workType == CONSTANTS.WorkTypeCompany) {
+      gains: [
+        <StatsRow name="Total Cost" color={Settings.theme.money}>
+          <Typography>
+            <Money money={-player.workMoneyGained} /> (<MoneyRate money={player.workMoneyLossRate * CYCLES_PER_SEC} />)
+          </Typography>
+        </StatsRow>,
+        ...expGains,
+      ],
+      progress: {
+        elapsed: player.timeWorked,
+      },
+
+      stopText: stopText,
+    };
+  } else if (player.workType == CONSTANTS.WorkTypeCompany) {
     const comp = Companies[player.companyName];
     if (comp == null || !(comp instanceof Company)) {
-      return (
-        <>
-          <Typography variant="h4" color="primary">
-            You cannot work for {player.companyName || "(Company not found)"} at this time, please try again if you
-            think this should have worked
-          </Typography>
-          <Button onClick={() => router.toTerminal()}>Back to Terminal</Button>
-        </>
-      );
+      workInfo = {
+        buttons: {
+          cancel: () => router.toTerminal(),
+        },
+        title:
+          `You cannot work for ${player.companyName || "(Company not found)"} at this time,` +
+          " please try again if you think this should have worked",
+
+        stopText: "Back to Terminal",
+      };
     }
 
     const companyRep = comp.playerReputation;
@@ -263,84 +278,47 @@ export function WorkInProgressRoot(): React.ReactElement {
     const penalty = player.cancelationPenalty();
 
     const penaltyString = penalty === 0.5 ? "half" : "three-quarters";
-    return (
-      <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
-        <Grid item>
-          <Typography>
-            You are currently working as a {position} at {player.companyName} (Current Company Reputation:{" "}
-            <Reputation reputation={companyRep} />)<br />
-            <br />
-            You have been working for {convertTimeMsToTimeElapsedString(player.timeWorked)}
-            <br />
-            <br />
-            You have earned: <br />
-            <br />
-            <Money money={player.workMoneyGained} /> (<MoneyRate money={player.workMoneyGainRate * CYCLES_PER_SEC} />){" "}
-            <br />
-            <br />
-            <Reputation reputation={player.workRepGained} /> (
-            <ReputationRate reputation={player.workRepGainRate * CYCLES_PER_SEC} />) reputation for this company <br />
-            <br />
-            {player.workHackExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workHackExpGained)} (
-                {`${numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec`}
-                ) hacking exp <br />
-              </>
-            )}
-            <br />
-            {player.workStrExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workStrExpGained)} (
-                {`${numeralWrapper.formatExp(player.workStrExpGainRate * CYCLES_PER_SEC)} / sec`}
-                ) strength exp <br />
-              </>
-            )}
-            {player.workDefExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workDefExpGained)} (
-                {`${numeralWrapper.formatExp(player.workDefExpGainRate * CYCLES_PER_SEC)} / sec`}
-                ) defense exp <br />
-              </>
-            )}
-            {player.workDexExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workDexExpGained)} (
-                {`${numeralWrapper.formatExp(player.workDexExpGainRate * CYCLES_PER_SEC)} / sec`}
-                ) dexterity exp <br />
-              </>
-            )}
-            {player.workAgiExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workAgiExpGained)} (
-                {`${numeralWrapper.formatExp(player.workAgiExpGainRate * CYCLES_PER_SEC)} / sec`}
-                ) agility exp <br />
-              </>
-            )}
-            <br />
-            {player.workChaExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workChaExpGained)} (
-                {`${numeralWrapper.formatExp(player.workChaExpGainRate * CYCLES_PER_SEC)} / sec`}
-                ) charisma exp <br />
-              </>
-            )}
-            <br />
-            You will automatically finish after working for 8 hours. You can cancel earlier if you wish, but you will
-            only gain {penaltyString} of the reputation you've earned so far.
-          </Typography>
-        </Grid>
-        <Grid item>
-          <Button sx={{ mx: 2 }} onClick={cancel}>
-            Stop Working
-          </Button>
-          <Button onClick={unfocus}>Do something else simultaneously</Button>
-        </Grid>
-      </Grid>
-    );
-  }
 
-  if (player.workType == CONSTANTS.WorkTypeCompanyPartTime) {
+    workInfo = {
+      buttons: {
+        cancel: cancel,
+        unfocus: unfocus,
+      },
+      title: (
+        <>
+          You are currently working as a <b>{position}</b> at <b>{player.companyName}</b>
+        </>
+      ),
+
+      description: (
+        <>
+          Current Company Reputation: <Reputation reputation={companyRep} />
+        </>
+      ),
+      gains: [
+        <StatsRow name="Money" color={Settings.theme.money}>
+          <Typography>
+            <Money money={player.workMoneyGained} /> (<MoneyRate money={player.workMoneyGainRate * CYCLES_PER_SEC} />)
+          </Typography>
+        </StatsRow>,
+        <StatsRow name="Company Reputation" color={Settings.theme.rep}>
+          <Typography>
+            <Reputation reputation={player.workRepGained} /> (
+            <ReputationRate reputation={player.workRepGainRate * CYCLES_PER_SEC} />)
+          </Typography>
+        </StatsRow>,
+        ...expGains,
+      ],
+      progress: {
+        elapsed: player.timeWorked,
+      },
+
+      stopText: "Stop working",
+      stopTooltip:
+        "You will automatically finish after working for 8 hours. You can cancel earlier if you wish" +
+        ` but you will only gain ${penaltyString} of the reputation you've earned so far.`,
+    };
+  } else if (player.workType == CONSTANTS.WorkTypeCompanyPartTime) {
     function cancel(): void {
       player.finishWorkPartTime(true);
       router.toJob();
@@ -357,126 +335,67 @@ export function WorkInProgressRoot(): React.ReactElement {
     companyRep = comp.playerReputation;
 
     const position = player.jobs[player.companyName];
-    return (
-      <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
-        <Grid item>
+
+    workInfo = {
+      buttons: {
+        cancel: cancel,
+        unfocus: unfocus,
+      },
+      title: (
+        <>
+          You are currently working as a <b>{position}</b> at <b>{player.companyName}</b>
+        </>
+      ),
+
+      description: (
+        <>
+          Current Company Reputation: <Reputation reputation={companyRep} />
+        </>
+      ),
+      gains: [
+        <StatsRow name="Money" color={Settings.theme.money}>
+          <Typography>
+            <Money money={player.workMoneyGained} /> (<MoneyRate money={player.workMoneyGainRate * CYCLES_PER_SEC} />)
+          </Typography>
+        </StatsRow>,
+        <StatsRow name="Company Reputation" color={Settings.theme.rep}>
           <Typography>
-            You are currently working as a {position} at {player.companyName} (Current Company Reputation:{" "}
-            <Reputation reputation={companyRep} />)<br />
-            <br />
-            You have been working for {convertTimeMsToTimeElapsedString(player.timeWorked)}
-            <br />
-            <br />
-            You have earned: <br />
-            <br />
-            <Money money={player.workMoneyGained} /> (<MoneyRate money={player.workMoneyGainRate * CYCLES_PER_SEC} />){" "}
-            <br />
-            <br />
             <Reputation reputation={player.workRepGained} /> (
-            <ReputationRate reputation={player.workRepGainRate * CYCLES_PER_SEC} />
-            ) reputation for this company <br />
-            <br />
-            {player.workHackExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workHackExpGained)} (
-                {`${numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec`}
-                ) hacking exp <br />
-              </>
-            )}
-            <br />
-            {player.workStrExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workStrExpGained)} (
-                {`${numeralWrapper.formatExp(player.workStrExpGainRate * CYCLES_PER_SEC)} / sec`}
-                ) strength exp <br />
-              </>
-            )}
-            {player.workDefExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workDefExpGained)} (
-                {`${numeralWrapper.formatExp(player.workDefExpGainRate * CYCLES_PER_SEC)} / sec`}
-                ) defense exp <br />
-              </>
-            )}
-            {player.workDexExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workDexExpGained)} (
-                {`${numeralWrapper.formatExp(player.workDexExpGainRate * CYCLES_PER_SEC)} / sec`}
-                ) dexterity exp <br />
-              </>
-            )}
-            {player.workAgiExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workAgiExpGained)} (
-                {`${numeralWrapper.formatExp(player.workAgiExpGainRate * CYCLES_PER_SEC)} / sec`}
-                ) agility exp <br />
-              </>
-            )}
-            <br />
-            {player.workChaExpGained > 0 && (
-              <>
-                {numeralWrapper.formatExp(player.workChaExpGained)} (
-                {`${numeralWrapper.formatExp(player.workChaExpGainRate * CYCLES_PER_SEC)} / sec`}
-                ) charisma exp <br />
-              </>
-            )}
-            <br />
-            You will automatically finish after working for 8 hours. You can cancel earlier if you wish, and there will
-            be no penalty because this is a part-time job.
+            <ReputationRate reputation={player.workRepGainRate * CYCLES_PER_SEC} />)
           </Typography>
-        </Grid>
-        <Grid item>
-          <Button sx={{ mx: 2 }} onClick={cancel}>
-            Stop Working
-          </Button>
-          <Button onClick={unfocus}>Do something else simultaneously</Button>
-        </Grid>
-      </Grid>
-    );
-  }
+        </StatsRow>,
+        ...expGains,
+      ],
+      progress: {
+        elapsed: player.timeWorked,
+      },
 
-  if (player.crimeType !== "") {
-    const percent = Math.round((player.timeWorked / player.timeNeededToCompleteWork) * 100);
-    let numBars = Math.round(percent / 5);
-    if (numBars < 0) {
-      numBars = 0;
-    }
-    if (numBars > 20) {
-      numBars = 20;
-    }
-    // const progressBar = "[" + Array(numBars + 1).join("|") + Array(20 - numBars + 1).join(" ") + "]";
-    const progressBar = createProgressBarText({ progress: (numBars + 1) / 20, totalTicks: 20 });
+      stopText: "Stop working",
+      stopTooltip:
+        "You will automatically finish after working for 8 hours. You can cancel earlier if you wish" +
+        " and there will be no penalty because this is a part-time job.",
+    };
+  } else if (player.crimeType !== "") {
+    const completion = Math.round((player.timeWorked / player.timeNeededToCompleteWork) * 100);
 
-    return (
-      <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
-        <Grid item>
-          <Typography>
-            <Typography>You are attempting to {player.crimeType}.</Typography>
-            <br />
+    workInfo = {
+      buttons: {
+        cancel: () => {
+          router.toLocation(Locations[LocationName.Slums]);
+          player.finishCrime(true);
+        },
+      },
+      title: `You are attempting to ${player.crimeType}`,
 
-            <Typography>
-              Time remaining: {convertTimeMsToTimeElapsedString(player.timeNeededToCompleteWork - player.timeWorked)}
-            </Typography>
+      progress: {
+        elapsed: player.timeWorked,
+        remaining: player.timeNeededToCompleteWork - player.timeWorked,
+        percentage: completion,
+      },
 
-            <br />
-            <pre>{progressBar}</pre>
-          </Typography>
-        </Grid>
-        <Grid item>
-          <Button
-            onClick={() => {
-              router.toLocation(Locations[LocationName.Slums]);
-              player.finishCrime(true);
-            }}
-          >
-            Cancel crime
-          </Button>
-        </Grid>
-      </Grid>
-    );
-  }
-
-  if (player.createProgramName !== "") {
+      stopText: "Cancel crime",
+    };
+  } else if (player.createProgramName !== "") {
     function cancel(): void {
       player.finishCreateProgramWork(true);
       router.toTerminal();
@@ -485,31 +404,29 @@ export function WorkInProgressRoot(): React.ReactElement {
       router.toTerminal();
       player.stopFocusing();
     }
-    return (
-      <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
-        <Grid item>
-          <Typography>
-            You are currently working on coding {player.createProgramName}.<br />
-            <br />
-            You have been working for {convertTimeMsToTimeElapsedString(player.timeWorked)}
-            <br />
-            <br />
-            The program is {((player.timeWorkedCreateProgram / player.timeNeededToCompleteWork) * 100).toFixed(2)}
-            % complete. <br />
-            If you cancel, your work will be saved and you can come back to complete the program later.
-          </Typography>
-        </Grid>
-        <Grid item>
-          <Button sx={{ mx: 2 }} onClick={cancel}>
-            Cancel work on creating program
-          </Button>
-          <Button onClick={unfocus}>Do something else simultaneously</Button>
-        </Grid>
-      </Grid>
-    );
-  }
 
-  if (player.graftAugmentationName !== "") {
+    const completion = (player.timeWorkedCreateProgram / player.timeNeededToCompleteWork) * 100;
+
+    workInfo = {
+      buttons: {
+        cancel: cancel,
+        unfocus: unfocus,
+      },
+      title: (
+        <>
+          You are currently working on coding <b>{player.createProgramName}</b>
+        </>
+      ),
+
+      progress: {
+        elapsed: player.timeWorked,
+        percentage: completion,
+      },
+
+      stopText: "Stop creating program",
+      stopTooltip: "Your work will be saved and you can return to complete the program later.",
+    };
+  } else if (player.graftAugmentationName !== "") {
     function cancel(): void {
       player.finishGraftAugmentationWork(true);
       router.toTerminal();
@@ -518,33 +435,50 @@ export function WorkInProgressRoot(): React.ReactElement {
       router.toTerminal();
       player.stopFocusing();
     }
-    return (
-      <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
-        <Grid item>
-          <Typography>
-            You are currently working on grafting {player.graftAugmentationName}.
-            <br />
-            <br />
-            You have been working for {convertTimeMsToTimeElapsedString(player.timeWorked)}
-            <br />
-            <br />
-            The augmentation is{" "}
-            {((player.timeWorkedGraftAugmentation / player.timeNeededToCompleteWork) * 100).toFixed(2)}% done being
-            crafted.
-            <br />
-            If you cancel, your work will <b>not</b> be saved, and the money you spent will <b>not</b> be returned.
-          </Typography>
-        </Grid>
-        <Grid item>
-          <Button sx={{ mx: 2 }} onClick={cancel}>
-            Cancel work on grafting Augmentation
-          </Button>
-          <Button onClick={unfocus}>Do something else simultaneously</Button>
-        </Grid>
-      </Grid>
-    );
+
+    const completion = (player.timeWorkedGraftAugmentation / player.timeNeededToCompleteWork) * 100;
+
+    workInfo = {
+      buttons: {
+        cancel: cancel,
+        unfocus: unfocus,
+      },
+      title: (
+        <>
+          You are currently working on grafting <b>{player.graftAugmentationName}</b>
+        </>
+      ),
+
+      progress: {
+        elapsed: player.timeWorked,
+        percentage: completion,
+      },
+
+      stopText: "Stop grafting",
+      stopTooltip: (
+        <>
+          If you cancel, you work will <b>not</b> be saved, and the money you spent will <b>not</b> be returned
+        </>
+      ),
+    };
+  } else if (!player.workType) {
+    router.toTerminal();
+    workInfo = null;
+  } else {
+    workInfo = null;
   }
 
+  if (workInfo === null) {
+    return <></>;
+  }
+
+  const tooltipInfo =
+    typeof workInfo?.stopTooltip === "string" ? (
+      <Typography>{workInfo.stopTooltip}</Typography>
+    ) : (
+      workInfo.stopTooltip || <></>
+    );
+
   return (
     <Container
       maxWidth="md"
@@ -553,6 +487,15 @@ export function WorkInProgressRoot(): React.ReactElement {
       <Paper sx={{ p: 1, mb: 1 }}>
         <Typography variant="h6">{workInfo.title}</Typography>
         <Typography>{workInfo.description}</Typography>
+        {workInfo.gains && (
+          <Table sx={{ mt: 1 }}>
+            <TableBody>
+              {workInfo.gains.map((row) => (
+                <React.Fragment key={uniqueId()}>{row}</React.Fragment>
+              ))}
+            </TableBody>
+          </Table>
+        )}
       </Paper>
       <Paper sx={{ mb: 1, p: 1 }}>
         {workInfo.progress !== undefined && (
@@ -563,11 +506,15 @@ export function WorkInProgressRoot(): React.ReactElement {
                 gridTemplateColumns: `repeat(${Object.keys(workInfo.progress).length}, 1fr)`,
                 width: "100%",
                 justifyItems: "center",
+                textAlign: "center",
               }}
             >
               {workInfo.progress.elapsed !== undefined && (
                 <Typography>{convertTimeMsToTimeElapsedString(workInfo.progress.elapsed)} elapsed</Typography>
               )}
+              {workInfo.progress.remaining !== undefined && (
+                <Typography>{convertTimeMsToTimeElapsedString(workInfo.progress.remaining)} remaining</Typography>
+              )}
               {workInfo.progress.percentage !== undefined && (
                 <Typography>{workInfo.progress.percentage.toFixed(2)}% done</Typography>
               )}

From 57673ae2815a3dd61bd5ab1fe3a04316cb9c5ade Mon Sep 17 00:00:00 2001
From: nickofolas <nickofolas@gmail.com>
Date: Mon, 2 May 2022 17:48:49 -0500
Subject: [PATCH 05/10] Add new progress bar to sleeve UI

---
 src/PersonObjects/Sleeve/ui/SleeveElem.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/PersonObjects/Sleeve/ui/SleeveElem.tsx b/src/PersonObjects/Sleeve/ui/SleeveElem.tsx
index ec43ce05d..6ec55dea1 100644
--- a/src/PersonObjects/Sleeve/ui/SleeveElem.tsx
+++ b/src/PersonObjects/Sleeve/ui/SleeveElem.tsx
@@ -176,12 +176,14 @@ export function SleeveElem(props: IProps): React.ReactElement {
               </Button>
               <Typography>{desc}</Typography>
               <Typography>
-                {props.sleeve.currentTask === SleeveTaskType.Crime &&
-                  createProgressBarText({
-                    progress: props.sleeve.currentTaskTime / props.sleeve.currentTaskMaxTime,
-                    totalTicks: 25,
-                  })}
-              </Typography>
+            {props.sleeve.currentTask === SleeveTaskType.Crime && (
+              <ProgressBar
+                variant="determinate"
+                value={(props.sleeve.currentTaskTime / props.sleeve.currentTaskMaxTime) * 100}
+                color="primary"
+              />
+            )}
+          </Typography>
             </Box>
           </Box>
           <MoreStatsModal open={statsOpen} onClose={() => setStatsOpen(false)} sleeve={props.sleeve} />

From d942d27a8573f70a11d5fd0bd9416ee1549d5314 Mon Sep 17 00:00:00 2001
From: nickofolas <nickofolas@gmail.com>
Date: Mon, 2 May 2022 17:49:10 -0500
Subject: [PATCH 06/10] Reduce component usage in sleeve element

---
 src/PersonObjects/Sleeve/ui/SleeveElem.tsx | 138 ++++++++++-----------
 1 file changed, 64 insertions(+), 74 deletions(-)

diff --git a/src/PersonObjects/Sleeve/ui/SleeveElem.tsx b/src/PersonObjects/Sleeve/ui/SleeveElem.tsx
index 6ec55dea1..82a98a706 100644
--- a/src/PersonObjects/Sleeve/ui/SleeveElem.tsx
+++ b/src/PersonObjects/Sleeve/ui/SleeveElem.tsx
@@ -1,23 +1,19 @@
+import { Box, Button, Paper, Tooltip, Typography } from "@mui/material";
 import React, { useState } from "react";
-
-import { Box, Paper, Typography, Button, Tooltip } from "@mui/material";
-
 import { CONSTANTS } from "../../../Constants";
 import { Crimes } from "../../../Crime/Crimes";
-import { numeralWrapper } from "../../../ui/numeralFormat";
-import { createProgressBarText } from "../../../utils/helpers/createProgressBarText";
-import { use } from "../../../ui/Context";
 import { FactionWorkType } from "../../../Faction/FactionWorkTypeEnum";
-
+import { use } from "../../../ui/Context";
+import { numeralWrapper } from "../../../ui/numeralFormat";
+import { ProgressBar } from "../../../ui/React/Progress";
 import { Sleeve } from "../Sleeve";
 import { SleeveTaskType } from "../SleeveTaskTypesEnum";
-
-import { SleeveAugmentationsModal } from "./SleeveAugmentationsModal";
-import { TravelModal } from "./TravelModal";
-import { StatsElement, EarningsElement } from "./StatsElement";
-import { MoreStatsModal } from "./MoreStatsModal";
 import { MoreEarningsModal } from "./MoreEarningsModal";
+import { MoreStatsModal } from "./MoreStatsModal";
+import { SleeveAugmentationsModal } from "./SleeveAugmentationsModal";
+import { EarningsElement, StatsElement } from "./StatsElement";
 import { TaskSelector } from "./TaskSelector";
+import { TravelModal } from "./TravelModal";
 
 interface IProps {
   sleeve: Sleeve;
@@ -131,51 +127,47 @@ export function SleeveElem(props: IProps): React.ReactElement {
   }
 
   return (
-    <Box component={Paper} sx={{ width: "auto" }}>
-      <Box sx={{ m: 1 }}>
-        <Box display="grid" sx={{ gridTemplateColumns: "1fr 1fr", width: "100%", gap: 1 }}>
-          <Box>
-            <StatsElement sleeve={props.sleeve} />
-            <Box display="grid" sx={{ gridTemplateColumns: "1fr 1fr", width: "100%" }}>
-              <Button onClick={() => setStatsOpen(true)}>More Stats</Button>
-              <Button onClick={() => setEarningsOpen(true)}>More Earnings Info</Button>
-              <Tooltip title={player.money < CONSTANTS.TravelCost ? <Typography>Insufficient funds</Typography> : ""}>
-                <span>
-                  <Button
-                    onClick={() => setTravelOpen(true)}
-                    disabled={player.money < CONSTANTS.TravelCost}
-                    sx={{ width: "100%", height: "100%" }}
-                  >
-                    Travel
-                  </Button>
-                </span>
-              </Tooltip>
-              <Tooltip
-                title={
-                  props.sleeve.shock < 100 ? <Typography>Unlocked when sleeve has fully recovered</Typography> : ""
-                }
-              >
-                <span>
-                  <Button
-                    onClick={() => setAugmentationsOpen(true)}
-                    disabled={props.sleeve.shock < 100}
-                    sx={{ width: "100%", height: "100%" }}
-                  >
-                    Manage Augmentations
-                  </Button>
-                </span>
-              </Tooltip>
-            </Box>
+    <>
+      <Paper sx={{ p: 1, display: "grid", gridTemplateColumns: "1fr 1fr", width: "auto", gap: 1 }}>
+        <span>
+          <StatsElement sleeve={props.sleeve} />
+          <Box display="grid" sx={{ gridTemplateColumns: "1fr 1fr", width: "100%" }}>
+            <Button onClick={() => setStatsOpen(true)}>More Stats</Button>
+            <Button onClick={() => setEarningsOpen(true)}>More Earnings Info</Button>
+            <Tooltip title={player.money < CONSTANTS.TravelCost ? <Typography>Insufficient funds</Typography> : ""}>
+              <span>
+                <Button
+                  onClick={() => setTravelOpen(true)}
+                  disabled={player.money < CONSTANTS.TravelCost}
+                  sx={{ width: "100%", height: "100%" }}
+                >
+                  Travel
+                </Button>
+              </span>
+            </Tooltip>
+            <Tooltip
+              title={props.sleeve.shock < 100 ? <Typography>Unlocked when sleeve has fully recovered</Typography> : ""}
+            >
+              <span>
+                <Button
+                  onClick={() => setAugmentationsOpen(true)}
+                  disabled={props.sleeve.shock < 100}
+                  sx={{ width: "100%", height: "100%" }}
+                >
+                  Manage Augmentations
+                </Button>
+              </span>
+            </Tooltip>
           </Box>
-          <Box>
-            <EarningsElement sleeve={props.sleeve} />
-            <Box>
-              <TaskSelector player={player} sleeve={props.sleeve} setABC={setABC} />
-              <Button onClick={setTask} sx={{ width: "100%" }}>
-                Set Task
-              </Button>
-              <Typography>{desc}</Typography>
-              <Typography>
+        </span>
+        <span>
+          <EarningsElement sleeve={props.sleeve} />
+          <TaskSelector player={player} sleeve={props.sleeve} setABC={setABC} />
+          <Button onClick={setTask} sx={{ width: "100%" }}>
+            Set Task
+          </Button>
+          <Typography>{desc}</Typography>
+          <Typography>
             {props.sleeve.currentTask === SleeveTaskType.Crime && (
               <ProgressBar
                 variant="determinate"
@@ -184,23 +176,21 @@ export function SleeveElem(props: IProps): React.ReactElement {
               />
             )}
           </Typography>
-            </Box>
-          </Box>
-          <MoreStatsModal open={statsOpen} onClose={() => setStatsOpen(false)} sleeve={props.sleeve} />
-          <MoreEarningsModal open={earningsOpen} onClose={() => setEarningsOpen(false)} sleeve={props.sleeve} />
-          <TravelModal
-            open={travelOpen}
-            onClose={() => setTravelOpen(false)}
-            sleeve={props.sleeve}
-            rerender={props.rerender}
-          />
-          <SleeveAugmentationsModal
-            open={augmentationsOpen}
-            onClose={() => setAugmentationsOpen(false)}
-            sleeve={props.sleeve}
-          />
-        </Box>
-      </Box>
-    </Box>
+        </span>
+      </Paper>
+      <MoreStatsModal open={statsOpen} onClose={() => setStatsOpen(false)} sleeve={props.sleeve} />
+      <MoreEarningsModal open={earningsOpen} onClose={() => setEarningsOpen(false)} sleeve={props.sleeve} />
+      <TravelModal
+        open={travelOpen}
+        onClose={() => setTravelOpen(false)}
+        sleeve={props.sleeve}
+        rerender={props.rerender}
+      />
+      <SleeveAugmentationsModal
+        open={augmentationsOpen}
+        onClose={() => setAugmentationsOpen(false)}
+        sleeve={props.sleeve}
+      />
+    </>
   );
 }

From 73d08973f9d2cb31be4ce6d8f032df4478e3a54e Mon Sep 17 00:00:00 2001
From: nickofolas <nickofolas@gmail.com>
Date: Mon, 2 May 2022 17:56:02 -0500
Subject: [PATCH 07/10] Render faction money gain conditionally

---
 src/ui/WorkInProgressRoot.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/ui/WorkInProgressRoot.tsx b/src/ui/WorkInProgressRoot.tsx
index db5b9e721..3dcb3c92a 100644
--- a/src/ui/WorkInProgressRoot.tsx
+++ b/src/ui/WorkInProgressRoot.tsx
@@ -179,11 +179,15 @@ export function WorkInProgressRoot(): React.ReactElement {
         </>
       ),
       gains: [
-        <StatsRow name="Money" color={Settings.theme.money}>
-          <Typography>
-            <Money money={player.workMoneyGained} /> (<MoneyRate money={player.workMoneyGainRate * CYCLES_PER_SEC} />)
-          </Typography>
-        </StatsRow>,
+        player.workMoneyGained > 0 ? (
+          <StatsRow name="Money" color={Settings.theme.money}>
+            <Typography>
+              <Money money={player.workMoneyGained} /> (<MoneyRate money={player.workMoneyGainRate * CYCLES_PER_SEC} />)
+            </Typography>
+          </StatsRow>
+        ) : (
+          <></>
+        ),
         <StatsRow name="Faction Reputation" color={Settings.theme.rep}>
           <Typography>
             <Reputation reputation={player.workRepGained} /> (

From e8a08424af6b296f722a0b7c9d84e2656a357e5f Mon Sep 17 00:00:00 2001
From: nickofolas <nickofolas@gmail.com>
Date: Mon, 2 May 2022 17:57:50 -0500
Subject: [PATCH 08/10] Fix typo

---
 src/ui/WorkInProgressRoot.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/WorkInProgressRoot.tsx b/src/ui/WorkInProgressRoot.tsx
index 3dcb3c92a..f14cc5ef5 100644
--- a/src/ui/WorkInProgressRoot.tsx
+++ b/src/ui/WorkInProgressRoot.tsx
@@ -461,7 +461,7 @@ export function WorkInProgressRoot(): React.ReactElement {
       stopText: "Stop grafting",
       stopTooltip: (
         <>
-          If you cancel, you work will <b>not</b> be saved, and the money you spent will <b>not</b> be returned
+          If you cancel, your work will <b>not</b> be saved, and the money you spent will <b>not</b> be returned
         </>
       ),
     };

From b8cb5f09915e9ae27625fedc34c90ee106c17c49 Mon Sep 17 00:00:00 2001
From: nickofolas <nickofolas@gmail.com>
Date: Tue, 3 May 2022 15:27:41 -0500
Subject: [PATCH 09/10] Remove elapsed from crime WIP

---
 src/ui/WorkInProgressRoot.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/ui/WorkInProgressRoot.tsx b/src/ui/WorkInProgressRoot.tsx
index f14cc5ef5..c10cb152e 100644
--- a/src/ui/WorkInProgressRoot.tsx
+++ b/src/ui/WorkInProgressRoot.tsx
@@ -392,7 +392,6 @@ export function WorkInProgressRoot(): React.ReactElement {
       title: `You are attempting to ${player.crimeType}`,
 
       progress: {
-        elapsed: player.timeWorked,
         remaining: player.timeNeededToCompleteWork - player.timeWorked,
         percentage: completion,
       },

From cc5e89208efdaee3f001d86a1dea29b8a372f90f Mon Sep 17 00:00:00 2001
From: nickofolas <nickofolas@gmail.com>
Date: Wed, 4 May 2022 12:44:48 -0500
Subject: [PATCH 10/10] Convert WIP root to use switch statement

---
 src/ui/WorkInProgressRoot.tsx | 611 ++++++++++++++++++----------------
 1 file changed, 320 insertions(+), 291 deletions(-)

diff --git a/src/ui/WorkInProgressRoot.tsx b/src/ui/WorkInProgressRoot.tsx
index c10cb152e..bc266c22d 100644
--- a/src/ui/WorkInProgressRoot.tsx
+++ b/src/ui/WorkInProgressRoot.tsx
@@ -138,337 +138,366 @@ export function WorkInProgressRoot(): React.ReactElement {
 
   let workInfo: IWorkInfo | null;
 
-  if (player.workType == CONSTANTS.WorkTypeFaction) {
-    const faction = Factions[player.currentWorkFactionName];
-    if (!faction) {
+  switch (player.workType) {
+    case CONSTANTS.WorkTypeFaction: {
+      const faction = Factions[player.currentWorkFactionName];
+      if (!faction) {
+        workInfo = {
+          buttons: {
+            cancel: () => router.toFactions(),
+          },
+          title:
+            `You have not joined ${player.currentWorkFactionName || "(Faction not found)"} at this time,` +
+            " please try again if you think this should have worked",
+
+          stopText: "Back to Factions",
+        };
+      }
+
+      function cancel(): void {
+        router.toFaction(faction);
+        player.finishFactionWork(true);
+      }
+      function unfocus(): void {
+        router.toFaction(faction);
+        player.stopFocusing();
+      }
+
       workInfo = {
         buttons: {
-          cancel: () => router.toFactions(),
+          cancel: cancel,
+          unfocus: unfocus,
         },
-        title:
-          `You have not joined ${player.currentWorkFactionName || "(Faction not found)"} at this time,` +
-          " please try again if you think this should have worked",
+        title: (
+          <>
+            You are currently {player.currentWorkFactionDescription} for your faction <b>{faction.name}</b>
+          </>
+        ),
 
-        stopText: "Back to Factions",
+        description: (
+          <>
+            Current Faction Reputation: <Reputation reputation={faction.playerReputation} />
+          </>
+        ),
+        gains: [
+          player.workMoneyGained > 0 ? (
+            <StatsRow name="Money" color={Settings.theme.money}>
+              <Typography>
+                <Money money={player.workMoneyGained} /> (
+                <MoneyRate money={player.workMoneyGainRate * CYCLES_PER_SEC} />)
+              </Typography>
+            </StatsRow>
+          ) : (
+            <></>
+          ),
+          <StatsRow name="Faction Reputation" color={Settings.theme.rep}>
+            <Typography>
+              <Reputation reputation={player.workRepGained} /> (
+              <ReputationRate reputation={player.workRepGainRate * CYCLES_PER_SEC} />)
+            </Typography>
+          </StatsRow>,
+          ...expGains,
+        ],
+        progress: {
+          elapsed: player.timeWorked,
+        },
+
+        stopText: "Stop Faction work",
       };
+
+      break;
     }
 
-    function cancel(): void {
-      router.toFaction(faction);
-      player.finishFactionWork(true);
-    }
-    function unfocus(): void {
-      router.toFaction(faction);
-      player.stopFocusing();
+    case CONSTANTS.WorkTypeStudyClass: {
+      const className = player.className;
+      function cancel(): void {
+        player.finishClass(true);
+        router.toCity();
+      }
+
+      function unfocus(): void {
+        router.toCity();
+        player.stopFocusing();
+      }
+
+      let stopText = "";
+      if (
+        className === CONSTANTS.ClassGymStrength ||
+        className === CONSTANTS.ClassGymDefense ||
+        className === CONSTANTS.ClassGymDexterity ||
+        className === CONSTANTS.ClassGymAgility
+      ) {
+        stopText = "Stop training at gym";
+      } else {
+        stopText = "Stop taking course";
+      }
+
+      workInfo = {
+        buttons: {
+          cancel: cancel,
+          unfocus: unfocus,
+        },
+        title: (
+          <>
+            You are currently <b>{className}</b>
+          </>
+        ),
+
+        gains: [
+          <StatsRow name="Total Cost" color={Settings.theme.money}>
+            <Typography>
+              <Money money={-player.workMoneyGained} /> (<MoneyRate money={player.workMoneyLossRate * CYCLES_PER_SEC} />
+              )
+            </Typography>
+          </StatsRow>,
+          ...expGains,
+        ],
+        progress: {
+          elapsed: player.timeWorked,
+        },
+
+        stopText: stopText,
+      };
+
+      break;
     }
 
-    workInfo = {
-      buttons: {
-        cancel: cancel,
-        unfocus: unfocus,
-      },
-      title: (
-        <>
-          You are currently {player.currentWorkFactionDescription} for your faction <b>{faction.name}</b>
-        </>
-      ),
+    case CONSTANTS.WorkTypeCompany: {
+      const comp = Companies[player.companyName];
+      if (comp == null || !(comp instanceof Company)) {
+        workInfo = {
+          buttons: {
+            cancel: () => router.toTerminal(),
+          },
+          title:
+            `You cannot work for ${player.companyName || "(Company not found)"} at this time,` +
+            " please try again if you think this should have worked",
 
-      description: (
-        <>
-          Current Faction Reputation: <Reputation reputation={faction.playerReputation} />
-        </>
-      ),
-      gains: [
-        player.workMoneyGained > 0 ? (
+          stopText: "Back to Terminal",
+        };
+      }
+
+      const companyRep = comp.playerReputation;
+
+      function cancel(): void {
+        player.finishWork(true);
+        router.toJob();
+      }
+      function unfocus(): void {
+        player.stopFocusing();
+        router.toJob();
+      }
+
+      const position = player.jobs[player.companyName];
+
+      const penalty = player.cancelationPenalty();
+
+      const penaltyString = penalty === 0.5 ? "half" : "three-quarters";
+
+      workInfo = {
+        buttons: {
+          cancel: cancel,
+          unfocus: unfocus,
+        },
+        title: (
+          <>
+            You are currently working as a <b>{position}</b> at <b>{player.companyName}</b>
+          </>
+        ),
+
+        description: (
+          <>
+            Current Company Reputation: <Reputation reputation={companyRep} />
+          </>
+        ),
+        gains: [
           <StatsRow name="Money" color={Settings.theme.money}>
             <Typography>
               <Money money={player.workMoneyGained} /> (<MoneyRate money={player.workMoneyGainRate * CYCLES_PER_SEC} />)
             </Typography>
-          </StatsRow>
-        ) : (
-          <></>
-        ),
-        <StatsRow name="Faction Reputation" color={Settings.theme.rep}>
-          <Typography>
-            <Reputation reputation={player.workRepGained} /> (
-            <ReputationRate reputation={player.workRepGainRate * CYCLES_PER_SEC} />)
-          </Typography>
-        </StatsRow>,
-        ...expGains,
-      ],
-      progress: {
-        elapsed: player.timeWorked,
-      },
+          </StatsRow>,
+          <StatsRow name="Company Reputation" color={Settings.theme.rep}>
+            <Typography>
+              <Reputation reputation={player.workRepGained} /> (
+              <ReputationRate reputation={player.workRepGainRate * CYCLES_PER_SEC} />)
+            </Typography>
+          </StatsRow>,
+          ...expGains,
+        ],
+        progress: {
+          elapsed: player.timeWorked,
+        },
 
-      stopText: "Stop Faction work",
-    };
-  } else if (player.className !== "") {
-    const className = player.className;
-    function cancel(): void {
-      player.finishClass(true);
-      router.toCity();
+        stopText: "Stop working",
+        stopTooltip:
+          "You will automatically finish after working for 8 hours. You can cancel earlier if you wish" +
+          ` but you will only gain ${penaltyString} of the reputation you've earned so far.`,
+      };
+
+      break;
     }
 
-    function unfocus(): void {
-      router.toCity();
-      player.stopFocusing();
-    }
+    case CONSTANTS.WorkTypeCompanyPartTime: {
+      function cancel(): void {
+        player.finishWorkPartTime(true);
+        router.toJob();
+      }
+      function unfocus(): void {
+        player.stopFocusing();
+        router.toJob();
+      }
+      const comp = Companies[player.companyName];
+      let companyRep = 0;
+      if (comp == null || !(comp instanceof Company)) {
+        throw new Error(`Could not find Company: ${player.companyName}`);
+      }
+      companyRep = comp.playerReputation;
 
-    let stopText = "";
-    if (
-      className == CONSTANTS.ClassGymStrength ||
-      className == CONSTANTS.ClassGymDefense ||
-      className == CONSTANTS.ClassGymDexterity ||
-      className == CONSTANTS.ClassGymAgility
-    ) {
-      stopText = "Stop training at gym";
-    } else {
-      stopText = "Stop taking course";
-    }
+      const position = player.jobs[player.companyName];
 
-    workInfo = {
-      buttons: {
-        cancel: cancel,
-        unfocus: unfocus,
-      },
-      title: (
-        <>
-          You are currently <b>{className}</b>
-        </>
-      ),
-
-      gains: [
-        <StatsRow name="Total Cost" color={Settings.theme.money}>
-          <Typography>
-            <Money money={-player.workMoneyGained} /> (<MoneyRate money={player.workMoneyLossRate * CYCLES_PER_SEC} />)
-          </Typography>
-        </StatsRow>,
-        ...expGains,
-      ],
-      progress: {
-        elapsed: player.timeWorked,
-      },
-
-      stopText: stopText,
-    };
-  } else if (player.workType == CONSTANTS.WorkTypeCompany) {
-    const comp = Companies[player.companyName];
-    if (comp == null || !(comp instanceof Company)) {
       workInfo = {
         buttons: {
-          cancel: () => router.toTerminal(),
+          cancel: cancel,
+          unfocus: unfocus,
         },
-        title:
-          `You cannot work for ${player.companyName || "(Company not found)"} at this time,` +
-          " please try again if you think this should have worked",
+        title: (
+          <>
+            You are currently working as a <b>{position}</b> at <b>{player.companyName}</b>
+          </>
+        ),
 
-        stopText: "Back to Terminal",
+        description: (
+          <>
+            Current Company Reputation: <Reputation reputation={companyRep} />
+          </>
+        ),
+        gains: [
+          <StatsRow name="Money" color={Settings.theme.money}>
+            <Typography>
+              <Money money={player.workMoneyGained} /> (<MoneyRate money={player.workMoneyGainRate * CYCLES_PER_SEC} />)
+            </Typography>
+          </StatsRow>,
+          <StatsRow name="Company Reputation" color={Settings.theme.rep}>
+            <Typography>
+              <Reputation reputation={player.workRepGained} /> (
+              <ReputationRate reputation={player.workRepGainRate * CYCLES_PER_SEC} />)
+            </Typography>
+          </StatsRow>,
+          ...expGains,
+        ],
+        progress: {
+          elapsed: player.timeWorked,
+        },
+
+        stopText: "Stop working",
+        stopTooltip:
+          "You will automatically finish after working for 8 hours. You can cancel earlier if you wish" +
+          " and there will be no penalty because this is a part-time job.",
       };
+
+      break;
     }
 
-    const companyRep = comp.playerReputation;
+    case CONSTANTS.WorkTypeCrime: {
+      const completion = Math.round((player.timeWorked / player.timeNeededToCompleteWork) * 100);
 
-    function cancel(): void {
-      player.finishWork(true);
-      router.toJob();
-    }
-    function unfocus(): void {
-      player.stopFocusing();
-      router.toJob();
-    }
-
-    const position = player.jobs[player.companyName];
-
-    const penalty = player.cancelationPenalty();
-
-    const penaltyString = penalty === 0.5 ? "half" : "three-quarters";
-
-    workInfo = {
-      buttons: {
-        cancel: cancel,
-        unfocus: unfocus,
-      },
-      title: (
-        <>
-          You are currently working as a <b>{position}</b> at <b>{player.companyName}</b>
-        </>
-      ),
-
-      description: (
-        <>
-          Current Company Reputation: <Reputation reputation={companyRep} />
-        </>
-      ),
-      gains: [
-        <StatsRow name="Money" color={Settings.theme.money}>
-          <Typography>
-            <Money money={player.workMoneyGained} /> (<MoneyRate money={player.workMoneyGainRate * CYCLES_PER_SEC} />)
-          </Typography>
-        </StatsRow>,
-        <StatsRow name="Company Reputation" color={Settings.theme.rep}>
-          <Typography>
-            <Reputation reputation={player.workRepGained} /> (
-            <ReputationRate reputation={player.workRepGainRate * CYCLES_PER_SEC} />)
-          </Typography>
-        </StatsRow>,
-        ...expGains,
-      ],
-      progress: {
-        elapsed: player.timeWorked,
-      },
-
-      stopText: "Stop working",
-      stopTooltip:
-        "You will automatically finish after working for 8 hours. You can cancel earlier if you wish" +
-        ` but you will only gain ${penaltyString} of the reputation you've earned so far.`,
-    };
-  } else if (player.workType == CONSTANTS.WorkTypeCompanyPartTime) {
-    function cancel(): void {
-      player.finishWorkPartTime(true);
-      router.toJob();
-    }
-    function unfocus(): void {
-      player.stopFocusing();
-      router.toJob();
-    }
-    const comp = Companies[player.companyName];
-    let companyRep = 0;
-    if (comp == null || !(comp instanceof Company)) {
-      throw new Error(`Could not find Company: ${player.companyName}`);
-    }
-    companyRep = comp.playerReputation;
-
-    const position = player.jobs[player.companyName];
-
-    workInfo = {
-      buttons: {
-        cancel: cancel,
-        unfocus: unfocus,
-      },
-      title: (
-        <>
-          You are currently working as a <b>{position}</b> at <b>{player.companyName}</b>
-        </>
-      ),
-
-      description: (
-        <>
-          Current Company Reputation: <Reputation reputation={companyRep} />
-        </>
-      ),
-      gains: [
-        <StatsRow name="Money" color={Settings.theme.money}>
-          <Typography>
-            <Money money={player.workMoneyGained} /> (<MoneyRate money={player.workMoneyGainRate * CYCLES_PER_SEC} />)
-          </Typography>
-        </StatsRow>,
-        <StatsRow name="Company Reputation" color={Settings.theme.rep}>
-          <Typography>
-            <Reputation reputation={player.workRepGained} /> (
-            <ReputationRate reputation={player.workRepGainRate * CYCLES_PER_SEC} />)
-          </Typography>
-        </StatsRow>,
-        ...expGains,
-      ],
-      progress: {
-        elapsed: player.timeWorked,
-      },
-
-      stopText: "Stop working",
-      stopTooltip:
-        "You will automatically finish after working for 8 hours. You can cancel earlier if you wish" +
-        " and there will be no penalty because this is a part-time job.",
-    };
-  } else if (player.crimeType !== "") {
-    const completion = Math.round((player.timeWorked / player.timeNeededToCompleteWork) * 100);
-
-    workInfo = {
-      buttons: {
-        cancel: () => {
-          router.toLocation(Locations[LocationName.Slums]);
-          player.finishCrime(true);
+      workInfo = {
+        buttons: {
+          cancel: () => {
+            router.toLocation(Locations[LocationName.Slums]);
+            player.finishCrime(true);
+          },
         },
-      },
-      title: `You are attempting to ${player.crimeType}`,
+        title: `You are attempting to ${player.crimeType}`,
 
-      progress: {
-        remaining: player.timeNeededToCompleteWork - player.timeWorked,
-        percentage: completion,
-      },
+        progress: {
+          remaining: player.timeNeededToCompleteWork - player.timeWorked,
+          percentage: completion,
+        },
 
-      stopText: "Cancel crime",
-    };
-  } else if (player.createProgramName !== "") {
-    function cancel(): void {
-      player.finishCreateProgramWork(true);
-      router.toTerminal();
-    }
-    function unfocus(): void {
-      router.toTerminal();
-      player.stopFocusing();
+        stopText: "Cancel crime",
+      };
+
+      break;
     }
 
-    const completion = (player.timeWorkedCreateProgram / player.timeNeededToCompleteWork) * 100;
+    case CONSTANTS.WorkTypeCreateProgram: {
+      function cancel(): void {
+        player.finishCreateProgramWork(true);
+        router.toTerminal();
+      }
+      function unfocus(): void {
+        router.toTerminal();
+        player.stopFocusing();
+      }
 
-    workInfo = {
-      buttons: {
-        cancel: cancel,
-        unfocus: unfocus,
-      },
-      title: (
-        <>
-          You are currently working on coding <b>{player.createProgramName}</b>
-        </>
-      ),
+      const completion = (player.timeWorkedCreateProgram / player.timeNeededToCompleteWork) * 100;
 
-      progress: {
-        elapsed: player.timeWorked,
-        percentage: completion,
-      },
+      workInfo = {
+        buttons: {
+          cancel: cancel,
+          unfocus: unfocus,
+        },
+        title: (
+          <>
+            You are currently working on coding <b>{player.createProgramName}</b>
+          </>
+        ),
 
-      stopText: "Stop creating program",
-      stopTooltip: "Your work will be saved and you can return to complete the program later.",
-    };
-  } else if (player.graftAugmentationName !== "") {
-    function cancel(): void {
-      player.finishGraftAugmentationWork(true);
-      router.toTerminal();
-    }
-    function unfocus(): void {
-      router.toTerminal();
-      player.stopFocusing();
+        progress: {
+          elapsed: player.timeWorked,
+          percentage: completion,
+        },
+
+        stopText: "Stop creating program",
+        stopTooltip: "Your work will be saved and you can return to complete the program later.",
+      };
+
+      break;
     }
 
-    const completion = (player.timeWorkedGraftAugmentation / player.timeNeededToCompleteWork) * 100;
+    case CONSTANTS.WorkTypeGraftAugmentation: {
+      function cancel(): void {
+        player.finishGraftAugmentationWork(true);
+        router.toTerminal();
+      }
+      function unfocus(): void {
+        router.toTerminal();
+        player.stopFocusing();
+      }
 
-    workInfo = {
-      buttons: {
-        cancel: cancel,
-        unfocus: unfocus,
-      },
-      title: (
-        <>
-          You are currently working on grafting <b>{player.graftAugmentationName}</b>
-        </>
-      ),
+      const completion = (player.timeWorkedGraftAugmentation / player.timeNeededToCompleteWork) * 100;
 
-      progress: {
-        elapsed: player.timeWorked,
-        percentage: completion,
-      },
+      workInfo = {
+        buttons: {
+          cancel: cancel,
+          unfocus: unfocus,
+        },
+        title: (
+          <>
+            You are currently working on grafting <b>{player.graftAugmentationName}</b>
+          </>
+        ),
 
-      stopText: "Stop grafting",
-      stopTooltip: (
-        <>
-          If you cancel, your work will <b>not</b> be saved, and the money you spent will <b>not</b> be returned
-        </>
-      ),
-    };
-  } else if (!player.workType) {
-    router.toTerminal();
-    workInfo = null;
-  } else {
-    workInfo = null;
+        progress: {
+          elapsed: player.timeWorked,
+          percentage: completion,
+        },
+
+        stopText: "Stop grafting",
+        stopTooltip: (
+          <>
+            If you cancel, your work will <b>not</b> be saved, and the money you spent will <b>not</b> be returned
+          </>
+        ),
+      };
+
+      break;
+    }
+
+    default:
+      router.toTerminal();
+      workInfo = null;
   }
 
   if (workInfo === null) {