mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2026-04-18 15:28:43 +02:00
Character Overview Overhaul
* 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
@@ -8,11 +8,8 @@ import { numeralWrapper } from "../../ui/numeralFormat";
|
||||
import { Reputation } from "./Reputation";
|
||||
|
||||
import Table from "@mui/material/Table";
|
||||
import TableBody from "@mui/material/TableBody";
|
||||
import TableCell from "@mui/material/TableCell";
|
||||
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 Button from "@mui/material/Button";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
@@ -150,162 +147,150 @@ export function CharacterOverview({ save }: IProps): React.ReactElement {
|
||||
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<Paper square>
|
||||
<Box m={1}>
|
||||
<Table size="small">
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
|
||||
<Typography classes={{ root: classes.hp }}>HP </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cellNone }}>
|
||||
<Typography classes={{ root: classes.hp }}>
|
||||
{numeralWrapper.formatHp(player.hp)} / {numeralWrapper.formatHp(player.max_hp)}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cellNone }}>
|
||||
<Typography id="overview-hp-hook" classes={{ root: classes.hp }}>
|
||||
{/*Hook for player scripts*/}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<Table sx={{ display: "block", m: 1 }}>
|
||||
<TableRow>
|
||||
<TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
|
||||
<Typography classes={{ root: classes.hp }}>HP </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cellNone }}>
|
||||
<Typography classes={{ root: classes.hp }}>
|
||||
{numeralWrapper.formatHp(player.hp)} / {numeralWrapper.formatHp(player.max_hp)}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cellNone }}>
|
||||
<Typography id="overview-hp-hook" classes={{ root: classes.hp }}>
|
||||
{/*Hook for player scripts*/}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
|
||||
<Typography classes={{ root: classes.money }}>Money </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cellNone }}>
|
||||
<Typography classes={{ root: classes.money }}>
|
||||
{numeralWrapper.formatMoney(player.money.toNumber())}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cellNone }}>
|
||||
<Typography id="overview-money-hook" classes={{ root: classes.money }}>
|
||||
{/*Hook for player scripts*/}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
|
||||
<Typography classes={{ root: classes.money }}>Money </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cellNone }}>
|
||||
<Typography classes={{ root: classes.money }}>
|
||||
{numeralWrapper.formatMoney(player.money.toNumber())}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cellNone }}>
|
||||
<Typography id="overview-money-hook" classes={{ root: classes.money }}>
|
||||
{/*Hook for player scripts*/}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableCell component="th" scope="row" classes={{ root: classes.cell }}>
|
||||
<Typography classes={{ root: classes.hack }}>Hack </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cell }}>
|
||||
<Typography classes={{ root: classes.hack }}>
|
||||
{numeralWrapper.formatSkill(player.hacking_skill)}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cell }}>
|
||||
<Typography id="overview-hack-hook" classes={{ root: classes.hack }}>
|
||||
{/*Hook for player scripts*/}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell component="th" scope="row" classes={{ root: classes.cell }}>
|
||||
<Typography classes={{ root: classes.hack }}>Hack </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cell }}>
|
||||
<Typography classes={{ root: classes.hack }}>{numeralWrapper.formatSkill(player.hacking_skill)}</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cell }}>
|
||||
<Typography id="overview-hack-hook" classes={{ root: classes.hack }}>
|
||||
{/*Hook for player scripts*/}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
|
||||
<Typography classes={{ root: classes.combat }}>Str </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cellNone }}>
|
||||
<Typography classes={{ root: classes.combat }}>
|
||||
{numeralWrapper.formatSkill(player.strength)}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cellNone }}>
|
||||
<Typography id="overview-str-hook" classes={{ root: classes.combat }}>
|
||||
{/*Hook for player scripts*/}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
|
||||
<Typography classes={{ root: classes.combat }}>Str </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cellNone }}>
|
||||
<Typography classes={{ root: classes.combat }}>{numeralWrapper.formatSkill(player.strength)}</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cellNone }}>
|
||||
<Typography id="overview-str-hook" classes={{ root: classes.combat }}>
|
||||
{/*Hook for player scripts*/}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
|
||||
<Typography classes={{ root: classes.combat }}>Def </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cellNone }}>
|
||||
<Typography classes={{ root: classes.combat }}>{numeralWrapper.formatSkill(player.defense)}</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cellNone }}>
|
||||
<Typography id="overview-def-hook" classes={{ root: classes.combat }}>
|
||||
{/*Hook for player scripts*/}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
|
||||
<Typography classes={{ root: classes.combat }}>Def </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cellNone }}>
|
||||
<Typography classes={{ root: classes.combat }}>{numeralWrapper.formatSkill(player.defense)}</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cellNone }}>
|
||||
<Typography id="overview-def-hook" classes={{ root: classes.combat }}>
|
||||
{/*Hook for player scripts*/}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
|
||||
<Typography classes={{ root: classes.combat }}>Dex </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cellNone }}>
|
||||
<Typography classes={{ root: classes.combat }}>
|
||||
{numeralWrapper.formatSkill(player.dexterity)}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cellNone }}>
|
||||
<Typography id="overview-dex-hook" classes={{ root: classes.combat }}>
|
||||
{/*Hook for player scripts*/}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell component="th" scope="row" classes={{ root: classes.cell }}>
|
||||
<Typography classes={{ root: classes.combat }}>Agi </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cell }}>
|
||||
<Typography classes={{ root: classes.combat }}>{numeralWrapper.formatSkill(player.agility)}</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cell }}>
|
||||
<Typography id="overview-agi-hook" classes={{ root: classes.combat }}>
|
||||
{/*Hook for player scripts*/}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
|
||||
<Typography classes={{ root: classes.combat }}>Dex </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cellNone }}>
|
||||
<Typography classes={{ root: classes.combat }}>{numeralWrapper.formatSkill(player.dexterity)}</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cellNone }}>
|
||||
<Typography id="overview-dex-hook" classes={{ root: classes.combat }}>
|
||||
{/*Hook for player scripts*/}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell component="th" scope="row" classes={{ root: classes.cell }}>
|
||||
<Typography classes={{ root: classes.combat }}>Agi </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cell }}>
|
||||
<Typography classes={{ root: classes.combat }}>{numeralWrapper.formatSkill(player.agility)}</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cell }}>
|
||||
<Typography id="overview-agi-hook" classes={{ root: classes.combat }}>
|
||||
{/*Hook for player scripts*/}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow>
|
||||
<TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
|
||||
<Typography classes={{ root: classes.cha }}>Cha </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cellNone }}>
|
||||
<Typography classes={{ root: classes.cha }}>{numeralWrapper.formatSkill(player.charisma)}</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cellNone }}>
|
||||
<Typography id="overview-cha-hook" classes={{ root: classes.cha }}>
|
||||
{/*Hook for player scripts*/}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<Intelligence />
|
||||
<TableRow>
|
||||
<TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
|
||||
<Typography classes={{ root: classes.cha }}>Cha </Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cellNone }}>
|
||||
<Typography classes={{ root: classes.cha }}>{numeralWrapper.formatSkill(player.charisma)}</Typography>
|
||||
</TableCell>
|
||||
<TableCell align="right" classes={{ root: classes.cellNone }}>
|
||||
<Typography id="overview-cha-hook" classes={{ root: classes.cha }}>
|
||||
{/*Hook for player scripts*/}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<Intelligence />
|
||||
|
||||
<TableRow>
|
||||
<TableCell component="th" scope="row" classes={{ root: classes.cell }}>
|
||||
<Typography id="overview-extra-hook-0" classes={{ root: classes.hack }}>
|
||||
{/*Hook for player scripts*/}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell component="th" scope="row" align="right" classes={{ root: classes.cell }}>
|
||||
<Typography id="overview-extra-hook-1" classes={{ root: classes.hack }}>
|
||||
{/*Hook for player scripts*/}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell component="th" scope="row" align="right" classes={{ root: classes.cell }}>
|
||||
<Typography id="overview-extra-hook-2" classes={{ root: classes.hack }}>
|
||||
{/*Hook for player scripts*/}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<Work />
|
||||
<Bladeburner />
|
||||
<TableRow>
|
||||
<TableCell component="th" scope="row" classes={{ root: classes.cell }}>
|
||||
<Typography id="overview-extra-hook-0" classes={{ root: classes.hack }}>
|
||||
{/*Hook for player scripts*/}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell component="th" scope="row" align="right" classes={{ root: classes.cell }}>
|
||||
<Typography id="overview-extra-hook-1" classes={{ root: classes.hack }}>
|
||||
{/*Hook for player scripts*/}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
<TableCell component="th" scope="row" align="right" classes={{ root: classes.cell }}>
|
||||
<Typography id="overview-extra-hook-2" classes={{ root: classes.hack }}>
|
||||
{/*Hook for player scripts*/}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<Work />
|
||||
<Bladeburner />
|
||||
|
||||
<TableRow>
|
||||
<TableCell align="center" colSpan={2} classes={{ root: classes.cellNone }}>
|
||||
<IconButton onClick={save}>
|
||||
<SaveIcon color={Settings.AutosaveInterval !== 0 ? "primary" : "error"} />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Box>
|
||||
</Paper>
|
||||
<TableRow>
|
||||
<TableCell align="center" colSpan={2} classes={{ root: classes.cellNone }}>
|
||||
<IconButton onClick={save}>
|
||||
<SaveIcon color={Settings.AutosaveInterval !== 0 ? "primary" : "error"} />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</Table>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user