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,6 +112,9 @@ export function CharacterOverview({ player, save }: IProps): React.ReactElement
const classes = useStyles(); const classes = useStyles();
return ( return (
<>
<Box display="flex" justifyContent="flex-end" flexDirection={"column"}>
<Collapse in={open}>
<Paper square> <Paper square>
<Box m={1}> <Box m={1}>
<Table size="small"> <Table size="small">
@ -159,7 +168,9 @@ export function CharacterOverview({ player, save }: IProps): React.ReactElement
<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>
</TableRow> </TableRow>
@ -178,7 +189,9 @@ export function CharacterOverview({ player, save }: IProps): React.ReactElement
<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 }}>
{numeralWrapper.formatSkill(player.agility)}
</Typography>
</TableCell> </TableCell>
</TableRow> </TableRow>
@ -187,7 +200,9 @@ export function CharacterOverview({ player, save }: IProps): React.ReactElement
<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>
</TableRow> </TableRow>
<Intelligence player={player} /> <Intelligence player={player} />
@ -204,5 +219,13 @@ export function CharacterOverview({ player, save }: IProps): React.ReactElement
</Table> </Table>
</Box> </Box>
</Paper> </Paper>
</Collapse>
<Box display="flex" justifyContent="flex-end">
<Fab classes={{ root: classes.nobackground }} color="secondary" onClick={() => setOpen((old) => !old)}>
<VisibilityOffIcon />
</Fab>
</Box>
</Box>
</>
); );
} }