mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-12-24 15:12:27 +01:00
Use nicer arrows and alignment in office UI
This commit is contained in:
parent
333975ecf6
commit
1ed19168f6
@ -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>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user