From 28aca06208de91dc879694ae9e9b88b1c785314e Mon Sep 17 00:00:00 2001
From: Olivier Gagnon <oli.gagnon4418@gmail.com>
Date: Wed, 22 Sep 2021 03:25:12 -0400
Subject: [PATCH] convert work in progress to mui

---
 src/ui/WorkInProgressRoot.tsx | 431 ++++++++++++++++++----------------
 1 file changed, 224 insertions(+), 207 deletions(-)

diff --git a/src/ui/WorkInProgressRoot.tsx b/src/ui/WorkInProgressRoot.tsx
index fc3c16135..b64464c23 100644
--- a/src/ui/WorkInProgressRoot.tsx
+++ b/src/ui/WorkInProgressRoot.tsx
@@ -13,6 +13,10 @@ 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";
 
 const CYCLES_PER_SEC = 1000 / CONSTANTS.MilliPerCycle;
@@ -40,49 +44,50 @@ export function WorkInProgressRoot(): React.ReactElement {
       player.stopFocusing();
     }
     return (
-      <div>
-        <p>
-          You are currently {player.currentWorkFactionDescription} for your faction {faction.name}
-          <br />
-          (Current Faction 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(player.workRepGained)} ({ReputationRate(player.workRepGainRate * CYCLES_PER_SEC)}) reputation for
-          this faction <br />
-          <br />
-          {numeralWrapper.formatExp(player.workHackExpGained)} (
-          {numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec) hacking exp <br />
-          <br />
-          {numeralWrapper.formatExp(player.workStrExpGained)} (
-          {numeralWrapper.formatExp(player.workStrExpGainRate * CYCLES_PER_SEC)} / sec) strength exp <br />
-          {numeralWrapper.formatExp(player.workDefExpGained)} (
-          {numeralWrapper.formatExp(player.workDefExpGainRate * CYCLES_PER_SEC)} / sec) defense exp <br />
-          {numeralWrapper.formatExp(player.workDexExpGained)} (
-          {numeralWrapper.formatExp(player.workDexExpGainRate * CYCLES_PER_SEC)} / sec) dexterity exp <br />
-          {numeralWrapper.formatExp(player.workAgiExpGained)} (
-          {numeralWrapper.formatExp(player.workAgiExpGainRate * CYCLES_PER_SEC)} / sec) agility exp <br />
-          <br />
-          {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.
-        </p>
-
-        <button onClick={cancel} className="work-button">
-          Stop Faction Work
-        </button>
-        <button onClick={unfocus} className="work-button">
-          Do something else simultaneously
-        </button>
-      </div>
+      <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(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(player.workRepGained)} ({ReputationRate(player.workRepGainRate * CYCLES_PER_SEC)}) reputation
+            for this faction <br />
+            <br />
+            {numeralWrapper.formatExp(player.workHackExpGained)} (
+            {numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec) hacking exp <br />
+            <br />
+            {numeralWrapper.formatExp(player.workStrExpGained)} (
+            {numeralWrapper.formatExp(player.workStrExpGainRate * CYCLES_PER_SEC)} / sec) strength exp <br />
+            {numeralWrapper.formatExp(player.workDefExpGained)} (
+            {numeralWrapper.formatExp(player.workDefExpGainRate * CYCLES_PER_SEC)} / sec) defense exp <br />
+            {numeralWrapper.formatExp(player.workDexExpGained)} (
+            {numeralWrapper.formatExp(player.workDexExpGainRate * CYCLES_PER_SEC)} / sec) dexterity exp <br />
+            {numeralWrapper.formatExp(player.workAgiExpGained)} (
+            {numeralWrapper.formatExp(player.workAgiExpGainRate * CYCLES_PER_SEC)} / sec) agility exp <br />
+            <br />
+            {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>
     );
   }
 
@@ -110,35 +115,36 @@ export function WorkInProgressRoot(): React.ReactElement {
     }
 
     return (
-      <div>
-        <p>
-          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 />
-          {numeralWrapper.formatExp(player.workHackExpGained)} (
-          {numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec) hacking exp <br />
-          {numeralWrapper.formatExp(player.workStrExpGained)} (
-          {numeralWrapper.formatExp(player.workStrExpGainRate * CYCLES_PER_SEC)} / sec) strength exp <br />
-          {numeralWrapper.formatExp(player.workDefExpGained)} (
-          {numeralWrapper.formatExp(player.workDefExpGainRate * CYCLES_PER_SEC)} / sec) defense exp <br />
-          {numeralWrapper.formatExp(player.workDexExpGained)} (
-          {numeralWrapper.formatExp(player.workDexExpGainRate * CYCLES_PER_SEC)} / sec) dexterity exp <br />
-          {numeralWrapper.formatExp(player.workAgiExpGained)} (
-          {numeralWrapper.formatExp(player.workAgiExpGainRate * CYCLES_PER_SEC)} / sec) agility exp <br />
-          {numeralWrapper.formatExp(player.workChaExpGained)} (
-          {numeralWrapper.formatExp(player.workChaExpGainRate * CYCLES_PER_SEC)} / sec) charisma exp <br />
-          You may cancel at any time
-        </p>
-
-        <button onClick={cancel} className="work-button">
-          {stopText}
-        </button>
-      </div>
+      <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 />
+            {numeralWrapper.formatExp(player.workHackExpGained)} (
+            {numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec) hacking exp <br />
+            {numeralWrapper.formatExp(player.workStrExpGained)} (
+            {numeralWrapper.formatExp(player.workStrExpGainRate * CYCLES_PER_SEC)} / sec) strength exp <br />
+            {numeralWrapper.formatExp(player.workDefExpGained)} (
+            {numeralWrapper.formatExp(player.workDefExpGainRate * CYCLES_PER_SEC)} / sec) defense exp <br />
+            {numeralWrapper.formatExp(player.workDexExpGained)} (
+            {numeralWrapper.formatExp(player.workDexExpGainRate * CYCLES_PER_SEC)} / sec) dexterity exp <br />
+            {numeralWrapper.formatExp(player.workAgiExpGained)} (
+            {numeralWrapper.formatExp(player.workAgiExpGainRate * CYCLES_PER_SEC)} / sec) agility exp <br />
+            {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 onClick={cancel}>{stopText}</Button>
+        </Grid>
+      </Grid>
     );
   }
 
@@ -165,54 +171,55 @@ export function WorkInProgressRoot(): React.ReactElement {
 
     const penaltyString = penalty === 0.5 ? "half" : "three-quarters";
     return (
-      <div>
-        <p>
-          You are currently working as a {position} at {player.companyName} (Current Company 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(player.workRepGained)} ({ReputationRate(player.workRepGainRate * CYCLES_PER_SEC)}) reputation for
-          this company <br />
-          <br />
-          {numeralWrapper.formatExp(player.workHackExpGained)} (
-          {`${numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec`}
-          ) hacking exp <br />
-          <br />
-          {numeralWrapper.formatExp(player.workStrExpGained)} (
-          {`${numeralWrapper.formatExp(player.workStrExpGainRate * CYCLES_PER_SEC)} / sec`}
-          ) strength exp <br />
-          {numeralWrapper.formatExp(player.workDefExpGained)} (
-          {`${numeralWrapper.formatExp(player.workDefExpGainRate * CYCLES_PER_SEC)} / sec`}
-          ) defense exp <br />
-          {numeralWrapper.formatExp(player.workDexExpGained)} (
-          {`${numeralWrapper.formatExp(player.workDexExpGainRate * CYCLES_PER_SEC)} / sec`}
-          ) dexterity exp <br />
-          {numeralWrapper.formatExp(player.workAgiExpGained)} (
-          {`${numeralWrapper.formatExp(player.workAgiExpGainRate * CYCLES_PER_SEC)} / sec`}
-          ) agility exp <br />
-          <br />
-          {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.
-        </p>
-
-        <button onClick={cancel} className="work-button">
-          Stop Working
-        </button>
-        <button onClick={unfocus} className="work-button">
-          Do something else simultaneously
-        </button>
-      </div>
+      <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(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(player.workRepGained)} ({ReputationRate(player.workRepGainRate * CYCLES_PER_SEC)}) reputation
+            for this company <br />
+            <br />
+            {numeralWrapper.formatExp(player.workHackExpGained)} (
+            {`${numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec`}
+            ) hacking exp <br />
+            <br />
+            {numeralWrapper.formatExp(player.workStrExpGained)} (
+            {`${numeralWrapper.formatExp(player.workStrExpGainRate * CYCLES_PER_SEC)} / sec`}
+            ) strength exp <br />
+            {numeralWrapper.formatExp(player.workDefExpGained)} (
+            {`${numeralWrapper.formatExp(player.workDefExpGainRate * CYCLES_PER_SEC)} / sec`}
+            ) defense exp <br />
+            {numeralWrapper.formatExp(player.workDexExpGained)} (
+            {`${numeralWrapper.formatExp(player.workDexExpGainRate * CYCLES_PER_SEC)} / sec`}
+            ) dexterity exp <br />
+            {numeralWrapper.formatExp(player.workAgiExpGained)} (
+            {`${numeralWrapper.formatExp(player.workAgiExpGainRate * CYCLES_PER_SEC)} / sec`}
+            ) agility exp <br />
+            <br />
+            {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>
     );
   }
 
@@ -234,55 +241,56 @@ export function WorkInProgressRoot(): React.ReactElement {
 
     const position = player.jobs[player.companyName];
     return (
-      <div>
-        <p>
-          You are currently working as a {position} at {player.companyName} (Current Company 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(player.workRepGained)} (
-          {Reputation(`${numeralWrapper.formatExp(player.workRepGainRate * CYCLES_PER_SEC)} / sec`)}
-          ) reputation for this company <br />
-          <br />
-          {numeralWrapper.formatExp(player.workHackExpGained)} (
-          {`${numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec`}
-          ) hacking exp <br />
-          <br />
-          {numeralWrapper.formatExp(player.workStrExpGained)} (
-          {`${numeralWrapper.formatExp(player.workStrExpGainRate * CYCLES_PER_SEC)} / sec`}
-          ) strength exp <br />
-          {numeralWrapper.formatExp(player.workDefExpGained)} (
-          {`${numeralWrapper.formatExp(player.workDefExpGainRate * CYCLES_PER_SEC)} / sec`}
-          ) defense exp <br />
-          {numeralWrapper.formatExp(player.workDexExpGained)} (
-          {`${numeralWrapper.formatExp(player.workDexExpGainRate * CYCLES_PER_SEC)} / sec`}
-          ) dexterity exp <br />
-          {numeralWrapper.formatExp(player.workAgiExpGained)} (
-          {`${numeralWrapper.formatExp(player.workAgiExpGainRate * CYCLES_PER_SEC)} / sec`}
-          ) agility exp <br />
-          <br />
-          {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.
-        </p>
-
-        <button onClick={cancel} className="work-button">
-          Stop Working
-        </button>
-        <button onClick={unfocus} className="work-button">
-          Do something else simultaneously
-        </button>
-      </div>
+      <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(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(player.workRepGained)} (
+            {Reputation(`${numeralWrapper.formatExp(player.workRepGainRate * CYCLES_PER_SEC)} / sec`)}
+            ) reputation for this company <br />
+            <br />
+            {numeralWrapper.formatExp(player.workHackExpGained)} (
+            {`${numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec`}
+            ) hacking exp <br />
+            <br />
+            {numeralWrapper.formatExp(player.workStrExpGained)} (
+            {`${numeralWrapper.formatExp(player.workStrExpGainRate * CYCLES_PER_SEC)} / sec`}
+            ) strength exp <br />
+            {numeralWrapper.formatExp(player.workDefExpGained)} (
+            {`${numeralWrapper.formatExp(player.workDefExpGainRate * CYCLES_PER_SEC)} / sec`}
+            ) defense exp <br />
+            {numeralWrapper.formatExp(player.workDexExpGained)} (
+            {`${numeralWrapper.formatExp(player.workDexExpGainRate * CYCLES_PER_SEC)} / sec`}
+            ) dexterity exp <br />
+            {numeralWrapper.formatExp(player.workAgiExpGained)} (
+            {`${numeralWrapper.formatExp(player.workAgiExpGainRate * CYCLES_PER_SEC)} / sec`}
+            ) agility exp <br />
+            <br />
+            {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.
+          </Typography>
+        </Grid>
+        <Grid item>
+          <Button sx={{ mx: 2 }} onClick={cancel}>
+            Stop Working
+          </Button>
+          <Button onClick={unfocus}>Do something else simultaneously</Button>
+        </Grid>
+      </Grid>
     );
   }
 
@@ -299,51 +307,60 @@ export function WorkInProgressRoot(): React.ReactElement {
     const progressBar = createProgressBarText({ progress: (numBars + 1) / 20, totalTicks: 20 });
 
     return (
-      <div>
-        <p>You are attempting to {player.crimeType}.</p>
-        <br />
+      <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
+        <Grid item>
+          <Typography>
+            <p>You are attempting to {player.crimeType}.</p>
+            <br />
 
-        <p>Time remaining: {convertTimeMsToTimeElapsedString(player.timeNeededToCompleteWork - player.timeWorked)}</p>
+            <p>
+              Time remaining: {convertTimeMsToTimeElapsedString(player.timeNeededToCompleteWork - player.timeWorked)}
+            </p>
 
-        <br />
-        <pre>{progressBar}</pre>
-
-        <button
-          className="work-button"
-          onClick={() => {
-            router.toLocation(Locations[LocationName.Slums]);
-            player.finishCrime(true);
-          }}
-        >
-          Cancel crime
-        </button>
-      </div>
+            <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 !== "") {
     return (
-      <div>
-        <p>
-          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.
-        </p>
-        <button
-          className="work-button"
-          onClick={() => {
-            player.finishCreateProgramWork(true);
-            router.toTerminal();
-          }}
-        >
-          Cancel work on creating program
-        </button>
-      </div>
+      <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
+            onClick={() => {
+              player.finishCreateProgramWork(true);
+              router.toTerminal();
+            }}
+          >
+            Cancel work on creating program
+          </Button>
+        </Grid>
+      </Grid>
     );
   }