refactored a bunch of engine.jsx, now all the react container load into the same div

css/menupages.scss

@@ -12,6 +12,11 @@
   overflow-y: scroll;
 }
 
+#generic-react-container {
+  position: fixed;
+  padding: 10px;
+}
+
 /* Character Info */
 #character-container {
   padding-top: 10px;

src/Augmentation/ui/Root.tsx

@@ -44,6 +44,7 @@ export class AugmentationsRoot extends React.Component<IProps, IState> {
     }
 
     return (
+      <div id="augmentations-container">
         <div id="augmentations-content">
           <h1>Purchased Augmentations</h1>
           <p>
@@ -62,8 +63,8 @@ export class AugmentationsRoot extends React.Component<IProps, IState> {
           <br />
           <p>
             Installing Augmentations lets you start over with the perks and benefits granted by all of the Augmentations
-          you have ever installed. Also, you will keep any scripts and RAM/Core upgrades on your home computer (but you
+            you have ever installed. Also, you will keep any scripts and RAM/Core upgrades on your home computer (but
-          will lose all programs besides NUKE.exe)
+            you will lose all programs besides NUKE.exe)
           </p>
           <StdButton
             onClick={this.props.installAugmentationsFn}
@@ -86,6 +87,7 @@ export class AugmentationsRoot extends React.Component<IProps, IState> {
           <br /> <br />
           <PlayerMultipliers />
         </div>
+      </div>
     );
   }
 }

src/Bladeburner/ui/Root.tsx

@@ -15,7 +15,7 @@ interface IProps {
 
 export function Root(props: IProps): React.ReactElement {
   return (
-    <>
+    <div id="bladeburner-container">
       <div style={{ height: "60%", display: "block", position: "relative" }}>
         <div
           style={{
@@ -41,6 +41,6 @@ export function Root(props: IProps): React.ReactElement {
       >
         <AllPages bladeburner={props.bladeburner} player={props.player} />
       </div>
-    </>
+    </div>
   );
 }

src/Corporation/ui/CorporationRoot.tsx

@@ -56,7 +56,7 @@ export function CorporationRoot(props: IProps): React.ReactElement {
   }, []);
 
   return (
-    <>
+    <div id="corporation-container">
       <div>
         <HeaderTab
           current={divisionName === "Overview"}
@@ -75,6 +75,6 @@ export function CorporationRoot(props: IProps): React.ReactElement {
         <ExpandButton corp={props.corp} setDivisionName={setDivisionName} />
       </div>
       <MainPanel rerender={rerender} corp={props.corp} divisionName={divisionName} player={props.player} />
-    </>
+    </div>
   );
 }

src/DevMenu.tsx

@@ -757,7 +757,7 @@ export function DevMenuRoot(props: IProps): React.ReactElement {
   }
 
   return (
-    <div className="col">
+    <div id="dev-menu-container" className="col">
       <div className="row">
         <h1>Development Menu - Only meant to be used for testing/debugging</h1>
       </div>

src/Faction/FactionHelpers.jsx

@@ -86,7 +86,7 @@ export function displayFactionContent(factionName, initiallyOnAugmentationsPage
       p={Player}
       startHackingMissionFn={startHackingMission}
     />,
-    Engine.Display.factionContent,
+    Engine.Display.content,
   );
 }
 

src/Faction/ui/FactionList.tsx

@@ -24,7 +24,7 @@ export function FactionList(props: IProps): React.ReactElement {
   }
 
   return (
-    <>
+    <div id="factions-container">
       <h1>Factions</h1>
       <p>Lists all factions you have joined</p>
       <br />
@@ -60,6 +60,6 @@ export function FactionList(props: IProps): React.ReactElement {
           </li>
         ))}
       </ul>
-    </>
+    </div>
   );
 }

src/Faction/ui/Root.tsx

@@ -223,7 +223,7 @@ export class FactionRoot extends React.Component<IProps, IState> {
     }
 
     return (
-      <div>
+      <div id="faction-container">
         <h1>{faction.name}</h1>
         <Info faction={faction} factionInfo={factionInfo} />
         {canAccessGang && <Option buttonText={"Manage Gang"} infoText={gangInfo} onClick={this.manageGang} />}
@@ -266,7 +266,7 @@ export class FactionRoot extends React.Component<IProps, IState> {
 
   renderAugmentationsPage(): React.ReactNode {
     return (
-      <div>
+      <div id="faction-container">
         <AugmentationsPage faction={this.props.faction} p={this.props.p} routeToMainPage={this.routeToMain} />
       </div>
     );

src/Gang/ui/Root.tsx

@@ -30,7 +30,7 @@ export function Root(props: IProps): React.ReactElement {
   }
 
   return (
-    <>
+    <div id="gang-container">
       <a className="a-link-button" style={{ display: "inline-block" }} onClick={back}>
         Back
       </a>
@@ -53,6 +53,6 @@ export function Root(props: IProps): React.ReactElement {
       ) : (
         <TerritorySubpage gang={props.gang} />
       )}
-    </>
+    </div>
   );
 }

src/Hacknet/ui/HacknetRoot.tsx

@@ -121,7 +121,7 @@ export function HacknetRoot(props: IProps): React.ReactElement {
   });
 
   return (
-    <div>
+    <div id="hacknet-nodes-container">
       <h1>Hacknet {hasHacknetServers(props.player) ? "Servers" : "Nodes"}</h1>
       <GeneralInfo hasHacknetServers={hasHacknetServers(props.player)} />
 

src/Locations/ui/Root.tsx

@@ -144,7 +144,7 @@ export class LocationRoot extends React.Component<IProps, IState> {
 
   render(): React.ReactNode {
     if (this.state.inCity) {
-      return this.renderCity();
+      return <div id="location-container">{this.renderCity()}</div>;
     } else {
       return this.renderLocation();
     }

src/Milestones/ui/MilestonesRoot.tsx

@@ -30,7 +30,7 @@ export function MilestonesRoot(props: IProps): JSX.Element {
     }
   });
   return (
-    <>
+    <div id="milestones-container">
       <h1>Milestones</h1>
       <p>
         Milestones don't reward you for completing them. They are here to guide you if you're lost. They will reset when
@@ -40,6 +40,6 @@ export function MilestonesRoot(props: IProps): JSX.Element {
 
       <h2>Completing fl1ght.exe</h2>
       <li>{milestones}</li>
-    </>
+    </div>
   );
 }

src/PersonObjects/Resleeving/ui/ResleeveRoot.tsx

@@ -60,9 +60,11 @@ const SortFunctions: {
   Dexterity: (a: Resleeve, b: Resleeve): number => a.dexterity - b.dexterity,
   Agility: (a: Resleeve, b: Resleeve): number => a.agility - b.agility,
   Charisma: (a: Resleeve, b: Resleeve): number => a.charisma - b.charisma,
-  AverageCombatStats: (a: Resleeve, b: Resleeve): number => getAverage(a.strength, a.defense, a.dexterity, a.agility) -
+  AverageCombatStats: (a: Resleeve, b: Resleeve): number =>
+    getAverage(a.strength, a.defense, a.dexterity, a.agility) -
     getAverage(b.strength, b.defense, b.dexterity, b.agility),
-  AverageAllStats: (a: Resleeve, b: Resleeve): number => getAverage(a.hacking_skill, a.strength, a.defense, a.dexterity, a.agility, a.charisma) -
+  AverageAllStats: (a: Resleeve, b: Resleeve): number =>
+    getAverage(a.hacking_skill, a.strength, a.defense, a.dexterity, a.agility, a.charisma) -
     getAverage(b.hacking_skill, b.strength, b.defense, b.dexterity, b.agility, b.charisma),
   TotalNumAugmentations: (a: Resleeve, b: Resleeve): number => a.augmentations.length - b.augmentations.length,
 };
@@ -87,7 +89,7 @@ export function ResleeveRoot(props: IProps): React.ReactElement {
   props.player.resleeves.sort(sortFunction);
 
   return (
-    <>
+    <div id="resleeve-container">
       <p style={{ display: "block", width: "75%" }}>
         Re-sleeving is the process of digitizing and transferring your consciousness into a new human body, or 'sleeve'.
         Here at VitaLife, you can purchase new specially-engineered bodies for the re-sleeve process. Many of these
@@ -114,6 +116,6 @@ export function ResleeveRoot(props: IProps): React.ReactElement {
       {props.player.resleeves.map((resleeve, i) => (
         <ResleeveElem key={i} player={props.player} resleeve={resleeve} />
       ))}
-    </>
+    </div>
   );
 }

src/PersonObjects/Sleeve/ui/SleeveRoot.tsx

@@ -20,7 +20,7 @@ export function SleeveRoot(props: IProps): React.ReactElement {
   }, []);
 
   return (
-    <div style={{ width: "70%" }}>
+    <div id="sleeves-container" style={{ width: "70%" }}>
       <h1>Sleeves</h1>
       <p>
         Duplicate Sleeves are MK-V Synthoids (synthetic androids) into which your consciousness has been copied. In

src/Programs/ui/ProgramsRoot.tsx

@@ -19,7 +19,7 @@ export function ProgramsRoot(props: IProps): React.ReactElement {
   }, []);
 
   return (
-    <>
+    <div id="create-program-container">
       <p id="create-program-page-text">
         This page displays any programs that you are able to create. Writing the code for a program takes time, which
         can vary based on how complex the program is. If you are working on creating a program you can cancel at any
@@ -44,6 +44,6 @@ export function ProgramsRoot(props: IProps): React.ReactElement {
           );
         })}
       </ul>
-    </>
+    </div>
   );
 }

src/StockMarket/StockMarket.tsx

@@ -307,7 +307,7 @@ export function processStockPrices(numCycles = 1): void {
 
 let stockMarketContainer: HTMLElement | null = null;
 function setStockMarketContainer(): void {
-  stockMarketContainer = document.getElementById("stock-market-container");
+  stockMarketContainer = document.getElementById("generic-react-container");
   document.removeEventListener("DOMContentLoaded", setStockMarketContainer);
 }
 

src/StockMarket/ui/Root.tsx

@@ -61,7 +61,7 @@ export class StockMarketRoot extends React.Component<IProps, IState> {
 
   render(): React.ReactNode {
     return (
-      <div>
+      <div id="stock-market-container">
         <InfoAndPurchases initStockMarket={this.props.initStockMarket} p={this.props.p} rerender={this.rerender} />
         {this.props.p.hasWseAccount && (
           <StockTickers

src/Tutorial/ui/TutorialRoot.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 export function TutorialRoot(): React.ReactElement {
   return (
-    <>
+    <div id="tutorial-container">
       <h1>Tutorial (AKA Links to Documentation)</h1>
       <a
         id="tutorial-getting-started-link"
@@ -94,6 +94,6 @@ export function TutorialRoot(): React.ReactElement {
       <a className="a-link-button" target="_blank" href="https://bitburner.readthedocs.io/en/latest/shortcuts.html">
         Keyboard Shortcuts
       </a>
-    </>
+    </div>
   );
 }

src/engine.jsx

@@ -177,27 +177,11 @@ const Engine = {
   // Display objects
   // TODO-Refactor this into its own component
   Display: {
+    // Generic page that most react loads into.
+    content: null,
     // Main menu content
     terminalContent: null,
-    characterContent: null,
-    scriptEditorContent: null,
-    activeScriptsContent: null,
-    hacknetNodesContent: null,
-    createProgramContent: null,
-    factionsContent: null,
-    factionContent: null,
-    augmentationsContent: null,
-    milestonesContent: null,
-    devMenuContent: null,
-    tutorialContent: null,
     infiltrationContent: null,
-    stockMarketContent: null,
-    gangContent: null,
-    bladeburnerContent: null,
-    resleeveContent: null,
-    sleeveContent: null,
-    corporationContent: null,
-    locationContent: null,
     workInProgressContent: null,
     redPillContent: null,
     cinematicTextContent: null,
@@ -219,68 +203,65 @@ const Engine = {
 
   loadCharacterContent: function () {
     Engine.hideAllContent();
-    Engine.Display.characterContent.style.display = "block";
+    Engine.Display.content.style.display = "block";
     routing.navigateTo(Page.CharacterInfo);
-    ReactDOM.render(<CharacterInfo player={Player} />, Engine.Display.characterContent);
+    ReactDOM.render(<CharacterInfo player={Player} />, Engine.Display.content);
     MainMenuLinks.Stats.classList.add("active");
   },
 
   loadScriptEditorContent: function (filename = "", code = "") {
     Engine.hideAllContent();
-    Engine.Display.scriptEditorContent.style.display = "block";
+    Engine.Display.content.style.display = "block";
     routing.navigateTo(Page.ScriptEditor);
     MainMenuLinks.ScriptEditor.classList.add("active");
     ReactDOM.render(
       <ScriptEditorRoot filename={filename} code={code} player={Player} engine={this} />,
-      Engine.Display.scriptEditorContent,
+      Engine.Display.content,
     );
   },
 
   loadActiveScriptsContent: function () {
     Engine.hideAllContent();
-    Engine.Display.activeScriptsContent.style.display = "block";
+    Engine.Display.content.style.display = "block";
     routing.navigateTo(Page.ActiveScripts);
     MainMenuLinks.ActiveScripts.classList.add("active");
-    ReactDOM.render(
+    ReactDOM.render(<ActiveScriptsRoot p={Player} workerScripts={workerScripts} />, Engine.Display.content);
-      <ActiveScriptsRoot p={Player} workerScripts={workerScripts} />,
-      Engine.Display.activeScriptsContent,
-    );
   },
 
   loadHacknetNodesContent: function () {
     Engine.hideAllContent();
-    Engine.Display.hacknetNodesContent.style.display = "block";
+    Engine.Display.content.style.display = "block";
     routing.navigateTo(Page.HacknetNodes);
     MainMenuLinks.HacknetNodes.classList.add("active");
-    ReactDOM.render(<HacknetRoot player={Player} />, Engine.Display.hacknetNodesContent);
+    ReactDOM.render(<HacknetRoot player={Player} />, Engine.Display.content);
   },
 
   loadCreateProgramContent: function () {
     Engine.hideAllContent();
-    Engine.Display.createProgramContent.style.display = "block";
+    Engine.Display.content.style.display = "block";
     routing.navigateTo(Page.CreateProgram);
     MainMenuLinks.CreateProgram.classList.add("active");
-    ReactDOM.render(<ProgramsRoot player={Player} />, Engine.Display.createProgramContent);
+    ReactDOM.render(<ProgramsRoot player={Player} />, Engine.Display.content);
   },
 
   loadFactionsContent: function () {
     Engine.hideAllContent();
-    Engine.Display.factionsContent.style.display = "block";
+    Engine.Display.content.style.display = "block";
     routing.navigateTo(Page.Factions);
     MainMenuLinks.Factions.classList.add("active");
-    ReactDOM.render(<FactionList player={Player} engine={this} />, Engine.Display.factionsContent);
+    ReactDOM.render(<FactionList player={Player} engine={this} />, Engine.Display.content);
   },
 
   // TODO reactify
   loadFactionContent: function () {
     Engine.hideAllContent();
-    Engine.Display.factionContent.style.display = "block";
+    Engine.Display.content.style.display = "block";
     routing.navigateTo(Page.Faction);
   },
 
   loadAugmentationsContent: function () {
     Engine.hideAllContent();
-    Engine.Display.augmentationsContent.style.display = "block";
+    Engine.Display.content.style.display = "block";
     routing.navigateTo(Page.Augmentations);
     MainMenuLinks.Augmentations.classList.add("active");
 
@@ -291,46 +272,45 @@ const Engine = {
 
     ReactDOM.render(
       <AugmentationsRoot exportGameFn={backup} installAugmentationsFn={installAugmentations} />,
-      Engine.Display.augmentationsContent,
+      Engine.Display.content,
     );
   },
 
   loadMilestonesContent: function () {
     Engine.hideAllContent();
-    Engine.Display.milestonesContent.style.display = "block";
+    Engine.Display.content.style.display = "block";
     routing.navigateTo(Page.Milestones);
     MainMenuLinks.Milestones.classList.add("active");
-    ReactDOM.render(<MilestonesRoot player={Player} />, Engine.Display.milestonesContent);
+    ReactDOM.render(<MilestonesRoot player={Player} />, Engine.Display.content);
   },
 
   loadTutorialContent: function () {
     Engine.hideAllContent();
-    Engine.Display.tutorialContent.style.display = "block";
+    Engine.Display.content.style.display = "block";
     routing.navigateTo(Page.Tutorial);
     MainMenuLinks.Tutorial.classList.add("active");
-    ReactDOM.render(<TutorialRoot />, Engine.Display.tutorialContent);
+    ReactDOM.render(<TutorialRoot />, Engine.Display.content);
   },
 
-  // TODO reactify
   loadDevMenuContent: function () {
     Engine.hideAllContent();
     if (process.env.NODE_ENV !== "development") {
       throw new Error("Cannot create Dev Menu because you are not in a dev build");
     }
-    Engine.Display.devMenuContent.style.display = "block";
+    Engine.Display.content.style.display = "block";
-    ReactDOM.render(<DevMenuRoot player={Player} engine={this} />, Engine.Display.devMenuContent);
+    ReactDOM.render(<DevMenuRoot player={Player} engine={this} />, Engine.Display.content);
     routing.navigateTo(Page.DevMenu);
     MainMenuLinks.DevMenu.classList.add("active");
   },
 
   loadLocationContent: function (initiallyInCity = true) {
     Engine.hideAllContent();
-    Engine.Display.locationContent.style.display = "block";
+    Engine.Display.content.style.display = "block";
     routing.navigateTo(Page.Location);
     MainMenuLinks.City.classList.add("active");
     ReactDOM.render(
       <LocationRoot initiallyInCity={initiallyInCity} engine={Engine} p={Player} />,
-      Engine.Display.locationContent,
+      Engine.Display.content,
     );
   },
 
@@ -339,13 +319,10 @@ const Engine = {
     // and make sure that the 'City' main menu link doesnt become 'active'
     Engine.hideAllContent();
     Player.gotoLocation(LocationName.TravelAgency);
-    Engine.Display.locationContent.style.display = "block";
+    Engine.Display.content.style.display = "block";
     routing.navigateTo(Page.Location);
     MainMenuLinks.Travel.classList.add("active");
-    ReactDOM.render(
+    ReactDOM.render(<LocationRoot initiallyInCity={false} engine={Engine} p={Player} />, Engine.Display.content);
-      <LocationRoot initiallyInCity={false} engine={Engine} p={Player} />,
-      Engine.Display.locationContent,
-    );
   },
 
   loadJobContent: function () {
@@ -359,13 +336,10 @@ const Engine = {
     }
     Engine.hideAllContent();
     Player.gotoLocation(Player.companyName);
-    Engine.Display.locationContent.style.display = "block";
+    Engine.Display.content.style.display = "block";
     routing.navigateTo(Page.Location);
     MainMenuLinks.Job.classList.add("active");
-    ReactDOM.render(
+    ReactDOM.render(<LocationRoot initiallyInCity={false} engine={Engine} p={Player} />, Engine.Display.content);
-      <LocationRoot initiallyInCity={false} engine={Engine} p={Player} />,
-      Engine.Display.locationContent,
-    );
   },
 
   // TODO reactify
@@ -407,7 +381,7 @@ const Engine = {
 
   loadStockMarketContent: function () {
     Engine.hideAllContent();
-    Engine.Display.stockMarketContent.style.display = "block";
+    Engine.Display.content.style.display = "block";
     routing.navigateTo(Page.StockMarket);
     MainMenuLinks.StockMarket.classList.add("active");
     displayStockMarketContent();
@@ -416,10 +390,10 @@ const Engine = {
   loadGangContent: function () {
     if (!Player.inGang()) return;
     Engine.hideAllContent();
-    Engine.Display.gangContent.style.display = "block";
+    Engine.Display.content.style.display = "block";
     routing.navigateTo(Page.Gang);
     MainMenuLinks.Gang.classList.add("active");
-    ReactDOM.render(<GangRoot engine={this} gang={Player.gang} player={Player} />, Engine.Display.gangContent);
+    ReactDOM.render(<GangRoot engine={this} gang={Player.gang} player={Player} />, Engine.Display.content);
   },
 
   loadMissionContent: function () {
@@ -433,100 +407,52 @@ const Engine = {
   loadCorporationContent: function () {
     if (!(Player.corporation instanceof Corporation)) return;
     Engine.hideAllContent();
-    Engine.Display.corporationContent.style.display = "block";
+    Engine.Display.content.style.display = "block";
     routing.navigateTo(Page.Corporation);
     MainMenuLinks.Corporation.classList.add("active");
-    ReactDOM.render(<CorporationRoot corp={Player.corporation} player={Player} />, Engine.Display.corporationContent);
+    ReactDOM.render(<CorporationRoot corp={Player.corporation} player={Player} />, Engine.Display.content);
   },
 
   loadBladeburnerContent: function () {
     if (!(Player.bladeburner instanceof Bladeburner)) return;
     Engine.hideAllContent();
-    Engine.Display.bladeburnerContent.style.display = "block";
+    Engine.Display.content.style.display = "block";
     routing.navigateTo(Page.Bladeburner);
     MainMenuLinks.Bladeburner.classList.add("active");
     ReactDOM.render(
       <BladeburnerRoot bladeburner={Player.bladeburner} player={Player} engine={this} />,
-      Engine.Display.bladeburnerContent,
+      Engine.Display.content,
     );
   },
 
   loadSleevesContent: function () {
     Engine.hideAllContent();
-    Engine.Display.sleevesContent.style.display = "block";
+    Engine.Display.content.style.display = "block";
     routing.navigateTo(Page.Sleeves);
-    ReactDOM.render(<SleeveRoot player={Player} />, Engine.Display.sleevesContent);
+    ReactDOM.render(<SleeveRoot player={Player} />, Engine.Display.content);
   },
 
   loadResleevingContent: function () {
     Engine.hideAllContent();
     routing.navigateTo(Page.Resleeves);
-    Engine.Display.resleeveContent.style.display = "block";
+    Engine.Display.content.style.display = "block";
     MainMenuLinks.City.classList.add("active");
-    ReactDOM.render(<ResleeveRoot player={Player} />, Engine.Display.resleeveContent);
+    ReactDOM.render(<ResleeveRoot player={Player} />, Engine.Display.content);
   },
 
   // Helper function that hides all content
   hideAllContent: function () {
     Engine.Display.terminalContent.style.display = "none";
-    Engine.Display.characterContent.style.display = "none";
-    ReactDOM.unmountComponentAtNode(Engine.Display.characterContent);
 
-    Engine.Display.scriptEditorContent.style.display = "none";
+    Engine.Display.content.style.display = "none";
-    ReactDOM.unmountComponentAtNode(Engine.Display.scriptEditorContent);
+    ReactDOM.unmountComponentAtNode(Engine.Display.content);
-
-    Engine.Display.activeScriptsContent.style.display = "none";
-    ReactDOM.unmountComponentAtNode(Engine.Display.activeScriptsContent);
 
     Engine.Display.infiltrationContent.style.display = "none";
     ReactDOM.unmountComponentAtNode(Engine.Display.infiltrationContent);
 
-    Engine.Display.hacknetNodesContent.style.display = "none";
-    ReactDOM.unmountComponentAtNode(Engine.Display.hacknetNodesContent);
-
-    Engine.Display.createProgramContent.style.display = "none";
-    ReactDOM.unmountComponentAtNode(Engine.Display.createProgramContent);
-
-    Engine.Display.factionsContent.style.display = "none";
-    ReactDOM.unmountComponentAtNode(Engine.Display.factionsContent);
-
-    Engine.Display.factionContent.style.display = "none";
-    ReactDOM.unmountComponentAtNode(Engine.Display.factionContent);
-
-    Engine.Display.augmentationsContent.style.display = "none";
-    ReactDOM.unmountComponentAtNode(Engine.Display.augmentationsContent);
-
-    Engine.Display.tutorialContent.style.display = "none";
-    ReactDOM.unmountComponentAtNode(Engine.Display.tutorialContent);
-
-    Engine.Display.milestonesContent.style.display = "none";
-    ReactDOM.unmountComponentAtNode(Engine.Display.milestonesContent);
-
-    Engine.Display.devMenuContent.style.display = "none";
-    ReactDOM.unmountComponentAtNode(Engine.Display.devMenuContent);
-
-    Engine.Display.locationContent.style.display = "none";
-    ReactDOM.unmountComponentAtNode(Engine.Display.locationContent);
-
-    Engine.Display.gangContent.style.display = "none";
-    ReactDOM.unmountComponentAtNode(Engine.Display.gangContent);
-
-    Engine.Display.bladeburnerContent.style.display = "none";
-    ReactDOM.unmountComponentAtNode(Engine.Display.bladeburnerContent);
-
-    Engine.Display.resleeveContent.style.display = "none";
-    ReactDOM.unmountComponentAtNode(Engine.Display.resleeveContent);
-
-    Engine.Display.sleevesContent.style.display = "none";
-    ReactDOM.unmountComponentAtNode(Engine.Display.sleevesContent);
-
-    Engine.Display.corporationContent.style.display = "none";
-    ReactDOM.unmountComponentAtNode(Engine.Display.corporationContent);
-
     Engine.Display.workInProgressContent.style.display = "none";
     Engine.Display.redPillContent.style.display = "none";
     Engine.Display.cinematicTextContent.style.display = "none";
-    Engine.Display.stockMarketContent.style.display = "none";
     Engine.Display.missionContent.style.display = "none";
 
     // Make nav menu tabs inactive
@@ -1186,71 +1112,15 @@ const Engine = {
   },
 
   setDisplayElements: function () {
+    Engine.Display.content = document.getElementById("generic-react-container");
+    Engine.Display.content.style.display = "none";
     // Content elements
     Engine.Display.terminalContent = document.getElementById("terminal-container");
     routing.navigateTo(Page.Terminal);
 
-    Engine.Display.characterContent = document.getElementById("character-container");
-    Engine.Display.characterContent.style.display = "none";
-
-    Engine.Display.scriptEditorContent = document.getElementById("script-editor-container");
-    Engine.Display.scriptEditorContent.style.display = "none";
-
-    Engine.Display.activeScriptsContent = document.getElementById("active-scripts-container");
-    Engine.Display.activeScriptsContent.style.display = "none";
-
-    Engine.Display.hacknetNodesContent = document.getElementById("hacknet-nodes-container");
-    Engine.Display.hacknetNodesContent.style.display = "none";
-
-    Engine.Display.createProgramContent = document.getElementById("create-program-container");
-    Engine.Display.createProgramContent.style.display = "none";
-
-    Engine.Display.factionsContent = document.getElementById("factions-container");
-    Engine.Display.factionsContent.style.display = "none";
-
-    Engine.Display.factionContent = document.getElementById("faction-container");
-    Engine.Display.factionContent.style.display = "none";
-
-    Engine.Display.augmentationsContent = document.getElementById("augmentations-container");
-    Engine.Display.augmentationsContent.style.display = "none";
-
-    Engine.Display.milestonesContent = document.getElementById("milestones-container");
-    Engine.Display.milestonesContent.style.display = "none";
-
-    Engine.Display.devMenuContent = document.getElementById("dev-menu-container");
-    Engine.Display.devMenuContent.style.display = "none";
-
-    Engine.Display.tutorialContent = document.getElementById("tutorial-container");
-    Engine.Display.tutorialContent.style.display = "none";
-
-    Engine.Display.infiltrationContent = document.getElementById("infiltration-container");
-    Engine.Display.infiltrationContent.style.display = "none";
-
-    Engine.Display.stockMarketContent = document.getElementById("stock-market-container");
-    Engine.Display.stockMarketContent.style.display = "none";
-
-    Engine.Display.gangContent = document.getElementById("gang-container");
-    Engine.Display.gangContent.style.display = "none";
-
-    Engine.Display.bladeburnerContent = document.getElementById("bladeburner-container");
-    Engine.Display.bladeburnerContent.style.display = "none";
-
-    Engine.Display.resleeveContent = document.getElementById("resleeve-container");
-    Engine.Display.resleeveContent.style.display = "none";
-
-    Engine.Display.sleevesContent = document.getElementById("sleeves-container");
-    Engine.Display.sleevesContent.style.display = "none";
-
-    Engine.Display.corporationContent = document.getElementById("corporation-container");
-    Engine.Display.corporationContent.style.display = "none";
-
     Engine.Display.missionContent = document.getElementById("mission-container");
     Engine.Display.missionContent.style.display = "none";
 
-    // Location page (page that shows up when you visit a specific location in World)
-    Engine.Display.locationContent = document.getElementById("location-container");
-    Engine.Display.locationContent.style.display = "none";
-
     // Work In Progress
     Engine.Display.workInProgressContent = document.getElementById("work-in-progress-container");
     Engine.Display.workInProgressContent.style.display = "none";
@@ -1259,6 +1129,9 @@ const Engine = {
     Engine.Display.redPillContent = document.getElementById("red-pill-container");
     Engine.Display.redPillContent.style.display = "none";
 
+    Engine.Display.infiltrationContent = document.getElementById("infiltration-container");
+    Engine.Display.infiltrationContent.style.display = "none";
+
     // Cinematic Text
     Engine.Display.cinematicTextContent = document.getElementById("cinematic-text-container");
     Engine.Display.cinematicTextContent.style.display = "none";

src/index.html

@@ -147,26 +147,8 @@
         </table>
       </div>
 
-      <!-- Character Info page -->
+      <div id="generic-react-container" class="generic-menupage-container"></div>
-      <div id="character-container" class="generic-menupage-container"></div>
-      <div id="active-scripts-container" class="generic-menupage-container"></div>
-      <div id="script-editor-container" class="generic-menupage-container"></div>
-      <div id="hacknet-nodes-container" class="generic-menupage-container"></div>
-      <div id="create-program-container" class="generic-menupage-container"></div>
-      <div id="factions-container" class="generic-menupage-container"></div>
-      <div id="faction-container" class="generic-menupage-container"></div>
-      <div id="augmentations-container" class="generic-menupage-container"></div>
-      <div id="milestones-container" class="generic-menupage-container"></div>
-      <div id="tutorial-container" class="generic-menupage-container"></div>
-      <div id="location-container" class="generic-menupage-container"></div>
       <div id="infiltration-container" class="generic-fullscreen-container"></div>
-      <div id="stock-market-container" class="generic-menupage-container"></div>
-      <div id="bladeburner-container" class="generic-menupage-container"></div>
-      <div id="resleeve-container" class="generic-menupage-container"></div>
-      <div id="gang-container" class="generic-menupage-container"></div>
-      <div id="corporation-container" class="generic-menupage-container"></div>
-      <div id="sleeves-container" class="generic-menupage-container"></div>
-      <div id="dev-menu-container" class="generic-menupage-container"></div>
 
       <!-- Generic Yes/No Pop Up box -->
       <div id="yes-no-box-container" class="popup-box-container">

src/ui/ActiveScripts/Root.tsx

@@ -28,7 +28,7 @@ export function ActiveScriptsRoot(props: IProps): React.ReactElement {
   }, []);
 
   return (
-    <>
+    <div id="active-scripts-container">
       <p>
         This page displays a list of all of your scripts that are currently running across every machine. It also
         provides information about each script's production. The scripts are categorized by the hostname of the servers
@@ -37,6 +37,6 @@ export function ActiveScriptsRoot(props: IProps): React.ReactElement {
 
       <ScriptProduction {...props} />
       <ServerAccordions {...props} />
-    </>
+    </div>
   );
 }

src/ui/CharacterInfo.tsx

@@ -257,6 +257,7 @@ export function CharacterInfo(props: IProps): React.ReactElement {
   timeRows.push(["Total Time played:", convertTimeMsToTimeElapsedString(props.player.totalPlaytime)]);
 
   return (
+    <div id="character-container">
       <pre>
         <b>General</b>
         <br />
@@ -269,7 +270,11 @@ export function CharacterInfo(props: IProps): React.ReactElement {
         <span>
           Money: <Money money={props.player.money.toNumber()} />
         </span>
-      <button className="popup-box-button" style={{ display: "inline-block", float: "none" }} onClick={openMoneyModal}>
+        <button
+          className="popup-box-button"
+          style={{ display: "inline-block", float: "none" }}
+          onClick={openMoneyModal}
+        >
           Money Statistics & Breakdown
         </button>
         <br />
@@ -451,7 +456,11 @@ export function CharacterInfo(props: IProps): React.ReactElement {
               props.player.faction_rep_mult,
               props.player.faction_rep_mult * BitNodeMultipliers.FactionWorkRepGain,
             ],
-          ["Salary", props.player.work_money_mult, props.player.work_money_mult * BitNodeMultipliers.CompanyWorkMoney],
+            [
+              "Salary",
+              props.player.work_money_mult,
+              props.player.work_money_mult * BitNodeMultipliers.CompanyWorkMoney,
+            ],
           ]}
         />
         <br />
@@ -459,7 +468,11 @@ export function CharacterInfo(props: IProps): React.ReactElement {
         <MultiplierTable
           rows={[
             ["Crime success", props.player.crime_success_mult],
-          ["Crime money", props.player.crime_money_mult, props.player.crime_money_mult * BitNodeMultipliers.CrimeMoney],
+            [
+              "Crime money",
+              props.player.crime_money_mult,
+              props.player.crime_money_mult * BitNodeMultipliers.CrimeMoney,
+            ],
           ]}
         />
         <br />
@@ -480,5 +493,6 @@ export function CharacterInfo(props: IProps): React.ReactElement {
         <br />
         <CurrentBitNode />
       </pre>
+    </div>
   );
 }