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] 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>
               )}