Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-12-25 07:32:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3611 from nickofolas/improvement/work-in-progress-ui

Browse Source 
UI: Refactor and redesign WorkInProgress interface
This commit is contained in:
hydroflame 2022-05-04 15:04:52 -04:00 committed by GitHub
commit bcbda22acc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 636 additions and 598 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/Infiltration/ui/GameTimer.tsx
View File

@ -1,19 +1,8 @@
import { LinearProgress, Paper } from "@mui/material"; import { Paper } from "@mui/material";
import { Theme } from "@mui/material/styles";
import withStyles from "@mui/styles/withStyles";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { AugmentationNames } from "../../Augmentation/data/AugmentationNames"; import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
import { use } from "../../ui/Context"; import { use } from "../../ui/Context";
import { ProgressBar } from "../../ui/React/Progress";
const TimerProgress = withStyles((theme: Theme) => ({
root: {
backgroundColor: theme.palette.background.paper,
},
bar: {
transition: "none",
backgroundColor: theme.palette.primary.main,
},
}))(LinearProgress);
interface IProps { interface IProps {
millis: number; millis: number;
@ -43,10 +32,10 @@ export function GameTimer(props: IProps): React.ReactElement {
// TODO(hydroflame): there's like a bug where it triggers the end before the // TODO(hydroflame): there's like a bug where it triggers the end before the
// bar physically reaches the end // bar physically reaches the end
return props.noPaper ? ( return props.noPaper ? (
<TimerProgress variant="determinate" value={v} color="primary" /> <ProgressBar variant="determinate" value={v} color="primary" />
) : ( ) : (
<Paper sx={{ p: 1, mb: 1 }}> <Paper sx={{ p: 1, mb: 1 }}>
<TimerProgress variant="determinate" value={v} color="primary" /> <ProgressBar variant="determinate" value={v} color="primary" />
</Paper> </Paper>
); );
} }

152
src/PersonObjects/Sleeve/ui/SleeveElem.tsx
View File

@ -1,23 +1,19 @@
import { Box, Button, Paper, Tooltip, Typography } from "@mui/material";
import React, { useState } from "react"; import React, { useState } from "react";
import { Box, Paper, Typography, Button, Tooltip } from "@mui/material";
import { CONSTANTS } from "../../../Constants"; import { CONSTANTS } from "../../../Constants";
import { Crimes } from "../../../Crime/Crimes"; 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 { 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 { Sleeve } from "../Sleeve";
import { SleeveTaskType } from "../SleeveTaskTypesEnum"; 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 { MoreEarningsModal } from "./MoreEarningsModal";
import { MoreStatsModal } from "./MoreStatsModal";
import { SleeveAugmentationsModal } from "./SleeveAugmentationsModal";
import { EarningsElement, StatsElement } from "./StatsElement";
import { TaskSelector } from "./TaskSelector"; import { TaskSelector } from "./TaskSelector";
import { TravelModal } from "./TravelModal";
interface IProps { interface IProps {
sleeve: Sleeve; sleeve: Sleeve;
@ -131,74 +127,70 @@ export function SleeveElem(props: IProps): React.ReactElement {
} }
return ( return (
<Box component={Paper} sx={{ width: "auto" }}> <>
<Box sx={{ m: 1 }}> <Paper sx={{ p: 1, display: "grid", gridTemplateColumns: "1fr 1fr", width: "auto", gap: 1 }}>
<Box display="grid" sx={{ gridTemplateColumns: "1fr 1fr", width: "100%", gap: 1 }}> <span>
<Box> <StatsElement sleeve={props.sleeve} />
<StatsElement sleeve={props.sleeve} /> <Box display="grid" sx={{ gridTemplateColumns: "1fr 1fr", width: "100%" }}>
<Box display="grid" sx={{ gridTemplateColumns: "1fr 1fr", width: "100%" }}> <Button onClick={() => setStatsOpen(true)}>More Stats</Button>
<Button onClick={() => setStatsOpen(true)}>More Stats</Button> <Button onClick={() => setEarningsOpen(true)}>More Earnings Info</Button>
<Button onClick={() => setEarningsOpen(true)}>More Earnings Info</Button> <Tooltip title={player.money < CONSTANTS.TravelCost ? <Typography>Insufficient funds</Typography> : ""}>
<Tooltip title={player.money < CONSTANTS.TravelCost ? <Typography>Insufficient funds</Typography> : ""}> <span>
<span> <Button
<Button onClick={() => setTravelOpen(true)}
onClick={() => setTravelOpen(true)} disabled={player.money < CONSTANTS.TravelCost}
disabled={player.money < CONSTANTS.TravelCost} sx={{ width: "100%", height: "100%" }}
sx={{ width: "100%", height: "100%" }} >
> Travel
Travel </Button>
</Button> </span>
</span> </Tooltip>
</Tooltip> <Tooltip
<Tooltip title={props.sleeve.shock < 100 ? <Typography>Unlocked when sleeve has fully recovered</Typography> : ""}
title={ >
props.sleeve.shock < 100 ? <Typography>Unlocked when sleeve has fully recovered</Typography> : "" <span>
} <Button
> onClick={() => setAugmentationsOpen(true)}
<span> disabled={props.sleeve.shock < 100}
<Button sx={{ width: "100%", height: "100%" }}
onClick={() => setAugmentationsOpen(true)} >
disabled={props.sleeve.shock < 100} Manage Augmentations
sx={{ width: "100%", height: "100%" }} </Button>
> </span>
Manage Augmentations </Tooltip>
</Button>
</span>
</Tooltip>
</Box>
</Box> </Box>
<Box> </span>
<EarningsElement sleeve={props.sleeve} /> <span>
<Box> <EarningsElement sleeve={props.sleeve} />
<TaskSelector player={player} sleeve={props.sleeve} setABC={setABC} /> <TaskSelector player={player} sleeve={props.sleeve} setABC={setABC} />
<Button onClick={setTask} sx={{ width: "100%" }}> <Button onClick={setTask} sx={{ width: "100%" }}>
Set Task Set Task
</Button> </Button>
<Typography>{desc}</Typography> <Typography>{desc}</Typography>
<Typography> <Typography>
{props.sleeve.currentTask === SleeveTaskType.Crime && {props.sleeve.currentTask === SleeveTaskType.Crime && (
createProgressBarText({ <ProgressBar
progress: props.sleeve.currentTaskTime / props.sleeve.currentTaskMaxTime, variant="determinate"
totalTicks: 25, value={(props.sleeve.currentTaskTime / props.sleeve.currentTaskMaxTime) * 100}
})} color="primary"
</Typography> />
</Box> )}
</Box> </Typography>
<MoreStatsModal open={statsOpen} onClose={() => setStatsOpen(false)} sleeve={props.sleeve} /> </span>
<MoreEarningsModal open={earningsOpen} onClose={() => setEarningsOpen(false)} sleeve={props.sleeve} /> </Paper>
<TravelModal <MoreStatsModal open={statsOpen} onClose={() => setStatsOpen(false)} sleeve={props.sleeve} />
open={travelOpen} <MoreEarningsModal open={earningsOpen} onClose={() => setEarningsOpen(false)} sleeve={props.sleeve} />
onClose={() => setTravelOpen(false)} <TravelModal
sleeve={props.sleeve} open={travelOpen}
rerender={props.rerender} onClose={() => setTravelOpen(false)}
/> sleeve={props.sleeve}
<SleeveAugmentationsModal rerender={props.rerender}
open={augmentationsOpen} />
onClose={() => setAugmentationsOpen(false)} <SleeveAugmentationsModal
sleeve={props.sleeve} open={augmentationsOpen}
/> onClose={() => setAugmentationsOpen(false)}
</Box> sleeve={props.sleeve}
</Box> />
</Box> </>
); );
} }

13
src/ui/React/Progress.tsx Normal file
View File

@ -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);

18
src/ui/React/StatsRow.tsx
View File

@ -16,19 +16,21 @@ interface IProps {
name: string; name: string;
color: string; color: string;
classes?: any; classes?: any;
data: ITableRowData; data?: ITableRowData;
children?: React.ReactElement; children?: React.ReactElement;
} }
export const StatsRow = ({ name, color, classes = useStyles(), children, data }: IProps): React.ReactElement => { export const StatsRow = ({ name, color, classes = useStyles(), children, data }: IProps): React.ReactElement => {
let content; let content = "";
if (data.content !== undefined) { if (data) {
content = data.content; if (data.content !== undefined) {
} else if (data.level !== undefined && data.exp !== undefined) { content = data.content;
content = `${formatNumber(data.level, 0)} (${numeralWrapper.formatExp(data.exp)} exp)`; } else if (data.level !== undefined && data.exp !== undefined) {
} else if (data.level !== undefined && data.exp === undefined) { content = `${formatNumber(data.level, 0)} (${numeralWrapper.formatExp(data.exp)} exp)`;
content = `${formatNumber(data.level, 0)}`; } else if (data.level !== undefined && data.exp === undefined) {
content = `${formatNumber(data.level, 0)}`;
}
} }
return ( return (

1032
src/ui/WorkInProgressRoot.tsx
View File

File diff suppressed because it is too large Load Diff