2021-09-13 00:03:07 +02:00
|
|
|
// Root React Component for the Corporation UI
|
2021-09-16 23:30:47 +02:00
|
|
|
import React, { useState, useEffect } from "react";
|
2021-09-13 00:03:07 +02:00
|
|
|
|
2021-09-17 03:23:03 +02:00
|
|
|
import makeStyles from "@mui/styles/makeStyles";
|
2021-09-13 00:03:07 +02:00
|
|
|
import { numeralWrapper } from "../../ui/numeralFormat";
|
|
|
|
import { Reputation } from "./Reputation";
|
|
|
|
|
2021-09-17 01:23:03 +02:00
|
|
|
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 Collapse from "@mui/material/Collapse";
|
2021-09-17 04:16:40 +02:00
|
|
|
import Fab from "@mui/material/Fab";
|
|
|
|
import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
|
2021-09-16 23:30:47 +02:00
|
|
|
|
|
|
|
import { colors } from "./Theme";
|
2021-09-17 03:23:03 +02:00
|
|
|
import { Settings } from "../../Settings/Settings";
|
2021-09-18 01:43:08 +02:00
|
|
|
import { use } from "../../ui/Context";
|
|
|
|
import { Page } from "../../ui/Router";
|
2021-09-16 23:30:47 +02:00
|
|
|
|
2021-09-13 00:03:07 +02:00
|
|
|
interface IProps {
|
2021-09-16 23:30:47 +02:00
|
|
|
save: () => void;
|
2021-09-13 00:03:07 +02:00
|
|
|
}
|
|
|
|
|
2021-09-18 01:43:08 +02:00
|
|
|
function Intelligence(): React.ReactElement {
|
|
|
|
const player = use.Player();
|
2021-09-16 23:30:47 +02:00
|
|
|
const classes = useStyles();
|
2021-09-18 01:43:08 +02:00
|
|
|
if (player.intelligence === 0) return <></>;
|
2021-09-16 23:30:47 +02:00
|
|
|
return (
|
|
|
|
<TableRow>
|
|
|
|
<TableCell component="th" scope="row" classes={{ root: classes.cell }}>
|
|
|
|
<Typography classes={{ root: classes.int }}>Int </Typography>
|
|
|
|
</TableCell>
|
|
|
|
<TableCell align="right" classes={{ root: classes.cell }}>
|
|
|
|
<Typography classes={{ root: classes.int }}>{numeralWrapper.formatSkill(player.intelligence)}</Typography>
|
|
|
|
</TableCell>
|
|
|
|
</TableRow>
|
2021-09-13 00:03:07 +02:00
|
|
|
);
|
2021-09-16 23:30:47 +02:00
|
|
|
}
|
2021-09-13 00:03:07 +02:00
|
|
|
|
2021-09-18 01:43:08 +02:00
|
|
|
function Work(): React.ReactElement {
|
|
|
|
const player = use.Player();
|
|
|
|
const router = use.Router();
|
2021-09-16 23:30:47 +02:00
|
|
|
const classes = useStyles();
|
2021-09-18 01:43:08 +02:00
|
|
|
if (!player.isWorking || player.focus) return <></>;
|
2021-09-16 23:30:47 +02:00
|
|
|
return (
|
2021-09-13 00:03:07 +02:00
|
|
|
<>
|
2021-09-16 23:30:47 +02:00
|
|
|
<TableRow>
|
|
|
|
<TableCell component="th" scope="row" colSpan={2} classes={{ root: classes.cellNone }}>
|
|
|
|
<Typography>Work in progress:</Typography>
|
|
|
|
</TableCell>
|
|
|
|
</TableRow>
|
|
|
|
<TableRow>
|
|
|
|
<TableCell component="th" scope="row" colSpan={2} classes={{ root: classes.cellNone }}>
|
|
|
|
<Typography>+{Reputation(player.workRepGained)} rep</Typography>
|
|
|
|
</TableCell>
|
|
|
|
</TableRow>
|
|
|
|
<TableRow>
|
|
|
|
<TableCell component="th" scope="row" align="center" colSpan={2} classes={{ root: classes.cellNone }}>
|
2021-09-18 01:43:08 +02:00
|
|
|
<Button
|
|
|
|
onClick={() => {
|
|
|
|
player.startFocusing();
|
|
|
|
router.toWork();
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
Focus
|
|
|
|
</Button>
|
2021-09-16 23:30:47 +02:00
|
|
|
</TableCell>
|
|
|
|
</TableRow>
|
2021-09-13 00:03:07 +02:00
|
|
|
</>
|
|
|
|
);
|
2021-09-16 23:30:47 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
const useStyles = makeStyles({
|
|
|
|
cellNone: {
|
|
|
|
borderBottom: "none",
|
|
|
|
padding: 0,
|
|
|
|
margin: 0,
|
|
|
|
},
|
|
|
|
cell: {
|
|
|
|
padding: 0,
|
|
|
|
margin: 0,
|
|
|
|
},
|
|
|
|
hp: {
|
|
|
|
color: colors.hp,
|
|
|
|
},
|
|
|
|
money: {
|
|
|
|
color: colors.money,
|
|
|
|
},
|
|
|
|
hack: {
|
|
|
|
color: colors.hack,
|
|
|
|
},
|
|
|
|
combat: {
|
|
|
|
color: colors.combat,
|
|
|
|
},
|
|
|
|
cha: {
|
|
|
|
color: colors.cha,
|
|
|
|
},
|
|
|
|
int: {
|
|
|
|
color: colors.int,
|
|
|
|
},
|
2021-09-17 04:16:40 +02:00
|
|
|
nobackground: {
|
|
|
|
backgroundColor: "#0000",
|
|
|
|
},
|
2021-09-16 23:30:47 +02:00
|
|
|
});
|
|
|
|
|
2021-09-18 01:43:08 +02:00
|
|
|
export function CharacterOverview({ save }: IProps): React.ReactElement {
|
|
|
|
const player = use.Player();
|
|
|
|
const router = use.Router();
|
|
|
|
|
|
|
|
if (router.page() === Page.BitVerse) return <></>;
|
|
|
|
|
2021-09-16 23:30:47 +02:00
|
|
|
const setRerender = useState(false)[1];
|
2021-09-17 04:16:40 +02:00
|
|
|
const [open, setOpen] = useState(true);
|
2021-09-16 23:30:47 +02:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
const id = setInterval(() => setRerender((old) => !old), 600);
|
|
|
|
return () => clearInterval(id);
|
|
|
|
}, []);
|
2021-09-13 00:03:07 +02:00
|
|
|
|
2021-09-16 23:30:47 +02:00
|
|
|
const classes = useStyles();
|
2021-09-13 00:03:07 +02:00
|
|
|
return (
|
2021-09-18 01:43:08 +02:00
|
|
|
<div style={{ position: "fixed", top: 0, right: 0, zIndex: 1500 }}>
|
2021-09-17 04:16:40 +02:00
|
|
|
<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 </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>
|
|
|
|
</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>
|
|
|
|
</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>
|
|
|
|
</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>
|
|
|
|
</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>
|
|
|
|
</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>
|
|
|
|
</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>
|
|
|
|
</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>
|
|
|
|
</TableRow>
|
2021-09-18 01:43:08 +02:00
|
|
|
<Intelligence />
|
|
|
|
<Work />
|
2021-09-17 04:16:40 +02:00
|
|
|
|
|
|
|
<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>
|
2021-09-16 23:30:47 +02:00
|
|
|
</Box>
|
2021-09-18 01:43:08 +02:00
|
|
|
</div>
|
2021-09-13 00:03:07 +02:00
|
|
|
);
|
|
|
|
}
|