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