fix BN6 end screen

This commit is contained in:
Olivier Gagnon 2021-09-14 14:10:59 -04:00
parent 2d463b60a0
commit 9adf69afbd
11 changed files with 849 additions and 71 deletions

@ -1,8 +1,6 @@
@import "theme";
#terminal-container {
position: fixed;
margin-left: 10%;
height: 100%;
width: 99%;
overflow: auto;

File diff suppressed because one or more lines are too long

@ -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([943,0]),o()}({1e3:function(n,t,o){},1002:function(n,t,o){},1004:function(n,t,o){},943:function(n,t,o){"use strict";o.r(t);o(944),o(946),o(948),o(950),o(952),o(954),o(956),o(958),o(960),o(962),o(964),o(966),o(968),o(970),o(972),o(974),o(976),o(978),o(980),o(982),o(984),o(986),o(988),o(990),o(992),o(994),o(996),o(998),o(1e3),o(1002),o(1004)},946:function(n,t,o){},948:function(n,t,o){},950:function(n,t,o){},952:function(n,t,o){},954:function(n,t,o){},956:function(n,t,o){},958:function(n,t,o){},960:function(n,t,o){},962:function(n,t,o){},964:function(n,t,o){},966:function(n,t,o){},968:function(n,t,o){},970:function(n,t,o){},972:function(n,t,o){},974:function(n,t,o){},976:function(n,t,o){},978:function(n,t,o){},980:function(n,t,o){},982:function(n,t,o){},984:function(n,t,o){},986:function(n,t,o){},988:function(n,t,o){},990:function(n,t,o){},992:function(n,t,o){},994:function(n,t,o){},996:function(n,t,o){},998: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([983,0]),o()}({1e3:function(n,t,o){},1002:function(n,t,o){},1004:function(n,t,o){},1006:function(n,t,o){},1008:function(n,t,o){},1010:function(n,t,o){},1012:function(n,t,o){},1014:function(n,t,o){},1016:function(n,t,o){},1018:function(n,t,o){},1020:function(n,t,o){},1022:function(n,t,o){},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){},983:function(n,t,o){"use strict";o.r(t);o(984),o(986),o(988),o(990),o(992),o(994),o(996),o(998),o(1e3),o(1002),o(1004),o(1006),o(1008),o(1010),o(1012),o(1014),o(1016),o(1018),o(1020),o(1022),o(1024),o(1026),o(1028),o(1030),o(1032),o(1034),o(1036),o(1038),o(1040),o(1042),o(1044)},986:function(n,t,o){},988:function(n,t,o){},990:function(n,t,o){},992:function(n,t,o){},994:function(n,t,o){},996:function(n,t,o){},998:function(n,t,o){}});
//# sourceMappingURL=engineStyle.bundle.js.map

@ -1340,8 +1340,6 @@ button {
/* COLORS */
/* Attributes */
#terminal-container {
position: fixed;
margin-left: 10%;
height: 100%;
width: 99%;
overflow: auto;

57
dist/vendor.bundle.js vendored

File diff suppressed because one or more lines are too long

@ -39,26 +39,24 @@
<link rel="shortcut icon" href="favicon.ico"><link href="dist/vendor.css" rel="stylesheet"><link href="dist/engineStyle.css" rel="stylesheet"></head>
<body>
<div id="entire-game-container" style="visibility: hidden">
<div id="mainmenu-container">
<div id="mainmenu-container" style="display: flex; flex-direction: row">
<!-- Main menu -->
<div id="sidebar"></div>
<div id="sidebar" style=""></div>
<!-- Terminal page -->
<div id="terminal-container" style="flex-grow: 1">
<table id="terminal">
<tr id="terminal-input">
<td id="terminal-input-td" tabindex="2">
$
<input type="text" id="terminal-input-text-box" class="terminal-input" tabindex="1" onfocus="this.value = this.value;" autocomplete="off"/>
</td>
</tr>
</table>
</div>
<div id="generic-react-container" style="flex-grow: 1"></div>
</div>
<!-- Terminal page -->
<div id="terminal-container">
<table id="terminal">
<tr id="terminal-input">
<td id="terminal-input-td" tabindex="2">
$
<input type="text" id="terminal-input-text-box" class="terminal-input" tabindex="1" onfocus="this.value = this.value;" autocomplete="off"/>
</td>
</tr>
</table>
</div>
<div class="generic-menupage-container">
<div id="generic-react-container"></div>
</div>
<div id="infiltration-container" class="generic-fullscreen-container"></div>
<div id="mission-container" class="generic-fullscreen-container"></div>

@ -54,7 +54,8 @@ function prestigeAugmentation() {
"Omnitek Incorporated",
"Four Sigma",
"KuaiGong International",
"Fulcrum Secret Technologies"];
"Fulcrum Secret Technologies",
];
let maintainMembership = Player.factions.filter(function (faction) {
return megaCorpFactions.includes(faction);
@ -159,10 +160,6 @@ function prestigeAugmentation() {
initSymbolToStockMap();
}
// Refresh Main Menu (the 'World' menu, specifically)
document.getElementById("world-menu-header").click();
document.getElementById("world-menu-header").click();
// Red Pill
if (augmentationExists(AugmentationNames.TheRedPill) && Augmentations[AugmentationNames.TheRedPill].owned) {
var WorldDaemon = AllServers[SpecialServerIps[SpecialServerNames.WorldDaemon]];

@ -23,6 +23,7 @@ function hackWorldDaemon(currentNodeNumber, flume = false, quick = false) {
<BitverseRoot destroyedBitNodeNum={currentNodeNumber} flume={flume} enter={enterBitNode} quick={quick} />,
container,
);
redPillFlag = true;
}
function giveSourceFile(bitNodeNumber) {

@ -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>
);
}

@ -39,33 +39,31 @@
</head>
<body>
<div id="entire-game-container" style="visibility: hidden">
<div id="mainmenu-container">
<div id="mainmenu-container" style="display: flex; flex-direction: row">
<!-- Main menu -->
<div id="sidebar"></div>
<div id="sidebar" style=""></div>
<!-- Terminal page -->
<div id="terminal-container" style="flex-grow: 1">
<table id="terminal">
<tr id="terminal-input">
<td id="terminal-input-td" tabindex="2">
$
<input
type="text"
id="terminal-input-text-box"
class="terminal-input"
tabindex="1"
onfocus="this.value = this.value;"
autocomplete="off"
/>
</td>
</tr>
</table>
</div>
<div id="generic-react-container" style="flex-grow: 1"></div>
</div>
<!-- Terminal page -->
<div id="terminal-container">
<table id="terminal">
<tr id="terminal-input">
<td id="terminal-input-td" tabindex="2">
$
<input
type="text"
id="terminal-input-text-box"
class="terminal-input"
tabindex="1"
onfocus="this.value = this.value;"
autocomplete="off"
/>
</td>
</tr>
</table>
</div>
<div class="generic-menupage-container">
<div id="generic-react-container"></div>
</div>
<div id="infiltration-container" class="generic-fullscreen-container"></div>
<div id="mission-container" class="generic-fullscreen-container"></div>

@ -5,17 +5,40 @@ export const colors = {
primarylight: "#0f0",
primary: "#0c0",
primarydark: "#090",
errorlight: "#f00",
error: "#c00",
errordark: "#900",
secondarylight: "#AAA",
secondary: "#888",
secondarydark: "#666",
well: "#222",
white: "#fff",
black: "#000",
};
export const theme = createMuiTheme({
palette: {
primary: {
light: colors.primarylight,
main: colors.primary,
dark: colors.primarydark,
},
secondary: {
light: colors.secondarylight,
main: colors.secondary,
dark: colors.secondarydark,
},
error: {
light: colors.errorlight,
main: colors.error,
dark: colors.errordark,
},
},
typography: {
fontFamily: "monospace",
button: {
textTransform: "none",
},
@ -67,7 +90,7 @@ export const theme = createMuiTheme({
margin: "5px",
padding: "3px 5px",
"&:hover": {
backgroundColor: "#000",
backgroundColor: colors.black,
},
borderRadius: 0,
@ -95,7 +118,7 @@ export const theme = createMuiTheme({
},
MuiAccordionDetails: {
root: {
backgroundColor: "#000",
backgroundColor: colors.black,
},
},
MuiIconButton: {
@ -112,6 +135,29 @@ export const theme = createMuiTheme({
border: "2px solid white",
},
},
MuiSvgIcon: {
root: {
color: colors.primary,
},
},
MuiDrawer: {
paper: {
"&::-webkit-scrollbar": {
// webkit
display: "none",
},
scrollbarWidth: "none", // firefox
backgroundColor: colors.black,
},
paperAnchorDockedLeft: {
borderRight: "1px solid #444",
},
},
MuiDivider: {
root: {
backgroundColor: "#444",
},
},
},
});