added icon to hide stats

This commit is contained in:
Olivier Gagnon 2021-09-16 22:16:40 -04:00
parent cab823bcdf
commit ff726afcd6

@ -18,6 +18,8 @@ import Typography from "@mui/material/Typography";
import Divider from "@mui/material/Divider"; import Divider from "@mui/material/Divider";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
import Collapse from "@mui/material/Collapse"; import Collapse from "@mui/material/Collapse";
import Fab from "@mui/material/Fab";
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
import { colors } from "./Theme"; import { colors } from "./Theme";
import { Settings } from "../../Settings/Settings"; import { Settings } from "../../Settings/Settings";
@ -94,10 +96,14 @@ const useStyles = makeStyles({
int: { int: {
color: colors.int, color: colors.int,
}, },
nobackground: {
backgroundColor: "#0000",
},
}); });
export function CharacterOverview({ player, save }: IProps): React.ReactElement { export function CharacterOverview({ player, save }: IProps): React.ReactElement {
const setRerender = useState(false)[1]; const setRerender = useState(false)[1];
const [open, setOpen] = useState(true);
useEffect(() => { useEffect(() => {
const id = setInterval(() => setRerender((old) => !old), 600); const id = setInterval(() => setRerender((old) => !old), 600);
@ -106,103 +112,120 @@ export function CharacterOverview({ player, save }: IProps): React.ReactElement
const classes = useStyles(); const classes = useStyles();
return ( return (
<Paper square> <>
<Box m={1}> <Box display="flex" justifyContent="flex-end" flexDirection={"column"}>
<Table size="small"> <Collapse in={open}>
<TableBody> <Paper square>
<TableRow> <Box m={1}>
<TableCell component="th" scope="row" classes={{ root: classes.cellNone }}> <Table size="small">
<Typography classes={{ root: classes.hp }}>HP&nbsp;</Typography> <TableBody>
</TableCell> <TableRow>
<TableCell align="right" classes={{ root: classes.cellNone }}> <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
<Typography classes={{ root: classes.hp }}> <Typography classes={{ root: classes.hp }}>HP&nbsp;</Typography>
{numeralWrapper.formatHp(player.hp)}&nbsp;/&nbsp;{numeralWrapper.formatHp(player.max_hp)} </TableCell>
</Typography> <TableCell align="right" classes={{ root: classes.cellNone }}>
</TableCell> <Typography classes={{ root: classes.hp }}>
</TableRow> {numeralWrapper.formatHp(player.hp)}&nbsp;/&nbsp;{numeralWrapper.formatHp(player.max_hp)}
</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>
</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)} {numeralWrapper.formatSkill(player.hacking_skill)}
</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 }}>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)} {numeralWrapper.formatSkill(player.strength)}
</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 }}>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 }}>
</TableCell> {numeralWrapper.formatSkill(player.defense)}
</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.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)} {numeralWrapper.formatSkill(player.dexterity)}
</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.combat }}>Agi&nbsp;</Typography> <Typography classes={{ root: classes.combat }}>Agi&nbsp;</Typography>
</TableCell> </TableCell>
<TableCell align="right" classes={{ root: classes.cell }}> <TableCell align="right" classes={{ root: classes.cell }}>
<Typography classes={{ root: classes.combat }}>{numeralWrapper.formatSkill(player.agility)}</Typography> <Typography classes={{ root: classes.combat }}>
</TableCell> {numeralWrapper.formatSkill(player.agility)}
</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.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 }}>
</TableCell> {numeralWrapper.formatSkill(player.charisma)}
</TableRow> </Typography>
<Intelligence player={player} /> </TableCell>
<Work player={player} /> </TableRow>
<Intelligence player={player} />
<Work player={player} />
<TableRow> <TableRow>
<TableCell align="center" colSpan={2} classes={{ root: classes.cellNone }}> <TableCell align="center" colSpan={2} classes={{ root: classes.cellNone }}>
<Button color={Settings.AutosaveInterval !== 0 ? "primary" : "secondary"} onClick={save}> <Button color={Settings.AutosaveInterval !== 0 ? "primary" : "secondary"} onClick={save}>
SAVE SAVE
</Button> </Button>
</TableCell> </TableCell>
</TableRow> </TableRow>
</TableBody> </TableBody>
</Table> </Table>
</Box>
</Paper>
</Collapse>
<Box display="flex" justifyContent="flex-end">
<Fab classes={{ root: classes.nobackground }} color="secondary" onClick={() => setOpen((old) => !old)}>
<VisibilityOffIcon />
</Fab>
</Box>
</Box> </Box>
</Paper> </>
); );
} }