Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-11-26 09:33:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Research modal UI pass

Browse Source
This commit is contained in:
nickofolas 2022-01-21 16:08:02 -06:00
parent 844b228596
commit 6018f2280d
1 changed files with 37 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/Corporation/ui/ResearchModal.tsx
View File

@ -6,17 +6,18 @@ import { IIndustry } from "../IIndustry";
import { Research } from "../Actions"; import { Research } from "../Actions";
import { Node } from "../ResearchTree"; import { Node } from "../ResearchTree";
import { ResearchMap } from "../ResearchMap"; import { ResearchMap } from "../ResearchMap";
import { Settings } from "../../Settings/Settings";
import { dialogBoxCreate } from "../../ui/React/DialogBox"; import { dialogBoxCreate } from "../../ui/React/DialogBox";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import Tooltip from "@mui/material/Tooltip"; import Tooltip from "@mui/material/Tooltip";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
import Box from "@mui/material/Box"; import Box from "@mui/material/Box";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import Collapse from "@mui/material/Collapse"; import Collapse from "@mui/material/Collapse";
import ExpandMore from "@mui/icons-material/ExpandMore"; import ExpandMore from "@mui/icons-material/ExpandMore";
import ExpandLess from "@mui/icons-material/ExpandLess"; import ExpandLess from "@mui/icons-material/ExpandLess";
import CheckIcon from '@mui/icons-material/Check';
interface INodeProps { interface INodeProps {
n: Node | null; n: Node | null;
division: IIndustry; division: IIndustry;
@ -42,8 +43,8 @@ function Upgrade({ n, division }: INodeProps): React.ReactElement {
dialogBoxCreate( dialogBoxCreate(
`Researched ${n.text}. It may take a market cycle ` + `Researched ${n.text}. It may take a market cycle ` +
`(~${CorporationConstants.SecsPerMarketCycle} seconds) before the effects of ` + `(~${CorporationConstants.SecsPerMarketCycle} seconds) before the effects of ` +
`the Research apply.`, `the Research apply.`,
); );
} }
@ -52,8 +53,8 @@ function Upgrade({ n, division }: INodeProps): React.ReactElement {
color = "info"; color = "info";
} }
const but = ( const wrapInTooltip = (ele: React.ReactElement): React.ReactElement => {
<Box> return (
<Tooltip <Tooltip
title={ title={
<Typography> <Typography>
@ -63,12 +64,22 @@ function Upgrade({ n, division }: INodeProps): React.ReactElement {
</Typography> </Typography>
} }
> >
{ele}
</Tooltip>
)
}
const but = (
<Box>
{wrapInTooltip(
<span> <span>
<Button color={color} disabled={disabled && !n.researched} onClick={research}> <Button color={color} disabled={disabled && !n.researched} onClick={research}
{n.text} style={{ width: '100%', textAlign: 'left', justifyContent: 'unset' }}
>
{n.researched && (<CheckIcon sx={{ mr: 1 }} />)}{n.text}
</Button> </Button>
</span> </span>
</Tooltip> )}
</Box> </Box>
); );
@ -76,15 +87,25 @@ function Upgrade({ n, division }: INodeProps): React.ReactElement {
return ( return (
<Box> <Box>
<Box display="flex"> <Box display="flex" sx={{ border: '1px solid ' + Settings.theme.well }}>
{but} {wrapInTooltip(
<ListItemButton onClick={() => setOpen((old) => !old)}> <span style={{ width: '100%' }}>
<ListItemText /> <Button color={color} disabled={disabled && !n.researched} onClick={research} sx={{
width: '100%',
textAlign: 'left',
justifyContent: 'unset',
borderColor: Settings.theme.button
}}>
{n.researched && (<CheckIcon sx={{ mr: 1 }} />)}{n.text}
</Button>
</span>
)}
<Button onClick={() => setOpen((old) => !old)} sx={{ borderColor: Settings.theme.button, minWidth: 'fit-content' }}>
{open ? <ExpandLess color="primary" /> : <ExpandMore color="primary" />} {open ? <ExpandLess color="primary" /> : <ExpandMore color="primary" />}
</ListItemButton> </Button>
</Box> </Box>
<Collapse in={open} unmountOnExit> <Collapse in={open} unmountOnExit>
<Box m={4}> <Box m={1}>
{n.children.map((m) => ( {n.children.map((m) => (
<Upgrade key={m.text} division={division} n={m} /> <Upgrade key={m.text} division={division} n={m} />
))} ))}
@ -108,7 +129,7 @@ export function ResearchModal(props: IProps): React.ReactElement {
return ( return (
<Modal open={props.open} onClose={props.onClose}> <Modal open={props.open} onClose={props.onClose}>
<Upgrade division={props.industry} n={researchTree.root} /> <Upgrade division={props.industry} n={researchTree.root} />
<Typography> <Typography sx={{ mt: 1 }}>
Research points: {props.industry.sciResearch.qty.toFixed(3)} Research points: {props.industry.sciResearch.qty.toFixed(3)}
<br /> <br />
Multipliers from research: Multipliers from research: