Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-09-21 21:31:00 +02:00
Code Issues Packages Projects Releases Wiki Activity

Use nicer arrows and alignment in office UI

Browse Source
This commit is contained in:
Staszek Welsh 2022-06-02 17:47:31 +01:00
parent 333975ecf6
commit 1ed19168f6
1 changed files with 167 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/Corporation/ui/IndustryOffice.tsx
View File

@ -19,6 +19,7 @@ import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton"; import IconButton from "@mui/material/IconButton";
import Paper from "@mui/material/Paper"; import Paper from "@mui/material/Paper";
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp"; import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
import Tooltip from "@mui/material/Tooltip"; import Tooltip from "@mui/material/Tooltip";
@ -180,6 +181,16 @@ interface IAutoAssignProps {
rerender: () => void; rerender: () => void;
} }
function EmployeeCount(props: { num: number, next: number }): React.ReactElement {
return (
<Typography display="flex" alignItems="center" justifyContent="flex-end">
{props.num === props.next ? null : props.num}
{props.num === props.next ? null : <KeyboardArrowRightIcon />}
{props.next}
</Typography>
);
}
function AutoAssignJob(props: IAutoAssignProps): React.ReactElement { function AutoAssignJob(props: IAutoAssignProps): React.ReactElement {
const corp = useCorporation(); const corp = useCorporation();
const division = useDivision(); const division = useDivision();
@ -205,17 +216,20 @@ function AutoAssignJob(props: IAutoAssignProps): React.ReactElement {
return ( return (
<TableRow> <TableRow>
<TableCell width="70%"> <TableCell>
<Tooltip title={props.desc}> <Tooltip title={props.desc}>
<Typography> <Typography>{props.job}</Typography>
{props.job} ({(currJob == nextJob ? currJob : `${currJob} -> ${nextJob}`)})
</Typography>
</Tooltip> </Tooltip>
</TableCell> </TableCell>
<TableCell> <TableCell>
<EmployeeCount num={currJob} next={nextJob} />
</TableCell>
<TableCell width="1px">
<IconButton disabled={nextUna === 0} onClick={assignEmployee}> <IconButton disabled={nextUna === 0} onClick={assignEmployee}>
<ArrowDropUpIcon /> <ArrowDropUpIcon />
</IconButton> </IconButton>
</TableCell>
<TableCell width="1px">
<IconButton disabled={nextJob === 0} onClick={unassignEmployee}> <IconButton disabled={nextJob === 0} onClick={unassignEmployee}>
<ArrowDropDownIcon /> <ArrowDropDownIcon />
</IconButton> </IconButton>
@ -254,47 +268,46 @@ function AutoManagement(props: IProps): React.ReactElement {
const nextUna = props.office.employeeNextJobs[EmployeePositions.Unassigned]; const nextUna = props.office.employeeNextJobs[EmployeePositions.Unassigned];
return ( return (
<>
<Table padding="none"> <Table padding="none">
<TableBody> <TableBody>
<TableRow> <TableRow>
<TableCell width="70%"> <TableCell>
<Typography>Unassigned Employees:</Typography> <Typography>Unassigned Employees:</Typography>
</TableCell> </TableCell>
<TableCell> <TableCell>
<Typography>{(currUna == nextUna ? currUna : `${currUna} -> ${nextUna}`)}</Typography> <EmployeeCount num={currUna} next={nextUna} />
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell width="70%"> <TableCell>
<Typography>Avg Employee Morale:</Typography> <Typography>Avg Employee Morale:</Typography>
</TableCell> </TableCell>
<TableCell> <TableCell align="right">
<Typography>{numeralWrapper.format(avgMorale, "0.000")}</Typography> <Typography>{numeralWrapper.format(avgMorale, "0.000")}</Typography>
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell width="70%"> <TableCell>
<Typography>Avg Employee Happiness:</Typography> <Typography>Avg Employee Happiness:</Typography>
</TableCell> </TableCell>
<TableCell> <TableCell align="right">
<Typography>{numeralWrapper.format(avgHappiness, "0.000")}</Typography> <Typography>{numeralWrapper.format(avgHappiness, "0.000")}</Typography>
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell width="70%"> <TableCell>
<Typography>Avg Employee Energy:</Typography> <Typography>Avg Employee Energy:</Typography>
</TableCell> </TableCell>
<TableCell> <TableCell align="right">
<Typography>{numeralWrapper.format(avgEnergy, "0.000")}</Typography> <Typography>{numeralWrapper.format(avgEnergy, "0.000")}</Typography>
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell width="70%"> <TableCell>
<Typography>Total Employee Salary:</Typography> <Typography>Total Employee Salary:</Typography>
</TableCell> </TableCell>
<TableCell> <TableCell>
<Typography> <Typography align="right">
<Money money={totalSalary} /> <Money money={totalSalary} />
</Typography> </Typography>
</TableCell> </TableCell>
@ -302,7 +315,7 @@ function AutoManagement(props: IProps): React.ReactElement {
{vechain && ( {vechain && (
<> <>
<TableRow> <TableRow>
<TableCell width="70%"> <TableCell>
<Tooltip <Tooltip
title={ title={
<Typography> <Typography>
@ -316,13 +329,13 @@ function AutoManagement(props: IProps): React.ReactElement {
</Tooltip> </Tooltip>
</TableCell> </TableCell>
<TableCell> <TableCell>
<Typography> <Typography align="right">
{numeralWrapper.format(division.getOfficeProductivity(props.office), "0.000")} {numeralWrapper.format(division.getOfficeProductivity(props.office), "0.000")}
</Typography> </Typography>
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell width="70%"> <TableCell>
<Tooltip <Tooltip
title={ title={
<Typography> <Typography>
@ -336,7 +349,7 @@ function AutoManagement(props: IProps): React.ReactElement {
</Tooltip> </Tooltip>
</TableCell> </TableCell>
<TableCell> <TableCell>
<Typography> <Typography align="right">
{numeralWrapper.format( {numeralWrapper.format(
division.getOfficeProductivity(props.office, { division.getOfficeProductivity(props.office, {
forProduct: true, forProduct: true,
@ -347,24 +360,19 @@ function AutoManagement(props: IProps): React.ReactElement {
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell width="70%"> <TableCell>
<Tooltip <Tooltip
title={<Typography>The effect this office's 'Business' employees has on boosting sales</Typography>} title={<Typography>The effect this office's 'Business' employees has on boosting sales</Typography>}
> >
<Typography> Business Multiplier:</Typography> <Typography> Business Multiplier:</Typography>
</Tooltip> </Tooltip>
</TableCell> </TableCell>
<TableCell> <TableCell align="right">
<Typography>x{numeralWrapper.format(division.getBusinessFactor(props.office), "0.000")}</Typography> <Typography>x{numeralWrapper.format(division.getBusinessFactor(props.office), "0.000")}</Typography>
</TableCell> </TableCell>
</TableRow> </TableRow>
</> </>
)} )}
</TableBody>
</Table>
<Table padding="none">
<TableBody>
<AutoAssignJob <AutoAssignJob
rerender={props.rerender} rerender={props.rerender}
office={props.office} office={props.office}
@ -414,7 +422,6 @@ function AutoManagement(props: IProps): React.ReactElement {
/> />
</TableBody> </TableBody>
</Table> </Table>
</>
); );
} }