bitburner-src/src/Sidebar/ui/SidebarRoot.tsx

788 lines
28 KiB
TypeScript
Raw Normal View History

2021-09-11 07:54:19 +02:00
import React, { useState, useEffect } from "react";
2021-09-14 21:23:16 +02:00
import clsx from "clsx";
2021-09-18 01:43:08 +02:00
import { styled, Theme, CSSObject } from "@mui/material/styles";
2021-09-17 01:23:03 +02:00
import createStyles from "@mui/styles/createStyles";
import makeStyles from "@mui/styles/makeStyles";
2021-09-17 01:42:55 +02:00
import MuiDrawer from "@mui/material/Drawer";
2021-09-17 01:23:03 +02:00
import List from "@mui/material/List";
import Divider from "@mui/material/Divider";
import Tooltip from "@mui/material/Tooltip";
2021-09-17 01:23:03 +02:00
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import ListItem from "@mui/material/ListItem";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import Typography from "@mui/material/Typography";
import Collapse from "@mui/material/Collapse";
2021-09-17 03:31:29 +02:00
import Badge from "@mui/material/Badge";
2021-09-14 21:23:16 +02:00
2021-09-17 01:23:03 +02:00
import ComputerIcon from "@mui/icons-material/Computer";
import LastPageIcon from "@mui/icons-material/LastPage"; // Terminal
import CreateIcon from "@mui/icons-material/Create"; // Create Script
import StorageIcon from "@mui/icons-material/Storage"; // Active Scripts
import BugReportIcon from "@mui/icons-material/BugReport"; // Create Program
import EqualizerIcon from "@mui/icons-material/Equalizer"; // Stats
import ContactsIcon from "@mui/icons-material/Contacts"; // Factions
import DoubleArrowIcon from "@mui/icons-material/DoubleArrow"; // Augmentations
import AccountTreeIcon from "@mui/icons-material/AccountTree"; // Hacknet
import PeopleAltIcon from "@mui/icons-material/PeopleAlt"; // Sleeves
import LocationCityIcon from "@mui/icons-material/LocationCity"; // City
import AirplanemodeActiveIcon from "@mui/icons-material/AirplanemodeActive"; // Travel
import WorkIcon from "@mui/icons-material/Work"; // Job
import TrendingUpIcon from "@mui/icons-material/TrendingUp"; // Stock Market
import FormatBoldIcon from "@mui/icons-material/FormatBold"; // Bladeburner
import BusinessIcon from "@mui/icons-material/Business"; // Corp
import SportsMmaIcon from "@mui/icons-material/SportsMma"; // Gang
import CheckIcon from "@mui/icons-material/Check"; // Milestones
import HelpIcon from "@mui/icons-material/Help"; // Tutorial
import SettingsIcon from "@mui/icons-material/Settings"; // options
import DeveloperBoardIcon from "@mui/icons-material/DeveloperBoard"; // Dev
import AccountBoxIcon from "@mui/icons-material/AccountBox";
import PublicIcon from "@mui/icons-material/Public";
import LiveHelpIcon from "@mui/icons-material/LiveHelp";
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
2021-09-14 21:23:16 +02:00
2021-09-17 08:04:44 +02:00
import { IRouter, Page } from "../../ui/Router";
2021-09-11 07:54:19 +02:00
import { IPlayer } from "../../PersonObjects/IPlayer";
2021-09-14 21:23:16 +02:00
import { CONSTANTS } from "../../Constants";
2021-09-11 07:54:19 +02:00
import { iTutorialSteps, iTutorialNextStep, ITutorial } from "../../InteractiveTutorial";
import { getAvailableCreatePrograms } from "../../Programs/ProgramHelpers";
2021-09-13 00:03:07 +02:00
import { Settings } from "../../Settings/Settings";
import { redPillFlag } from "../../RedPill";
2021-09-25 23:21:50 +02:00
import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
2021-09-13 00:03:07 +02:00
2021-09-25 20:42:57 +02:00
import { KEY } from "../../utils/helpers/keyCodes";
2021-10-23 21:22:58 +02:00
import { ProgramsSeen } from "../../Programs/ui/ProgramsRoot";
import { InvitationsSeen } from "../../Faction/ui/FactionsRoot";
2021-12-17 02:07:34 +01:00
import { hash } from "../../hash/hash";
2021-09-11 07:54:19 +02:00
2021-09-17 01:42:55 +02:00
const openedMixin = (theme: Theme): CSSObject => ({
2021-09-17 02:51:25 +02:00
width: theme.spacing(31),
2021-09-17 01:42:55 +02:00
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
overflowX: "hidden",
});
const closedMixin = (theme: Theme): CSSObject => ({
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
overflowX: "hidden",
2021-09-17 02:51:25 +02:00
width: `calc(${theme.spacing(2)} + 1px)`,
2021-09-17 01:42:55 +02:00
[theme.breakpoints.up("sm")]: {
2021-09-17 02:51:25 +02:00
width: `calc(${theme.spacing(7)} + 1px)`,
2021-09-17 01:42:55 +02:00
},
});
const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== "open" })(({ theme, open }) => ({
2021-09-17 02:51:25 +02:00
width: theme.spacing(31),
2021-09-17 01:42:55 +02:00
whiteSpace: "nowrap",
boxSizing: "border-box",
...(open && {
...openedMixin(theme),
"& .MuiDrawer-paper": openedMixin(theme),
}),
...(!open && {
...closedMixin(theme),
"& .MuiDrawer-paper": closedMixin(theme),
}),
}));
2021-09-14 21:23:16 +02:00
const useStyles = makeStyles((theme: Theme) =>
createStyles({
active: {
2021-09-18 01:43:08 +02:00
borderLeft: "3px solid " + theme.palette.primary.main,
2021-09-14 21:23:16 +02:00
},
listitem: {},
2021-09-14 21:23:16 +02:00
}),
);
2021-09-11 07:54:19 +02:00
interface IProps {
player: IPlayer;
2021-09-17 08:04:44 +02:00
router: IRouter;
page: Page;
2021-09-11 07:54:19 +02:00
}
export function SidebarRoot(props: IProps): React.ReactElement {
const setRerender = useState(false)[1];
function rerender(): void {
setRerender((old) => !old);
}
useEffect(() => {
2021-09-14 21:23:16 +02:00
const id = setInterval(rerender, 200);
2021-09-11 07:54:19 +02:00
return () => clearInterval(id);
}, []);
const [hackingOpen, setHackingOpen] = useState(true);
const [characterOpen, setCharacterOpen] = useState(true);
const [worldOpen, setWorldOpen] = useState(true);
const [helpOpen, setHelpOpen] = useState(true);
const flashTerminal =
ITutorial.currStep === iTutorialSteps.CharacterGoToTerminalPage ||
ITutorial.currStep === iTutorialSteps.ActiveScriptsPage;
const flashStats = ITutorial.currStep === iTutorialSteps.GoToCharacterPage;
const flashActiveScripts = ITutorial.currStep === iTutorialSteps.TerminalGoToActiveScriptsPage;
const flashHacknet = ITutorial.currStep === iTutorialSteps.GoToHacknetNodesPage;
const flashCity = ITutorial.currStep === iTutorialSteps.HacknetNodesGoToWorldPage;
const flashTutorial = ITutorial.currStep === iTutorialSteps.WorldDescription;
2021-09-17 03:49:38 +02:00
const augmentationCount = props.player.queuedAugmentations.length;
2021-10-25 17:17:41 +02:00
const invitationsCount = props.player.factionInvitations.filter((f) => !InvitationsSeen.includes(f)).length;
const programCount = getAvailableCreatePrograms(props.player).length - ProgramsSeen.length;
2021-09-11 07:54:19 +02:00
const canCreateProgram =
2021-10-25 17:17:41 +02:00
getAvailableCreatePrograms(props.player).length > 0 ||
2021-09-11 07:54:19 +02:00
props.player.augmentations.length > 0 ||
props.player.queuedAugmentations.length > 0 ||
props.player.sourceFiles.length > 0;
const canOpenFactions =
props.player.factionInvitations.length > 0 ||
props.player.factions.length > 0 ||
props.player.augmentations.length > 0 ||
props.player.queuedAugmentations.length > 0 ||
props.player.sourceFiles.length > 0;
const canOpenAugmentations =
props.player.augmentations.length > 0 ||
props.player.queuedAugmentations.length > 0 ||
props.player.sourceFiles.length > 0;
const canOpenSleeves = props.player.sleeves.length > 0;
2021-09-11 08:32:15 +02:00
const canCorporation = !!(props.player.corporation as any);
const canGang = !!(props.player.gang as any);
const canJob = props.player.companyName !== "";
const canStockMarket = props.player.hasWseAccount;
const canBladeburner = !!(props.player.bladeburner as any);
2021-10-07 07:36:59 +02:00
const canStaneksGift = props.player.augmentations.some((aug) => aug.name === AugmentationNames.StaneksGift1);
2021-09-11 07:54:19 +02:00
2021-09-13 00:03:07 +02:00
function clickTerminal(): void {
2021-09-17 08:04:44 +02:00
props.router.toTerminal();
2021-09-13 00:03:07 +02:00
if (flashTerminal) iTutorialNextStep();
}
function clickScriptEditor(): void {
2021-09-17 08:04:44 +02:00
props.router.toScriptEditor();
2021-09-13 00:03:07 +02:00
}
function clickStats(): void {
2021-09-18 18:13:20 +02:00
props.router.toStats();
2021-09-13 00:03:07 +02:00
if (flashStats) iTutorialNextStep();
}
function clickActiveScripts(): void {
2021-09-17 08:04:44 +02:00
props.router.toActiveScripts();
2021-09-13 00:03:07 +02:00
if (flashActiveScripts) iTutorialNextStep();
}
function clickCreateProgram(): void {
2021-09-17 08:04:44 +02:00
props.router.toCreateProgram();
2021-09-13 00:03:07 +02:00
}
2021-09-25 23:21:50 +02:00
function clickStaneksGift(): void {
props.router.toStaneksGift();
}
2021-09-13 00:03:07 +02:00
function clickFactions(): void {
2021-09-17 08:04:44 +02:00
props.router.toFactions();
2021-09-13 00:03:07 +02:00
}
function clickAugmentations(): void {
2021-09-17 08:04:44 +02:00
props.router.toAugmentations();
2021-09-13 00:03:07 +02:00
}
function clickSleeves(): void {
2021-09-17 08:04:44 +02:00
props.router.toSleeves();
2021-09-13 00:03:07 +02:00
}
function clickHacknet(): void {
2021-09-17 08:04:44 +02:00
props.router.toHacknetNodes();
2021-09-13 00:03:07 +02:00
if (flashHacknet) iTutorialNextStep();
}
function clickCity(): void {
2021-09-17 08:04:44 +02:00
props.router.toCity();
2021-09-13 00:03:07 +02:00
if (flashCity) iTutorialNextStep();
}
function clickTravel(): void {
2021-09-17 08:04:44 +02:00
props.router.toTravel();
2021-09-13 00:03:07 +02:00
}
function clickJob(): void {
2021-09-17 08:04:44 +02:00
props.router.toJob();
2021-09-13 00:03:07 +02:00
}
function clickStockMarket(): void {
2021-09-17 08:04:44 +02:00
props.router.toStockMarket();
2021-09-13 00:03:07 +02:00
}
function clickBladeburner(): void {
2021-09-17 08:04:44 +02:00
props.router.toBladeburner();
2021-09-13 00:03:07 +02:00
}
function clickCorp(): void {
2021-09-17 08:04:44 +02:00
props.router.toCorporation();
2021-09-13 00:03:07 +02:00
}
function clickGang(): void {
2021-09-17 08:04:44 +02:00
props.router.toGang();
2021-09-13 00:03:07 +02:00
}
function clickTutorial(): void {
2021-09-17 08:04:44 +02:00
props.router.toTutorial();
2021-09-13 00:03:07 +02:00
if (flashTutorial) iTutorialNextStep();
}
function clickMilestones(): void {
2021-09-17 08:04:44 +02:00
props.router.toMilestones();
2021-09-13 00:03:07 +02:00
}
2021-09-15 03:05:49 +02:00
function clickOptions(): void {
2021-09-17 08:04:44 +02:00
props.router.toGameOptions();
2021-09-15 03:05:49 +02:00
}
2021-09-13 00:03:07 +02:00
function clickDev(): void {
2021-09-17 08:04:44 +02:00
props.router.toDevMenu();
2021-09-13 00:03:07 +02:00
}
useEffect(() => {
// Shortcuts to navigate through the game
// Alt-t - Terminal
// Alt-c - Character
// Alt-e - Script editor
// Alt-s - Active scripts
// Alt-h - Hacknet Nodes
// Alt-w - City
// Alt-j - Job
// Alt-r - Travel Agency of current city
// Alt-p - Create program
// Alt-f - Factions
// Alt-a - Augmentations
// Alt-u - Tutorial
// Alt-o - Options
function handleShortcuts(this: Document, event: KeyboardEvent): any {
if (Settings.DisableHotkeys) return;
if ((props.player.isWorking && props.player.focus) || redPillFlag) return;
2021-09-13 00:03:07 +02:00
if (event.keyCode == KEY.T && event.altKey) {
event.preventDefault();
clickTerminal();
} else if (event.keyCode === KEY.C && event.altKey) {
event.preventDefault();
clickStats();
} else if (event.keyCode === KEY.E && event.altKey) {
event.preventDefault();
clickScriptEditor();
2021-09-13 00:03:07 +02:00
} else if (event.keyCode === KEY.S && event.altKey) {
event.preventDefault();
clickActiveScripts();
} else if (event.keyCode === KEY.H && event.altKey) {
event.preventDefault();
clickHacknet();
} else if (event.keyCode === KEY.W && event.altKey) {
event.preventDefault();
clickCity();
} else if (event.keyCode === KEY.J && event.altKey && !event.ctrlKey && !event.metaKey && props.player.hasJob()) {
// ctrl/cmd + alt + j is shortcut to open Chrome dev tools
2021-09-13 00:03:07 +02:00
event.preventDefault();
clickJob();
} else if (event.keyCode === KEY.R && event.altKey) {
event.preventDefault();
clickTravel();
} else if (event.keyCode === KEY.P && event.altKey) {
event.preventDefault();
clickCreateProgram();
} else if (event.keyCode === KEY.F && event.altKey) {
2021-09-22 07:36:17 +02:00
if (props.page == Page.Terminal && Settings.EnableBashHotkeys) {
2021-09-13 00:03:07 +02:00
return;
}
event.preventDefault();
clickFactions();
} else if (event.keyCode === KEY.A && event.altKey) {
event.preventDefault();
clickAugmentations();
} else if (event.keyCode === KEY.U && event.altKey) {
event.preventDefault();
clickTutorial();
} else if (event.keyCode === KEY.B && event.altKey) {
event.preventDefault();
clickBladeburner();
} else if (event.keyCode === KEY.G && event.altKey) {
event.preventDefault();
clickGang();
}
// if (event.keyCode === KEY.O && event.altKey) {
// event.preventDefault();
// gameOptionsBoxOpen();
// }
}
2021-12-12 20:02:45 +01:00
document.addEventListener("keydown", handleShortcuts);
return () => document.removeEventListener("keydown", handleShortcuts);
2021-09-13 00:03:07 +02:00
}, []);
2021-09-14 21:23:16 +02:00
const classes = useStyles();
const [open, setOpen] = useState(true);
2021-09-16 01:50:44 +02:00
const toggleDrawer = (): void => setOpen((old) => !old);
2021-09-11 07:54:19 +02:00
return (
2021-09-17 08:04:44 +02:00
<Drawer open={open} anchor="left" variant="permanent">
<ListItem classes={{ root: classes.listitem }} button onClick={toggleDrawer}>
<ListItemIcon>
2021-09-18 06:16:02 +02:00
{!open ? <ChevronRightIcon color="primary" /> : <ChevronLeftIcon color="primary" />}
2021-09-17 08:04:44 +02:00
</ListItemIcon>
2021-12-17 02:07:34 +01:00
<ListItemText
primary={
<Tooltip title={hash()}>
<Typography>Bitburner v{CONSTANTS.VersionString}</Typography>
</Tooltip>
2021-12-17 02:07:34 +01:00
}
/>
2021-09-17 08:04:44 +02:00
</ListItem>
<Divider />
<List>
<ListItem classes={{ root: classes.listitem }} button onClick={() => setHackingOpen((old) => !old)}>
2021-09-17 02:51:25 +02:00
<ListItemIcon>
2021-09-18 06:16:02 +02:00
<ComputerIcon color="primary" />
2021-09-17 02:51:25 +02:00
</ListItemIcon>
2021-09-18 06:16:02 +02:00
<ListItemText primary={<Typography>Hacking</Typography>} />
{hackingOpen ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />}
2021-09-14 21:23:16 +02:00
</ListItem>
2021-09-17 08:04:44 +02:00
<Collapse in={hackingOpen} timeout="auto" unmountOnExit>
<List>
2021-09-14 21:23:16 +02:00
<ListItem
2021-09-17 08:04:44 +02:00
classes={{ root: classes.listitem }}
2021-09-14 21:23:16 +02:00
button
2021-09-17 08:04:44 +02:00
key={"Terminal"}
2021-09-14 21:23:16 +02:00
className={clsx({
2021-09-17 08:04:44 +02:00
[classes.active]: props.page === Page.Terminal,
2021-09-14 21:23:16 +02:00
})}
2021-09-17 08:04:44 +02:00
onClick={clickTerminal}
2021-09-13 00:03:07 +02:00
>
2021-09-14 21:23:16 +02:00
<ListItemIcon>
2021-09-17 08:04:44 +02:00
<LastPageIcon
color={flashTerminal ? "error" : props.page !== Page.Terminal ? "secondary" : "primary"}
/>
2021-09-14 21:23:16 +02:00
</ListItemIcon>
<ListItemText>
2021-09-17 08:04:44 +02:00
<Typography color={flashTerminal ? "error" : props.page !== Page.Terminal ? "secondary" : "primary"}>
Terminal
2021-09-14 21:23:16 +02:00
</Typography>
</ListItemText>
</ListItem>
<ListItem
2021-09-17 08:04:44 +02:00
classes={{ root: classes.listitem }}
2021-09-14 21:23:16 +02:00
button
key={"Script Editor"}
2021-09-14 21:23:16 +02:00
className={clsx({
[classes.active]: props.page === Page.ScriptEditor,
2021-09-14 21:23:16 +02:00
})}
onClick={clickScriptEditor}
2021-09-13 00:03:07 +02:00
>
2021-09-14 21:23:16 +02:00
<ListItemIcon>
<CreateIcon color={props.page !== Page.ScriptEditor ? "secondary" : "primary"} />
2021-09-14 21:23:16 +02:00
</ListItemIcon>
<ListItemText>
<Typography color={props.page !== Page.ScriptEditor ? "secondary" : "primary"}>
Script Editor
2021-09-14 21:23:16 +02:00
</Typography>
</ListItemText>
</ListItem>
2021-09-17 08:04:44 +02:00
<ListItem
classes={{ root: classes.listitem }}
button
key={"Active Scripts"}
className={clsx({
[classes.active]: props.page === Page.ActiveScripts,
})}
onClick={clickActiveScripts}
>
<ListItemIcon>
<StorageIcon
color={flashActiveScripts ? "error" : props.page !== Page.ActiveScripts ? "secondary" : "primary"}
/>
</ListItemIcon>
<ListItemText>
<Typography
color={flashActiveScripts ? "error" : props.page !== Page.ActiveScripts ? "secondary" : "primary"}
>
Active Scripts
</Typography>
</ListItemText>
</ListItem>
{canCreateProgram && (
2021-09-14 21:23:16 +02:00
<ListItem
button
2021-09-17 08:04:44 +02:00
key={"Create Program"}
2021-09-14 21:23:16 +02:00
className={clsx({
2021-09-17 08:04:44 +02:00
[classes.active]: props.page === Page.CreateProgram,
2021-09-14 21:23:16 +02:00
})}
2021-09-17 08:04:44 +02:00
onClick={clickCreateProgram}
2021-09-14 21:23:16 +02:00
>
<ListItemIcon>
2021-09-17 08:04:44 +02:00
<Badge badgeContent={programCount > 0 ? programCount : undefined} color="error">
<BugReportIcon color={props.page !== Page.CreateProgram ? "secondary" : "primary"} />
</Badge>
2021-09-14 21:23:16 +02:00
</ListItemIcon>
<ListItemText>
2021-09-17 08:04:44 +02:00
<Typography color={props.page !== Page.CreateProgram ? "secondary" : "primary"}>
Create Program
</Typography>
2021-09-14 21:23:16 +02:00
</ListItemText>
</ListItem>
)}
2021-09-25 23:21:50 +02:00
{canStaneksGift && (
<ListItem
button
key={"Staneks Gift"}
className={clsx({
[classes.active]: props.page === Page.StaneksGift,
})}
onClick={clickStaneksGift}
>
<ListItemIcon>
<DeveloperBoardIcon color={props.page !== Page.StaneksGift ? "secondary" : "primary"} />
</ListItemIcon>
<ListItemText>
2021-10-07 07:36:59 +02:00
<Typography color={props.page !== Page.StaneksGift ? "secondary" : "primary"}>
Stanek's Gift
</Typography>
2021-09-25 23:21:50 +02:00
</ListItemText>
</ListItem>
)}
2021-09-17 08:04:44 +02:00
</List>
</Collapse>
2021-09-14 21:23:16 +02:00
2021-09-17 08:04:44 +02:00
<Divider />
<ListItem classes={{ root: classes.listitem }} button onClick={() => setCharacterOpen((old) => !old)}>
<ListItemIcon>
2021-09-18 06:16:02 +02:00
<AccountBoxIcon color="primary" />
2021-09-17 08:04:44 +02:00
</ListItemIcon>
2021-09-18 06:16:02 +02:00
<ListItemText primary={<Typography>Character</Typography>} />
{characterOpen ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />}
2021-09-17 08:04:44 +02:00
</ListItem>
<Collapse in={characterOpen} timeout="auto" unmountOnExit>
<ListItem
button
key={"Stats"}
className={clsx({
[classes.active]: props.page === Page.Stats,
})}
onClick={clickStats}
>
2021-09-14 21:23:16 +02:00
<ListItemIcon>
2021-09-17 08:04:44 +02:00
<EqualizerIcon color={flashStats ? "error" : props.page !== Page.Stats ? "secondary" : "primary"} />
2021-09-14 21:23:16 +02:00
</ListItemIcon>
2021-09-17 08:04:44 +02:00
<ListItemText>
<Typography color={flashStats ? "error" : props.page !== Page.Stats ? "secondary" : "primary"}>
Stats
</Typography>
</ListItemText>
2021-09-14 21:23:16 +02:00
</ListItem>
2021-09-17 08:04:44 +02:00
{canOpenFactions && (
2021-09-14 21:23:16 +02:00
<ListItem
2021-09-17 08:04:44 +02:00
classes={{ root: classes.listitem }}
2021-09-14 21:23:16 +02:00
button
2021-09-17 08:04:44 +02:00
key={"Factions"}
2021-09-14 21:23:16 +02:00
className={clsx({
2021-09-17 08:04:44 +02:00
[classes.active]: [Page.Factions, Page.Faction].includes(props.page),
2021-09-14 21:23:16 +02:00
})}
2021-09-17 08:04:44 +02:00
onClick={clickFactions}
2021-09-13 00:03:07 +02:00
>
2021-09-14 21:23:16 +02:00
<ListItemIcon>
2021-09-17 08:04:44 +02:00
<Badge badgeContent={invitationsCount !== 0 ? invitationsCount : undefined} color="error">
<ContactsIcon color={![Page.Factions, Page.Faction].includes(props.page) ? "secondary" : "primary"} />
</Badge>
2021-09-14 21:23:16 +02:00
</ListItemIcon>
<ListItemText>
2021-09-17 08:04:44 +02:00
<Typography color={![Page.Factions, Page.Faction].includes(props.page) ? "secondary" : "primary"}>
Factions
2021-09-14 21:23:16 +02:00
</Typography>
</ListItemText>
</ListItem>
2021-09-17 08:04:44 +02:00
)}
{canOpenAugmentations && (
2021-09-14 21:23:16 +02:00
<ListItem
2021-09-17 08:04:44 +02:00
classes={{ root: classes.listitem }}
2021-09-14 21:23:16 +02:00
button
2021-09-17 08:04:44 +02:00
key={"Augmentations"}
2021-09-14 21:23:16 +02:00
className={clsx({
2021-09-17 08:04:44 +02:00
[classes.active]: props.page === Page.Augmentations,
2021-09-14 21:23:16 +02:00
})}
2021-09-17 08:04:44 +02:00
onClick={clickAugmentations}
2021-09-14 21:23:16 +02:00
>
<ListItemIcon>
2021-09-17 08:04:44 +02:00
<Badge badgeContent={augmentationCount !== 0 ? augmentationCount : undefined} color="error">
<DoubleArrowIcon
style={{ transform: "rotate(-90deg)" }}
color={props.page !== Page.Augmentations ? "secondary" : "primary"}
/>
</Badge>
2021-09-14 21:23:16 +02:00
</ListItemIcon>
<ListItemText>
2021-09-17 08:04:44 +02:00
<Typography color={props.page !== Page.Augmentations ? "secondary" : "primary"}>
Augmentations
</Typography>
2021-09-14 21:23:16 +02:00
</ListItemText>
</ListItem>
2021-09-17 08:04:44 +02:00
)}
<ListItem
button
key={"Hacknet"}
className={clsx({
[classes.active]: props.page === Page.Hacknet,
})}
onClick={clickHacknet}
>
<ListItemIcon>
<AccountTreeIcon color={flashHacknet ? "error" : props.page !== Page.Hacknet ? "secondary" : "primary"} />
</ListItemIcon>
<ListItemText>
<Typography color={flashHacknet ? "error" : props.page !== Page.Hacknet ? "secondary" : "primary"}>
Hacknet
</Typography>
</ListItemText>
</ListItem>
{canOpenSleeves && (
<ListItem
classes={{ root: classes.listitem }}
button
key={"Sleeves"}
className={clsx({
[classes.active]: props.page === Page.Sleeves,
})}
onClick={clickSleeves}
>
<ListItemIcon>
<PeopleAltIcon color={props.page !== Page.Sleeves ? "secondary" : "primary"} />
</ListItemIcon>
<ListItemText>
<Typography color={props.page !== Page.Sleeves ? "secondary" : "primary"}>Sleeves</Typography>
</ListItemText>
</ListItem>
)}
</Collapse>
2021-09-14 21:23:16 +02:00
2021-09-17 08:04:44 +02:00
<Divider />
<ListItem classes={{ root: classes.listitem }} button onClick={() => setWorldOpen((old) => !old)}>
<ListItemIcon>
2021-09-18 06:16:02 +02:00
<PublicIcon color="primary" />
2021-09-17 08:04:44 +02:00
</ListItemIcon>
2021-09-18 06:16:02 +02:00
<ListItemText primary={<Typography>World</Typography>} />
{worldOpen ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />}
2021-09-17 08:04:44 +02:00
</ListItem>
<Collapse in={worldOpen} timeout="auto" unmountOnExit>
<ListItem
button
key={"City"}
className={clsx({
2021-09-18 10:01:07 +02:00
[classes.active]:
props.page === Page.City || props.page === Page.Resleeves || props.page === Page.Location,
2021-09-17 08:04:44 +02:00
})}
onClick={clickCity}
>
<ListItemIcon>
<LocationCityIcon color={flashCity ? "error" : props.page !== Page.City ? "secondary" : "primary"} />
</ListItemIcon>
<ListItemText>
<Typography color={flashCity ? "error" : props.page !== Page.City ? "secondary" : "primary"}>
City
</Typography>
</ListItemText>
</ListItem>
<ListItem
button
key={"Travel"}
className={clsx({
[classes.active]: props.page === Page.Travel,
})}
onClick={clickTravel}
>
2021-09-14 21:23:16 +02:00
<ListItemIcon>
2021-09-17 08:04:44 +02:00
<AirplanemodeActiveIcon color={props.page !== Page.Travel ? "secondary" : "primary"} />
2021-09-14 21:23:16 +02:00
</ListItemIcon>
2021-09-17 08:04:44 +02:00
<ListItemText>
<Typography color={props.page !== Page.Travel ? "secondary" : "primary"}>Travel</Typography>
</ListItemText>
2021-09-14 21:23:16 +02:00
</ListItem>
2021-09-17 08:04:44 +02:00
{canJob && (
2021-09-14 21:23:16 +02:00
<ListItem
2021-09-17 08:04:44 +02:00
classes={{ root: classes.listitem }}
2021-09-14 21:23:16 +02:00
button
2021-09-17 08:04:44 +02:00
key={"Job"}
2021-09-14 21:23:16 +02:00
className={clsx({
2021-09-17 08:04:44 +02:00
[classes.active]: props.page === Page.Job,
2021-09-14 21:23:16 +02:00
})}
2021-09-17 08:04:44 +02:00
onClick={clickJob}
2021-09-14 21:23:16 +02:00
>
<ListItemIcon>
2021-09-17 08:04:44 +02:00
<WorkIcon color={props.page !== Page.Job ? "secondary" : "primary"} />
2021-09-14 21:23:16 +02:00
</ListItemIcon>
<ListItemText>
2021-09-17 08:04:44 +02:00
<Typography color={props.page !== Page.Job ? "secondary" : "primary"}>Job</Typography>
2021-09-14 21:23:16 +02:00
</ListItemText>
</ListItem>
2021-09-17 08:04:44 +02:00
)}
{canStockMarket && (
2021-09-14 21:23:16 +02:00
<ListItem
2021-09-17 08:04:44 +02:00
classes={{ root: classes.listitem }}
2021-09-14 21:23:16 +02:00
button
2021-09-17 08:04:44 +02:00
key={"Stock Market"}
2021-09-14 21:23:16 +02:00
className={clsx({
2021-09-17 08:04:44 +02:00
[classes.active]: props.page === Page.StockMarket,
2021-09-14 21:23:16 +02:00
})}
2021-09-17 08:04:44 +02:00
onClick={clickStockMarket}
2021-09-13 00:03:07 +02:00
>
2021-09-14 21:23:16 +02:00
<ListItemIcon>
2021-09-17 08:04:44 +02:00
<TrendingUpIcon color={props.page !== Page.StockMarket ? "secondary" : "primary"} />
2021-09-14 21:23:16 +02:00
</ListItemIcon>
<ListItemText>
2021-09-17 08:04:44 +02:00
<Typography color={props.page !== Page.StockMarket ? "secondary" : "primary"}>Stock Market</Typography>
2021-09-14 21:23:16 +02:00
</ListItemText>
</ListItem>
2021-09-17 08:04:44 +02:00
)}
{canBladeburner && (
2021-09-15 03:05:49 +02:00
<ListItem
2021-09-17 08:04:44 +02:00
classes={{ root: classes.listitem }}
2021-09-14 21:23:16 +02:00
button
2021-09-17 08:04:44 +02:00
key={"Bladeburner"}
2021-09-14 21:23:16 +02:00
className={clsx({
2021-09-17 08:04:44 +02:00
[classes.active]: props.page === Page.Bladeburner,
2021-09-14 21:23:16 +02:00
})}
2021-09-17 08:04:44 +02:00
onClick={clickBladeburner}
2021-09-14 21:23:16 +02:00
>
<ListItemIcon>
2021-09-17 08:04:44 +02:00
<FormatBoldIcon color={props.page !== Page.Bladeburner ? "secondary" : "primary"} />
2021-09-14 21:23:16 +02:00
</ListItemIcon>
<ListItemText>
2021-09-17 08:04:44 +02:00
<Typography color={props.page !== Page.Bladeburner ? "secondary" : "primary"}>Bladeburner</Typography>
2021-09-14 21:23:16 +02:00
</ListItemText>
2021-09-15 03:05:49 +02:00
</ListItem>
2021-09-17 08:04:44 +02:00
)}
{canCorporation && (
<ListItem
classes={{ root: classes.listitem }}
button
key={"Corp"}
className={clsx({
[classes.active]: props.page === Page.Corporation,
})}
onClick={clickCorp}
>
<ListItemIcon>
<BusinessIcon color={props.page !== Page.Corporation ? "secondary" : "primary"} />
</ListItemIcon>
<ListItemText>
<Typography color={props.page !== Page.Corporation ? "secondary" : "primary"}>Corp</Typography>
</ListItemText>
</ListItem>
)}
{canGang && (
<ListItem
classes={{ root: classes.listitem }}
button
key={"Gang"}
className={clsx({
[classes.active]: props.page === Page.Gang,
})}
onClick={clickGang}
>
<ListItemIcon>
<SportsMmaIcon color={props.page !== Page.Gang ? "secondary" : "primary"} />
</ListItemIcon>
<ListItemText>
<Typography color={props.page !== Page.Gang ? "secondary" : "primary"}>Gang</Typography>
</ListItemText>
</ListItem>
)}
</Collapse>
<Divider />
<ListItem classes={{ root: classes.listitem }} button onClick={() => setHelpOpen((old) => !old)}>
<ListItemIcon>
2021-09-18 06:16:02 +02:00
<LiveHelpIcon color="primary" />
2021-09-17 08:04:44 +02:00
</ListItemIcon>
2021-09-18 06:16:02 +02:00
<ListItemText primary={<Typography>Help</Typography>} />
{helpOpen ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />}
2021-09-17 08:04:44 +02:00
</ListItem>
<Collapse in={helpOpen} timeout="auto" unmountOnExit>
<ListItem
button
key={"Milestones"}
className={clsx({
[classes.active]: props.page === Page.Milestones,
})}
onClick={clickMilestones}
>
<ListItemIcon>
<CheckIcon color={props.page !== Page.Milestones ? "secondary" : "primary"} />
</ListItemIcon>
<ListItemText>
<Typography color={props.page !== Page.Milestones ? "secondary" : "primary"}>Milestones</Typography>
</ListItemText>
</ListItem>
<ListItem
button
key={"Tutorial"}
className={clsx({
[classes.active]: props.page === Page.Tutorial,
})}
onClick={clickTutorial}
>
<ListItemIcon>
<HelpIcon color={flashTutorial ? "error" : props.page !== Page.Tutorial ? "secondary" : "primary"} />
</ListItemIcon>
<ListItemText>
<Typography color={flashTutorial ? "error" : props.page !== Page.Tutorial ? "secondary" : "primary"}>
Tutorial
</Typography>
</ListItemText>
</ListItem>
<ListItem
button
key={"Options"}
className={clsx({
[classes.active]: props.page === Page.Options,
})}
onClick={clickOptions}
>
<ListItemIcon>
<SettingsIcon color={props.page !== Page.Options ? "secondary" : "primary"} />
</ListItemIcon>
<ListItemText>
<Typography color={props.page !== Page.Options ? "secondary" : "primary"}>Options</Typography>
</ListItemText>
</ListItem>
{process.env.NODE_ENV === "development" && (
2021-09-17 08:04:44 +02:00
<ListItem
classes={{ root: classes.listitem }}
button
key={"Dev"}
className={clsx({
[classes.active]: props.page === Page.DevMenu,
})}
onClick={clickDev}
>
<ListItemIcon>
<DeveloperBoardIcon color={props.page !== Page.DevMenu ? "secondary" : "primary"} />
</ListItemIcon>
<ListItemText>
<Typography color={props.page !== Page.DevMenu ? "secondary" : "primary"}>Dev</Typography>
</ListItemText>
</ListItem>
)}
</Collapse>
</List>
</Drawer>
2021-09-11 07:54:19 +02:00
);
}