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

327
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,167 +268,160 @@ 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>
<TableCell width="70%"> <Typography>Unassigned Employees:</Typography>
<Typography>Unassigned Employees:</Typography> </TableCell>
</TableCell> <TableCell>
<TableCell> <EmployeeCount num={currUna} next={nextUna} />
<Typography>{(currUna == nextUna ? currUna : `${currUna} -> ${nextUna}`)}</Typography> </TableCell>
</TableCell> </TableRow>
</TableRow> <TableRow>
<TableRow> <TableCell>
<TableCell width="70%"> <Typography>Avg Employee Morale:</Typography>
<Typography>Avg Employee Morale:</Typography> </TableCell>
</TableCell> <TableCell align="right">
<TableCell> <Typography>{numeralWrapper.format(avgMorale, "0.000")}</Typography>
<Typography>{numeralWrapper.format(avgMorale, "0.000")}</Typography> </TableCell>
</TableCell> </TableRow>
</TableRow> <TableRow>
<TableRow> <TableCell>
<TableCell width="70%"> <Typography>Avg Employee Happiness:</Typography>
<Typography>Avg Employee Happiness:</Typography> </TableCell>
</TableCell> <TableCell align="right">
<TableCell> <Typography>{numeralWrapper.format(avgHappiness, "0.000")}</Typography>
<Typography>{numeralWrapper.format(avgHappiness, "0.000")}</Typography> </TableCell>
</TableCell> </TableRow>
</TableRow> <TableRow>
<TableRow> <TableCell>
<TableCell width="70%"> <Typography>Avg Employee Energy:</Typography>
<Typography>Avg Employee Energy:</Typography> </TableCell>
</TableCell> <TableCell align="right">
<TableCell> <Typography>{numeralWrapper.format(avgEnergy, "0.000")}</Typography>
<Typography>{numeralWrapper.format(avgEnergy, "0.000")}</Typography> </TableCell>
</TableCell> </TableRow>
</TableRow> <TableRow>
<TableRow> <TableCell>
<TableCell width="70%"> <Typography>Total Employee Salary:</Typography>
<Typography>Total Employee Salary:</Typography> </TableCell>
</TableCell> <TableCell>
<TableCell> <Typography align="right">
<Typography> <Money money={totalSalary} />
<Money money={totalSalary} /> </Typography>
</Typography> </TableCell>
</TableCell> </TableRow>
</TableRow> {vechain && (
{vechain && ( <>
<> <TableRow>
<TableRow> <TableCell>
<TableCell width="70%"> <Tooltip
<Tooltip title={
title={ <Typography>
<Typography> The base amount of material this office can produce. Does not include production multipliers
The base amount of material this office can produce. Does not include production multipliers from upgrades and materials. This value is based off the productivity of your Operations,
from upgrades and materials. This value is based off the productivity of your Operations, Engineering, and Management employees
Engineering, and Management employees </Typography>
</Typography> }
} >
> <Typography>Material Production:</Typography>
<Typography>Material Production:</Typography> </Tooltip>
</Tooltip> </TableCell>
</TableCell> <TableCell>
<TableCell> <Typography align="right">
<Typography> {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>
<TableCell width="70%"> <Tooltip
<Tooltip title={
title={ <Typography>
<Typography> The base amount of any given Product this office can produce. Does not include production
The base amount of any given Product this office can produce. Does not include production multipliers from upgrades and materials. This value is based off the productivity of your
multipliers from upgrades and materials. This value is based off the productivity of your Operations, Engineering, and Management employees
Operations, Engineering, and Management employees </Typography>
</Typography> }
} >
> <Typography>Product Production:</Typography>
<Typography>Product Production:</Typography> </Tooltip>
</Tooltip> </TableCell>
</TableCell> <TableCell>
<TableCell> <Typography align="right">
<Typography> {numeralWrapper.format(
{numeralWrapper.format( division.getOfficeProductivity(props.office, {
division.getOfficeProductivity(props.office, { forProduct: true,
forProduct: true, }),
}), "0.000",
"0.000", )}
)} </Typography>
</Typography> </TableCell>
</TableCell> </TableRow>
</TableRow> <TableRow>
<TableRow> <TableCell>
<TableCell width="70%"> <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 align="right">
<TableCell> <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> </>
</> )}
)} <AutoAssignJob
</TableBody> rerender={props.rerender}
</Table> office={props.office}
job={EmployeePositions.Operations}
desc={"Manages supply chain operations. Improves the amount of Materials and Products you produce."}
/>
<Table padding="none"> <AutoAssignJob
<TableBody> rerender={props.rerender}
<AutoAssignJob office={props.office}
rerender={props.rerender} job={EmployeePositions.Engineer}
office={props.office} desc={
job={EmployeePositions.Operations} "Develops and maintains products and production systems. Increases the quality of everything you produce. Also increases the amount you produce (not as much as Operations, however)"
desc={"Manages supply chain operations. Improves the amount of Materials and Products you produce."} }
/> />
<AutoAssignJob <AutoAssignJob
rerender={props.rerender} rerender={props.rerender}
office={props.office} office={props.office}
job={EmployeePositions.Engineer} job={EmployeePositions.Business}
desc={ desc={"Handles sales and finances. Improves the amount of Materials and Products you can sell."}
"Develops and maintains products and production systems. Increases the quality of everything you produce. Also increases the amount you produce (not as much as Operations, however)" />
}
/>
<AutoAssignJob <AutoAssignJob
rerender={props.rerender} rerender={props.rerender}
office={props.office} office={props.office}
job={EmployeePositions.Business} job={EmployeePositions.Management}
desc={"Handles sales and finances. Improves the amount of Materials and Products you can sell."} desc={
/> "Leads and oversees employees and office operations. Improves the effectiveness of Engineer and Operations employees."
}
/>
<AutoAssignJob <AutoAssignJob
rerender={props.rerender} rerender={props.rerender}
office={props.office} office={props.office}
job={EmployeePositions.Management} job={EmployeePositions.RandD}
desc={ desc={"Research new innovative ways to improve the company. Generates Scientific Research."}
"Leads and oversees employees and office operations. Improves the effectiveness of Engineer and Operations employees." />
}
/>
<AutoAssignJob <AutoAssignJob
rerender={props.rerender} rerender={props.rerender}
office={props.office} office={props.office}
job={EmployeePositions.RandD} job={EmployeePositions.Training}
desc={"Research new innovative ways to improve the company. Generates Scientific Research."} desc={
/> "Set employee to training, which will increase some of their stats. Employees in training do not affect any company operations."
}
<AutoAssignJob />
rerender={props.rerender} </TableBody>
office={props.office} </Table>
job={EmployeePositions.Training}
desc={
"Set employee to training, which will increase some of their stats. Employees in training do not affect any company operations."
}
/>
</TableBody>
</Table>
</>
); );
} }