mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-11-26 09:33:49 +01:00
Merge pull request #1247 from danielyxie/dev
contextually hide sidebar items
This commit is contained in:
hydroflame
GitHub
commit
ed461ccca5
4
dist/engine.bundle.js
vendored
4
dist/engine.bundle.js
vendored
File diff suppressed because one or more lines are too long
2
dist/engineStyle.bundle.js
vendored
2
dist/engineStyle.bundle.js
vendored
@ -1,2 +1,2 @@
|
|||||||
!function(n){function t(t){for(var e,i,f=t[0],c=t[1],l=t[2],a=0,s=[];a<f.length;a++)i=f[a],Object.prototype.hasOwnProperty.call(r,i)&&r[i]&&s.push(r[i][0]),r[i]=0;for(e in c)Object.prototype.hasOwnProperty.call(c,e)&&(n[e]=c[e]);for(p&&p(t);s.length;)s.shift()();return u.push.apply(u,l||[]),o()}function o(){for(var n,t=0;t<u.length;t++){for(var o=u[t],e=!0,f=1;f<o.length;f++){var c=o[f];0!==r[c]&&(e=!1)}e&&(u.splice(t--,1),n=i(i.s=o[0]))}return n}var e={},r={2:0},u=[];function i(t){if(e[t])return e[t].exports;var o=e[t]={i:t,l:!1,exports:{}};return n[t].call(o.exports,o,o.exports,i),o.l=!0,o.exports}i.m=n,i.c=e,i.d=function(n,t,o){i.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:o})},i.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},i.t=function(n,t){if(1&t&&(n=i(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var o=Object.create(null);if(i.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var e in n)i.d(o,e,function(t){return n[t]}.bind(null,e));return o},i.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return i.d(t,"a",t),t},i.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},i.p="";var f=window.webpackJsonp=window.webpackJsonp||[],c=f.push.bind(f);f.push=t,f=f.slice();for(var l=0;l<f.length;l++)t(f[l]);var p=c;u.push([1020,0]),o()}({1020:function(n,t,o){"use strict";o.r(t);o(1021),o(1023),o(1025),o(1027),o(1029),o(1031),o(1033),o(1035),o(1037),o(1039),o(1041),o(1043),o(1045),o(1047),o(1049),o(1051),o(1053),o(1055),o(1057),o(1059),o(1061),o(1063),o(1065),o(1067),o(1069),o(1071),o(1073),o(1075),o(1077),o(1079),o(1081)},1023:function(n,t,o){},1025:function(n,t,o){},1027:function(n,t,o){},1029:function(n,t,o){},1031:function(n,t,o){},1033:function(n,t,o){},1035:function(n,t,o){},1037:function(n,t,o){},1039:function(n,t,o){},1041:function(n,t,o){},1043:function(n,t,o){},1045:function(n,t,o){},1047:function(n,t,o){},1049:function(n,t,o){},1051:function(n,t,o){},1053:function(n,t,o){},1055:function(n,t,o){},1057:function(n,t,o){},1059:function(n,t,o){},1061:function(n,t,o){},1063:function(n,t,o){},1065:function(n,t,o){},1067:function(n,t,o){},1069:function(n,t,o){},1071:function(n,t,o){},1073:function(n,t,o){},1075:function(n,t,o){},1077:function(n,t,o){},1079:function(n,t,o){},1081:function(n,t,o){}});
|
!function(n){function t(t){for(var e,i,f=t[0],c=t[1],l=t[2],a=0,s=[];a<f.length;a++)i=f[a],Object.prototype.hasOwnProperty.call(r,i)&&r[i]&&s.push(r[i][0]),r[i]=0;for(e in c)Object.prototype.hasOwnProperty.call(c,e)&&(n[e]=c[e]);for(p&&p(t);s.length;)s.shift()();return u.push.apply(u,l||[]),o()}function o(){for(var n,t=0;t<u.length;t++){for(var o=u[t],e=!0,f=1;f<o.length;f++){var c=o[f];0!==r[c]&&(e=!1)}e&&(u.splice(t--,1),n=i(i.s=o[0]))}return n}var e={},r={2:0},u=[];function i(t){if(e[t])return e[t].exports;var o=e[t]={i:t,l:!1,exports:{}};return n[t].call(o.exports,o,o.exports,i),o.l=!0,o.exports}i.m=n,i.c=e,i.d=function(n,t,o){i.o(n,t)||Object.defineProperty(n,t,{enumerable:!0,get:o})},i.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},i.t=function(n,t){if(1&t&&(n=i(n)),8&t)return n;if(4&t&&"object"==typeof n&&n&&n.__esModule)return n;var o=Object.create(null);if(i.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:n}),2&t&&"string"!=typeof n)for(var e in n)i.d(o,e,function(t){return n[t]}.bind(null,e));return o},i.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return i.d(t,"a",t),t},i.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},i.p="";var f=window.webpackJsonp=window.webpackJsonp||[],c=f.push.bind(f);f.push=t,f=f.slice();for(var l=0;l<f.length;l++)t(f[l]);var p=c;u.push([1021,0]),o()}({1021:function(n,t,o){"use strict";o.r(t);o(1022),o(1024),o(1026),o(1028),o(1030),o(1032),o(1034),o(1036),o(1038),o(1040),o(1042),o(1044),o(1046),o(1048),o(1050),o(1052),o(1054),o(1056),o(1058),o(1060),o(1062),o(1064),o(1066),o(1068),o(1070),o(1072),o(1074),o(1076),o(1078),o(1080),o(1082)},1024:function(n,t,o){},1026:function(n,t,o){},1028:function(n,t,o){},1030:function(n,t,o){},1032:function(n,t,o){},1034:function(n,t,o){},1036:function(n,t,o){},1038:function(n,t,o){},1040:function(n,t,o){},1042:function(n,t,o){},1044:function(n,t,o){},1046:function(n,t,o){},1048:function(n,t,o){},1050:function(n,t,o){},1052:function(n,t,o){},1054:function(n,t,o){},1056:function(n,t,o){},1058:function(n,t,o){},1060:function(n,t,o){},1062:function(n,t,o){},1064:function(n,t,o){},1066:function(n,t,o){},1068:function(n,t,o){},1070:function(n,t,o){},1072:function(n,t,o){},1074:function(n,t,o){},1076:function(n,t,o){},1078:function(n,t,o){},1080:function(n,t,o){},1082:function(n,t,o){}});
|
||||||
//# sourceMappingURL=engineStyle.bundle.js.map
|
//# sourceMappingURL=engineStyle.bundle.js.map
|
||||||
26
dist/vendor.bundle.js
vendored
26
dist/vendor.bundle.js
vendored
File diff suppressed because one or more lines are too long
@ -1,733 +0,0 @@
|
|||||||
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={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.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={flashActiveScripts ? "error" : activeTab !== "ActiveScripts" ? "secondary" : "primary"}
|
|
||||||
/>
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText>
|
|
||||||
<Typography
|
|
||||||
color={flashActiveScripts ? "error" : 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={flashStats ? "error" : activeTab !== "Stats" ? "secondary" : "primary"} />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText>
|
|
||||||
<Typography color={flashStats ? "error" : 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={flashHacknet ? "error" : activeTab !== "Hacknet" ? "secondary" : "primary"} />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText>
|
|
||||||
<Typography color={flashHacknet ? "error" : 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={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.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={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.nested, {
|
|
||||||
[classes.active]: activeTab === "Tutorial",
|
|
||||||
})}
|
|
||||||
onClick={clickTutorial}
|
|
||||||
>
|
|
||||||
<ListItemIcon>
|
|
||||||
<HelpIcon color={flashTutorial ? "error" : activeTab !== "Tutorial" ? "secondary" : "primary"} />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText>
|
|
||||||
<Typography color={flashTutorial ? "error" : 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>*/}
|
|
||||||
{process.env.NODE_ENV === "development" && (
|
|
||||||
<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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,6 +1,55 @@
|
|||||||
import React, { useState, useEffect } from "react";
|
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 { IEngine } from "../../IEngine";
|
||||||
import { IPlayer } from "../../PersonObjects/IPlayer";
|
import { IPlayer } from "../../PersonObjects/IPlayer";
|
||||||
|
import { CONSTANTS } from "../../Constants";
|
||||||
import { iTutorialSteps, iTutorialNextStep, ITutorial } from "../../InteractiveTutorial";
|
import { iTutorialSteps, iTutorialNextStep, ITutorial } from "../../InteractiveTutorial";
|
||||||
import { getAvailableCreatePrograms } from "../../Programs/ProgramHelpers";
|
import { getAvailableCreatePrograms } from "../../Programs/ProgramHelpers";
|
||||||
import { Settings } from "../../Settings/Settings";
|
import { Settings } from "../../Settings/Settings";
|
||||||
@ -12,6 +61,39 @@ import { KEY } from "../../../utils/helpers/keyCodes";
|
|||||||
import { FconfSettings } from "../../Fconf/FconfSettings";
|
import { FconfSettings } from "../../Fconf/FconfSettings";
|
||||||
import { Page, routing } from "../../ui/navigationTracking";
|
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,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
active: {
|
||||||
|
borderLeft: "3px solid " + colors.primary,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
interface IProps {
|
interface IProps {
|
||||||
player: IPlayer;
|
player: IPlayer;
|
||||||
engine: IEngine;
|
engine: IEngine;
|
||||||
@ -24,11 +106,11 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const id = setInterval(rerender, 20);
|
const id = setInterval(rerender, 200);
|
||||||
return () => clearInterval(id);
|
return () => clearInterval(id);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const [activeTab, setActiveTab] = useState("");
|
const [activeTab, setActiveTab] = useState("Terminal");
|
||||||
const [hackingOpen, setHackingOpen] = useState(true);
|
const [hackingOpen, setHackingOpen] = useState(true);
|
||||||
const [characterOpen, setCharacterOpen] = useState(true);
|
const [characterOpen, setCharacterOpen] = useState(true);
|
||||||
const [worldOpen, setWorldOpen] = useState(true);
|
const [worldOpen, setWorldOpen] = useState(true);
|
||||||
@ -253,218 +335,416 @@ export function SidebarRoot(props: IProps): React.ReactElement {
|
|||||||
return () => document.removeEventListener("keypress", handleShortcuts);
|
return () => document.removeEventListener("keypress", handleShortcuts);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
const classes = useStyles();
|
||||||
|
const [open, setOpen] = useState(true);
|
||||||
|
const toggleDrawer = () => setOpen((old) => !old);
|
||||||
return (
|
return (
|
||||||
<ul id="mainmenu" className="mainmenu noscrollbar noselect">
|
<BBTheme>
|
||||||
{/* Hacking dropdown */}
|
<Drawer
|
||||||
<li className="menu-header">
|
variant="permanent"
|
||||||
<button
|
className={clsx(classes.drawer, {
|
||||||
id="hacking-menu-header"
|
[classes.drawerOpen]: open,
|
||||||
className={
|
[classes.drawerClose]: !open,
|
||||||
"noselect mainmenu-accordion-header" +
|
})}
|
||||||
(hackingOpen ? " opened" : "") +
|
classes={{
|
||||||
(flashTerminal ? " flashing-button" : "")
|
paper: clsx({
|
||||||
}
|
[classes.drawerOpen]: open,
|
||||||
onClick={() => setHackingOpen((old) => !old)}
|
[classes.drawerClose]: !open,
|
||||||
|
}),
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Hacking
|
<ListItem button onClick={toggleDrawer}>
|
||||||
</button>
|
<ListItemIcon>{!open ? <ChevronRightIcon /> : <ChevronLeftIcon />}</ListItemIcon>
|
||||||
</li>
|
<ListItemText primary={<Typography color="primary">Bitburner {CONSTANTS.Version}</Typography>} />
|
||||||
{hackingOpen && (
|
</ListItem>
|
||||||
<>
|
<Divider />
|
||||||
<li className={`mainmenu-accordion-panel`}>
|
<List>
|
||||||
<button
|
<ListItem button onClick={() => setHackingOpen((old) => !old)}>
|
||||||
className={(flashTerminal ? "flashing-button" : "") + activeTab === "Terminal" ? " active" : ""}
|
<ListItemIcon>
|
||||||
|
<ComputerIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText primary={<Typography color="primary">Hacking</Typography>} />
|
||||||
|
{hackingOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
|
||||||
|
</ListItem>
|
||||||
|
<Collapse in={hackingOpen} timeout="auto" unmountOnExit>
|
||||||
|
<List>
|
||||||
|
<ListItem
|
||||||
|
button
|
||||||
|
key={"Terminal"}
|
||||||
|
className={clsx({
|
||||||
|
[classes.active]: activeTab === "Terminal",
|
||||||
|
})}
|
||||||
onClick={clickTerminal}
|
onClick={clickTerminal}
|
||||||
>
|
>
|
||||||
|
<ListItemIcon>
|
||||||
|
<LastPageIcon color={flashTerminal ? "error" : activeTab !== "Terminal" ? "secondary" : "primary"} />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText>
|
||||||
|
<Typography color={flashTerminal ? "error" : activeTab !== "Terminal" ? "secondary" : "primary"}>
|
||||||
Terminal
|
Terminal
|
||||||
</button>
|
</Typography>
|
||||||
</li>
|
</ListItemText>
|
||||||
<li className={`mainmenu-accordion-panel`}>
|
</ListItem>
|
||||||
<button className={activeTab === "CreateScripts" ? " active" : ""} onClick={clickCreateScripts}>
|
<ListItem
|
||||||
Create Script
|
button
|
||||||
</button>
|
key={"Create Scripts"}
|
||||||
</li>
|
className={clsx({
|
||||||
<li className={`mainmenu-accordion-panel`}>
|
[classes.active]: activeTab === "CreateScripts",
|
||||||
<button
|
})}
|
||||||
className={(flashActiveScripts ? "flashing-button" : "") + activeTab === "ActiveScripts" ? " active" : ""}
|
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.active]: activeTab === "ActiveScripts",
|
||||||
|
})}
|
||||||
onClick={clickActiveScripts}
|
onClick={clickActiveScripts}
|
||||||
|
>
|
||||||
|
<ListItemIcon>
|
||||||
|
<StorageIcon
|
||||||
|
color={flashActiveScripts ? "error" : activeTab !== "ActiveScripts" ? "secondary" : "primary"}
|
||||||
|
/>
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText>
|
||||||
|
<Typography
|
||||||
|
color={flashActiveScripts ? "error" : activeTab !== "ActiveScripts" ? "secondary" : "primary"}
|
||||||
>
|
>
|
||||||
Active Scripts
|
Active Scripts
|
||||||
</button>
|
</Typography>
|
||||||
</li>
|
</ListItemText>
|
||||||
|
</ListItem>
|
||||||
{canCreateProgram && (
|
{canCreateProgram && (
|
||||||
<li className={`mainmenu-accordion-panel`}>
|
<ListItem
|
||||||
<button
|
button
|
||||||
className={"notification" + (activeTab === "CreateProgram" ? " active" : "")}
|
key={"Create Program"}
|
||||||
|
className={clsx({
|
||||||
|
[classes.active]: activeTab === "CreateProgram",
|
||||||
|
})}
|
||||||
onClick={clickCreateProgram}
|
onClick={clickCreateProgram}
|
||||||
>
|
>
|
||||||
|
<ListItemIcon>
|
||||||
|
<BugReportIcon color={activeTab !== "CreateProgram" ? "secondary" : "primary"} />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText>
|
||||||
|
<Typography color={activeTab !== "CreateProgram" ? "secondary" : "primary"}>
|
||||||
Create Program
|
Create Program
|
||||||
{programCount > 0 && <span className="badge">{programCount}</span>}
|
</Typography>
|
||||||
</button>
|
</ListItemText>
|
||||||
</li>
|
</ListItem>
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
)}
|
||||||
|
</List>
|
||||||
|
</Collapse>
|
||||||
|
|
||||||
{/* Character dropdown */}
|
<Divider />
|
||||||
<li className="menu-header">
|
<ListItem button onClick={() => setCharacterOpen((old) => !old)}>
|
||||||
<button
|
<ListItemIcon>
|
||||||
id="character-menu-header"
|
<AccountBoxIcon />
|
||||||
className={"noselect mainmenu-accordion-header" + (characterOpen ? " opened" : "")}
|
</ListItemIcon>
|
||||||
onClick={() => setCharacterOpen((old) => !old)}
|
<ListItemText primary={<Typography color="primary">Character</Typography>} />
|
||||||
>
|
{characterOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
|
||||||
Character
|
</ListItem>
|
||||||
</button>
|
<Collapse in={characterOpen} timeout="auto" unmountOnExit>
|
||||||
</li>
|
<ListItem
|
||||||
{characterOpen && (
|
button
|
||||||
<>
|
key={"Stats"}
|
||||||
<li className={`mainmenu-accordion-panel`}>
|
className={clsx({
|
||||||
<button
|
[classes.active]: activeTab === "Stats",
|
||||||
className={(flashStats ? "flashing-button" : "") + activeTab === "Stats" ? " active" : ""}
|
})}
|
||||||
onClick={clickStats}
|
onClick={clickStats}
|
||||||
>
|
>
|
||||||
|
<ListItemIcon>
|
||||||
|
<EqualizerIcon color={flashStats ? "error" : activeTab !== "Stats" ? "secondary" : "primary"} />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText>
|
||||||
|
<Typography color={flashStats ? "error" : activeTab !== "Stats" ? "secondary" : "primary"}>
|
||||||
Stats
|
Stats
|
||||||
</button>
|
</Typography>
|
||||||
</li>
|
</ListItemText>
|
||||||
|
</ListItem>
|
||||||
{canOpenFactions && (
|
{canOpenFactions && (
|
||||||
<li className={`mainmenu-accordion-panel`}>
|
<ListItem
|
||||||
<button className={"notification" + (activeTab === "Factions" ? " active" : "")} onClick={clickFactions}>
|
button
|
||||||
Factions
|
key={"Factions"}
|
||||||
{props.player.factionInvitations.length > 0 && (
|
className={clsx({
|
||||||
<span className="badge">{props.player.factionInvitations.length}</span>
|
[classes.active]: activeTab === "Factions",
|
||||||
)}
|
})}
|
||||||
</button>
|
onClick={clickFactions}
|
||||||
</li>
|
>
|
||||||
|
<ListItemIcon>
|
||||||
|
<ContactsIcon color={activeTab !== "Factions" ? "secondary" : "primary"} />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText>
|
||||||
|
<Typography color={activeTab !== "Factions" ? "secondary" : "primary"}>Factions</Typography>
|
||||||
|
</ListItemText>
|
||||||
|
</ListItem>
|
||||||
)}
|
)}
|
||||||
{canOpenAugmentations && (
|
{canOpenAugmentations && (
|
||||||
<li className={`mainmenu-accordion-panel`}>
|
<ListItem
|
||||||
<button
|
button
|
||||||
className={"notification" + (activeTab === "Augmentations" ? " active" : "")}
|
key={"Augmentations"}
|
||||||
|
className={clsx({
|
||||||
|
[classes.active]: activeTab === "Augmentations",
|
||||||
|
})}
|
||||||
onClick={clickAugmentations}
|
onClick={clickAugmentations}
|
||||||
>
|
>
|
||||||
Augmentations
|
<ListItemIcon>
|
||||||
{props.player.queuedAugmentations.length > 0 && (
|
<DoubleArrowIcon
|
||||||
<span className="badge">{props.player.queuedAugmentations.length}</span>
|
style={{ transform: "rotate(-90deg)" }}
|
||||||
|
color={activeTab !== "Augmentations" ? "secondary" : "primary"}
|
||||||
|
/>
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText>
|
||||||
|
<Typography color={activeTab !== "Augmentations" ? "secondary" : "primary"}>Augmentations</Typography>
|
||||||
|
</ListItemText>
|
||||||
|
</ListItem>
|
||||||
)}
|
)}
|
||||||
</button>
|
<ListItem
|
||||||
</li>
|
button
|
||||||
)}
|
key={"Hacknet"}
|
||||||
<li className={`mainmenu-accordion-panel`}>
|
className={clsx({
|
||||||
<button
|
[classes.active]: activeTab === "Hacknet",
|
||||||
className={(flashHacknet ? "flashing-button" : "") + activeTab === "Hacknet" ? " active" : ""}
|
})}
|
||||||
onClick={clickHacknet}
|
onClick={clickHacknet}
|
||||||
>
|
>
|
||||||
|
<ListItemIcon>
|
||||||
|
<AccountTreeIcon color={flashHacknet ? "error" : activeTab !== "Hacknet" ? "secondary" : "primary"} />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText>
|
||||||
|
<Typography color={flashHacknet ? "error" : activeTab !== "Hacknet" ? "secondary" : "primary"}>
|
||||||
Hacknet
|
Hacknet
|
||||||
</button>
|
</Typography>
|
||||||
</li>
|
</ListItemText>
|
||||||
|
</ListItem>
|
||||||
{canOpenSleeves && (
|
{canOpenSleeves && (
|
||||||
<li className={`mainmenu-accordion-panel`}>
|
<ListItem
|
||||||
<button className={activeTab === "Sleeves" ? " active" : ""} onClick={clickSleeves}>
|
button
|
||||||
Sleeves
|
key={"Sleeves"}
|
||||||
</button>
|
className={clsx({
|
||||||
</li>
|
[classes.active]: activeTab === "Sleeves",
|
||||||
)}
|
})}
|
||||||
</>
|
onClick={clickSleeves}
|
||||||
)}
|
|
||||||
{/* World dropdown */}
|
|
||||||
<li className="menu-header">
|
|
||||||
<button
|
|
||||||
id="world-menu-header"
|
|
||||||
className={"noselect mainmenu-accordion-header" + (worldOpen ? " opened" : "")}
|
|
||||||
onClick={() => setWorldOpen((old) => !old)}
|
|
||||||
>
|
>
|
||||||
World
|
<ListItemIcon>
|
||||||
</button>
|
<PeopleAltIcon color={activeTab !== "Sleeves" ? "secondary" : "primary"} />
|
||||||
</li>
|
</ListItemIcon>
|
||||||
|
<ListItemText>
|
||||||
|
<Typography color={activeTab !== "Sleeves" ? "secondary" : "primary"}>Sleeves</Typography>
|
||||||
|
</ListItemText>
|
||||||
|
</ListItem>
|
||||||
|
)}
|
||||||
|
</Collapse>
|
||||||
|
|
||||||
{worldOpen && (
|
<Divider />
|
||||||
<>
|
<ListItem button onClick={() => setWorldOpen((old) => !old)}>
|
||||||
<li className={`mainmenu-accordion-panel`}>
|
<ListItemIcon>
|
||||||
<button
|
<PublicIcon />
|
||||||
className={(flashCity ? "flashing-button" : "") + activeTab === "City" ? " active" : ""}
|
</ListItemIcon>
|
||||||
|
<ListItemText primary={<Typography color="primary">World</Typography>} />
|
||||||
|
{worldOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
|
||||||
|
</ListItem>
|
||||||
|
<Collapse in={worldOpen} timeout="auto" unmountOnExit>
|
||||||
|
<ListItem
|
||||||
|
button
|
||||||
|
key={"City"}
|
||||||
|
className={clsx({
|
||||||
|
[classes.active]: activeTab === "City",
|
||||||
|
})}
|
||||||
onClick={clickCity}
|
onClick={clickCity}
|
||||||
>
|
>
|
||||||
|
<ListItemIcon>
|
||||||
|
<LocationCityIcon color={flashCity ? "error" : activeTab !== "City" ? "secondary" : "primary"} />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText>
|
||||||
|
<Typography color={flashCity ? "error" : activeTab !== "City" ? "secondary" : "primary"}>
|
||||||
City
|
City
|
||||||
</button>
|
</Typography>
|
||||||
</li>
|
</ListItemText>
|
||||||
<li className={`mainmenu-accordion-panel`}>
|
</ListItem>
|
||||||
<button className={activeTab === "Travel" ? " active" : ""} onClick={clickTravel}>
|
<ListItem
|
||||||
Travel
|
button
|
||||||
</button>
|
key={"Travel"}
|
||||||
</li>
|
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 && (
|
{canJob && (
|
||||||
<li className={`mainmenu-accordion-panel`}>
|
<ListItem
|
||||||
<button className={activeTab === "Job" ? " active" : ""} onClick={clickJob}>
|
button
|
||||||
Job
|
key={"Job"}
|
||||||
</button>
|
className={clsx({
|
||||||
</li>
|
[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 && (
|
{canStockMarket && (
|
||||||
<li className={`mainmenu-accordion-panel`}>
|
<ListItem
|
||||||
<button className={activeTab === "StockMarket" ? " active" : ""} onClick={clickStockMarket}>
|
button
|
||||||
Stock Market
|
key={"Stock Market"}
|
||||||
</button>
|
className={clsx({
|
||||||
</li>
|
[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 && (
|
{canBladeburner && (
|
||||||
<li className={`mainmenu-accordion-panel`}>
|
<ListItem
|
||||||
<button className={activeTab === "Bladeburner" ? " active" : ""} onClick={clickBladeburner}>
|
button
|
||||||
Bladeburner
|
key={"Bladeburner"}
|
||||||
</button>
|
className={clsx({
|
||||||
</li>
|
[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 && (
|
{canCorporation && (
|
||||||
<li className={`mainmenu-accordion-panel`}>
|
<ListItem
|
||||||
<button className={activeTab === "Corp" ? " active" : ""} onClick={clickCorp}>
|
button
|
||||||
Corp
|
key={"Corp"}
|
||||||
</button>
|
className={clsx({
|
||||||
</li>
|
[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 && (
|
{canGang && (
|
||||||
<li className={`mainmenu-accordion-panel`}>
|
<ListItem
|
||||||
<button className={activeTab === "Gang" ? " active" : ""} onClick={clickGang}>
|
button
|
||||||
Gang
|
key={"Gang"}
|
||||||
</button>
|
className={clsx({
|
||||||
</li>
|
[classes.active]: activeTab === "Gang",
|
||||||
)}
|
})}
|
||||||
</>
|
onClick={clickGang}
|
||||||
)}
|
|
||||||
<li className="menu-header">
|
|
||||||
<button
|
|
||||||
id="help-menu-header"
|
|
||||||
className={"noselect mainmenu-accordion-header" + (helpOpen ? " opened" : "")}
|
|
||||||
onClick={() => setHelpOpen((old) => !old)}
|
|
||||||
>
|
>
|
||||||
Help
|
<ListItemIcon>
|
||||||
</button>
|
<SportsMmaIcon color={activeTab !== "Gang" ? "secondary" : "primary"} />
|
||||||
</li>
|
</ListItemIcon>
|
||||||
{helpOpen && (
|
<ListItemText>
|
||||||
<>
|
<Typography color={activeTab !== "Gang" ? "secondary" : "primary"}>Gang</Typography>
|
||||||
<li className={`mainmenu-accordion-panel`}>
|
</ListItemText>
|
||||||
<button className={activeTab === "Milestones" ? " active" : ""} onClick={clickMilestones}>
|
</ListItem>
|
||||||
Milestones
|
)}
|
||||||
</button>
|
</Collapse>
|
||||||
</li>
|
|
||||||
<li className={`mainmenu-accordion-panel`}>
|
<Divider />
|
||||||
<button
|
<ListItem button onClick={() => setHelpOpen((old) => !old)}>
|
||||||
className={(flashTutorial ? "flashing-button" : "") + activeTab === "Tutorial" ? " active" : ""}
|
<ListItemIcon>
|
||||||
|
<LiveHelpIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText primary={<Typography color="primary">Help</Typography>} />
|
||||||
|
{helpOpen ? <ExpandLessIcon /> : <ExpandMoreIcon />}
|
||||||
|
</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",
|
||||||
|
})}
|
||||||
onClick={clickTutorial}
|
onClick={clickTutorial}
|
||||||
>
|
>
|
||||||
|
<ListItemIcon>
|
||||||
|
<HelpIcon color={flashTutorial ? "error" : activeTab !== "Tutorial" ? "secondary" : "primary"} />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText>
|
||||||
|
<Typography color={flashTutorial ? "error" : activeTab !== "Tutorial" ? "secondary" : "primary"}>
|
||||||
Tutorial
|
Tutorial
|
||||||
</button>
|
</Typography>
|
||||||
</li>
|
</ListItemText>
|
||||||
{/*<li className="mainmenu-accordion-panel">
|
</ListItem>
|
||||||
<button>Options</button>
|
{/*<ListItem
|
||||||
</li>*/}
|
button
|
||||||
|
key={"Options"}
|
||||||
|
className={clsx({
|
||||||
|
[classes.active]: activeTab === "Options",
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<ListItemIcon>
|
||||||
|
<SettingsIcon color={activeTab !== "Options" ? "secondary" : "primary"} />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText>
|
||||||
|
<Typography color={activeTab !== "Options" ? "secondary" : "primary"}>options</Typography>
|
||||||
|
</ListItemText>
|
||||||
|
</ListItem>*/}
|
||||||
{process.env.NODE_ENV === "development" && (
|
{process.env.NODE_ENV === "development" && (
|
||||||
<li className={`mainmenu-accordion-panel`}>
|
<ListItem
|
||||||
<button className={activeTab === "Dev" ? " active" : ""} onClick={clickDev}>
|
button
|
||||||
Dev
|
key={"Dev"}
|
||||||
</button>
|
className={clsx({
|
||||||
</li>
|
[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>
|
||||||
</ul>
|
</Drawer>
|
||||||
|
</BBTheme>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -22,9 +22,10 @@ import { processPassiveFactionRepGain, inviteToFaction } from "./Faction/Faction
|
|||||||
import { FactionList } from "./Faction/ui/FactionList";
|
import { FactionList } from "./Faction/ui/FactionList";
|
||||||
import { Root as BladeburnerRoot } from "./Bladeburner/ui/Root";
|
import { Root as BladeburnerRoot } from "./Bladeburner/ui/Root";
|
||||||
import { Root as GangRoot } from "./Gang/ui/Root";
|
import { Root as GangRoot } from "./Gang/ui/Root";
|
||||||
import { SidebarRoot } from "./Sidebar/ui/Sidebar2Root";
|
import { SidebarRoot } from "./Sidebar/ui/SidebarRoot";
|
||||||
import { CorporationRoot } from "./Corporation/ui/CorporationRoot";
|
import { CorporationRoot } from "./Corporation/ui/CorporationRoot";
|
||||||
import { ResleeveRoot } from "./PersonObjects/Resleeving/ui/ResleeveRoot";
|
import { ResleeveRoot } from "./PersonObjects/Resleeving/ui/ResleeveRoot";
|
||||||
|
import { GameOptionsRoot } from "./ui/React/GameOptionsRoot";
|
||||||
import { SleeveRoot } from "./PersonObjects/Sleeve/ui/SleeveRoot";
|
import { SleeveRoot } from "./PersonObjects/Sleeve/ui/SleeveRoot";
|
||||||
import { displayInfiltrationContent } from "./Infiltration/Helper";
|
import { displayInfiltrationContent } from "./Infiltration/Helper";
|
||||||
import {
|
import {
|
||||||
@ -354,6 +355,14 @@ const Engine = {
|
|||||||
ReactDOM.render(<ResleeveRoot player={Player} />, Engine.Display.content);
|
ReactDOM.render(<ResleeveRoot player={Player} />, Engine.Display.content);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
loadGameOptionsContent: function () {
|
||||||
|
Engine.hideAllContent();
|
||||||
|
routing.navigateTo(Page.GameOptions);
|
||||||
|
Engine.Display.content.style.display = "block";
|
||||||
|
MainMenuLinks.City.classList.add("active");
|
||||||
|
ReactDOM.render(<GameOptionsRoot />, Engine.Display.content);
|
||||||
|
},
|
||||||
|
|
||||||
// Helper function that hides all content
|
// Helper function that hides all content
|
||||||
hideAllContent: function () {
|
hideAllContent: function () {
|
||||||
Engine.Display.terminalContent.style.display = "none";
|
Engine.Display.terminalContent.style.display = "none";
|
||||||
|
|||||||
@ -2,7 +2,7 @@ import React from "react";
|
|||||||
|
|
||||||
interface IProps {}
|
interface IProps {}
|
||||||
|
|
||||||
export function Options(props: IProps): React.ReactElement {
|
export function GameOptionsRoot(props: IProps): React.ReactElement {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h1>Game Options</h1>
|
<h1>Game Options</h1>
|
||||||
Loading…
Reference in New Issue
Block a user