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

Character Overview Overhaul

Browse Source 
* Moved hardcoded styles from the hardcoded container div into a class, and assigned that class to a Mui component.
* Otherwise removed excess layered components
* Visibility toggle area no longer occupies the whole width of the overview area. This was blocking input near the top right (noticeable in corp).
This commit is contained in:
Snarling 2021-10-18 03:14:33 -04:00
parent cfa10ab206
commit 61770ea717
2 changed files with 160 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

289
src/ui/React/CharacterOverview.tsx
View File

@ -8,11 +8,8 @@ import { numeralWrapper } from "../../ui/numeralFormat";
import { Reputation } from "./Reputation"; import { Reputation } from "./Reputation";
import Table from "@mui/material/Table"; import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell"; import TableCell from "@mui/material/TableCell";
import TableRow from "@mui/material/TableRow"; import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography"; 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";
@ -150,162 +147,150 @@ export function CharacterOverview({ save }: IProps): React.ReactElement {
const classes = useStyles(); const classes = useStyles();
return ( return (
<Paper square> <Table sx={{ display: "block", m: 1 }}>
<Box m={1}> <TableRow>
<Table size="small"> <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
<TableBody> <Typography classes={{ root: classes.hp }}>HP&nbsp;</Typography>
<TableRow> </TableCell>
<TableCell component="th" scope="row" classes={{ root: classes.cellNone }}> <TableCell align="right" classes={{ root: classes.cellNone }}>
<Typography classes={{ root: classes.hp }}>HP&nbsp;</Typography> <Typography classes={{ root: classes.hp }}>
</TableCell> {numeralWrapper.formatHp(player.hp)}&nbsp;/&nbsp;{numeralWrapper.formatHp(player.max_hp)}
<TableCell align="right" classes={{ root: classes.cellNone }}> </Typography>
<Typography classes={{ root: classes.hp }}> </TableCell>
{numeralWrapper.formatHp(player.hp)}&nbsp;/&nbsp;{numeralWrapper.formatHp(player.max_hp)} <TableCell align="right" classes={{ root: classes.cellNone }}>
</Typography> <Typography id="overview-hp-hook" classes={{ root: classes.hp }}>
</TableCell> {/*Hook for player scripts*/}
<TableCell align="right" classes={{ root: classes.cellNone }}> </Typography>
<Typography id="overview-hp-hook" classes={{ root: classes.hp }}> </TableCell>
{/*Hook for player scripts*/} </TableRow>
</Typography>
</TableCell>
</TableRow>
<TableRow> <TableRow>
<TableCell component="th" scope="row" classes={{ root: classes.cellNone }}> <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
<Typography classes={{ root: classes.money }}>Money&nbsp;</Typography> <Typography classes={{ root: classes.money }}>Money&nbsp;</Typography>
</TableCell> </TableCell>
<TableCell align="right" classes={{ root: classes.cellNone }}> <TableCell align="right" classes={{ root: classes.cellNone }}>
<Typography classes={{ root: classes.money }}> <Typography classes={{ root: classes.money }}>
{numeralWrapper.formatMoney(player.money.toNumber())} {numeralWrapper.formatMoney(player.money.toNumber())}
</Typography> </Typography>
</TableCell> </TableCell>
<TableCell align="right" classes={{ root: classes.cellNone }}> <TableCell align="right" classes={{ root: classes.cellNone }}>
<Typography id="overview-money-hook" classes={{ root: classes.money }}> <Typography id="overview-money-hook" classes={{ root: classes.money }}>
{/*Hook for player scripts*/} {/*Hook for player scripts*/}
</Typography> </Typography>
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell component="th" scope="row" classes={{ root: classes.cell }}> <TableCell component="th" scope="row" classes={{ root: classes.cell }}>
<Typography classes={{ root: classes.hack }}>Hack&nbsp;</Typography> <Typography classes={{ root: classes.hack }}>Hack&nbsp;</Typography>
</TableCell> </TableCell>
<TableCell align="right" classes={{ root: classes.cell }}> <TableCell align="right" classes={{ root: classes.cell }}>
<Typography classes={{ root: classes.hack }}> <Typography classes={{ root: classes.hack }}>{numeralWrapper.formatSkill(player.hacking_skill)}</Typography>
{numeralWrapper.formatSkill(player.hacking_skill)} </TableCell>
</Typography> <TableCell align="right" classes={{ root: classes.cell }}>
</TableCell> <Typography id="overview-hack-hook" classes={{ root: classes.hack }}>
<TableCell align="right" classes={{ root: classes.cell }}> {/*Hook for player scripts*/}
<Typography id="overview-hack-hook" classes={{ root: classes.hack }}> </Typography>
{/*Hook for player scripts*/} </TableCell>
</Typography> </TableRow>
</TableCell>
</TableRow>
<TableRow> <TableRow>
<TableCell component="th" scope="row" classes={{ root: classes.cellNone }}> <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
<Typography classes={{ root: classes.combat }}>Str&nbsp;</Typography> <Typography classes={{ root: classes.combat }}>Str&nbsp;</Typography>
</TableCell> </TableCell>
<TableCell align="right" classes={{ root: classes.cellNone }}> <TableCell align="right" classes={{ root: classes.cellNone }}>
<Typography classes={{ root: classes.combat }}> <Typography classes={{ root: classes.combat }}>{numeralWrapper.formatSkill(player.strength)}</Typography>
{numeralWrapper.formatSkill(player.strength)} </TableCell>
</Typography> <TableCell align="right" classes={{ root: classes.cellNone }}>
</TableCell> <Typography id="overview-str-hook" classes={{ root: classes.combat }}>
<TableCell align="right" classes={{ root: classes.cellNone }}> {/*Hook for player scripts*/}
<Typography id="overview-str-hook" classes={{ root: classes.combat }}> </Typography>
{/*Hook for player scripts*/} </TableCell>
</Typography> </TableRow>
</TableCell>
</TableRow>
<TableRow> <TableRow>
<TableCell component="th" scope="row" classes={{ root: classes.cellNone }}> <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
<Typography classes={{ root: classes.combat }}>Def&nbsp;</Typography> <Typography classes={{ root: classes.combat }}>Def&nbsp;</Typography>
</TableCell> </TableCell>
<TableCell align="right" classes={{ root: classes.cellNone }}> <TableCell align="right" classes={{ root: classes.cellNone }}>
<Typography classes={{ root: classes.combat }}>{numeralWrapper.formatSkill(player.defense)}</Typography> <Typography classes={{ root: classes.combat }}>{numeralWrapper.formatSkill(player.defense)}</Typography>
</TableCell> </TableCell>
<TableCell align="right" classes={{ root: classes.cellNone }}> <TableCell align="right" classes={{ root: classes.cellNone }}>
<Typography id="overview-def-hook" classes={{ root: classes.combat }}> <Typography id="overview-def-hook" classes={{ root: classes.combat }}>
{/*Hook for player scripts*/} {/*Hook for player scripts*/}
</Typography> </Typography>
</TableCell> </TableCell>
</TableRow> </TableRow>
<TableRow> <TableRow>
<TableCell component="th" scope="row" classes={{ root: classes.cellNone }}> <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
<Typography classes={{ root: classes.combat }}>Dex&nbsp;</Typography> <Typography classes={{ root: classes.combat }}>Dex&nbsp;</Typography>
</TableCell> </TableCell>
<TableCell align="right" classes={{ root: classes.cellNone }}> <TableCell align="right" classes={{ root: classes.cellNone }}>
<Typography classes={{ root: classes.combat }}> <Typography classes={{ root: classes.combat }}>{numeralWrapper.formatSkill(player.dexterity)}</Typography>
{numeralWrapper.formatSkill(player.dexterity)} </TableCell>
</Typography> <TableCell align="right" classes={{ root: classes.cellNone }}>
</TableCell> <Typography id="overview-dex-hook" classes={{ root: classes.combat }}>
<TableCell align="right" classes={{ root: classes.cellNone }}> {/*Hook for player scripts*/}
<Typography id="overview-dex-hook" classes={{ root: classes.combat }}> </Typography>
{/*Hook for player scripts*/} </TableCell>
</Typography> </TableRow>
</TableCell> <TableRow>
</TableRow> <TableCell component="th" scope="row" classes={{ root: classes.cell }}>
<TableRow> <Typography classes={{ root: classes.combat }}>Agi&nbsp;</Typography>
<TableCell component="th" scope="row" classes={{ root: classes.cell }}> </TableCell>
<Typography classes={{ root: classes.combat }}>Agi&nbsp;</Typography> <TableCell align="right" classes={{ root: classes.cell }}>
</TableCell> <Typography classes={{ root: classes.combat }}>{numeralWrapper.formatSkill(player.agility)}</Typography>
<TableCell align="right" classes={{ root: classes.cell }}> </TableCell>
<Typography classes={{ root: classes.combat }}>{numeralWrapper.formatSkill(player.agility)}</Typography> <TableCell align="right" classes={{ root: classes.cell }}>
</TableCell> <Typography id="overview-agi-hook" classes={{ root: classes.combat }}>
<TableCell align="right" classes={{ root: classes.cell }}> {/*Hook for player scripts*/}
<Typography id="overview-agi-hook" classes={{ root: classes.combat }}> </Typography>
{/*Hook for player scripts*/} </TableCell>
</Typography> </TableRow>
</TableCell>
</TableRow>
<TableRow> <TableRow>
<TableCell component="th" scope="row" classes={{ root: classes.cellNone }}> <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
<Typography classes={{ root: classes.cha }}>Cha&nbsp;</Typography> <Typography classes={{ root: classes.cha }}>Cha&nbsp;</Typography>
</TableCell> </TableCell>
<TableCell align="right" classes={{ root: classes.cellNone }}> <TableCell align="right" classes={{ root: classes.cellNone }}>
<Typography classes={{ root: classes.cha }}>{numeralWrapper.formatSkill(player.charisma)}</Typography> <Typography classes={{ root: classes.cha }}>{numeralWrapper.formatSkill(player.charisma)}</Typography>
</TableCell> </TableCell>
<TableCell align="right" classes={{ root: classes.cellNone }}> <TableCell align="right" classes={{ root: classes.cellNone }}>
<Typography id="overview-cha-hook" classes={{ root: classes.cha }}> <Typography id="overview-cha-hook" classes={{ root: classes.cha }}>
{/*Hook for player scripts*/} {/*Hook for player scripts*/}
</Typography> </Typography>
</TableCell> </TableCell>
</TableRow> </TableRow>
<Intelligence /> <Intelligence />
<TableRow> <TableRow>
<TableCell component="th" scope="row" classes={{ root: classes.cell }}> <TableCell component="th" scope="row" classes={{ root: classes.cell }}>
<Typography id="overview-extra-hook-0" classes={{ root: classes.hack }}> <Typography id="overview-extra-hook-0" classes={{ root: classes.hack }}>
{/*Hook for player scripts*/} {/*Hook for player scripts*/}
</Typography> </Typography>
</TableCell> </TableCell>
<TableCell component="th" scope="row" align="right" classes={{ root: classes.cell }}> <TableCell component="th" scope="row" align="right" classes={{ root: classes.cell }}>
<Typography id="overview-extra-hook-1" classes={{ root: classes.hack }}> <Typography id="overview-extra-hook-1" classes={{ root: classes.hack }}>
{/*Hook for player scripts*/} {/*Hook for player scripts*/}
</Typography> </Typography>
</TableCell> </TableCell>
<TableCell component="th" scope="row" align="right" classes={{ root: classes.cell }}> <TableCell component="th" scope="row" align="right" classes={{ root: classes.cell }}>
<Typography id="overview-extra-hook-2" classes={{ root: classes.hack }}> <Typography id="overview-extra-hook-2" classes={{ root: classes.hack }}>
{/*Hook for player scripts*/} {/*Hook for player scripts*/}
</Typography> </Typography>
</TableCell> </TableCell>
</TableRow> </TableRow>
<Work /> <Work />
<Bladeburner /> <Bladeburner />
<TableRow> <TableRow>
<TableCell align="center" colSpan={2} classes={{ root: classes.cellNone }}> <TableCell align="center" colSpan={2} classes={{ root: classes.cellNone }}>
<IconButton onClick={save}> <IconButton onClick={save}>
<SaveIcon color={Settings.AutosaveInterval !== 0 ? "primary" : "error"} /> <SaveIcon color={Settings.AutosaveInterval !== 0 ? "primary" : "error"} />
</IconButton> </IconButton>
</TableCell> </TableCell>
</TableRow> </TableRow>
</TableBody> </Table>
</Table>
</Box>
</Paper>
); );
} }

37
src/ui/React/Overview.tsx
View File

@ -1,17 +1,29 @@
import React, { useState } from "react"; import React, { useState } from "react";
import makeStyles from "@mui/styles/makeStyles"; import makeStyles from "@mui/styles/makeStyles";
import Box from "@mui/material/Box";
import Collapse from "@mui/material/Collapse"; import Collapse from "@mui/material/Collapse";
import Fab from "@mui/material/Fab"; import Fab from "@mui/material/Fab";
import Paper from "@mui/material/Paper";
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff"; import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
import VisibilityIcon from "@mui/icons-material/Visibility"; import VisibilityIcon from "@mui/icons-material/Visibility";
import { use } from "../Context"; import { use } from "../Context";
import { Page } from "../Router"; import { Page } from "../Router";
const useStyles = makeStyles({ const useStyles = makeStyles({
nobackground: { visibilityToggle: {
backgroundColor: "#0000", backgroundColor: "transparent",
position: "absolute",
top: "100%",
right: 0,
},
overviewContainer: {
position: "fixed",
top: 0,
right: 0,
zIndex: 1500,
display: "flex",
justifyContent: "flex-end",
flexDirection: "column",
}, },
}); });
@ -30,16 +42,13 @@ export function Overview({ children }: IProps): React.ReactElement {
} else { } else {
icon = <VisibilityIcon color="primary" />; icon = <VisibilityIcon color="primary" />;
} }
return ( return (
<div style={{ position: "fixed", top: 0, right: 0, zIndex: 1500 }}> <Paper square classes={{ root: classes.overviewContainer }}>
<Box display="flex" justifyContent="flex-end" flexDirection={"column"}> <Collapse in={open}>{children}</Collapse>
<Collapse in={open}>{children}</Collapse> <Fab classes={{ root: classes.visibilityToggle }} onClick={() => setOpen((old) => !old)}>
<Box display="flex" justifyContent="flex-end"> {icon}
<Fab classes={{ root: classes.nobackground }} onClick={() => setOpen((old) => !old)}> </Fab>
{icon} </Paper>
</Fab>
</Box>
</Box>
</div>
); );
} }