Merge pull request #1243 from danielyxie/dev

New sidebar and fix BN6 end screen

css/popupboxes.scss

@@ -6,7 +6,7 @@
 .popup-box-container {
   display: none; /* Initially hidden */
   position: fixed; /* Stay in place */
-  z-index: 10; /* Sit on top */
+  z-index: 1300; /* Sit on top */
   left: 0;
   top: 0;
   align-items: center;

css/terminal.scss

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

dist/engineStyle.bundle.js

@@ -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([1022,0]),o()}({1022:function(n,t,o){"use strict";o.r(t);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),o(1083)},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){},1083:function(n,t,o){}});
 //# sourceMappingURL=engineStyle.bundle.js.map

dist/engineStyle.css

@@ -1340,8 +1340,6 @@ button {
 /* COLORS */
 /* Attributes */
 #terminal-container {
-  position: fixed;
-  margin-left: 10%;
   height: 100%;
   width: 99%;
   overflow: auto;
@@ -2368,7 +2366,7 @@ input[type="checkbox"] {
   /* Initially hidden */
   position: fixed;
   /* Stay in place */
-  z-index: 10;
+  z-index: 1300;
   /* Sit on top */
   left: 0;
   top: 0;

index.html

@@ -39,13 +39,11 @@
   <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>
-      </div>
-
         <!-- Terminal page -->
-      <div id="terminal-container">
+        <div id="terminal-container" style="flex-grow: 1">
           <table id="terminal">
             <tr id="terminal-input">
               <td id="terminal-input-td" tabindex="2">
@@ -56,9 +54,9 @@
           </table>
         </div>
 
-      <div class="generic-menupage-container">
+        <div id="generic-react-container" style="flex-grow: 1"></div>
-        <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>
 

src/Augmentation/ui/SourceFileMinus1.tsx

@@ -7,7 +7,7 @@ import * as React from "react";
 import { Player } from "../../Player";
 import { Exploit, ExploitName } from "../../Exploits/Exploit";
 
-import { BBAccordion } from "../../ui/React/Accordion";
+import { BBAccordion } from "../../ui/React/BBAccordion";
 
 export function SourceFileMinus1(): React.ReactElement {
   const exploits = Player.exploits;

src/DevMenu/ui/Adjuster.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import AddIcon from "@material-ui/icons/Add";
+import RemoveIcon from "@material-ui/icons/Remove";
+import IconButton from "@material-ui/core/IconButton";
+import ExposureZeroIcon from "@material-ui/icons/ExposureZero";
+import DoubleArrowIcon from "@material-ui/icons/DoubleArrow";
+import TextField from "@material-ui/core/TextField";
+import Tooltip from "@material-ui/core/Tooltip";
+
+interface IProps {
+  label: string;
+  placeholder: string;
+  add: (x: number) => void;
+  subtract: (x: number) => void;
+  tons: () => void;
+  reset: () => void;
+}
+
+export function Adjuster(props: IProps): React.ReactElement {
+  const [value, setValue] = useState<number | string>("");
+
+  function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    if (event.target.value === "") setValue("");
+    else setValue(parseFloat(event.target.value));
+  }
+
+  const { label, placeholder, add, subtract, reset, tons } = props;
+  return (
+    <>
+      <TextField
+        label={label}
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        type="number"
+        InputProps={{
+          startAdornment: (
+            <>
+              <Tooltip title="Add a lot">
+                <IconButton color="primary" onClick={tons}>
+                  <DoubleArrowIcon style={{ transform: "rotate(-90deg)" }} />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="Add">
+                <IconButton color="primary" onClick={() => add(typeof value !== "string" ? value : 0)}>
+                  <AddIcon />
+                </IconButton>
+              </Tooltip>
+            </>
+          ),
+          endAdornment: (
+            <>
+              <Tooltip title="Remove">
+                <IconButton color="primary" onClick={() => subtract(typeof value !== "string" ? value : 0)}>
+                  <RemoveIcon />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title="Reset">
+                <IconButton color="primary" onClick={reset}>
+                  <ExposureZeroIcon />
+                </IconButton>
+              </Tooltip>
+            </>
+          ),
+        }}
+      />
+    </>
+  );
+}

src/DevMenu/ui/Augmentations.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import AccordionDetails from "@material-ui/core/AccordionDetails";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+
+import Select from "@material-ui/core/Select";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
+import MenuItem from "@material-ui/core/MenuItem";
+import IconButton from "@material-ui/core/IconButton";
+import ReplyAllIcon from "@material-ui/icons/ReplyAll";
+import ReplyIcon from "@material-ui/icons/Reply";
+
+interface IProps {
+  player: IPlayer;
+}
+
+export function Augmentations(props: IProps): React.ReactElement {
+  const [augmentation, setAugmentation] = useState("Augmented Targeting I");
+
+  function setAugmentationDropdown(event: React.ChangeEvent<{ value: unknown }>): void {
+    setAugmentation(event.target.value as string);
+  }
+  function queueAug(): void {
+    props.player.queueAugmentation(augmentation);
+  }
+
+  function queueAllAugs(): void {
+    for (const i in AugmentationNames) {
+      const augName = AugmentationNames[i];
+      props.player.queueAugmentation(augName);
+    }
+  }
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <h2>Augmentations</h2>
+      </AccordionSummary>
+      <AccordionDetails>
+        <table>
+          <tbody>
+            <tr>
+              <td>
+                <span className="text">Aug:</span>
+              </td>
+              <td>
+                <Select
+                  id="dev-augs-dropdown"
+                  className="dropdown"
+                  onChange={setAugmentationDropdown}
+                  value={augmentation}
+                  startAdornment={
+                    <>
+                      <IconButton color="primary" onClick={queueAllAugs}>
+                        <ReplyAllIcon />
+                      </IconButton>
+                      <IconButton color="primary" onClick={queueAug}>
+                        <ReplyIcon />
+                      </IconButton>
+                    </>
+                  }
+                >
+                  {Object.values(AugmentationNames).map((aug) => (
+                    <MenuItem key={aug} value={aug}>
+                      {aug}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </AccordionDetails>
+    </Accordion>
+  );
+}

src/DevMenu/ui/Bladeburner.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import AccordionDetails from "@material-ui/core/AccordionDetails";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+
+import { Adjuster } from "./Adjuster";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+
+const bigNumber = 1e27;
+
+interface IProps {
+  player: IPlayer;
+}
+
+export function Bladeburner(props: IProps): React.ReactElement {
+  function modifyBladeburnerRank(modify: number): (x: number) => void {
+    return function (rank: number): void {
+      if (props.player.bladeburner) {
+        props.player.bladeburner.changeRank(props.player, rank * modify);
+      }
+    };
+  }
+
+  function resetBladeburnerRank(): void {
+    props.player.bladeburner.rank = 0;
+    props.player.bladeburner.maxRank = 0;
+  }
+
+  function addTonsBladeburnerRank(): void {
+    if (props.player.bladeburner) {
+      props.player.bladeburner.changeRank(props.player, bigNumber);
+    }
+  }
+
+  function modifyBladeburnerCycles(modify: number): (x: number) => void {
+    return function (cycles: number): void {
+      if (props.player.bladeburner) {
+        props.player.bladeburner.storedCycles += cycles * modify;
+      }
+    };
+  }
+
+  function resetBladeburnerCycles(): void {
+    if (props.player.bladeburner) {
+      props.player.bladeburner.storedCycles = 0;
+    }
+  }
+
+  function addTonsBladeburnerCycles(): void {
+    if (props.player.bladeburner) {
+      props.player.bladeburner.storedCycles += bigNumber;
+    }
+  }
+
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <h2>Bladeburner</h2>
+      </AccordionSummary>
+      <AccordionDetails>
+        <table>
+          <tbody>
+            <tr>
+              <td>
+                <span className="text">Rank:</span>
+              </td>
+              <td>
+                <Adjuster
+                  label="rank"
+                  placeholder="amt"
+                  tons={addTonsBladeburnerRank}
+                  add={modifyBladeburnerRank(1)}
+                  subtract={modifyBladeburnerRank(-1)}
+                  reset={resetBladeburnerRank}
+                />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className="text">Cycles:</span>
+              </td>
+              <td>
+                <Adjuster
+                  label="cycles"
+                  placeholder="amt"
+                  tons={addTonsBladeburnerCycles}
+                  add={modifyBladeburnerCycles(1)}
+                  subtract={modifyBladeburnerCycles(-1)}
+                  reset={resetBladeburnerCycles}
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </AccordionDetails>
+    </Accordion>
+  );
+}

src/DevMenu/ui/CodingContracts.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import AccordionDetails from "@material-ui/core/AccordionDetails";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+
+import Button from "@material-ui/core/Button";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import { generateContract, generateRandomContract, generateRandomContractOnHome } from "../../CodingContractGenerator";
+import { CodingContractTypes } from "../../CodingContracts";
+
+export function CodingContracts(): React.ReactElement {
+  const [codingcontract, setCodingcontract] = useState("Find Largest Prime Factor");
+  function setCodingcontractDropdown(event: React.ChangeEvent<{ value: unknown }>): void {
+    setCodingcontract(event.target.value as string);
+  }
+
+  function specificContract(): void {
+    generateContract({
+      problemType: codingcontract,
+      server: "home",
+    });
+  }
+
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <h2>Coding Contracts</h2>
+      </AccordionSummary>
+      <AccordionDetails>
+        <table>
+          <tbody>
+            <tr>
+              <td>
+                <Button onClick={generateRandomContract}>Generate Random Contract</Button>
+                <Button onClick={generateRandomContractOnHome}>Generate Random Contract on Home Comp</Button>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <Select
+                  id="contract-types-dropdown"
+                  className="dropdown"
+                  onChange={setCodingcontractDropdown}
+                  value={codingcontract}
+                >
+                  {Object.values(CodingContractTypes).map((cc) => (
+                    <MenuItem key={cc.name} value={cc.name}>
+                      {cc.name}
+                    </MenuItem>
+                  ))}
+                </Select>
+                <Button onClick={specificContract}>Generate Specified Contract Type on Home Comp</Button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </AccordionDetails>
+    </Accordion>
+  );
+}

src/DevMenu/ui/Companies.tsx

@@ -0,0 +1,146 @@
+import React, { useState } from "react";
+
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import AccordionDetails from "@material-ui/core/AccordionDetails";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+
+import Button from "@material-ui/core/Button";
+import Select from "@material-ui/core/Select";
+import { Companies as AllCompanies } from "../../Company/Companies";
+import MenuItem from "@material-ui/core/MenuItem";
+import { Adjuster } from "./Adjuster";
+
+const bigNumber = 1e12;
+
+export function Companies(): React.ReactElement {
+  const [company, setCompany] = useState("ECorp");
+  function setCompanyDropdown(event: React.ChangeEvent<{ value: unknown }>): void {
+    setCompany(event.target.value as string);
+  }
+  function resetCompanyRep(): void {
+    AllCompanies[company].playerReputation = 0;
+  }
+
+  function modifyCompanyRep(modifier: number): (x: number) => void {
+    return function (reputation: number): void {
+      const c = AllCompanies[company];
+      if (c != null && !isNaN(reputation)) {
+        c.playerReputation += reputation * modifier;
+      }
+    };
+  }
+
+  function modifyCompanyFavor(modifier: number): (x: number) => void {
+    return function (favor: number): void {
+      const c = AllCompanies[company];
+      if (c != null && !isNaN(favor)) {
+        c.favor += favor * modifier;
+      }
+    };
+  }
+
+  function resetCompanyFavor(): void {
+    AllCompanies[company].favor = 0;
+  }
+
+  function tonsOfRepCompanies(): void {
+    for (const c in AllCompanies) {
+      AllCompanies[c].playerReputation = bigNumber;
+    }
+  }
+
+  function resetAllRepCompanies(): void {
+    for (const c in AllCompanies) {
+      AllCompanies[c].playerReputation = 0;
+    }
+  }
+
+  function tonsOfFavorCompanies(): void {
+    for (const c in AllCompanies) {
+      AllCompanies[c].favor = bigNumber;
+    }
+  }
+
+  function resetAllFavorCompanies(): void {
+    for (const c in AllCompanies) {
+      AllCompanies[c].favor = 0;
+    }
+  }
+
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <h2>Companies</h2>
+      </AccordionSummary>
+      <AccordionDetails>
+        <table>
+          <tbody>
+            <tr>
+              <td>
+                <span className="text">Company:</span>
+              </td>
+              <td colSpan={3}>
+                <Select id="dev-companies-dropdown" className="dropdown" onChange={setCompanyDropdown} value={company}>
+                  {Object.values(AllCompanies).map((company) => (
+                    <MenuItem key={company.name} value={company.name}>
+                      {company.name}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className="text">Reputation:</span>
+              </td>
+              <td>
+                <Adjuster
+                  label="reputation"
+                  placeholder="amt"
+                  tons={() => modifyCompanyRep(1)(bigNumber)}
+                  add={modifyCompanyRep(1)}
+                  subtract={modifyCompanyRep(-1)}
+                  reset={resetCompanyRep}
+                />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className="text">Favor:</span>
+              </td>
+              <td>
+                <Adjuster
+                  label="favor"
+                  placeholder="amt"
+                  tons={() => modifyCompanyFavor(1)(2000)}
+                  add={modifyCompanyFavor(1)}
+                  subtract={modifyCompanyFavor(-1)}
+                  reset={resetCompanyFavor}
+                />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className="text">All Reputation:</span>
+              </td>
+              <td>
+                <Button onClick={tonsOfRepCompanies}>Tons</Button>
+                <Button onClick={resetAllRepCompanies}>Reset</Button>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className="text">All Favor:</span>
+              </td>
+              <td>
+                <Button onClick={tonsOfFavorCompanies}>Tons</Button>
+                <Button onClick={resetAllFavorCompanies}>Reset</Button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </AccordionDetails>
+    </Accordion>
+  );
+}

src/DevMenu/ui/Corporation.tsx

@@ -0,0 +1,113 @@
+import React from "react";
+
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import AccordionDetails from "@material-ui/core/AccordionDetails";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+
+import Button from "@material-ui/core/Button";
+import { Adjuster } from "./Adjuster";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+
+const bigNumber = 1e27;
+
+interface IProps {
+  player: IPlayer;
+}
+
+export function Corporation(props: IProps): React.ReactElement {
+  function addTonsCorporationFunds(): void {
+    if (props.player.corporation) {
+      props.player.corporation.funds = props.player.corporation.funds.plus(1e99);
+    }
+  }
+
+  function resetCorporationFunds(): void {
+    if (props.player.corporation) {
+      props.player.corporation.funds = props.player.corporation.funds.minus(props.player.corporation.funds);
+    }
+  }
+
+  function addTonsCorporationCycles(): void {
+    if (props.player.corporation) {
+      props.player.corporation.storedCycles = bigNumber;
+    }
+  }
+
+  function modifyCorporationCycles(modify: number): (x: number) => void {
+    return function (cycles: number): void {
+      if (props.player.corporation) {
+        props.player.corporation.storedCycles += cycles * modify;
+      }
+    };
+  }
+
+  function resetCorporationCycles(): void {
+    if (props.player.corporation) {
+      props.player.corporation.storedCycles = 0;
+    }
+  }
+
+  function finishCorporationProducts(): void {
+    if (!props.player.corporation) return;
+    props.player.corporation.divisions.forEach((div) => {
+      Object.keys(div.products).forEach((prod) => {
+        const product = div.products[prod];
+        if (product === undefined) throw new Error("Impossible product undefined");
+        product.prog = 99.9;
+      });
+    });
+  }
+
+  function addCorporationResearch(): void {
+    if (!props.player.corporation) return;
+    props.player.corporation.divisions.forEach((div) => {
+      div.sciResearch.qty += 1e10;
+    });
+  }
+
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <h2>Corporation</h2>
+      </AccordionSummary>
+      <AccordionDetails>
+        <table>
+          <tbody>
+            <tr>
+              <td>
+                <Button onClick={addTonsCorporationFunds}>Tons of funds</Button>
+                <Button onClick={resetCorporationFunds}>Reset funds</Button>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className="text">Cycles:</span>
+              </td>
+              <td>
+                <Adjuster
+                  label="cycles"
+                  placeholder="amt"
+                  tons={addTonsCorporationCycles}
+                  add={modifyCorporationCycles(1)}
+                  subtract={modifyCorporationCycles(-1)}
+                  reset={resetCorporationCycles}
+                />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <Button onClick={finishCorporationProducts}>Finish products</Button>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <Button onClick={addCorporationResearch}>Tons of research</Button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </AccordionDetails>
+    </Accordion>
+  );
+}

src/DevMenu/ui/Factions.tsx

@@ -0,0 +1,193 @@
+import React, { useState } from "react";
+
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import AccordionDetails from "@material-ui/core/AccordionDetails";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+
+import Button from "@material-ui/core/Button";
+import Select from "@material-ui/core/Select";
+import { Adjuster } from "./Adjuster";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+import { Factions as AllFaction } from "../../Faction/Factions";
+import FormControl from "@material-ui/core/FormControl";
+import MenuItem from "@material-ui/core/MenuItem";
+import IconButton from "@material-ui/core/IconButton";
+import ReplyAllIcon from "@material-ui/icons/ReplyAll";
+import ReplyIcon from "@material-ui/icons/Reply";
+import InputLabel from "@material-ui/core/InputLabel";
+
+const bigNumber = 1e12;
+
+interface IProps {
+  player: IPlayer;
+}
+
+export function Factions(props: IProps): React.ReactElement {
+  const [faction, setFaction] = useState("Illuminati");
+
+  function setFactionDropdown(event: React.ChangeEvent<{ value: unknown }>): void {
+    setFaction(event.target.value as string);
+  }
+
+  function receiveInvite(): void {
+    props.player.receiveInvite(faction);
+  }
+
+  function receiveAllInvites(): void {
+    for (const i in AllFaction) {
+      props.player.receiveInvite(AllFaction[i].name);
+    }
+  }
+
+  function modifyFactionRep(modifier: number): (x: number) => void {
+    return function (reputation: number): void {
+      const fac = AllFaction[faction];
+      if (fac != null && !isNaN(reputation)) {
+        fac.playerReputation += reputation * modifier;
+      }
+    };
+  }
+
+  function resetFactionRep(): void {
+    const fac = AllFaction[faction];
+    if (fac != null) {
+      fac.playerReputation = 0;
+    }
+  }
+
+  function modifyFactionFavor(modifier: number): (x: number) => void {
+    return function (favor: number): void {
+      const fac = AllFaction[faction];
+      if (fac != null && !isNaN(favor)) {
+        fac.favor += favor * modifier;
+      }
+    };
+  }
+
+  function resetFactionFavor(): void {
+    const fac = AllFaction[faction];
+    if (fac != null) {
+      fac.favor = 0;
+    }
+  }
+
+  function tonsOfRep(): void {
+    for (const i in AllFaction) {
+      AllFaction[i].playerReputation = bigNumber;
+    }
+  }
+
+  function resetAllRep(): void {
+    for (const i in AllFaction) {
+      AllFaction[i].playerReputation = 0;
+    }
+  }
+
+  function tonsOfFactionFavor(): void {
+    for (const i in AllFaction) {
+      AllFaction[i].favor = bigNumber;
+    }
+  }
+
+  function resetAllFactionFavor(): void {
+    for (const i in AllFaction) {
+      AllFaction[i].favor = 0;
+    }
+  }
+
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <h2>Factions</h2>
+      </AccordionSummary>
+      <AccordionDetails>
+        <table>
+          <tbody>
+            <tr>
+              <td>
+                <span className="text">Faction:</span>
+              </td>
+              <td>
+                <FormControl>
+                  <InputLabel id="factions-select">Faction</InputLabel>
+                  <Select
+                    labelId="factions-select"
+                    id="factions-dropdown"
+                    className="dropdown exp-input"
+                    onChange={setFactionDropdown}
+                    value={faction}
+                    startAdornment={
+                      <>
+                        <IconButton color="primary" onClick={receiveAllInvites}>
+                          <ReplyAllIcon />
+                        </IconButton>
+                        <IconButton color="primary" onClick={receiveInvite}>
+                          <ReplyIcon />
+                        </IconButton>
+                      </>
+                    }
+                  >
+                    {Object.values(AllFaction).map((faction) => (
+                      <MenuItem key={faction.name} value={faction.name}>
+                        {faction.name}
+                      </MenuItem>
+                    ))}
+                  </Select>
+                </FormControl>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className="text">Reputation:</span>
+              </td>
+              <td>
+                <Adjuster
+                  label="reputation"
+                  placeholder="amt"
+                  tons={() => modifyFactionRep(1)(bigNumber)}
+                  add={modifyFactionRep(1)}
+                  subtract={modifyFactionRep(-1)}
+                  reset={resetFactionRep}
+                />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className="text">Favor:</span>
+              </td>
+              <td>
+                <Adjuster
+                  label="favor"
+                  placeholder="amt"
+                  tons={() => modifyFactionFavor(1)(2000)}
+                  add={modifyFactionFavor(1)}
+                  subtract={modifyFactionFavor(-1)}
+                  reset={resetFactionFavor}
+                />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className="text">All Reputation:</span>
+              </td>
+              <td>
+                <Button onClick={tonsOfRep}>Tons</Button>
+                <Button onClick={resetAllRep}>Reset</Button>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className="text">All Favor:</span>
+              </td>
+              <td>
+                <Button onClick={tonsOfFactionFavor}>Tons</Button>
+                <Button onClick={resetAllFactionFavor}>Reset</Button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </AccordionDetails>
+    </Accordion>
+  );
+}

src/DevMenu/ui/Gang.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import AccordionDetails from "@material-ui/core/AccordionDetails";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+
+import { Adjuster } from "./Adjuster";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+
+const bigNumber = 1e27;
+
+interface IProps {
+  player: IPlayer;
+}
+
+export function Gang(props: IProps): React.ReactElement {
+  function addTonsGangCycles(): void {
+    if (props.player.gang) {
+      props.player.gang.storedCycles = bigNumber;
+    }
+  }
+
+  function modifyGangCycles(modify: number): (x: number) => void {
+    return function (cycles: number): void {
+      if (props.player.gang) {
+        props.player.gang.storedCycles += cycles * modify;
+      }
+    };
+  }
+
+  function resetGangCycles(): void {
+    if (props.player.gang) {
+      props.player.gang.storedCycles = 0;
+    }
+  }
+
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <h2>Gang</h2>
+      </AccordionSummary>
+      <AccordionDetails>
+        <table>
+          <tbody>
+            <tr>
+              <td>
+                <span className="text">Cycles:</span>
+              </td>
+              <td>
+                <Adjuster
+                  label="cycles"
+                  placeholder="amt"
+                  tons={addTonsGangCycles}
+                  add={modifyGangCycles(1)}
+                  subtract={modifyGangCycles(-1)}
+                  reset={resetGangCycles}
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </AccordionDetails>
+    </Accordion>
+  );
+}

src/DevMenu/ui/General.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import AccordionDetails from "@material-ui/core/AccordionDetails";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+
+import Button from "@material-ui/core/Button";
+import { Money } from "../../ui/React/Money";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+import { hackWorldDaemon } from "../../RedPill";
+
+interface IProps {
+  player: IPlayer;
+}
+
+export function General(props: IProps): React.ReactElement {
+  function addMoney(n: number) {
+    return function () {
+      props.player.gainMoney(n);
+    };
+  }
+
+  function upgradeRam(): void {
+    props.player.getHomeComputer().maxRam *= 2;
+  }
+
+  function quickB1tFlum3(): void {
+    hackWorldDaemon(props.player.bitNodeN, true, true);
+  }
+
+  function b1tflum3(): void {
+    hackWorldDaemon(props.player.bitNodeN, true);
+  }
+
+  function quickHackW0r1dD43m0n(): void {
+    hackWorldDaemon(props.player.bitNodeN, false, true);
+  }
+
+  function hackW0r1dD43m0n(): void {
+    hackWorldDaemon(props.player.bitNodeN);
+  }
+
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <h2>General</h2>
+      </AccordionSummary>
+      <AccordionDetails>
+        <div>
+          <Button onClick={addMoney(1e6)}>
+            <pre>
+              + <Money money={1e6} />
+            </pre>
+          </Button>
+          <Button onClick={addMoney(1e9)}>
+            <pre>
+              + <Money money={1e9} />
+            </pre>
+          </Button>
+          <Button onClick={addMoney(1e12)}>
+            <pre>
+              + <Money money={1e12} />
+            </pre>
+          </Button>
+          <Button onClick={addMoney(1e15)}>
+            <pre>
+              + <Money money={1000e12} />
+            </pre>
+          </Button>
+          <Button onClick={addMoney(Infinity)}>
+            <pre>
+              + <Money money={Infinity} />
+            </pre>
+          </Button>
+          <Button onClick={upgradeRam}>+ RAM</Button>
+        </div>
+        <div>
+          <Button onClick={quickB1tFlum3}>Quick b1t_flum3.exe</Button>
+          <Button onClick={b1tflum3}>Run b1t_flum3.exe</Button>
+          <Button onClick={quickHackW0r1dD43m0n}>Quick w0rld_d34m0n</Button>
+          <Button onClick={hackW0r1dD43m0n}>Hack w0rld_d34m0n</Button>
+        </div>
+      </AccordionDetails>
+    </Accordion>
+  );
+}

src/DevMenu/ui/Programs.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import AccordionDetails from "@material-ui/core/AccordionDetails";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+
+import Button from "@material-ui/core/Button";
+import Select from "@material-ui/core/Select";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+import { Programs as AllPrograms } from "../../Programs/Programs";
+import MenuItem from "@material-ui/core/MenuItem";
+
+interface IProps {
+  player: IPlayer;
+}
+
+export function Programs(props: IProps): React.ReactElement {
+  const [program, setProgram] = useState("NUKE.exe");
+  function setProgramDropdown(event: React.ChangeEvent<{ value: unknown }>): void {
+    setProgram(event.target.value as string);
+  }
+  function addProgram(): void {
+    if (!props.player.hasProgram(program)) {
+      props.player.getHomeComputer().programs.push(program);
+    }
+  }
+
+  function addAllPrograms(): void {
+    for (const i in AllPrograms) {
+      if (!props.player.hasProgram(AllPrograms[i].name)) {
+        props.player.getHomeComputer().programs.push(AllPrograms[i].name);
+      }
+    }
+  }
+
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <h2>Programs</h2>
+      </AccordionSummary>
+      <AccordionDetails>
+        <table>
+          <tbody>
+            <tr>
+              <td>
+                <span className="text">Program:</span>
+              </td>
+              <td>
+                <Select onChange={setProgramDropdown} value={program}>
+                  {Object.values(AllPrograms).map((program) => (
+                    <MenuItem key={program.name} value={program.name}>
+                      {program.name}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className="text">Add:</span>
+              </td>
+              <td>
+                <Button onClick={addProgram}>One</Button>
+                <Button onClick={addAllPrograms}>All</Button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </AccordionDetails>
+    </Accordion>
+  );
+}

src/DevMenu/ui/Servers.tsx

@@ -0,0 +1,137 @@
+import React, { useState } from "react";
+
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import AccordionDetails from "@material-ui/core/AccordionDetails";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+
+import Button from "@material-ui/core/Button";
+import Select from "@material-ui/core/Select";
+import { AllServers } from "../../Server/AllServers";
+import { HacknetServer } from "../../Hacknet/HacknetServer";
+import { GetServerByHostname } from "../../Server/ServerHelpers";
+import MenuItem from "@material-ui/core/MenuItem";
+
+export function Servers(): React.ReactElement {
+  const [server, setServer] = useState("home");
+  function setServerDropdown(event: React.ChangeEvent<{ value: unknown }>): void {
+    setServer(event.target.value as string);
+  }
+  function rootServer(): void {
+    const s = GetServerByHostname(server);
+    if (s === null) return;
+    if (s instanceof HacknetServer) return;
+    s.hasAdminRights = true;
+    s.sshPortOpen = true;
+    s.ftpPortOpen = true;
+    s.smtpPortOpen = true;
+    s.httpPortOpen = true;
+    s.sqlPortOpen = true;
+    s.openPortCount = 5;
+  }
+
+  function rootAllServers(): void {
+    for (const i in AllServers) {
+      const s = AllServers[i];
+      if (s instanceof HacknetServer) return;
+      s.hasAdminRights = true;
+      s.sshPortOpen = true;
+      s.ftpPortOpen = true;
+      s.smtpPortOpen = true;
+      s.httpPortOpen = true;
+      s.sqlPortOpen = true;
+      s.openPortCount = 5;
+    }
+  }
+
+  function minSecurity(): void {
+    const s = GetServerByHostname(server);
+    if (s === null) return;
+    if (s instanceof HacknetServer) return;
+    s.hackDifficulty = s.minDifficulty;
+  }
+
+  function minAllSecurity(): void {
+    for (const i in AllServers) {
+      const server = AllServers[i];
+      if (server instanceof HacknetServer) continue;
+      server.hackDifficulty = server.minDifficulty;
+    }
+  }
+
+  function maxMoney(): void {
+    const s = GetServerByHostname(server);
+    if (s === null) return;
+    if (s instanceof HacknetServer) return;
+    s.moneyAvailable = s.moneyMax;
+  }
+
+  function maxAllMoney(): void {
+    for (const i in AllServers) {
+      const server = AllServers[i];
+      if (server instanceof HacknetServer) continue;
+      server.moneyAvailable = server.moneyMax;
+    }
+  }
+
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <h2>Servers</h2>
+      </AccordionSummary>
+      <AccordionDetails>
+        <table>
+          <tbody>
+            <tr>
+              <td>
+                <span className="text">Server:</span>
+              </td>
+              <td colSpan={2}>
+                <Select id="dev-servers-dropdown" className="dropdown" onChange={setServerDropdown} value={server}>
+                  {Object.values(AllServers).map((server) => (
+                    <MenuItem key={server.hostname} value={server.hostname}>
+                      {server.hostname}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className="text">Root:</span>
+              </td>
+              <td>
+                <Button onClick={rootServer}>Root one</Button>
+              </td>
+              <td>
+                <Button onClick={rootAllServers}>Root all</Button>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className="text">Security:</span>
+              </td>
+              <td>
+                <Button onClick={minSecurity}>Min one</Button>
+              </td>
+              <td>
+                <Button onClick={minAllSecurity}>Min all</Button>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className="text">Money:</span>
+              </td>
+              <td>
+                <Button onClick={maxMoney}>Max one</Button>
+              </td>
+              <td>
+                <Button onClick={maxAllMoney}>Max all</Button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </AccordionDetails>
+    </Accordion>
+  );
+}

src/DevMenu/ui/Sleeves.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import AccordionDetails from "@material-ui/core/AccordionDetails";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+
+import Button from "@material-ui/core/Button";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+
+interface IProps {
+  player: IPlayer;
+}
+
+export function Sleeves(props: IProps): React.ReactElement {
+  function sleeveMaxAllShock(): void {
+    for (let i = 0; i < props.player.sleeves.length; ++i) {
+      props.player.sleeves[i].shock = 0;
+    }
+  }
+
+  function sleeveClearAllShock(): void {
+    for (let i = 0; i < props.player.sleeves.length; ++i) {
+      props.player.sleeves[i].shock = 100;
+    }
+  }
+
+  function sleeveSyncMaxAll(): void {
+    for (let i = 0; i < props.player.sleeves.length; ++i) {
+      props.player.sleeves[i].sync = 100;
+    }
+  }
+
+  function sleeveSyncClearAll(): void {
+    for (let i = 0; i < props.player.sleeves.length; ++i) {
+      props.player.sleeves[i].sync = 0;
+    }
+  }
+
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <h2>Sleeves</h2>
+      </AccordionSummary>
+      <AccordionDetails>
+        <table>
+          <tbody>
+            <tr>
+              <td>
+                <span className="text">Shock:</span>
+              </td>
+              <td>
+                <Button onClick={sleeveMaxAllShock}>Max all</Button>
+              </td>
+              <td>
+                <Button onClick={sleeveClearAllShock}>Clear all</Button>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className="text">Sync:</span>
+              </td>
+              <td>
+                <Button onClick={sleeveSyncMaxAll}>Max all</Button>
+              </td>
+              <td>
+                <Button onClick={sleeveSyncClearAll}>Clear all</Button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </AccordionDetails>
+    </Accordion>
+  );
+}

src/DevMenu/ui/SourceFiles.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import AccordionDetails from "@material-ui/core/AccordionDetails";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+
+import Button from "@material-ui/core/Button";
+import { PlayerOwnedSourceFile } from "../../SourceFile/PlayerOwnedSourceFile";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+import ButtonGroup from "@material-ui/core/ButtonGroup";
+
+// Update as additional BitNodes get implemented
+const validSFN = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+
+interface IProps {
+  player: IPlayer;
+}
+
+export function SourceFiles(props: IProps): React.ReactElement {
+  function setSF(sfN: number, sfLvl: number) {
+    return function () {
+      if (sfLvl === 0) {
+        props.player.sourceFiles = props.player.sourceFiles.filter((sf) => sf.n !== sfN);
+        return;
+      }
+
+      if (!props.player.sourceFiles.some((sf) => sf.n === sfN)) {
+        props.player.sourceFiles.push(new PlayerOwnedSourceFile(sfN, sfLvl));
+        return;
+      }
+
+      for (let i = 0; i < props.player.sourceFiles.length; i++) {
+        if (props.player.sourceFiles[i].n === sfN) {
+          props.player.sourceFiles[i].lvl = sfLvl;
+        }
+      }
+    };
+  }
+
+  function setAllSF(sfLvl: number) {
+    return () => {
+      for (let i = 0; i < validSFN.length; i++) {
+        setSF(validSFN[i], sfLvl)();
+      }
+    };
+  }
+
+  function clearExploits(): void {
+    props.player.exploits = [];
+  }
+
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <h2>Source-Files</h2>
+      </AccordionSummary>
+      <AccordionDetails>
+        <table>
+          <tbody>
+            <tr>
+              <td>
+                <span className="text">Exploits:</span>
+              </td>
+              <td>
+                <Button onClick={clearExploits}>Clear</Button>
+              </td>
+            </tr>
+            <tr key={"sf-all"}>
+              <td>
+                <span className="text">All:</span>
+              </td>
+              <td>
+                <ButtonGroup>
+                  <Button onClick={setAllSF(0)}>0</Button>
+                  <Button onClick={setAllSF(1)}>1</Button>
+                  <Button onClick={setAllSF(2)}>2</Button>
+                  <Button onClick={setAllSF(3)}>3</Button>
+                </ButtonGroup>
+              </td>
+            </tr>
+            {validSFN.map((i) => (
+              <tr key={"sf-" + i}>
+                <td>
+                  <span className="text">SF-{i}:</span>
+                </td>
+                <td>
+                  <ButtonGroup>
+                    <Button onClick={setSF(i, 0)}>0</Button>
+                    <Button onClick={setSF(i, 1)}>1</Button>
+                    <Button onClick={setSF(i, 2)}>2</Button>
+                    <Button onClick={setSF(i, 3)}>3</Button>
+                  </ButtonGroup>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </AccordionDetails>
+    </Accordion>
+  );
+}

src/DevMenu/ui/Stats.tsx

@@ -0,0 +1,286 @@
+import React from "react";
+
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import AccordionDetails from "@material-ui/core/AccordionDetails";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+
+import Button from "@material-ui/core/Button";
+import { Adjuster } from "./Adjuster";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+
+const bigNumber = 1e27;
+
+interface IProps {
+  player: IPlayer;
+}
+
+export function Stats(props: IProps): React.ReactElement {
+  function modifyExp(stat: string, modifier: number) {
+    return function (exp: number) {
+      switch (stat) {
+        case "hacking":
+          if (exp) {
+            props.player.gainHackingExp(exp * modifier);
+          }
+          break;
+        case "strength":
+          if (exp) {
+            props.player.gainStrengthExp(exp * modifier);
+          }
+          break;
+        case "defense":
+          if (exp) {
+            props.player.gainDefenseExp(exp * modifier);
+          }
+          break;
+        case "dexterity":
+          if (exp) {
+            props.player.gainDexterityExp(exp * modifier);
+          }
+          break;
+        case "agility":
+          if (exp) {
+            props.player.gainAgilityExp(exp * modifier);
+          }
+          break;
+        case "charisma":
+          if (exp) {
+            props.player.gainCharismaExp(exp * modifier);
+          }
+          break;
+        case "intelligence":
+          if (exp) {
+            props.player.gainIntelligenceExp(exp * modifier);
+          }
+          break;
+      }
+      props.player.updateSkillLevels();
+    };
+  }
+
+  function modifyKarma(modifier: number) {
+    return function (amt: number) {
+      props.player.karma += amt * modifier;
+    };
+  }
+
+  function tonsOfExp(): void {
+    props.player.gainHackingExp(bigNumber);
+    props.player.gainStrengthExp(bigNumber);
+    props.player.gainDefenseExp(bigNumber);
+    props.player.gainDexterityExp(bigNumber);
+    props.player.gainAgilityExp(bigNumber);
+    props.player.gainCharismaExp(bigNumber);
+    props.player.gainIntelligenceExp(bigNumber);
+    props.player.updateSkillLevels();
+  }
+
+  function resetAllExp(): void {
+    props.player.hacking_exp = 0;
+    props.player.strength_exp = 0;
+    props.player.defense_exp = 0;
+    props.player.dexterity_exp = 0;
+    props.player.agility_exp = 0;
+    props.player.charisma_exp = 0;
+    props.player.intelligence_exp = 0;
+    props.player.updateSkillLevels();
+  }
+
+  function resetExperience(stat: string): () => void {
+    return function () {
+      switch (stat) {
+        case "hacking":
+          props.player.hacking_exp = 0;
+          break;
+        case "strength":
+          props.player.strength_exp = 0;
+          break;
+        case "defense":
+          props.player.defense_exp = 0;
+          break;
+        case "dexterity":
+          props.player.dexterity_exp = 0;
+          break;
+        case "agility":
+          props.player.agility_exp = 0;
+          break;
+        case "charisma":
+          props.player.charisma_exp = 0;
+          break;
+        case "intelligence":
+          props.player.intelligence_exp = 0;
+          break;
+      }
+      props.player.updateSkillLevels();
+    };
+  }
+
+  function resetKarma(): () => void {
+    return function () {
+      props.player.karma = 0;
+    };
+  }
+
+  function enableIntelligence(): void {
+    if (props.player.intelligence === 0) {
+      props.player.intelligence = 1;
+      props.player.updateSkillLevels();
+    }
+  }
+
+  function disableIntelligence(): void {
+    props.player.intelligence_exp = 0;
+    props.player.intelligence = 0;
+    props.player.updateSkillLevels();
+  }
+
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <h2>Experience / Stats</h2>
+      </AccordionSummary>
+      <AccordionDetails>
+        <table>
+          <tbody>
+            <tr>
+              <td>
+                <span className="text text-center">All:</span>
+              </td>
+              <td>
+                <Button onClick={tonsOfExp}>Tons of exp</Button>
+                <Button onClick={resetAllExp}>Reset</Button>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className="text text-center">Hacking:</span>
+              </td>
+              <td>
+                <Adjuster
+                  label="hacking"
+                  placeholder="exp"
+                  tons={() => modifyExp("hacking", 1)(bigNumber)}
+                  add={modifyExp("hacking", 1)}
+                  subtract={modifyExp("hacking", -1)}
+                  reset={resetExperience("hacking")}
+                />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className="text text-center">Strength:</span>
+              </td>
+              <td>
+                <Adjuster
+                  label="strength"
+                  placeholder="exp"
+                  tons={() => modifyExp("strength", 1)(bigNumber)}
+                  add={modifyExp("strength", 1)}
+                  subtract={modifyExp("strength", -1)}
+                  reset={resetExperience("strength")}
+                />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className="text text-center">Defense:</span>
+              </td>
+              <td>
+                <Adjuster
+                  label="defense"
+                  placeholder="exp"
+                  tons={() => modifyExp("defense", 1)(bigNumber)}
+                  add={modifyExp("defense", 1)}
+                  subtract={modifyExp("defense", -1)}
+                  reset={resetExperience("defense")}
+                />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className="text text-center">Dexterity:</span>
+              </td>
+              <td>
+                <Adjuster
+                  label="dexterity"
+                  placeholder="exp"
+                  tons={() => modifyExp("dexterity", 1)(bigNumber)}
+                  add={modifyExp("dexterity", 1)}
+                  subtract={modifyExp("dexterity", -1)}
+                  reset={resetExperience("dexterity")}
+                />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className="text text-center">Agility:</span>
+              </td>
+              <td>
+                <Adjuster
+                  label="agility"
+                  placeholder="exp"
+                  tons={() => modifyExp("agility", 1)(bigNumber)}
+                  add={modifyExp("agility", 1)}
+                  subtract={modifyExp("agility", -1)}
+                  reset={resetExperience("agility")}
+                />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className="text text-center">Charisma:</span>
+              </td>
+              <td>
+                <Adjuster
+                  label="charisma"
+                  placeholder="exp"
+                  tons={() => modifyExp("charisma", 1)(bigNumber)}
+                  add={modifyExp("charisma", 1)}
+                  subtract={modifyExp("charisma", -1)}
+                  reset={resetExperience("charisma")}
+                />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className="text text-center">Intelligence:</span>
+              </td>
+              <td>
+                <Adjuster
+                  label="intelligence"
+                  placeholder="exp"
+                  tons={() => modifyExp("intelligence", 1)(bigNumber)}
+                  add={modifyExp("intelligence", 1)}
+                  subtract={modifyExp("intelligence", -1)}
+                  reset={resetExperience("intelligence")}
+                />
+              </td>
+              <td>
+                <Button onClick={enableIntelligence}>Enable</Button>
+              </td>
+              <td>
+                <Button onClick={disableIntelligence}>Disable</Button>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className="text text-center">Karma:</span>
+              </td>
+              <td>
+                <Adjuster
+                  label="karma"
+                  placeholder="amt"
+                  tons={() => modifyExp("intelligence", 1)(100000)}
+                  add={modifyKarma(1)}
+                  subtract={modifyKarma(-1)}
+                  reset={resetKarma()}
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </AccordionDetails>
+    </Accordion>
+  );
+}

src/DevMenu/ui/StockMarket.tsx

@@ -0,0 +1,120 @@
+import React, { useState } from "react";
+
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import AccordionDetails from "@material-ui/core/AccordionDetails";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+
+import Button from "@material-ui/core/Button";
+import TextField from "@material-ui/core/TextField";
+import { Money } from "../../ui/React/Money";
+import { dialogBoxCreate } from "../../../utils/DialogBox";
+import { StockMarket as SM } from "../../StockMarket/StockMarket";
+import { Stock } from "../../StockMarket/Stock";
+
+export function StockMarket(): React.ReactElement {
+  const [stockPrice, setStockPrice] = useState(0);
+  const [stockSymbol, setStockSymbol] = useState("");
+
+  function setStockPriceField(event: React.ChangeEvent<HTMLInputElement>): void {
+    setStockPrice(parseFloat(event.target.value));
+  }
+
+  function setStockSymbolField(event: React.ChangeEvent<HTMLInputElement>): void {
+    setStockSymbol(event.target.value);
+  }
+
+  function processStocks(sub: (arg0: Stock) => void): void {
+    const inputSymbols = stockSymbol.replace(/\s/g, "");
+
+    let match: (symbol: string) => boolean = (): boolean => {
+      return true;
+    };
+
+    if (inputSymbols !== "" && inputSymbols !== "all") {
+      match = function (symbol: string): boolean {
+        return inputSymbols.split(",").includes(symbol);
+      };
+    }
+
+    for (const name in SM) {
+      if (SM.hasOwnProperty(name)) {
+        const stock = SM[name];
+        if (stock instanceof Stock && match(stock.symbol)) {
+          sub(stock);
+        }
+      }
+    }
+  }
+
+  function doSetStockPrice(): void {
+    if (!isNaN(stockPrice)) {
+      processStocks((stock: Stock) => {
+        stock.price = stockPrice;
+      });
+    }
+  }
+
+  function viewStockCaps(): void {
+    const stocks: JSX.Element[] = [];
+    processStocks((stock: Stock) => {
+      stocks.push(
+        <tr key={stock.symbol}>
+          <td>{stock.symbol}</td>
+          <td style={{ textAlign: "right" }}>
+            <Money money={stock.cap} />
+          </td>
+        </tr>,
+      );
+    });
+    dialogBoxCreate(
+      <table>
+        <tbody>
+          <tr>
+            <th>Stock</th>
+            <th>Price cap</th>
+          </tr>
+          {stocks}
+        </tbody>
+      </table>,
+    );
+  }
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <h2>Stock Market</h2>
+      </AccordionSummary>
+      <AccordionDetails>
+        <table>
+          <tbody>
+            <tr>
+              <td>
+                <span className="text">Symbol:</span>
+              </td>
+              <td>
+                <TextField placeholder="symbol/'all'" onChange={setStockSymbolField} />
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className="text">Price:</span>
+              </td>
+              <td>
+                <TextField placeholder="$$$" onChange={setStockPriceField} />
+                <Button onClick={doSetStockPrice}>Set</Button>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <span className="text">Caps:</span>
+              </td>
+              <td>
+                <Button onClick={viewStockCaps}>View stock caps</Button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </AccordionDetails>
+    </Accordion>
+  );
+}

src/DevMenu/ui/TimeSkip.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+import Accordion from "@material-ui/core/Accordion";
+import AccordionSummary from "@material-ui/core/AccordionSummary";
+import AccordionDetails from "@material-ui/core/AccordionDetails";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+
+import Button from "@material-ui/core/Button";
+import { IPlayer } from "../../PersonObjects/IPlayer";
+import { saveObject } from "../../SaveObject";
+import { IEngine } from "../../IEngine";
+
+// Update as additional BitNodes get implemented
+
+interface IProps {
+  player: IPlayer;
+  engine: IEngine;
+}
+
+export function TimeSkip(props: IProps): React.ReactElement {
+  function timeskip(time: number) {
+    return () => {
+      props.player.lastUpdate -= time;
+      props.engine._lastUpdate -= time;
+      saveObject.saveGame(props.engine.indexedDb);
+      setTimeout(() => location.reload(), 1000);
+    };
+  }
+
+  return (
+    <Accordion>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+        <h2>Sleeves</h2>
+      </AccordionSummary>
+      <AccordionDetails>
+        <Button onClick={timeskip(60 * 1000)}>1 minute</Button>
+        <Button onClick={timeskip(60 * 60 * 1000)}>1 hour</Button>
+        <Button onClick={timeskip(24 * 60 * 60 * 1000)}>1 day</Button>
+      </AccordionDetails>
+    </Accordion>
+  );
+}

src/Diagnostic/FileDiagnosticPopup.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { AllServers } from "../Server/AllServers";
-import { BBAccordion } from "../ui/React/Accordion";
+import { BBAccordion } from "../ui/React/BBAccordion";
 import { numeralWrapper } from "../ui/numeralFormat";
 
 interface IServerProps {

src/Gang/ui/GangMemberAccordion.tsx

@@ -4,7 +4,7 @@
 import React from "react";
 import { Gang } from "../Gang";
 import { GangMember } from "../GangMember";
-import { BBAccordion } from "../../ui/React/Accordion";
+import { BBAccordion } from "../../ui/React/BBAccordion";
 import { GangMemberAccordionContent } from "./GangMemberAccordionContent";
 
 interface IProps {

src/Locations/ui/TravelAgencyLocation.tsx

@@ -61,7 +61,7 @@ function ListWorldMap(props: IProps): React.ReactElement {
       {Object.values(CityName)
         .filter((city: string) => city != props.p.city)
         .map((city: string) => {
-          const match = Object.entries(CityName).find(([key, value]) => value === city);
+          const match = Object.entries(CityName).find((entry) => entry[1] === city);
           if (match === undefined) throw new Error(`could not find key for city '${city}'`);
           return (
             <StdButton

src/Prestige.js

@@ -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]];

src/RedPill.jsx

@@ -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) {

src/Sidebar/ui/Sidebar2Root.tsx

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

src/StockMarket/ui/StockTicker.tsx

@@ -18,7 +18,7 @@ import { PositionTypes } from "../data/PositionTypes";
 import { IPlayer } from "../../PersonObjects/IPlayer";
 import { SourceFileFlags } from "../../SourceFile/SourceFileFlags";
 import { numeralWrapper } from "../../ui/numeralFormat";
-import { BBAccordion } from "../../ui/React/Accordion";
+import { BBAccordion } from "../../ui/React/BBAccordion";
 import { Money } from "../../ui/React/Money";
 import { createPopup } from "../../ui/React/createPopup";
 

src/engine.jsx

@@ -22,7 +22,7 @@ import { processPassiveFactionRepGain, inviteToFaction } from "./Faction/Faction
 import { FactionList } from "./Faction/ui/FactionList";
 import { Root as BladeburnerRoot } from "./Bladeburner/ui/Root";
 import { Root as GangRoot } from "./Gang/ui/Root";
-import { SidebarRoot } from "./Sidebar/ui/SidebarRoot";
+import { SidebarRoot } from "./Sidebar/ui/Sidebar2Root";
 import { CorporationRoot } from "./Corporation/ui/CorporationRoot";
 import { ResleeveRoot } from "./PersonObjects/Resleeving/ui/ResleeveRoot";
 import { SleeveRoot } from "./PersonObjects/Sleeve/ui/SleeveRoot";

src/index.html

@@ -39,13 +39,11 @@
   </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>
-      </div>
-
         <!-- Terminal page -->
-      <div id="terminal-container">
+        <div id="terminal-container" style="flex-grow: 1">
           <table id="terminal">
             <tr id="terminal-input">
               <td id="terminal-input-td" tabindex="2">
@@ -63,9 +61,9 @@
           </table>
         </div>
 
-      <div class="generic-menupage-container">
+        <div id="generic-react-container" style="flex-grow: 1"></div>
-        <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>
 

src/ui/ActiveScripts/ServerAccordion.tsx

@@ -4,7 +4,7 @@
  */
 import * as React from "react";
 
-import { BBAccordion } from "../React/Accordion";
+import { BBAccordion } from "../React/BBAccordion";
 import { ServerAccordionContent } from "./ServerAccordionContent";
 
 import { BaseServer } from "../../Server/BaseServer";

src/ui/ActiveScripts/WorkerScriptAccordion.tsx

@@ -6,7 +6,7 @@ import * as React from "react";
 
 import { numeralWrapper } from "../numeralFormat";
 
-import { BBAccordion } from "../React/Accordion";
+import { BBAccordion } from "../React/BBAccordion";
 import { AccordionButton } from "../React/AccordionButton";
 
 import { killWorkerScript } from "../../Netscript/killWorkerScript";

src/ui/React/AugmentationAccordion.tsx

@@ -6,7 +6,7 @@
  */
 import * as React from "react";
 
-import { BBAccordion } from "./Accordion";
+import { BBAccordion } from "./BBAccordion";
 
 import { Augmentation } from "../../Augmentation/Augmentation";
 import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";

src/ui/React/Button.tsx

@@ -1,47 +0,0 @@
-/**
- * Wrapper around material-ui's Button component that styles it with
- * Bitburner's UI theme
- */
-
-import React from "react";
-import { Button as MuiButton, ButtonProps, makeStyles } from "@material-ui/core";
-import { colors } from "./Theme";
-
-const useStyles = makeStyles({
-  // Tries to emulate StdButton in buttons.scss
-  root: {
-    backgroundColor: "#333",
-    border: "1px solid #000",
-    color: colors.primary,
-    margin: "5px",
-    padding: "3px 5px",
-    "&:hover": {
-      backgroundColor: "#000",
-    },
-
-    borderRadius: 0,
-  },
-  textPrimary: {
-    color: "rgb( 144, 202, 249)",
-  },
-  textSecondary: {
-    color: "rgb(244, 143, 177)",
-  },
-  disabled: {
-    backgroundColor: "#333",
-    color: "#fff",
-    cursor: "default",
-  },
-});
-
-export const Button: React.FC<ButtonProps> = (props: ButtonProps) => {
-  return (
-    <MuiButton
-      {...props}
-      classes={{
-        ...useStyles(),
-        ...props.classes,
-      }}
-    />
-  );
-};

src/ui/React/SourceFileAccordion.tsx

@@ -6,7 +6,7 @@
  */
 import * as React from "react";
 
-import { BBAccordion } from "./Accordion";
+import { BBAccordion } from "./BBAccordion";
 
 import { SourceFile } from "../../SourceFile/SourceFile";
 

src/ui/React/TextField.tsx

@@ -1,56 +0,0 @@
-/**
- * Wrapper around material-ui's Button component that styles it with
- * Bitburner's UI colors
- */
-
-import React from "react";
-import { TextField as MuiTF, TextFieldProps, makeStyles } from "@material-ui/core";
-import { colors } from "./Theme";
-
-const useStyles = makeStyles({
-  // Tries to emulate StdButton in buttons.scss
-  root: {
-    backgroundColor: colors.well,
-    color: "white",
-    borderRadius: 0,
-    "& .MuiInputBase-input": {
-      color: colors.primarylight, // Text color
-    },
-    "& .MuiInputBase-input::placeholder::before": {
-      color: colors.primarydark,
-      userSelect: "none",
-    },
-    "& .MuiInput-underline:before": {
-      borderBottomColor: colors.primarydark,
-    },
-    "& .MuiInput-underline:hover:before": {
-      borderBottomColor: colors.primary,
-    },
-    "& .MuiInput-underline:after": {
-      borderBottomColor: colors.primarylight,
-    },
-    "& .MuiInputLabel-root::before": {
-      color: colors.primary,
-    },
-    "& .MuiInputLabel-root": {
-      // The little label on the top-right
-      color: colors.primary, // unfocused
-      userSelect: "none",
-      "&.Mui-focused": {
-        color: colors.primarylight, // focused
-      },
-    },
-  },
-});
-
-export const TextField: React.FC<TextFieldProps> = (props: TextFieldProps) => {
-  return (
-    <MuiTF
-      {...props}
-      classes={{
-        ...useStyles(),
-        ...props.classes,
-      }}
-    />
-  );
-};

src/ui/React/Theme.tsx

@@ -1,23 +1,44 @@
 import React from "react";
-import { createMuiTheme } from "@material-ui/core/styles";
+import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
-
-import { ThemeProvider } from "@material-ui/core/styles";
 
 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",
     },
@@ -27,6 +48,115 @@ export const theme = createMuiTheme({
       root: {
         backgroundColor: colors.well,
       },
+      input: {
+        color: colors.primary,
+        "&::placeholder": {
+          userSelect: "none",
+          color: colors.primarydark,
+        },
+      },
+    },
+    MuiInput: {
+      root: {
+        backgroundColor: colors.well,
+        borderBottomColor: "#fff",
+      },
+      underline: {
+        "&:hover": {
+          borderBottomColor: colors.primarydark,
+        },
+        "&:before": {
+          borderBottomColor: colors.primary,
+        },
+        "&:after": {
+          borderBottomColor: colors.primarylight,
+        },
+      },
+    },
+    MuiInputLabel: {
+      root: {
+        color: colors.primarydark, // why is this switched?
+        userSelect: "none",
+        "&:before": {
+          color: colors.primarylight,
+        },
+      },
+    },
+    MuiButton: {
+      root: {
+        backgroundColor: "#333",
+        border: "1px solid " + colors.well,
+        color: colors.primary,
+        margin: "5px",
+        padding: "3px 5px",
+        "&:hover": {
+          backgroundColor: colors.black,
+        },
+
+        borderRadius: 0,
+      },
+    },
+    MuiSelect: {
+      icon: {
+        color: colors.primary,
+      },
+    },
+    MuiMenu: {
+      list: {
+        backgroundColor: colors.well,
+      },
+    },
+    MuiMenuItem: {
+      root: {
+        color: colors.primary,
+      },
+    },
+    MuiAccordionSummary: {
+      root: {
+        backgroundColor: "#111",
+      },
+    },
+    MuiAccordionDetails: {
+      root: {
+        backgroundColor: colors.black,
+      },
+    },
+    MuiIconButton: {
+      root: {
+        color: colors.primary,
+      },
+    },
+    MuiTooltip: {
+      tooltip: {
+        fontSize: "1em",
+        color: colors.primary,
+        backgroundColor: colors.well,
+        borderRadius: 0,
+        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",
+      },
     },
   },
 });