From f77ab4e871e01445680a51229fda48dd1926e859 Mon Sep 17 00:00:00 2001
From: Olivier Gagnon <oli.gagnon4418@gmail.com>
Date: Thu, 9 Sep 2021 13:48:21 -0400
Subject: [PATCH] engine work

---
 css/bladeburner.scss        |  2 ++
 src/Bladeburner/ui/Root.tsx |  4 ++--
 src/Gang/Helpers.tsx        | 28 ----------------------------
 src/engine.jsx              | 18 +++++++-----------
 src/index.html              | 15 +++------------
 5 files changed, 14 insertions(+), 53 deletions(-)
 delete mode 100644 src/Gang/Helpers.tsx

diff --git a/css/bladeburner.scss b/css/bladeburner.scss
index 43fb76f4b..9dabf176f 100644
--- a/css/bladeburner.scss
+++ b/css/bladeburner.scss
@@ -1,6 +1,8 @@
 @import "theme";
 
 #bladeburner-container {
+  position: fixed;
+  padding: 6px;
   a,
   div,
   p,
diff --git a/src/Bladeburner/ui/Root.tsx b/src/Bladeburner/ui/Root.tsx
index c66b045f0..1fc293c77 100644
--- a/src/Bladeburner/ui/Root.tsx
+++ b/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>
+    </>
   );
 }
diff --git a/src/Gang/Helpers.tsx b/src/Gang/Helpers.tsx
deleted file mode 100644
index 35958900b..000000000
--- a/src/Gang/Helpers.tsx
+++ /dev/null
@@ -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);
-}
diff --git a/src/engine.jsx b/src/engine.jsx
index 1a5b0a235..3eb785b4f 100644
--- a/src/engine.jsx
+++ b/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) {
-      Engine.hideAllContent();
-      routing.navigateTo(Page.Corporation);
-      Player.corporation.createUI(Player);
-    }
+    if (!(Player.corporation instanceof Corporation)) return;
+    Engine.hideAllContent();
+    routing.navigateTo(Page.Corporation);
+    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");
diff --git a/src/index.html b/src/index.html
index 8491480e6..151d86fcc 100644
--- a/src/index.html
+++ b/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">
-        <!-- React Component -->
-      </div>
-
-      <div id="gang-container" class="generic-menupage-container">
-        <!-- React Component -->
-      </div>
+      <div id="stock-market-container" class="generic-menupage-container"></div>
+      <div id="bladeburner-container" class="generic-menupage-container"></div>
+      <div id="gang-container" class="generic-menupage-container"></div>
 
       <!-- Generic Yes/No Pop Up box -->
       <div id="yes-no-box-container" class="popup-box-container">