engine work

css/bladeburner.scss

@@ -1,6 +1,8 @@
 @import "theme";
 
 #bladeburner-container {
+  position: fixed;
+  padding: 6px;
   a,
   div,
   p,

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/Gang/Helpers.tsx

@@ -1,28 +0,0 @@
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import { IPlayer } from "../PersonObjects/IPlayer";
-import { IEngine } from "../IEngine";
-import { Root } from "./ui/Root";
-import { Gang } from "./Gang";
-import { Page, routing } from ".././ui/navigationTracking";
-
-let gangContainer: HTMLElement;
-
-(function () {
-  function set(): void {
-    const c = document.getElementById("gang-container");
-    if (c === null) throw new Error("Could not find element 'gang-container'");
-    gangContainer = c;
-    document.removeEventListener("DOMContentLoaded", set);
-  }
-
-  document.addEventListener("DOMContentLoaded", set);
-})();
-
-export function displayGangContent(engine: IEngine, gang: Gang, player: IPlayer): void {
-  if (!routing.isOn(Page.Gang)) {
-    return;
-  }
-
-  ReactDOM.render(<Root engine={engine} gang={gang} player={player} />, gangContainer);
-}

src/engine.jsx

@@ -19,8 +19,8 @@ import { createDevMenu, closeDevMenu } from "./DevMenu";
 import { Factions, initFactions } from "./Faction/Factions";
 import { processPassiveFactionRepGain, inviteToFaction } from "./Faction/FactionHelpers";
 import { FactionList } from "./Faction/ui/FactionList";
-import { displayGangContent } from "./Gang/Helpers";
 import { Root as BladeburnerRoot } from "./Bladeburner/ui/Root";
+import { Root as GangRoot } from "./Gang/ui/Root";
 import { displayInfiltrationContent } from "./Infiltration/Helper";
 import {
   getHackingWorkRepGain,
@@ -390,7 +390,7 @@ const Engine = {
     if (Player.inGang()) {
       Engine.Display.gangContent.style.display = "block";
       routing.navigateTo(Page.Gang);
-      displayGangContent(this, Player.gang, Player);
+      ReactDOM.render(<GangRoot engine={this} gang={Player.gang} player={Player} />, Engine.Display.gangContent);
     } else {
       Engine.loadTerminalContent();
       routing.navigateTo(Page.Terminal);
@@ -406,11 +406,10 @@ const Engine = {
   },
 
   loadCorporationContent: function () {
-    if (Player.corporation instanceof Corporation) {
+    if (!(Player.corporation instanceof Corporation)) return;
-      Engine.hideAllContent();
+    Engine.hideAllContent();
-      routing.navigateTo(Page.Corporation);
+    routing.navigateTo(Page.Corporation);
-      Player.corporation.createUI(Player);
+    Player.corporation.createUI(Player);
-    }
   },
 
   loadBladeburnerContent: function () {
@@ -489,9 +488,6 @@ const Engine = {
     Engine.Display.cinematicTextContent.style.display = "none";
     Engine.Display.stockMarketContent.style.display = "none";
     Engine.Display.missionContent.style.display = "none";
-    if (document.getElementById("gang-container")) {
-      document.getElementById("gang-container").style.display = "none";
-    }
 
     if (Player.corporation instanceof Corporation) {
       Player.corporation.clearUI(Player);
@@ -1251,7 +1247,7 @@ const Engine = {
     Engine.Display.gangContent = document.getElementById("gang-container");
     Engine.Display.gangContent.style.display = "none";
 
-    Engine.Display.bladeburnerContent = document.getElementById("gang-container");
+    Engine.Display.bladeburnerContent = document.getElementById("bladeburner-container");
     Engine.Display.bladeburnerContent.style.display = "none";
 
     Engine.Display.missionContent = document.getElementById("mission-container");

src/index.html

@@ -284,9 +284,6 @@
       <!-- Milestones content -->
       <div id="milestones-container" class="generic-menupage-container"></div>
 
-      <!-- Bladeburner -->
-      <div id="bladeburner-container" class="generic-menupage-container"></div>
-
       <!-- Tutorial content -->
       <div id="tutorial-container" class="generic-menupage-container">
         <h1>Tutorial (AKA Links to Documentation)</h1>
@@ -364,16 +361,10 @@
 
       <!-- Location (visiting a location in World) -->
       <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="stock-market-container" class="generic-menupage-container">
+      <div id="bladeburner-container" class="generic-menupage-container"></div>
-        <!-- React Component -->
+      <div id="gang-container" class="generic-menupage-container"></div>
-      </div>
-
-      <div id="gang-container" class="generic-menupage-container">
-        <!-- React Component -->
-      </div>
 
       <!-- Generic Yes/No Pop Up box -->
       <div id="yes-no-box-container" class="popup-box-container">