mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2026-04-24 10:12:53 +02:00
fix BN6 end screen
This commit is contained in:
Olivier Gagnon
@@ -0,0 +1,717 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import clsx from "clsx";
|
||||
import { createStyles, makeStyles, useTheme, Theme } from "@material-ui/core/styles";
|
||||
import Drawer from "@material-ui/core/Drawer";
|
||||
import List from "@material-ui/core/List";
|
||||
import Divider from "@material-ui/core/Divider";
|
||||
import IconButton from "@material-ui/core/IconButton";
|
||||
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
|
||||
import ChevronRightIcon from "@material-ui/icons/ChevronRight";
|
||||
import ListItem from "@material-ui/core/ListItem";
|
||||
import ListSubheader from "@material-ui/core/ListSubheader";
|
||||
import ListItemIcon from "@material-ui/core/ListItemIcon";
|
||||
import ListItemText from "@material-ui/core/ListItemText";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import Collapse from "@material-ui/core/Collapse";
|
||||
import InboxIcon from "@material-ui/icons/MoveToInbox";
|
||||
import MailIcon from "@material-ui/icons/Mail";
|
||||
|
||||
import { Theme as BBTheme, colors } from "../../ui/React/Theme";
|
||||
|
||||
import ComputerIcon from "@material-ui/icons/Computer";
|
||||
import LastPageIcon from "@material-ui/icons/LastPage"; // Terminal
|
||||
import CreateIcon from "@material-ui/icons/Create"; // Create Script
|
||||
import StorageIcon from "@material-ui/icons/Storage"; // Active Scripts
|
||||
import BugReportIcon from "@material-ui/icons/BugReport"; // Create Program
|
||||
import EqualizerIcon from "@material-ui/icons/Equalizer"; // Stats
|
||||
import ContactsIcon from "@material-ui/icons/Contacts"; // Factions
|
||||
import DoubleArrowIcon from "@material-ui/icons/DoubleArrow"; // Augmentations
|
||||
import AccountTreeIcon from "@material-ui/icons/AccountTree"; // Hacknet
|
||||
import PeopleAltIcon from "@material-ui/icons/PeopleAlt"; // Sleeves
|
||||
import LocationCityIcon from "@material-ui/icons/LocationCity"; // City
|
||||
import AirplanemodeActiveIcon from "@material-ui/icons/AirplanemodeActive"; // Travel
|
||||
import WorkIcon from "@material-ui/icons/Work"; // Job
|
||||
import TrendingUpIcon from "@material-ui/icons/TrendingUp"; // Stock Market
|
||||
import FormatBoldIcon from "@material-ui/icons/FormatBold"; // Bladeburner
|
||||
import BusinessIcon from "@material-ui/icons/Business"; // Corp
|
||||
import SportsMmaIcon from "@material-ui/icons/SportsMma"; // Gang
|
||||
import CheckIcon from "@material-ui/icons/Check"; // Milestones
|
||||
import HelpIcon from "@material-ui/icons/Help"; // Tutorial
|
||||
import SettingsIcon from "@material-ui/icons/Settings"; // options
|
||||
import DeveloperBoardIcon from "@material-ui/icons/DeveloperBoard"; // Dev
|
||||
// import MemoryIcon from "@material-ui/icons/Memory";
|
||||
// import ShareIcon from "@material-ui/icons/Share";
|
||||
import AccountBoxIcon from "@material-ui/icons/AccountBox";
|
||||
import PublicIcon from "@material-ui/icons/Public";
|
||||
import LiveHelpIcon from "@material-ui/icons/LiveHelp";
|
||||
import ExpandLessIcon from "@material-ui/icons/ExpandLess";
|
||||
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
|
||||
|
||||
import { IEngine } from "../../IEngine";
|
||||
import { IPlayer } from "../../PersonObjects/IPlayer";
|
||||
import { iTutorialSteps, iTutorialNextStep, ITutorial } from "../../InteractiveTutorial";
|
||||
import { getAvailableCreatePrograms } from "../../Programs/ProgramHelpers";
|
||||
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";
|
||||
|
||||
const drawerWidth = 240;
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
createStyles({
|
||||
drawer: {
|
||||
width: drawerWidth,
|
||||
flexShrink: 0,
|
||||
whiteSpace: "nowrap",
|
||||
},
|
||||
drawerOpen: {
|
||||
width: drawerWidth,
|
||||
transition: theme.transitions.create("width", {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.enteringScreen,
|
||||
}),
|
||||
},
|
||||
drawerClose: {
|
||||
transition: theme.transitions.create("width", {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen,
|
||||
}),
|
||||
overflowX: "hidden",
|
||||
width: theme.spacing(7) + 1,
|
||||
[theme.breakpoints.up("sm")]: {
|
||||
width: theme.spacing(9) + 1,
|
||||
},
|
||||
},
|
||||
nested: {
|
||||
paddingLeft: theme.spacing(4),
|
||||
},
|
||||
active: {
|
||||
borderLeft: "3px solid " + colors.primary,
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
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(() => {
|
||||
const id = setInterval(rerender, 200);
|
||||
return () => clearInterval(id);
|
||||
}, []);
|
||||
|
||||
const [activeTab, setActiveTab] = useState("Terminal");
|
||||
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;
|
||||
|
||||
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;
|
||||
|
||||
// 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);
|
||||
|
||||
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();
|
||||
}
|
||||
|
||||
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);
|
||||
}, []);
|
||||
|
||||
const classes = useStyles();
|
||||
const [open, setOpen] = useState(true);
|
||||
const toggleDrawer = () => setOpen((old) => !old);
|
||||
return (
|
||||
<BBTheme>
|
||||
<Drawer
|
||||
variant="permanent"
|
||||
className={clsx(classes.drawer, {
|
||||
[classes.drawerOpen]: open,
|
||||
[classes.drawerClose]: !open,
|
||||
})}
|
||||
classes={{
|
||||
paper: clsx({
|
||||
[classes.drawerOpen]: open,
|
||||
[classes.drawerClose]: !open,
|
||||
}),
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<IconButton onClick={toggleDrawer}>{!open ? <ChevronRightIcon /> : <ChevronLeftIcon />}</IconButton>
|
||||
</div>
|
||||
<Divider />
|
||||
<List>
|
||||
<ListItem button onClick={() => setHackingOpen((old) => !old)}>
|
||||
<ListItemIcon>
|
||||
<ComputerIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={<Typography>Hacking</Typography>} />
|
||||
{hackingOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
|
||||
</ListItem>
|
||||
<Collapse in={hackingOpen} timeout="auto" unmountOnExit>
|
||||
<List>
|
||||
<ListItem
|
||||
button
|
||||
key={"Terminal"}
|
||||
className={clsx(classes.nested, {
|
||||
[classes.active]: activeTab === "Terminal",
|
||||
})}
|
||||
onClick={clickTerminal}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<LastPageIcon color={activeTab !== "Terminal" ? "secondary" : "primary"} />
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={activeTab !== "Terminal" ? "secondary" : "primary"}>Terminal</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
button
|
||||
key={"Create Scripts"}
|
||||
className={clsx(classes.nested, {
|
||||
[classes.active]: activeTab === "CreateScripts",
|
||||
})}
|
||||
onClick={clickCreateScripts}
|
||||
>
|
||||
<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.nested, {
|
||||
[classes.active]: activeTab === "ActiveScripts",
|
||||
})}
|
||||
onClick={clickActiveScripts}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<StorageIcon color={activeTab !== "ActiveScripts" ? "secondary" : "primary"} />
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={activeTab !== "ActiveScripts" ? "secondary" : "primary"}>
|
||||
Active Scripts
|
||||
</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
button
|
||||
key={"Create Program"}
|
||||
className={clsx(classes.nested, {
|
||||
[classes.active]: activeTab === "CreateProgram",
|
||||
})}
|
||||
onClick={clickCreateProgram}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<BugReportIcon color={activeTab !== "CreateProgram" ? "secondary" : "primary"} />
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={activeTab !== "CreateProgram" ? "secondary" : "primary"}>
|
||||
Create Program
|
||||
</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Collapse>
|
||||
|
||||
<Divider />
|
||||
<ListItem button onClick={() => setCharacterOpen((old) => !old)}>
|
||||
<ListItemIcon>
|
||||
<AccountBoxIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={<Typography>Character</Typography>} />
|
||||
{characterOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
|
||||
</ListItem>
|
||||
<Collapse in={characterOpen} timeout="auto" unmountOnExit>
|
||||
<ListItem
|
||||
button
|
||||
key={"Stats"}
|
||||
className={clsx(classes.nested, {
|
||||
[classes.active]: activeTab === "Stats",
|
||||
})}
|
||||
onClick={clickStats}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<EqualizerIcon color={activeTab !== "Stats" ? "secondary" : "primary"} />
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={activeTab !== "Stats" ? "secondary" : "primary"}>Stats</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
button
|
||||
key={"Factions"}
|
||||
className={clsx(classes.nested, {
|
||||
[classes.active]: activeTab === "Factions",
|
||||
})}
|
||||
onClick={clickFactions}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<ContactsIcon color={activeTab !== "Factions" ? "secondary" : "primary"} />
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={activeTab !== "Factions" ? "secondary" : "primary"}>Factions</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
button
|
||||
key={"Augmentations"}
|
||||
className={clsx(classes.nested, {
|
||||
[classes.active]: activeTab === "Augmentations",
|
||||
})}
|
||||
onClick={clickAugmentations}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<DoubleArrowIcon
|
||||
style={{ transform: "rotate(-90deg)" }}
|
||||
color={activeTab !== "Augmentations" ? "secondary" : "primary"}
|
||||
/>
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={activeTab !== "Augmentations" ? "secondary" : "primary"}>Augmentations</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
button
|
||||
key={"Hacknet"}
|
||||
className={clsx(classes.nested, {
|
||||
[classes.active]: activeTab === "Hacknet",
|
||||
})}
|
||||
onClick={clickHacknet}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<AccountTreeIcon color={activeTab !== "Hacknet" ? "secondary" : "primary"} />
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={activeTab !== "Hacknet" ? "secondary" : "primary"}>Hacknet</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
button
|
||||
key={"Sleeves"}
|
||||
className={clsx(classes.nested, {
|
||||
[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>
|
||||
<PublicIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={<Typography>World</Typography>} />
|
||||
{worldOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
|
||||
</ListItem>
|
||||
<Collapse in={worldOpen} timeout="auto" unmountOnExit>
|
||||
<ListItem
|
||||
button
|
||||
key={"City"}
|
||||
className={clsx(classes.nested, {
|
||||
[classes.active]: activeTab === "City",
|
||||
})}
|
||||
onClick={clickCity}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<LocationCityIcon color={activeTab !== "City" ? "secondary" : "primary"} />
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={activeTab !== "City" ? "secondary" : "primary"}>City</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
button
|
||||
key={"Travel"}
|
||||
className={clsx(classes.nested, {
|
||||
[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>
|
||||
<ListItem
|
||||
button
|
||||
key={"Job"}
|
||||
className={clsx(classes.nested, {
|
||||
[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>
|
||||
<ListItem
|
||||
button
|
||||
key={"Stock Market"}
|
||||
className={clsx(classes.nested, {
|
||||
[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>
|
||||
<ListItem
|
||||
button
|
||||
key={"Bladeburner"}
|
||||
className={clsx(classes.nested, {
|
||||
[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>
|
||||
<ListItem
|
||||
button
|
||||
key={"Corp"}
|
||||
className={clsx(classes.nested, {
|
||||
[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>
|
||||
<ListItem
|
||||
button
|
||||
key={"Gang"}
|
||||
className={clsx(classes.nested, {
|
||||
[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>
|
||||
<LiveHelpIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={<Typography>Help</Typography>} />
|
||||
{helpOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
|
||||
</ListItem>
|
||||
<Collapse in={helpOpen} timeout="auto" unmountOnExit>
|
||||
<ListItem
|
||||
button
|
||||
key={"Milestones"}
|
||||
className={clsx(classes.nested, {
|
||||
[classes.active]: activeTab === "Milestones",
|
||||
})}
|
||||
onClick={clickTutorial}
|
||||
>
|
||||
<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.nested, {
|
||||
[classes.active]: activeTab === "Tutorial",
|
||||
})}
|
||||
onClick={clickMilestones}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<HelpIcon color={activeTab !== "Tutorial" ? "secondary" : "primary"} />
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={activeTab !== "Tutorial" ? "secondary" : "primary"}>Tutorial</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
button
|
||||
key={"Options"}
|
||||
className={clsx(classes.nested, {
|
||||
[classes.active]: activeTab === "Options",
|
||||
})}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<SettingsIcon color={activeTab !== "Options" ? "secondary" : "primary"} />
|
||||
</ListItemIcon>
|
||||
<ListItemText>
|
||||
<Typography color={activeTab !== "Options" ? "secondary" : "primary"}>options</Typography>
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
button
|
||||
key={"Dev"}
|
||||
className={clsx(classes.nested, {
|
||||
[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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user