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-17 01:42:55 +02:00
|
|
|
import { styled, useTheme, 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 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 { TTheme as BBTheme, colors } from "../../ui/React/Theme";
|
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-11 07:54:19 +02:00
|
|
|
import { IEngine } from "../../IEngine";
|
|
|
|
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";
|
|
|
|
|
|
|
|
import { inMission } from "../../Missions";
|
|
|
|
import { cinematicTextFlag } from "../../CinematicText";
|
|
|
|
import { KEY } from "../../../utils/helpers/keyCodes";
|
|
|
|
import { FconfSettings } from "../../Fconf/FconfSettings";
|
|
|
|
import { Page, routing } from "../../ui/navigationTracking";
|
2021-09-11 07:54:19 +02:00
|
|
|
|
2021-09-17 01:42:55 +02:00
|
|
|
const drawerWidth = 240;
|
|
|
|
|
|
|
|
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
|
|
|
flexShrink: 0,
|
|
|
|
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: {
|
|
|
|
borderLeft: "3px solid " + colors.primary,
|
|
|
|
},
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
|
2021-09-11 07:54:19 +02:00
|
|
|
interface IProps {
|
|
|
|
player: IPlayer;
|
|
|
|
engine: IEngine;
|
|
|
|
}
|
|
|
|
|
|
|
|
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);
|
|
|
|
}, []);
|
|
|
|
|
2021-09-14 21:23:16 +02:00
|
|
|
const [activeTab, setActiveTab] = useState("Terminal");
|
2021-09-11 07:54:19 +02:00
|
|
|
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;
|
|
|
|
const invitationsCount = props.player.factionInvitations.length;
|
2021-09-11 07:54:19 +02:00
|
|
|
const programCount = getAvailableCreatePrograms(props.player).length;
|
|
|
|
const canCreateProgram =
|
|
|
|
programCount > 0 ||
|
|
|
|
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
|
|
|
// TODO(hydroflame): these should not as any but right now the def is that it
|
|
|
|
// can only be defined;
|
|
|
|
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-09-11 07:54:19 +02:00
|
|
|
|
2021-09-13 00:03:07 +02:00
|
|
|
function clickTerminal(): void {
|
|
|
|
setActiveTab("Terminal");
|
|
|
|
props.engine.loadTerminalContent();
|
|
|
|
if (flashTerminal) iTutorialNextStep();
|
|
|
|
}
|
|
|
|
|
|
|
|
function clickCreateScripts(): void {
|
|
|
|
setActiveTab("CreateScripts");
|
|
|
|
props.engine.loadScriptEditorContent();
|
|
|
|
}
|
|
|
|
|
|
|
|
function clickStats(): void {
|
|
|
|
setActiveTab("Stats");
|
|
|
|
props.engine.loadCharacterContent();
|
|
|
|
if (flashStats) iTutorialNextStep();
|
|
|
|
}
|
|
|
|
|
|
|
|
function clickActiveScripts(): void {
|
|
|
|
setActiveTab("ActiveScripts");
|
|
|
|
props.engine.loadActiveScriptsContent();
|
|
|
|
if (flashActiveScripts) iTutorialNextStep();
|
|
|
|
}
|
|
|
|
|
|
|
|
function clickCreateProgram(): void {
|
|
|
|
setActiveTab("CreateProgram");
|
|
|
|
props.engine.loadCreateProgramContent();
|
|
|
|
}
|
|
|
|
|
|
|
|
function clickFactions(): void {
|
|
|
|
setActiveTab("Factions");
|
|
|
|
props.engine.loadFactionsContent();
|
|
|
|
}
|
|
|
|
|
|
|
|
function clickAugmentations(): void {
|
|
|
|
setActiveTab("Augmentations");
|
|
|
|
props.engine.loadAugmentationsContent();
|
|
|
|
}
|
|
|
|
|
|
|
|
function clickSleeves(): void {
|
|
|
|
setActiveTab("Sleeves");
|
|
|
|
props.engine.loadSleevesContent();
|
|
|
|
}
|
|
|
|
|
|
|
|
function clickHacknet(): void {
|
|
|
|
setActiveTab("Hacknet");
|
|
|
|
props.engine.loadHacknetNodesContent();
|
|
|
|
if (flashHacknet) iTutorialNextStep();
|
|
|
|
}
|
|
|
|
|
|
|
|
function clickCity(): void {
|
|
|
|
setActiveTab("City");
|
|
|
|
props.engine.loadLocationContent();
|
|
|
|
if (flashCity) iTutorialNextStep();
|
|
|
|
}
|
|
|
|
|
|
|
|
function clickTravel(): void {
|
|
|
|
setActiveTab("Travel");
|
|
|
|
props.engine.loadTravelContent();
|
|
|
|
}
|
|
|
|
|
|
|
|
function clickJob(): void {
|
|
|
|
setActiveTab("Job");
|
|
|
|
props.engine.loadJobContent();
|
|
|
|
}
|
|
|
|
|
|
|
|
function clickStockMarket(): void {
|
|
|
|
setActiveTab("StockMarket");
|
|
|
|
props.engine.loadStockMarketContent();
|
|
|
|
}
|
|
|
|
|
|
|
|
function clickBladeburner(): void {
|
|
|
|
setActiveTab("Bladeburner");
|
|
|
|
props.engine.loadBladeburnerContent();
|
|
|
|
}
|
|
|
|
|
|
|
|
function clickCorp(): void {
|
|
|
|
setActiveTab("Corp");
|
|
|
|
props.engine.loadCorporationContent();
|
|
|
|
}
|
|
|
|
|
|
|
|
function clickGang(): void {
|
|
|
|
setActiveTab("Gang");
|
|
|
|
props.engine.loadGangContent();
|
|
|
|
}
|
|
|
|
|
|
|
|
function clickTutorial(): void {
|
|
|
|
setActiveTab("Tutorial");
|
|
|
|
props.engine.loadTutorialContent();
|
|
|
|
if (flashTutorial) iTutorialNextStep();
|
|
|
|
}
|
|
|
|
|
|
|
|
function clickMilestones(): void {
|
|
|
|
setActiveTab("Milestones");
|
|
|
|
props.engine.loadMilestonesContent();
|
|
|
|
}
|
2021-09-15 03:05:49 +02:00
|
|
|
function clickOptions(): void {
|
|
|
|
setActiveTab("Options");
|
|
|
|
props.engine.loadGameOptionsContent();
|
|
|
|
}
|
2021-09-13 00:03:07 +02:00
|
|
|
|
|
|
|
function clickDev(): void {
|
|
|
|
setActiveTab("Dev");
|
|
|
|
props.engine.loadDevMenuContent();
|
|
|
|
}
|
|
|
|
|
|
|
|
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 || redPillFlag || inMission || cinematicTextFlag) return;
|
|
|
|
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();
|
|
|
|
clickCreateScripts();
|
|
|
|
} 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.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) {
|
|
|
|
// Overriden by Fconf
|
|
|
|
if (routing.isOn(Page.Terminal) && FconfSettings.ENABLE_BASH_HOTKEYS) {
|
|
|
|
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();
|
|
|
|
// }
|
|
|
|
}
|
|
|
|
|
|
|
|
document.addEventListener("keypress", handleShortcuts);
|
|
|
|
return () => document.removeEventListener("keypress", handleShortcuts);
|
|
|
|
}, []);
|
|
|
|
|
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-14 21:23:16 +02:00
|
|
|
<BBTheme>
|
2021-09-17 01:42:55 +02:00
|
|
|
<Drawer open={open} anchor="left" variant="permanent">
|
2021-09-14 21:23:16 +02:00
|
|
|
<ListItem button onClick={toggleDrawer}>
|
2021-09-17 02:51:25 +02:00
|
|
|
<ListItemIcon>
|
|
|
|
{!open ? <ChevronRightIcon color={"primary"} /> : <ChevronLeftIcon color={"primary"} />}
|
|
|
|
</ListItemIcon>
|
2021-09-15 03:05:49 +02:00
|
|
|
<ListItemText primary={<Typography color="primary">Bitburner v{CONSTANTS.Version}</Typography>} />
|
2021-09-14 21:23:16 +02:00
|
|
|
</ListItem>
|
|
|
|
<Divider />
|
|
|
|
<List>
|
|
|
|
<ListItem button onClick={() => setHackingOpen((old) => !old)}>
|
|
|
|
<ListItemIcon>
|
2021-09-17 02:51:25 +02:00
|
|
|
<ComputerIcon color={"primary"} />
|
2021-09-14 21:23:16 +02:00
|
|
|
</ListItemIcon>
|
|
|
|
<ListItemText primary={<Typography color="primary">Hacking</Typography>} />
|
2021-09-17 02:51:25 +02:00
|
|
|
{hackingOpen ? <ExpandLessIcon color={"primary"} /> : <ExpandMoreIcon color={"primary"} />}
|
2021-09-14 21:23:16 +02:00
|
|
|
</ListItem>
|
|
|
|
<Collapse in={hackingOpen} timeout="auto" unmountOnExit>
|
|
|
|
<List>
|
|
|
|
<ListItem
|
|
|
|
button
|
|
|
|
key={"Terminal"}
|
|
|
|
className={clsx({
|
|
|
|
[classes.active]: activeTab === "Terminal",
|
|
|
|
})}
|
|
|
|
onClick={clickTerminal}
|
|
|
|
>
|
|
|
|
<ListItemIcon>
|
|
|
|
<LastPageIcon color={flashTerminal ? "error" : activeTab !== "Terminal" ? "secondary" : "primary"} />
|
|
|
|
</ListItemIcon>
|
|
|
|
<ListItemText>
|
|
|
|
<Typography color={flashTerminal ? "error" : activeTab !== "Terminal" ? "secondary" : "primary"}>
|
|
|
|
Terminal
|
|
|
|
</Typography>
|
|
|
|
</ListItemText>
|
|
|
|
</ListItem>
|
|
|
|
<ListItem
|
|
|
|
button
|
|
|
|
key={"Create Scripts"}
|
|
|
|
className={clsx({
|
|
|
|
[classes.active]: activeTab === "CreateScripts",
|
|
|
|
})}
|
|
|
|
onClick={clickCreateScripts}
|
2021-09-13 00:03:07 +02:00
|
|
|
>
|
2021-09-14 21:23:16 +02:00
|
|
|
<ListItemIcon>
|
|
|
|
<CreateIcon color={activeTab !== "CreateScripts" ? "secondary" : "primary"} />
|
|
|
|
</ListItemIcon>
|
|
|
|
<ListItemText>
|
|
|
|
<Typography color={activeTab !== "CreateScripts" ? "secondary" : "primary"}>Create Script</Typography>
|
|
|
|
</ListItemText>
|
|
|
|
</ListItem>
|
|
|
|
<ListItem
|
|
|
|
button
|
|
|
|
key={"Active Scripts"}
|
|
|
|
className={clsx({
|
|
|
|
[classes.active]: activeTab === "ActiveScripts",
|
|
|
|
})}
|
|
|
|
onClick={clickActiveScripts}
|
|
|
|
>
|
|
|
|
<ListItemIcon>
|
|
|
|
<StorageIcon
|
|
|
|
color={flashActiveScripts ? "error" : activeTab !== "ActiveScripts" ? "secondary" : "primary"}
|
|
|
|
/>
|
|
|
|
</ListItemIcon>
|
|
|
|
<ListItemText>
|
|
|
|
<Typography
|
|
|
|
color={flashActiveScripts ? "error" : activeTab !== "ActiveScripts" ? "secondary" : "primary"}
|
|
|
|
>
|
|
|
|
Active Scripts
|
|
|
|
</Typography>
|
|
|
|
</ListItemText>
|
|
|
|
</ListItem>
|
|
|
|
{canCreateProgram && (
|
|
|
|
<ListItem
|
|
|
|
button
|
|
|
|
key={"Create Program"}
|
|
|
|
className={clsx({
|
|
|
|
[classes.active]: activeTab === "CreateProgram",
|
|
|
|
})}
|
|
|
|
onClick={clickCreateProgram}
|
|
|
|
>
|
|
|
|
<ListItemIcon>
|
2021-09-17 03:49:38 +02:00
|
|
|
<Badge badgeContent={programCount > 0 ? programCount : undefined} color="error">
|
2021-09-17 03:31:29 +02:00
|
|
|
<BugReportIcon color={activeTab !== "CreateProgram" ? "secondary" : "primary"} />
|
|
|
|
</Badge>
|
2021-09-14 21:23:16 +02:00
|
|
|
</ListItemIcon>
|
|
|
|
<ListItemText>
|
|
|
|
<Typography color={activeTab !== "CreateProgram" ? "secondary" : "primary"}>
|
|
|
|
Create Program
|
|
|
|
</Typography>
|
|
|
|
</ListItemText>
|
|
|
|
</ListItem>
|
|
|
|
)}
|
|
|
|
</List>
|
|
|
|
</Collapse>
|
|
|
|
|
|
|
|
<Divider />
|
|
|
|
<ListItem button onClick={() => setCharacterOpen((old) => !old)}>
|
|
|
|
<ListItemIcon>
|
2021-09-17 02:51:25 +02:00
|
|
|
<AccountBoxIcon color={"primary"} />
|
2021-09-14 21:23:16 +02:00
|
|
|
</ListItemIcon>
|
|
|
|
<ListItemText primary={<Typography color="primary">Character</Typography>} />
|
2021-09-17 02:51:25 +02:00
|
|
|
{characterOpen ? <ExpandLessIcon color={"primary"} /> : <ExpandMoreIcon color={"primary"} />}
|
2021-09-14 21:23:16 +02:00
|
|
|
</ListItem>
|
|
|
|
<Collapse in={characterOpen} timeout="auto" unmountOnExit>
|
|
|
|
<ListItem
|
|
|
|
button
|
|
|
|
key={"Stats"}
|
|
|
|
className={clsx({
|
|
|
|
[classes.active]: activeTab === "Stats",
|
|
|
|
})}
|
2021-09-13 00:03:07 +02:00
|
|
|
onClick={clickStats}
|
|
|
|
>
|
2021-09-14 21:23:16 +02:00
|
|
|
<ListItemIcon>
|
|
|
|
<EqualizerIcon color={flashStats ? "error" : activeTab !== "Stats" ? "secondary" : "primary"} />
|
|
|
|
</ListItemIcon>
|
|
|
|
<ListItemText>
|
|
|
|
<Typography color={flashStats ? "error" : activeTab !== "Stats" ? "secondary" : "primary"}>
|
|
|
|
Stats
|
|
|
|
</Typography>
|
|
|
|
</ListItemText>
|
|
|
|
</ListItem>
|
|
|
|
{canOpenFactions && (
|
|
|
|
<ListItem
|
|
|
|
button
|
|
|
|
key={"Factions"}
|
|
|
|
className={clsx({
|
|
|
|
[classes.active]: activeTab === "Factions",
|
|
|
|
})}
|
|
|
|
onClick={clickFactions}
|
|
|
|
>
|
|
|
|
<ListItemIcon>
|
2021-09-17 03:49:38 +02:00
|
|
|
<Badge badgeContent={invitationsCount !== 0 ? invitationsCount : undefined} color="error">
|
|
|
|
<ContactsIcon color={activeTab !== "Factions" ? "secondary" : "primary"} />
|
|
|
|
</Badge>
|
2021-09-14 21:23:16 +02:00
|
|
|
</ListItemIcon>
|
|
|
|
<ListItemText>
|
|
|
|
<Typography color={activeTab !== "Factions" ? "secondary" : "primary"}>Factions</Typography>
|
|
|
|
</ListItemText>
|
|
|
|
</ListItem>
|
|
|
|
)}
|
|
|
|
{canOpenAugmentations && (
|
|
|
|
<ListItem
|
|
|
|
button
|
|
|
|
key={"Augmentations"}
|
|
|
|
className={clsx({
|
|
|
|
[classes.active]: activeTab === "Augmentations",
|
|
|
|
})}
|
2021-09-13 00:03:07 +02:00
|
|
|
onClick={clickAugmentations}
|
|
|
|
>
|
2021-09-14 21:23:16 +02:00
|
|
|
<ListItemIcon>
|
2021-09-17 03:49:38 +02:00
|
|
|
<Badge badgeContent={augmentationCount !== 0 ? augmentationCount : undefined} color="error">
|
|
|
|
<DoubleArrowIcon
|
|
|
|
style={{ transform: "rotate(-90deg)" }}
|
|
|
|
color={activeTab !== "Augmentations" ? "secondary" : "primary"}
|
|
|
|
/>
|
|
|
|
</Badge>
|
2021-09-14 21:23:16 +02:00
|
|
|
</ListItemIcon>
|
|
|
|
<ListItemText>
|
|
|
|
<Typography color={activeTab !== "Augmentations" ? "secondary" : "primary"}>Augmentations</Typography>
|
|
|
|
</ListItemText>
|
|
|
|
</ListItem>
|
|
|
|
)}
|
|
|
|
<ListItem
|
|
|
|
button
|
|
|
|
key={"Hacknet"}
|
|
|
|
className={clsx({
|
|
|
|
[classes.active]: activeTab === "Hacknet",
|
|
|
|
})}
|
2021-09-13 00:03:07 +02:00
|
|
|
onClick={clickHacknet}
|
|
|
|
>
|
2021-09-14 21:23:16 +02:00
|
|
|
<ListItemIcon>
|
|
|
|
<AccountTreeIcon color={flashHacknet ? "error" : activeTab !== "Hacknet" ? "secondary" : "primary"} />
|
|
|
|
</ListItemIcon>
|
|
|
|
<ListItemText>
|
|
|
|
<Typography color={flashHacknet ? "error" : activeTab !== "Hacknet" ? "secondary" : "primary"}>
|
|
|
|
Hacknet
|
|
|
|
</Typography>
|
|
|
|
</ListItemText>
|
|
|
|
</ListItem>
|
|
|
|
{canOpenSleeves && (
|
|
|
|
<ListItem
|
|
|
|
button
|
|
|
|
key={"Sleeves"}
|
|
|
|
className={clsx({
|
|
|
|
[classes.active]: activeTab === "Sleeves",
|
|
|
|
})}
|
|
|
|
onClick={clickSleeves}
|
|
|
|
>
|
|
|
|
<ListItemIcon>
|
|
|
|
<PeopleAltIcon color={activeTab !== "Sleeves" ? "secondary" : "primary"} />
|
|
|
|
</ListItemIcon>
|
|
|
|
<ListItemText>
|
|
|
|
<Typography color={activeTab !== "Sleeves" ? "secondary" : "primary"}>Sleeves</Typography>
|
|
|
|
</ListItemText>
|
|
|
|
</ListItem>
|
|
|
|
)}
|
|
|
|
</Collapse>
|
|
|
|
|
|
|
|
<Divider />
|
|
|
|
<ListItem button onClick={() => setWorldOpen((old) => !old)}>
|
|
|
|
<ListItemIcon>
|
2021-09-17 02:51:25 +02:00
|
|
|
<PublicIcon color={"primary"} />
|
2021-09-14 21:23:16 +02:00
|
|
|
</ListItemIcon>
|
|
|
|
<ListItemText primary={<Typography color="primary">World</Typography>} />
|
2021-09-17 02:51:25 +02:00
|
|
|
{worldOpen ? <ExpandLessIcon color={"primary"} /> : <ExpandMoreIcon color={"primary"} />}
|
2021-09-14 21:23:16 +02:00
|
|
|
</ListItem>
|
|
|
|
<Collapse in={worldOpen} timeout="auto" unmountOnExit>
|
|
|
|
<ListItem
|
|
|
|
button
|
|
|
|
key={"City"}
|
|
|
|
className={clsx({
|
|
|
|
[classes.active]: activeTab === "City",
|
|
|
|
})}
|
2021-09-13 00:03:07 +02:00
|
|
|
onClick={clickCity}
|
|
|
|
>
|
2021-09-14 21:23:16 +02:00
|
|
|
<ListItemIcon>
|
|
|
|
<LocationCityIcon color={flashCity ? "error" : activeTab !== "City" ? "secondary" : "primary"} />
|
|
|
|
</ListItemIcon>
|
|
|
|
<ListItemText>
|
|
|
|
<Typography color={flashCity ? "error" : activeTab !== "City" ? "secondary" : "primary"}>
|
|
|
|
City
|
|
|
|
</Typography>
|
|
|
|
</ListItemText>
|
|
|
|
</ListItem>
|
|
|
|
<ListItem
|
|
|
|
button
|
|
|
|
key={"Travel"}
|
|
|
|
className={clsx({
|
|
|
|
[classes.active]: activeTab === "Travel",
|
|
|
|
})}
|
|
|
|
onClick={clickTravel}
|
|
|
|
>
|
|
|
|
<ListItemIcon>
|
|
|
|
<AirplanemodeActiveIcon color={activeTab !== "Travel" ? "secondary" : "primary"} />
|
|
|
|
</ListItemIcon>
|
|
|
|
<ListItemText>
|
|
|
|
<Typography color={activeTab !== "Travel" ? "secondary" : "primary"}>Travel</Typography>
|
|
|
|
</ListItemText>
|
|
|
|
</ListItem>
|
|
|
|
{canJob && (
|
|
|
|
<ListItem
|
|
|
|
button
|
|
|
|
key={"Job"}
|
|
|
|
className={clsx({
|
|
|
|
[classes.active]: activeTab === "Job",
|
|
|
|
})}
|
|
|
|
onClick={clickJob}
|
|
|
|
>
|
|
|
|
<ListItemIcon>
|
|
|
|
<WorkIcon color={activeTab !== "Job" ? "secondary" : "primary"} />
|
|
|
|
</ListItemIcon>
|
|
|
|
<ListItemText>
|
|
|
|
<Typography color={activeTab !== "Job" ? "secondary" : "primary"}>Job</Typography>
|
|
|
|
</ListItemText>
|
|
|
|
</ListItem>
|
|
|
|
)}
|
|
|
|
{canStockMarket && (
|
|
|
|
<ListItem
|
|
|
|
button
|
|
|
|
key={"Stock Market"}
|
|
|
|
className={clsx({
|
|
|
|
[classes.active]: activeTab === "StockMarket",
|
|
|
|
})}
|
|
|
|
onClick={clickStockMarket}
|
|
|
|
>
|
|
|
|
<ListItemIcon>
|
|
|
|
<TrendingUpIcon color={activeTab !== "StockMarket" ? "secondary" : "primary"} />
|
|
|
|
</ListItemIcon>
|
|
|
|
<ListItemText>
|
|
|
|
<Typography color={activeTab !== "StockMarket" ? "secondary" : "primary"}>Stock Market</Typography>
|
|
|
|
</ListItemText>
|
|
|
|
</ListItem>
|
|
|
|
)}
|
|
|
|
{canBladeburner && (
|
|
|
|
<ListItem
|
|
|
|
button
|
|
|
|
key={"Bladeburner"}
|
|
|
|
className={clsx({
|
|
|
|
[classes.active]: activeTab === "Bladeburner",
|
|
|
|
})}
|
|
|
|
onClick={clickBladeburner}
|
|
|
|
>
|
|
|
|
<ListItemIcon>
|
|
|
|
<FormatBoldIcon color={activeTab !== "Bladeburner" ? "secondary" : "primary"} />
|
|
|
|
</ListItemIcon>
|
|
|
|
<ListItemText>
|
|
|
|
<Typography color={activeTab !== "Bladeburner" ? "secondary" : "primary"}>Bladeburner</Typography>
|
|
|
|
</ListItemText>
|
|
|
|
</ListItem>
|
|
|
|
)}
|
|
|
|
{canCorporation && (
|
|
|
|
<ListItem
|
|
|
|
button
|
|
|
|
key={"Corp"}
|
|
|
|
className={clsx({
|
|
|
|
[classes.active]: activeTab === "Corp",
|
|
|
|
})}
|
|
|
|
onClick={clickCorp}
|
|
|
|
>
|
|
|
|
<ListItemIcon>
|
|
|
|
<BusinessIcon color={activeTab !== "Corp" ? "secondary" : "primary"} />
|
|
|
|
</ListItemIcon>
|
|
|
|
<ListItemText>
|
|
|
|
<Typography color={activeTab !== "Corp" ? "secondary" : "primary"}>Corp</Typography>
|
|
|
|
</ListItemText>
|
|
|
|
</ListItem>
|
|
|
|
)}
|
|
|
|
{canGang && (
|
|
|
|
<ListItem
|
|
|
|
button
|
|
|
|
key={"Gang"}
|
|
|
|
className={clsx({
|
|
|
|
[classes.active]: activeTab === "Gang",
|
|
|
|
})}
|
|
|
|
onClick={clickGang}
|
|
|
|
>
|
|
|
|
<ListItemIcon>
|
|
|
|
<SportsMmaIcon color={activeTab !== "Gang" ? "secondary" : "primary"} />
|
|
|
|
</ListItemIcon>
|
|
|
|
<ListItemText>
|
|
|
|
<Typography color={activeTab !== "Gang" ? "secondary" : "primary"}>Gang</Typography>
|
|
|
|
</ListItemText>
|
|
|
|
</ListItem>
|
|
|
|
)}
|
|
|
|
</Collapse>
|
|
|
|
|
|
|
|
<Divider />
|
|
|
|
<ListItem button onClick={() => setHelpOpen((old) => !old)}>
|
|
|
|
<ListItemIcon>
|
2021-09-17 02:51:25 +02:00
|
|
|
<LiveHelpIcon color={"primary"} />
|
2021-09-14 21:23:16 +02:00
|
|
|
</ListItemIcon>
|
|
|
|
<ListItemText primary={<Typography color="primary">Help</Typography>} />
|
2021-09-17 02:51:25 +02:00
|
|
|
{helpOpen ? <ExpandLessIcon color={"primary"} /> : <ExpandMoreIcon color={"primary"} />}
|
2021-09-14 21:23:16 +02:00
|
|
|
</ListItem>
|
|
|
|
<Collapse in={helpOpen} timeout="auto" unmountOnExit>
|
|
|
|
<ListItem
|
|
|
|
button
|
|
|
|
key={"Milestones"}
|
|
|
|
className={clsx({
|
|
|
|
[classes.active]: activeTab === "Milestones",
|
|
|
|
})}
|
|
|
|
onClick={clickMilestones}
|
|
|
|
>
|
|
|
|
<ListItemIcon>
|
|
|
|
<CheckIcon color={activeTab !== "Milestones" ? "secondary" : "primary"} />
|
|
|
|
</ListItemIcon>
|
|
|
|
<ListItemText>
|
|
|
|
<Typography color={activeTab !== "Milestones" ? "secondary" : "primary"}>Milestones</Typography>
|
|
|
|
</ListItemText>
|
|
|
|
</ListItem>
|
|
|
|
<ListItem
|
|
|
|
button
|
|
|
|
key={"Tutorial"}
|
|
|
|
className={clsx({
|
|
|
|
[classes.active]: activeTab === "Tutorial",
|
|
|
|
})}
|
2021-09-13 00:03:07 +02:00
|
|
|
onClick={clickTutorial}
|
|
|
|
>
|
2021-09-14 21:23:16 +02:00
|
|
|
<ListItemIcon>
|
|
|
|
<HelpIcon color={flashTutorial ? "error" : activeTab !== "Tutorial" ? "secondary" : "primary"} />
|
|
|
|
</ListItemIcon>
|
|
|
|
<ListItemText>
|
|
|
|
<Typography color={flashTutorial ? "error" : activeTab !== "Tutorial" ? "secondary" : "primary"}>
|
|
|
|
Tutorial
|
|
|
|
</Typography>
|
|
|
|
</ListItemText>
|
|
|
|
</ListItem>
|
2021-09-15 03:05:49 +02:00
|
|
|
<ListItem
|
2021-09-14 21:23:16 +02:00
|
|
|
button
|
|
|
|
key={"Options"}
|
|
|
|
className={clsx({
|
|
|
|
[classes.active]: activeTab === "Options",
|
|
|
|
})}
|
2021-09-15 03:05:49 +02:00
|
|
|
onClick={clickOptions}
|
2021-09-14 21:23:16 +02:00
|
|
|
>
|
|
|
|
<ListItemIcon>
|
|
|
|
<SettingsIcon color={activeTab !== "Options" ? "secondary" : "primary"} />
|
|
|
|
</ListItemIcon>
|
|
|
|
<ListItemText>
|
2021-09-15 03:05:49 +02:00
|
|
|
<Typography color={activeTab !== "Options" ? "secondary" : "primary"}>Options</Typography>
|
2021-09-14 21:23:16 +02:00
|
|
|
</ListItemText>
|
2021-09-15 03:05:49 +02:00
|
|
|
</ListItem>
|
2021-09-14 21:23:16 +02:00
|
|
|
{process.env.NODE_ENV === "development" && (
|
|
|
|
<ListItem
|
|
|
|
button
|
|
|
|
key={"Dev"}
|
|
|
|
className={clsx({
|
|
|
|
[classes.active]: activeTab === "Dev",
|
|
|
|
})}
|
|
|
|
onClick={clickDev}
|
|
|
|
>
|
|
|
|
<ListItemIcon>
|
|
|
|
<DeveloperBoardIcon color={activeTab !== "Dev" ? "secondary" : "primary"} />
|
|
|
|
</ListItemIcon>
|
|
|
|
<ListItemText>
|
|
|
|
<Typography color={activeTab !== "Dev" ? "secondary" : "primary"}>Dev</Typography>
|
|
|
|
</ListItemText>
|
|
|
|
</ListItem>
|
|
|
|
)}
|
|
|
|
</Collapse>
|
|
|
|
</List>
|
|
|
|
</Drawer>
|
|
|
|
</BBTheme>
|
2021-09-11 07:54:19 +02:00
|
|
|
);
|
|
|
|
}
|