mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2026-04-23 09:42:53 +02:00
UI: Break SidebarRoot into smaller components, and memoize (#246)
This commit is contained in:
David Walker
GitHub
+137
-544
@@ -1,6 +1,5 @@
|
||||
import React, { useCallback, useState, useEffect } from "react";
|
||||
import React, { useMemo, useCallback, useState, useEffect } from "react";
|
||||
import { KEYCODE } from "../../utils/helpers/keyCodes";
|
||||
import clsx from "clsx";
|
||||
import { styled, Theme, CSSObject } from "@mui/material/styles";
|
||||
import createStyles from "@mui/styles/createStyles";
|
||||
import makeStyles from "@mui/styles/makeStyles";
|
||||
@@ -14,8 +13,6 @@ 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";
|
||||
import Badge from "@mui/material/Badge";
|
||||
|
||||
import ComputerIcon from "@mui/icons-material/Computer";
|
||||
import LastPageIcon from "@mui/icons-material/LastPage"; // Terminal
|
||||
@@ -42,11 +39,10 @@ import EmojiEventsIcon from "@mui/icons-material/EmojiEvents"; // Achievements
|
||||
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";
|
||||
|
||||
import { Router } from "../../ui/GameRoot";
|
||||
import { Page, SimplePage } from "../../ui/Router";
|
||||
import { SidebarAccordion } from "./SidebarAccordion";
|
||||
import { Player } from "@player";
|
||||
import { CONSTANTS } from "../../Constants";
|
||||
import { iTutorialSteps, iTutorialNextStep, ITutorial } from "../../InteractiveTutorial";
|
||||
@@ -59,6 +55,39 @@ import { InvitationsSeen } from "../../Faction/ui/FactionsRoot";
|
||||
import { hash } from "../../hash/hash";
|
||||
import { Locations } from "../../Locations/Locations";
|
||||
|
||||
// All icon instances need to be constant, so they have stable object identity.
|
||||
// Otherwise, the memoization of all the higher-level components doesn't work.
|
||||
const computerIcon = <ComputerIcon />;
|
||||
const lastPageIcon = <LastPageIcon />;
|
||||
const createIcon = <CreateIcon />;
|
||||
const storageIcon = <StorageIcon />;
|
||||
const bugReportIcon = <BugReportIcon />;
|
||||
const equalizerIcon = <EqualizerIcon />;
|
||||
const contactsIcon = <ContactsIcon />;
|
||||
const doubleArrowIcon = <DoubleArrowIcon style={{ transform: "rotate(-90deg)" }} />;
|
||||
const accountTreeIcon = <AccountTreeIcon />;
|
||||
const peopleAltIcon = <PeopleAltIcon />;
|
||||
const locationCityIcon = <LocationCityIcon />;
|
||||
const airplanemodeActiveIcon = <AirplanemodeActiveIcon />;
|
||||
const workIcon = <WorkIcon />;
|
||||
const trendingUpIcon = <TrendingUpIcon />;
|
||||
const formatBoldIcon = <FormatBoldIcon />;
|
||||
const businessIcon = <BusinessIcon />;
|
||||
const sportsMmaIcon = <SportsMmaIcon />;
|
||||
const checkIcon = <CheckIcon />;
|
||||
const helpIcon = <HelpIcon />;
|
||||
const settingsIcon = <SettingsIcon />;
|
||||
const developerBoardIcon = <DeveloperBoardIcon />;
|
||||
const emojiEventsIcon = <EmojiEventsIcon />;
|
||||
const accountBoxIcon = <AccountBoxIcon />;
|
||||
const publicIcon = <PublicIcon />;
|
||||
const liveHelpIcon = <LiveHelpIcon />;
|
||||
const chevronLeftIcon = <ChevronLeftIcon color="primary" />;
|
||||
const chevronRightIcon = <ChevronRightIcon color="primary" />;
|
||||
|
||||
// Use constant Dividers just for performance
|
||||
const divider = <Divider />;
|
||||
|
||||
const openedMixin = (theme: Theme): CSSObject => ({
|
||||
width: theme.spacing(31),
|
||||
transition: theme.transitions.create("width", {
|
||||
@@ -118,11 +147,6 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
return () => clearInterval(id);
|
||||
}, []);
|
||||
|
||||
const [hackingOpen, setHackingOpen] = useState(true);
|
||||
const [characterOpen, setCharacterOpen] = useState(true);
|
||||
const [worldOpen, setWorldOpen] = useState(true);
|
||||
const [helpOpen, setHelpOpen] = useState(true);
|
||||
|
||||
let flash: Page | null = null;
|
||||
switch (ITutorial.currStep) {
|
||||
case iTutorialSteps.CharacterGoToTerminalPage:
|
||||
@@ -270,543 +294,112 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
||||
Settings.IsSidebarOpened = !old;
|
||||
return !old;
|
||||
});
|
||||
const li_classes = useMemo(() => ({ root: classes.listitem }), [classes.listitem]);
|
||||
|
||||
// Explicitily useMemo() to save rerendering deep chunks of this tree.
|
||||
// memo() can't be (easily) used on components like <List>, because the
|
||||
// props.children array will be a different object every time.
|
||||
return (
|
||||
<Drawer open={open} anchor="left" variant="permanent">
|
||||
<ListItem classes={{ root: classes.listitem }} button onClick={toggleDrawer}>
|
||||
<ListItemIcon>
|
||||
{!open ? <ChevronRightIcon color="primary" /> : <ChevronLeftIcon color="primary" />}
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={
|
||||
<Tooltip title={hash()}>
|
||||
<Typography>Bitburner v{CONSTANTS.VersionString}</Typography>
|
||||
</Tooltip>
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
<Divider />
|
||||
{useMemo(
|
||||
() => (
|
||||
<ListItem classes={li_classes} button onClick={toggleDrawer}>
|
||||
<ListItemIcon>{!open ? chevronRightIcon : chevronLeftIcon}</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={
|
||||
<Tooltip title={hash()}>
|
||||
<Typography>Bitburner v{CONSTANTS.VersionString}</Typography>
|
||||
</Tooltip>
|
||||
}
|
||||
/>
|
||||
</ListItem>
|
||||
),
|
||||
[li_classes, open],
|
||||
)}
|
||||
{divider}
|
||||
<List>
|
||||
<ListItem classes={{ root: classes.listitem }} button onClick={() => setHackingOpen((old) => !old)}>
|
||||
<ListItemIcon>
|
||||
<Tooltip title={!open ? "Hacking" : ""}>
|
||||
<ComputerIcon color="primary" />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={<Typography>Hacking</Typography>} />
|
||||
{hackingOpen ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />}
|
||||
</ListItem>
|
||||
<Collapse in={hackingOpen} timeout="auto" unmountOnExit>
|
||||
<List>
|
||||
<ListItem
|
||||
classes={{ root: classes.listitem }}
|
||||
button
|
||||
key={"Terminal"}
|
||||
className={clsx({
|
||||
[classes.active]: props.page === Page.Terminal,
|
||||
})}
|
||||
onClick={() => clickPage(Page.Terminal)}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Tooltip title={!open ? "Terminal" : ""}>
|
||||
<LastPageIcon
|
||||
color={flash === Page.Terminal ? "error" : props.page !== Page.Terminal ? "secondary" : "primary"}
|
||||
/>
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography
|
||||
color={flash === Page.Terminal ? "error" : props.page !== Page.Terminal ? "secondary" : "primary"}
|
||||
>
|
||||
Terminal
|
||||
</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
classes={{ root: classes.listitem }}
|
||||
button
|
||||
key={"Script Editor"}
|
||||
className={clsx({
|
||||
[classes.active]: props.page === Page.ScriptEditor,
|
||||
})}
|
||||
onClick={() => clickPage(Page.ScriptEditor)}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Tooltip title={!open ? "Script Editor" : ""}>
|
||||
<CreateIcon color={props.page !== Page.ScriptEditor ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={props.page !== Page.ScriptEditor ? "secondary" : "primary"}>
|
||||
Script Editor
|
||||
</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
classes={{ root: classes.listitem }}
|
||||
button
|
||||
key={"Active Scripts"}
|
||||
className={clsx({
|
||||
[classes.active]: props.page === Page.ActiveScripts,
|
||||
})}
|
||||
onClick={() => clickPage(Page.ActiveScripts)}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Tooltip title={!open ? "Active Scripts" : ""}>
|
||||
<StorageIcon
|
||||
color={
|
||||
flash === Page.ActiveScripts
|
||||
? "error"
|
||||
: props.page !== Page.ActiveScripts
|
||||
? "secondary"
|
||||
: "primary"
|
||||
}
|
||||
/>
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography
|
||||
color={
|
||||
flash === Page.ActiveScripts ? "error" : props.page !== Page.ActiveScripts ? "secondary" : "primary"
|
||||
}
|
||||
>
|
||||
Active Scripts
|
||||
</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
button
|
||||
key={"Create Program"}
|
||||
className={clsx({
|
||||
[classes.active]: props.page === Page.CreateProgram,
|
||||
})}
|
||||
onClick={() => clickPage(Page.CreateProgram)}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Badge badgeContent={programCount > 0 ? programCount : undefined} color="error">
|
||||
<Tooltip title={!open ? "Create Program" : ""}>
|
||||
<BugReportIcon color={props.page !== Page.CreateProgram ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</Badge>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={props.page !== Page.CreateProgram ? "secondary" : "primary"}>
|
||||
Create Program
|
||||
</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
{canStaneksGift && (
|
||||
<ListItem
|
||||
button
|
||||
key={"Staneks Gift"}
|
||||
className={clsx({
|
||||
[classes.active]: props.page === Page.StaneksGift,
|
||||
})}
|
||||
onClick={() => clickPage(Page.StaneksGift)}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Tooltip title={!open ? "Stanek's Gift" : ""}>
|
||||
<DeveloperBoardIcon color={props.page !== Page.StaneksGift ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={props.page !== Page.StaneksGift ? "secondary" : "primary"}>
|
||||
Stanek's Gift
|
||||
</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
)}
|
||||
</List>
|
||||
</Collapse>
|
||||
|
||||
<Divider />
|
||||
<ListItem classes={{ root: classes.listitem }} button onClick={() => setCharacterOpen((old) => !old)}>
|
||||
<ListItemIcon>
|
||||
<Tooltip title={!open ? "Character" : ""}>
|
||||
<AccountBoxIcon color="primary" />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={<Typography>Character</Typography>} />
|
||||
{characterOpen ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />}
|
||||
</ListItem>
|
||||
<Collapse in={characterOpen} timeout="auto" unmountOnExit>
|
||||
<ListItem
|
||||
button
|
||||
key={"Stats"}
|
||||
className={clsx({
|
||||
[classes.active]: props.page === Page.Stats,
|
||||
})}
|
||||
onClick={() => clickPage(Page.Stats)}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Tooltip title={!open ? "Stats" : ""}>
|
||||
<EqualizerIcon
|
||||
color={flash === Page.Stats ? "error" : props.page !== Page.Stats ? "secondary" : "primary"}
|
||||
/>
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={flash === Page.Stats ? "error" : props.page !== Page.Stats ? "secondary" : "primary"}>
|
||||
Stats
|
||||
</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
{canOpenFactions && (
|
||||
<ListItem
|
||||
classes={{ root: classes.listitem }}
|
||||
button
|
||||
key={"Factions"}
|
||||
className={clsx({
|
||||
[classes.active]: [Page.Factions, Page.Faction].includes(props.page),
|
||||
})}
|
||||
onClick={() => clickPage(Page.Factions)}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Badge badgeContent={invitationsCount !== 0 ? invitationsCount : undefined} color="error">
|
||||
<Tooltip title={!open ? "Factions" : ""}>
|
||||
<ContactsIcon
|
||||
color={![Page.Factions, Page.Faction].includes(props.page) ? "secondary" : "primary"}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Badge>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={![Page.Factions, Page.Faction].includes(props.page) ? "secondary" : "primary"}>
|
||||
Factions
|
||||
</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
)}
|
||||
{canOpenAugmentations && (
|
||||
<ListItem
|
||||
classes={{ root: classes.listitem }}
|
||||
button
|
||||
key={"Augmentations"}
|
||||
className={clsx({
|
||||
[classes.active]: props.page === Page.Augmentations,
|
||||
})}
|
||||
onClick={() => clickPage(Page.Augmentations)}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Badge badgeContent={augmentationCount !== 0 ? augmentationCount : undefined} color="error">
|
||||
<Tooltip title={!open ? "Augmentations" : ""}>
|
||||
<DoubleArrowIcon
|
||||
style={{ transform: "rotate(-90deg)" }}
|
||||
color={props.page !== Page.Augmentations ? "secondary" : "primary"}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Badge>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={props.page !== Page.Augmentations ? "secondary" : "primary"}>
|
||||
Augmentations
|
||||
</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
)}
|
||||
<ListItem
|
||||
button
|
||||
key={"Hacknet"}
|
||||
className={clsx({
|
||||
[classes.active]: props.page === Page.Hacknet,
|
||||
})}
|
||||
onClick={() => clickPage(Page.Hacknet)}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Tooltip title={!open ? "Hacknet" : ""}>
|
||||
<AccountTreeIcon
|
||||
color={flash === Page.Hacknet ? "error" : props.page !== Page.Hacknet ? "secondary" : "primary"}
|
||||
/>
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography
|
||||
color={flash === Page.Hacknet ? "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={() => clickPage(Page.Sleeves)}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Tooltip title={!open ? "Sleeves" : ""}>
|
||||
<PeopleAltIcon color={props.page !== Page.Sleeves ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={props.page !== Page.Sleeves ? "secondary" : "primary"}>Sleeves</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
)}
|
||||
</Collapse>
|
||||
|
||||
<Divider />
|
||||
<ListItem classes={{ root: classes.listitem }} button onClick={() => setWorldOpen((old) => !old)}>
|
||||
<ListItemIcon>
|
||||
<Tooltip title={!open ? "World" : ""}>
|
||||
<PublicIcon color="primary" />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={<Typography>World</Typography>} />
|
||||
{worldOpen ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />}
|
||||
</ListItem>
|
||||
<Collapse in={worldOpen} timeout="auto" unmountOnExit>
|
||||
<ListItem
|
||||
button
|
||||
key={"City"}
|
||||
className={clsx({
|
||||
[classes.active]:
|
||||
props.page === Page.City || props.page === Page.Grafting || props.page === Page.Location,
|
||||
})}
|
||||
onClick={() => clickPage(Page.City)}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Tooltip title={!open ? "City" : ""}>
|
||||
<LocationCityIcon
|
||||
color={flash === Page.City ? "error" : props.page !== Page.City ? "secondary" : "primary"}
|
||||
/>
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={flash === Page.City ? "error" : props.page !== Page.City ? "secondary" : "primary"}>
|
||||
City
|
||||
</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
button
|
||||
key={"Travel"}
|
||||
className={clsx({
|
||||
[classes.active]: props.page === Page.Travel,
|
||||
})}
|
||||
onClick={() => clickPage(Page.Travel)}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Tooltip title={!open ? "Travel" : ""}>
|
||||
<AirplanemodeActiveIcon color={props.page !== Page.Travel ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={props.page !== Page.Travel ? "secondary" : "primary"}>Travel</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
{canJob && (
|
||||
<ListItem
|
||||
classes={{ root: classes.listitem }}
|
||||
button
|
||||
key={"Job"}
|
||||
className={clsx({
|
||||
[classes.active]: props.page === Page.Job,
|
||||
})}
|
||||
onClick={() => clickPage(Page.Job)}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Tooltip title={!open ? "Job" : ""}>
|
||||
<WorkIcon color={props.page !== Page.Job ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={props.page !== Page.Job ? "secondary" : "primary"}>Job</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
)}
|
||||
{canStockMarket && (
|
||||
<ListItem
|
||||
classes={{ root: classes.listitem }}
|
||||
button
|
||||
key={"Stock Market"}
|
||||
className={clsx({
|
||||
[classes.active]: props.page === Page.StockMarket,
|
||||
})}
|
||||
onClick={() => clickPage(Page.StockMarket)}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Tooltip title={!open ? "Stock Market" : ""}>
|
||||
<TrendingUpIcon color={props.page !== Page.StockMarket ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={props.page !== Page.StockMarket ? "secondary" : "primary"}>Stock Market</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
)}
|
||||
{canBladeburner && (
|
||||
<ListItem
|
||||
classes={{ root: classes.listitem }}
|
||||
button
|
||||
key={"Bladeburner"}
|
||||
className={clsx({
|
||||
[classes.active]: props.page === Page.Bladeburner,
|
||||
})}
|
||||
onClick={() => clickPage(Page.Bladeburner)}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Tooltip title={!open ? "Bladeburner" : ""}>
|
||||
<FormatBoldIcon color={props.page !== Page.Bladeburner ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={props.page !== Page.Bladeburner ? "secondary" : "primary"}>Bladeburner</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
)}
|
||||
{canCorporation && (
|
||||
<ListItem
|
||||
classes={{ root: classes.listitem }}
|
||||
button
|
||||
key={"Corp"}
|
||||
className={clsx({
|
||||
[classes.active]: props.page === Page.Corporation,
|
||||
})}
|
||||
onClick={() => clickPage(Page.Corporation)}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Tooltip title={!open ? "Corp" : ""}>
|
||||
<BusinessIcon color={props.page !== Page.Corporation ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</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={() => clickPage(Page.Gang)}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Tooltip title={!open ? "Gang" : ""}>
|
||||
<SportsMmaIcon color={props.page !== Page.Gang ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</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>
|
||||
<Tooltip title={!open ? "Help" : ""}>
|
||||
<LiveHelpIcon color="primary" />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={<Typography>Help</Typography>} />
|
||||
{helpOpen ? <ExpandLessIcon color="primary" /> : <ExpandMoreIcon color="primary" />}
|
||||
</ListItem>
|
||||
<Collapse in={helpOpen} timeout="auto" unmountOnExit>
|
||||
<ListItem
|
||||
button
|
||||
key={"Milestones"}
|
||||
className={clsx({
|
||||
[classes.active]: props.page === Page.Milestones,
|
||||
})}
|
||||
onClick={() => clickPage(Page.Milestones)}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Tooltip title={!open ? "Milestones" : ""}>
|
||||
<CheckIcon color={props.page !== Page.Milestones ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</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={() => clickPage(Page.Tutorial)}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Tooltip title={!open ? "Tutorial" : ""}>
|
||||
<HelpIcon
|
||||
color={flash === Page.Tutorial ? "error" : props.page !== Page.Tutorial ? "secondary" : "primary"}
|
||||
/>
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography
|
||||
color={flash === Page.Tutorial ? "error" : props.page !== Page.Tutorial ? "secondary" : "primary"}
|
||||
>
|
||||
Tutorial
|
||||
</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
button
|
||||
key={"Achievements"}
|
||||
className={clsx({
|
||||
[classes.active]: props.page === Page.Achievements,
|
||||
})}
|
||||
onClick={() => clickPage(Page.Achievements)}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Tooltip title={!open ? "Achievements" : ""}>
|
||||
<EmojiEventsIcon color={props.page !== Page.Achievements ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={props.page !== Page.Achievements ? "secondary" : "primary"}>Achievements</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
button
|
||||
key={"Options"}
|
||||
className={clsx({
|
||||
[classes.active]: props.page === Page.Options,
|
||||
})}
|
||||
onClick={() => clickPage(Page.Options)}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Tooltip title={!open ? "Options" : ""}>
|
||||
<SettingsIcon color={props.page !== Page.Options ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={props.page !== Page.Options ? "secondary" : "primary"}>Options</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
{process.env.NODE_ENV === "development" && (
|
||||
<ListItem
|
||||
classes={{ root: classes.listitem }}
|
||||
button
|
||||
key={"Dev"}
|
||||
className={clsx({
|
||||
[classes.active]: props.page === Page.DevMenu,
|
||||
})}
|
||||
onClick={() => clickPage(Page.DevMenu)}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<Tooltip title={!open ? "Dev" : ""}>
|
||||
<DeveloperBoardIcon color={props.page !== Page.DevMenu ? "secondary" : "primary"} />
|
||||
</Tooltip>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={props.page !== Page.DevMenu ? "secondary" : "primary"}>Dev</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
)}
|
||||
</Collapse>
|
||||
<SidebarAccordion
|
||||
key_="Hacking"
|
||||
page={props.page}
|
||||
clickPage={clickPage}
|
||||
flash={flash}
|
||||
icon={computerIcon}
|
||||
sidebarOpen={open}
|
||||
classes={classes}
|
||||
items={[
|
||||
{ key_: Page.Terminal, icon: lastPageIcon },
|
||||
{ key_: Page.ScriptEditor, icon: createIcon },
|
||||
{ key_: Page.ActiveScripts, icon: storageIcon },
|
||||
{ key_: Page.CreateProgram, icon: bugReportIcon, count: programCount },
|
||||
canStaneksGift && { key_: Page.StaneksGift, icon: developerBoardIcon },
|
||||
]}
|
||||
/>
|
||||
{divider}
|
||||
<SidebarAccordion
|
||||
key_="Character"
|
||||
page={props.page}
|
||||
clickPage={clickPage}
|
||||
flash={flash}
|
||||
icon={accountBoxIcon}
|
||||
sidebarOpen={open}
|
||||
classes={classes}
|
||||
items={[
|
||||
{ key_: Page.Stats, icon: equalizerIcon },
|
||||
canOpenFactions && {
|
||||
key_: Page.Factions,
|
||||
icon: contactsIcon,
|
||||
active: [Page.Factions as Page, Page.Faction].includes(props.page),
|
||||
count: invitationsCount,
|
||||
},
|
||||
canOpenAugmentations && {
|
||||
key_: Page.Augmentations,
|
||||
icon: doubleArrowIcon,
|
||||
count: augmentationCount,
|
||||
},
|
||||
{ key_: Page.Hacknet, icon: accountTreeIcon },
|
||||
canOpenSleeves && { key_: Page.Sleeves, icon: peopleAltIcon },
|
||||
]}
|
||||
/>
|
||||
{divider}
|
||||
<SidebarAccordion
|
||||
key_="World"
|
||||
page={props.page}
|
||||
clickPage={clickPage}
|
||||
flash={flash}
|
||||
icon={publicIcon}
|
||||
sidebarOpen={open}
|
||||
classes={classes}
|
||||
items={[
|
||||
{
|
||||
key_: Page.City,
|
||||
icon: locationCityIcon,
|
||||
active: [Page.City as Page, Page.Grafting, Page.Location].includes(props.page),
|
||||
},
|
||||
{ key_: Page.Travel, icon: airplanemodeActiveIcon },
|
||||
canJob && { key_: Page.Job, icon: workIcon },
|
||||
canStockMarket && { key_: Page.StockMarket, icon: trendingUpIcon },
|
||||
canBladeburner && { key_: Page.Bladeburner, icon: formatBoldIcon },
|
||||
canCorporation && { key_: Page.Corporation, icon: businessIcon },
|
||||
canGang && { key_: Page.Gang, icon: sportsMmaIcon },
|
||||
]}
|
||||
/>
|
||||
{divider}
|
||||
<SidebarAccordion
|
||||
key_="Help"
|
||||
page={props.page}
|
||||
clickPage={clickPage}
|
||||
flash={flash}
|
||||
icon={liveHelpIcon}
|
||||
sidebarOpen={open}
|
||||
classes={classes}
|
||||
items={[
|
||||
{ key_: Page.Milestones, icon: checkIcon },
|
||||
{ key_: Page.Tutorial, icon: helpIcon },
|
||||
{ key_: Page.Achievements, icon: emojiEventsIcon },
|
||||
{ key_: Page.Options, icon: settingsIcon },
|
||||
process.env.NODE_ENV === "development" && { key_: Page.DevMenu, icon: developerBoardIcon },
|
||||
]}
|
||||
/>
|
||||
</List>
|
||||
</Drawer>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user