From ff726afcd6fd44aeb48cc466992f9203f52234a5 Mon Sep 17 00:00:00 2001
From: Olivier Gagnon <oli.gagnon4418@gmail.com>
Date: Thu, 16 Sep 2021 22:16:40 -0400
Subject: [PATCH] added icon to hide stats

---
 src/ui/React/CharacterOverview.tsx | 203 ++++++++++++++++-------------
 1 file changed, 113 insertions(+), 90 deletions(-)

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