convert work in progress to mui

This commit is contained in:
Olivier Gagnon 2021-09-22 03:25:12 -04:00
parent c79fa240e1
commit 28aca06208

@ -13,6 +13,10 @@ import { Companies } from "../Company/Companies";
import { Locations } from "../Locations/Locations"; import { Locations } from "../Locations/Locations";
import { LocationName } from "../Locations/data/LocationNames"; 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 { createProgressBarText } from "../../utils/helpers/createProgressBarText";
const CYCLES_PER_SEC = 1000 / CONSTANTS.MilliPerCycle; const CYCLES_PER_SEC = 1000 / CONSTANTS.MilliPerCycle;
@ -40,49 +44,50 @@ export function WorkInProgressRoot(): React.ReactElement {
player.stopFocusing(); player.stopFocusing();
} }
return ( return (
<div> <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
<p> <Grid item>
You are currently {player.currentWorkFactionDescription} for your faction {faction.name} <Typography>
<br /> You are currently {player.currentWorkFactionDescription} for your faction {faction.name}
(Current Faction Reputation: {Reputation(faction.playerReputation)}). <br /> <br />
You have been doing this for {convertTimeMsToTimeElapsedString(player.timeWorked)} (Current Faction Reputation: {Reputation(faction.playerReputation)}). <br />
<br /> You have been doing this for {convertTimeMsToTimeElapsedString(player.timeWorked)}
<br /> <br />
You have earned: <br /> <br />
<br /> You have earned: <br />
<Money money={player.workMoneyGained} /> (<MoneyRate money={player.workMoneyGainRate * CYCLES_PER_SEC} />){" "} <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 <br />
this faction <br /> {Reputation(player.workRepGained)} ({ReputationRate(player.workRepGainRate * CYCLES_PER_SEC)}) reputation
<br /> for this faction <br />
{numeralWrapper.formatExp(player.workHackExpGained)} ( <br />
{numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec) hacking exp <br /> {numeralWrapper.formatExp(player.workHackExpGained)} (
<br /> {numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec) hacking exp <br />
{numeralWrapper.formatExp(player.workStrExpGained)} ( <br />
{numeralWrapper.formatExp(player.workStrExpGainRate * CYCLES_PER_SEC)} / sec) strength exp <br /> {numeralWrapper.formatExp(player.workStrExpGained)} (
{numeralWrapper.formatExp(player.workDefExpGained)} ( {numeralWrapper.formatExp(player.workStrExpGainRate * CYCLES_PER_SEC)} / sec) strength exp <br />
{numeralWrapper.formatExp(player.workDefExpGainRate * CYCLES_PER_SEC)} / sec) defense exp <br /> {numeralWrapper.formatExp(player.workDefExpGained)} (
{numeralWrapper.formatExp(player.workDexExpGained)} ( {numeralWrapper.formatExp(player.workDefExpGainRate * CYCLES_PER_SEC)} / sec) defense exp <br />
{numeralWrapper.formatExp(player.workDexExpGainRate * CYCLES_PER_SEC)} / sec) dexterity exp <br /> {numeralWrapper.formatExp(player.workDexExpGained)} (
{numeralWrapper.formatExp(player.workAgiExpGained)} ( {numeralWrapper.formatExp(player.workDexExpGainRate * CYCLES_PER_SEC)} / sec) dexterity exp <br />
{numeralWrapper.formatExp(player.workAgiExpGainRate * CYCLES_PER_SEC)} / sec) agility exp <br /> {numeralWrapper.formatExp(player.workAgiExpGained)} (
<br /> {numeralWrapper.formatExp(player.workAgiExpGainRate * CYCLES_PER_SEC)} / sec) agility exp <br />
{numeralWrapper.formatExp(player.workChaExpGained)} ( <br />
{numeralWrapper.formatExp(player.workChaExpGainRate * CYCLES_PER_SEC)} / sec) charisma exp <br /> {numeralWrapper.formatExp(player.workChaExpGained)} (
<br /> {numeralWrapper.formatExp(player.workChaExpGainRate * CYCLES_PER_SEC)} / sec) charisma exp <br />
You will automatically finish after working for 20 hours. You can cancel earlier if you wish. <br />
<br /> You will automatically finish after working for 20 hours. You can cancel earlier if you wish.
There is no penalty for cancelling earlier. <br />
</p> There is no penalty for cancelling earlier.
</Typography>
<button onClick={cancel} className="work-button"> </Grid>
Stop Faction Work <Grid item>
</button> <Button sx={{ mx: 2 }} onClick={cancel}>
<button onClick={unfocus} className="work-button"> Stop Faction Work
Do something else simultaneously </Button>
</button> <Button onClick={unfocus}>Do something else simultaneously</Button>
</div> </Grid>
</Grid>
); );
} }
@ -110,35 +115,36 @@ export function WorkInProgressRoot(): React.ReactElement {
} }
return ( return (
<div> <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
<p> <Grid item>
You have been {className} for {convertTimeMsToTimeElapsedString(player.timeWorked)} <Typography>
<br /> You have been {className} for {convertTimeMsToTimeElapsedString(player.timeWorked)}
<br /> <br />
This has cost you: <br /> <br />
<Money money={-player.workMoneyGained} /> (<MoneyRate money={player.workMoneyLossRate * CYCLES_PER_SEC} />){" "} This has cost you: <br />
<br /> <Money money={-player.workMoneyGained} /> (<MoneyRate money={player.workMoneyLossRate * CYCLES_PER_SEC} />){" "}
<br /> <br />
You have gained: <br /> <br />
{numeralWrapper.formatExp(player.workHackExpGained)} ( You have gained: <br />
{numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec) hacking exp <br /> {numeralWrapper.formatExp(player.workHackExpGained)} (
{numeralWrapper.formatExp(player.workStrExpGained)} ( {numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec) hacking exp <br />
{numeralWrapper.formatExp(player.workStrExpGainRate * CYCLES_PER_SEC)} / sec) strength exp <br /> {numeralWrapper.formatExp(player.workStrExpGained)} (
{numeralWrapper.formatExp(player.workDefExpGained)} ( {numeralWrapper.formatExp(player.workStrExpGainRate * CYCLES_PER_SEC)} / sec) strength exp <br />
{numeralWrapper.formatExp(player.workDefExpGainRate * CYCLES_PER_SEC)} / sec) defense exp <br /> {numeralWrapper.formatExp(player.workDefExpGained)} (
{numeralWrapper.formatExp(player.workDexExpGained)} ( {numeralWrapper.formatExp(player.workDefExpGainRate * CYCLES_PER_SEC)} / sec) defense exp <br />
{numeralWrapper.formatExp(player.workDexExpGainRate * CYCLES_PER_SEC)} / sec) dexterity exp <br /> {numeralWrapper.formatExp(player.workDexExpGained)} (
{numeralWrapper.formatExp(player.workAgiExpGained)} ( {numeralWrapper.formatExp(player.workDexExpGainRate * CYCLES_PER_SEC)} / sec) dexterity exp <br />
{numeralWrapper.formatExp(player.workAgiExpGainRate * CYCLES_PER_SEC)} / sec) agility exp <br /> {numeralWrapper.formatExp(player.workAgiExpGained)} (
{numeralWrapper.formatExp(player.workChaExpGained)} ( {numeralWrapper.formatExp(player.workAgiExpGainRate * CYCLES_PER_SEC)} / sec) agility exp <br />
{numeralWrapper.formatExp(player.workChaExpGainRate * CYCLES_PER_SEC)} / sec) charisma exp <br /> {numeralWrapper.formatExp(player.workChaExpGained)} (
You may cancel at any time {numeralWrapper.formatExp(player.workChaExpGainRate * CYCLES_PER_SEC)} / sec) charisma exp <br />
</p> You may cancel at any time
</Typography>
<button onClick={cancel} className="work-button"> </Grid>
{stopText} <Grid item>
</button> <Button onClick={cancel}>{stopText}</Button>
</div> </Grid>
</Grid>
); );
} }
@ -165,54 +171,55 @@ export function WorkInProgressRoot(): React.ReactElement {
const penaltyString = penalty === 0.5 ? "half" : "three-quarters"; const penaltyString = penalty === 0.5 ? "half" : "three-quarters";
return ( return (
<div> <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
<p> <Grid item>
You are currently working as a {position} at {player.companyName} (Current Company Reputation:{" "} <Typography>
{Reputation(companyRep)})<br /> You are currently working as a {position} at {player.companyName} (Current Company Reputation:{" "}
<br /> {Reputation(companyRep)})<br />
You have been working for {convertTimeMsToTimeElapsedString(player.timeWorked)} <br />
<br /> You have been working for {convertTimeMsToTimeElapsedString(player.timeWorked)}
<br /> <br />
You have earned: <br /> <br />
<br /> You have earned: <br />
<Money money={player.workMoneyGained} /> (<MoneyRate money={player.workMoneyGainRate * CYCLES_PER_SEC} />){" "} <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 <br />
this company <br /> {Reputation(player.workRepGained)} ({ReputationRate(player.workRepGainRate * CYCLES_PER_SEC)}) reputation
<br /> for this company <br />
{numeralWrapper.formatExp(player.workHackExpGained)} ( <br />
{`${numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec`} {numeralWrapper.formatExp(player.workHackExpGained)} (
) hacking exp <br /> {`${numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec`}
<br /> ) hacking exp <br />
{numeralWrapper.formatExp(player.workStrExpGained)} ( <br />
{`${numeralWrapper.formatExp(player.workStrExpGainRate * CYCLES_PER_SEC)} / sec`} {numeralWrapper.formatExp(player.workStrExpGained)} (
) strength exp <br /> {`${numeralWrapper.formatExp(player.workStrExpGainRate * CYCLES_PER_SEC)} / sec`}
{numeralWrapper.formatExp(player.workDefExpGained)} ( ) strength exp <br />
{`${numeralWrapper.formatExp(player.workDefExpGainRate * CYCLES_PER_SEC)} / sec`} {numeralWrapper.formatExp(player.workDefExpGained)} (
) defense exp <br /> {`${numeralWrapper.formatExp(player.workDefExpGainRate * CYCLES_PER_SEC)} / sec`}
{numeralWrapper.formatExp(player.workDexExpGained)} ( ) defense exp <br />
{`${numeralWrapper.formatExp(player.workDexExpGainRate * CYCLES_PER_SEC)} / sec`} {numeralWrapper.formatExp(player.workDexExpGained)} (
) dexterity exp <br /> {`${numeralWrapper.formatExp(player.workDexExpGainRate * CYCLES_PER_SEC)} / sec`}
{numeralWrapper.formatExp(player.workAgiExpGained)} ( ) dexterity exp <br />
{`${numeralWrapper.formatExp(player.workAgiExpGainRate * CYCLES_PER_SEC)} / sec`} {numeralWrapper.formatExp(player.workAgiExpGained)} (
) agility exp <br /> {`${numeralWrapper.formatExp(player.workAgiExpGainRate * CYCLES_PER_SEC)} / sec`}
<br /> ) agility exp <br />
{numeralWrapper.formatExp(player.workChaExpGained)} ( <br />
{`${numeralWrapper.formatExp(player.workChaExpGainRate * CYCLES_PER_SEC)} / sec`} {numeralWrapper.formatExp(player.workChaExpGained)} (
) charisma exp <br /> {`${numeralWrapper.formatExp(player.workChaExpGainRate * CYCLES_PER_SEC)} / sec`}
<br /> ) charisma exp <br />
You will automatically finish after working for 8 hours. You can cancel earlier if you wish, but you will only <br />
gain {penaltyString} of the reputation you've earned so far. You will automatically finish after working for 8 hours. You can cancel earlier if you wish, but you will
</p> only gain {penaltyString} of the reputation you've earned so far.
</Typography>
<button onClick={cancel} className="work-button"> </Grid>
Stop Working <Grid item>
</button> <Button sx={{ mx: 2 }} onClick={cancel}>
<button onClick={unfocus} className="work-button"> Stop Working
Do something else simultaneously </Button>
</button> <Button onClick={unfocus}>Do something else simultaneously</Button>
</div> </Grid>
</Grid>
); );
} }
@ -234,55 +241,56 @@ export function WorkInProgressRoot(): React.ReactElement {
const position = player.jobs[player.companyName]; const position = player.jobs[player.companyName];
return ( return (
<div> <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
<p> <Grid item>
You are currently working as a {position} at {player.companyName} (Current Company Reputation:{" "} <Typography>
{Reputation(companyRep)})<br /> You are currently working as a {position} at {player.companyName} (Current Company Reputation:{" "}
<br /> {Reputation(companyRep)})<br />
You have been working for {convertTimeMsToTimeElapsedString(player.timeWorked)} <br />
<br /> You have been working for {convertTimeMsToTimeElapsedString(player.timeWorked)}
<br /> <br />
You have earned: <br /> <br />
<br /> You have earned: <br />
<Money money={player.workMoneyGained} /> (<MoneyRate money={player.workMoneyGainRate * CYCLES_PER_SEC} />){" "} <br />
<br /> <Money money={player.workMoneyGained} /> (<MoneyRate money={player.workMoneyGainRate * CYCLES_PER_SEC} />){" "}
<br /> <br />
{Reputation(player.workRepGained)} ( <br />
{Reputation(`${numeralWrapper.formatExp(player.workRepGainRate * CYCLES_PER_SEC)} / sec`)} {Reputation(player.workRepGained)} (
) reputation for this company <br /> {Reputation(`${numeralWrapper.formatExp(player.workRepGainRate * CYCLES_PER_SEC)} / sec`)}
<br /> ) reputation for this company <br />
{numeralWrapper.formatExp(player.workHackExpGained)} ( <br />
{`${numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec`} {numeralWrapper.formatExp(player.workHackExpGained)} (
) hacking exp <br /> {`${numeralWrapper.formatExp(player.workHackExpGainRate * CYCLES_PER_SEC)} / sec`}
<br /> ) hacking exp <br />
{numeralWrapper.formatExp(player.workStrExpGained)} ( <br />
{`${numeralWrapper.formatExp(player.workStrExpGainRate * CYCLES_PER_SEC)} / sec`} {numeralWrapper.formatExp(player.workStrExpGained)} (
) strength exp <br /> {`${numeralWrapper.formatExp(player.workStrExpGainRate * CYCLES_PER_SEC)} / sec`}
{numeralWrapper.formatExp(player.workDefExpGained)} ( ) strength exp <br />
{`${numeralWrapper.formatExp(player.workDefExpGainRate * CYCLES_PER_SEC)} / sec`} {numeralWrapper.formatExp(player.workDefExpGained)} (
) defense exp <br /> {`${numeralWrapper.formatExp(player.workDefExpGainRate * CYCLES_PER_SEC)} / sec`}
{numeralWrapper.formatExp(player.workDexExpGained)} ( ) defense exp <br />
{`${numeralWrapper.formatExp(player.workDexExpGainRate * CYCLES_PER_SEC)} / sec`} {numeralWrapper.formatExp(player.workDexExpGained)} (
) dexterity exp <br /> {`${numeralWrapper.formatExp(player.workDexExpGainRate * CYCLES_PER_SEC)} / sec`}
{numeralWrapper.formatExp(player.workAgiExpGained)} ( ) dexterity exp <br />
{`${numeralWrapper.formatExp(player.workAgiExpGainRate * CYCLES_PER_SEC)} / sec`} {numeralWrapper.formatExp(player.workAgiExpGained)} (
) agility exp <br /> {`${numeralWrapper.formatExp(player.workAgiExpGainRate * CYCLES_PER_SEC)} / sec`}
<br /> ) agility exp <br />
{numeralWrapper.formatExp(player.workChaExpGained)} ( <br />
{`${numeralWrapper.formatExp(player.workChaExpGainRate * CYCLES_PER_SEC)} / sec`} {numeralWrapper.formatExp(player.workChaExpGained)} (
) charisma exp <br /> {`${numeralWrapper.formatExp(player.workChaExpGainRate * CYCLES_PER_SEC)} / sec`}
<br /> ) charisma exp <br />
You will automatically finish after working for 8 hours. You can cancel earlier if you wish, and there will be <br />
no penalty because this is a part-time job. You will automatically finish after working for 8 hours. You can cancel earlier if you wish, and there will
</p> be no penalty because this is a part-time job.
</Typography>
<button onClick={cancel} className="work-button"> </Grid>
Stop Working <Grid item>
</button> <Button sx={{ mx: 2 }} onClick={cancel}>
<button onClick={unfocus} className="work-button"> Stop Working
Do something else simultaneously </Button>
</button> <Button onClick={unfocus}>Do something else simultaneously</Button>
</div> </Grid>
</Grid>
); );
} }
@ -299,51 +307,60 @@ export function WorkInProgressRoot(): React.ReactElement {
const progressBar = createProgressBarText({ progress: (numBars + 1) / 20, totalTicks: 20 }); const progressBar = createProgressBarText({ progress: (numBars + 1) / 20, totalTicks: 20 });
return ( return (
<div> <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
<p>You are attempting to {player.crimeType}.</p> <Grid item>
<br /> <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 /> <br />
<pre>{progressBar}</pre> <pre>{progressBar}</pre>
</Typography>
<button </Grid>
className="work-button" <Grid item>
onClick={() => { <Button
router.toLocation(Locations[LocationName.Slums]); onClick={() => {
player.finishCrime(true); router.toLocation(Locations[LocationName.Slums]);
}} player.finishCrime(true);
> }}
Cancel crime >
</button> Cancel crime
</div> </Button>
</Grid>
</Grid>
); );
} }
if (player.createProgramName !== "") { if (player.createProgramName !== "") {
return ( return (
<div> <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
<p> <Grid item>
You are currently working on coding {player.createProgramName}.<br /> <Typography>
<br /> You are currently working on coding {player.createProgramName}.<br />
You have been working for {convertTimeMsToTimeElapsedString(player.timeWorked)} <br />
<br /> You have been working for {convertTimeMsToTimeElapsedString(player.timeWorked)}
<br /> <br />
The program is {((player.timeWorkedCreateProgram / player.timeNeededToCompleteWork) * 100).toFixed(2)} <br />
% complete. <br /> The program is {((player.timeWorkedCreateProgram / player.timeNeededToCompleteWork) * 100).toFixed(2)}
If you cancel, your work will be saved and you can come back to complete the program later. % complete. <br />
</p> If you cancel, your work will be saved and you can come back to complete the program later.
<button </Typography>
className="work-button" </Grid>
onClick={() => { <Grid item>
player.finishCreateProgramWork(true); <Button
router.toTerminal(); onClick={() => {
}} player.finishCreateProgramWork(true);
> router.toTerminal();
Cancel work on creating program }}
</button> >
</div> Cancel work on creating program
</Button>
</Grid>
</Grid>
); );
} }