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 { 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,8 +44,9 @@ export function WorkInProgressRoot(): React.ReactElement {
player.stopFocusing();
}
return (
<div>
<p>
<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 />
@ -53,8 +58,8 @@ export function WorkInProgressRoot(): React.ReactElement {
<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 />
{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 />
@ -74,15 +79,15 @@ export function WorkInProgressRoot(): React.ReactElement {
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">
</Typography>
</Grid>
<Grid item>
<Button sx={{ mx: 2 }} onClick={cancel}>
Stop Faction Work
</button>
<button onClick={unfocus} className="work-button">
Do something else simultaneously
</button>
</div>
</Button>
<Button onClick={unfocus}>Do something else simultaneously</Button>
</Grid>
</Grid>
);
}
@ -110,8 +115,9 @@ export function WorkInProgressRoot(): React.ReactElement {
}
return (
<div>
<p>
<Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
<Grid item>
<Typography>
You have been {className} for {convertTimeMsToTimeElapsedString(player.timeWorked)}
<br />
<br />
@ -133,12 +139,12 @@ export function WorkInProgressRoot(): React.ReactElement {
{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>
</Typography>
</Grid>
<Grid item>
<Button onClick={cancel}>{stopText}</Button>
</Grid>
</Grid>
);
}
@ -165,8 +171,9 @@ export function WorkInProgressRoot(): React.ReactElement {
const penaltyString = penalty === 0.5 ? "half" : "three-quarters";
return (
<div>
<p>
<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 />
@ -178,8 +185,8 @@ export function WorkInProgressRoot(): React.ReactElement {
<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 />
{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`}
@ -202,17 +209,17 @@ export function WorkInProgressRoot(): React.ReactElement {
{`${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">
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} className="work-button">
Do something else simultaneously
</button>
</div>
</Button>
<Button onClick={unfocus}>Do something else simultaneously</Button>
</Grid>
</Grid>
);
}
@ -234,8 +241,9 @@ export function WorkInProgressRoot(): React.ReactElement {
const position = player.jobs[player.companyName];
return (
<div>
<p>
<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 />
@ -272,17 +280,17 @@ export function WorkInProgressRoot(): React.ReactElement {
{`${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">
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} className="work-button">
Do something else simultaneously
</button>
</div>
</Button>
<Button onClick={unfocus}>Do something else simultaneously</Button>
</Grid>
</Grid>
);
}
@ -299,32 +307,39 @@ export function WorkInProgressRoot(): React.ReactElement {
const progressBar = createProgressBarText({ progress: (numBars + 1) / 20, totalTicks: 20 });
return (
<div>
<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"
</Typography>
</Grid>
<Grid item>
<Button
onClick={() => {
router.toLocation(Locations[LocationName.Slums]);
player.finishCrime(true);
}}
>
Cancel crime
</button>
</div>
</Button>
</Grid>
</Grid>
);
}
if (player.createProgramName !== "") {
return (
<div>
<p>
<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)}
@ -333,17 +348,19 @@ export function WorkInProgressRoot(): React.ReactElement {
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"
</Typography>
</Grid>
<Grid item>
<Button
onClick={() => {
player.finishCreateProgramWork(true);
router.toTerminal();
}}
>
Cancel work on creating program
</button>
</div>
</Button>
</Grid>
</Grid>
);
}