tweaks to how the gang ui is loaded, making it more like stock market

src/Gang/Helpers.tsx

@@ -1,41 +1,32 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import { createElement } from "../../utils/uiHelpers/createElement";
 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);
+})();
 
-// Gang UI Dom Elements
-const UIElems: {
-    gangContentCreated: boolean;
-    gangContainer: HTMLElement | null;
-} = {
-    gangContentCreated:     false,
-    gangContainer:          null,
-}
 
 export function displayGangContent(engine: IEngine, gang: Gang, player: IPlayer): void {
-    if (!UIElems.gangContentCreated || UIElems.gangContainer == null) {
+    if (!routing.isOn(Page.Gang)) {
-        UIElems.gangContentCreated = true;
+        return;
-
-        // Create gang container
-        UIElems.gangContainer = createElement("div", {
-            id:"gang-container", class:"generic-menupage-container",
-        });
-
-        ReactDOM.render(<Root engine={engine} gang={gang} player={player} />, UIElems.gangContainer);
-
-        const container = document.getElementById("entire-game-container");
-        if(!container) throw new Error('entire-game-container was null');
-        container.appendChild(UIElems.gangContainer);
     }
-    if(UIElems.gangContainer) UIElems.gangContainer.style.display = "block";
-}
 
-export function clearGangUI(): void {
+    ReactDOM.render(<Root
-    if(UIElems.gangContainer) UIElems.gangContainer.style.display = 'none';
+        engine={engine}
-    if (UIElems.gangContainer instanceof Element) ReactDOM.unmountComponentAtNode(UIElems.gangContainer);
+        gang={gang}
-    UIElems.gangContainer = null;
+        player={player} />, gangContainer);
-    UIElems.gangContentCreated = false;
 }

src/Gang/ui/TaskSelector.tsx

@@ -40,8 +40,7 @@ export function TaskSelector(props: IProps): React.ReactElement {
             className="dropdown"
             value={currentTask}>
             <option key={0} value={"---"}>---</option>
-            {tasks.map((task: string, i: number) =>
+            {tasks.map((task: string, i: number) => <option key={i+1} value={task}>{task}</option>)}
-                <option key={i+1} value={task}>{task}</option>)}
         </select>
         <div>{StatsTable(data, null)}</div>
     </>);

src/Prestige.js

@@ -14,7 +14,6 @@ import { Engine } from "./engine";
 import { Faction } from "./Faction/Faction";
 import { Factions, initFactions } from "./Faction/Factions";
 import { joinFaction } from "./Faction/FactionHelpers";
-import { clearGangUI } from "./Gang/Helpers";
 import { updateHashManagerCapacity } from "./Hacknet/HacknetHelpers";
 import { initMessages } from "./Message/MessageHelpers";
 import { prestigeWorkerScripts } from "./NetscriptWorker";

src/engine.jsx

@@ -32,7 +32,7 @@ import {
     processPassiveFactionRepGain,
     inviteToFaction,
 } from "./Faction/FactionHelpers";
-import { displayGangContent, clearGangUI } from "./Gang/Helpers";
+import { displayGangContent } from "./Gang/Helpers";
 import { displayInfiltrationContent } from "./Infiltration/Helper";
 import { 
     getHackingWorkRepGain,
@@ -228,6 +228,7 @@ const Engine = {
         tutorialContent:                null,
         infiltrationContent:            null,
         stockMarketContent:             null,
+        gangContent:                    null,
         locationContent:                null,
         workInProgressContent:          null,
         redPillContent:                 null,
@@ -439,9 +440,10 @@ const Engine = {
 
     loadGangContent: function() {
         Engine.hideAllContent();
-        if (document.getElementById("gang-container") || Player.inGang()) {
+        if (Player.inGang()) {
-            displayGangContent(this, Player.gang, Player);
+            Engine.Display.gangContent.style.display = "block";
             routing.navigateTo(Page.Gang);
+            displayGangContent(this, Player.gang, Player);
         } else {
             Engine.loadTerminalContent();
             routing.navigateTo(Page.Terminal);
@@ -525,6 +527,9 @@ const Engine = {
         Engine.Display.locationContent.style.display = "none";
         ReactDOM.unmountComponentAtNode(Engine.Display.locationContent);
         
+        Engine.Display.gangContent.style.display = "none";
+        ReactDOM.unmountComponentAtNode(Engine.Display.gangContent);
+
         Engine.Display.workInProgressContent.style.display = "none";
         Engine.Display.redPillContent.style.display = "none";
         Engine.Display.cinematicTextContent.style.display = "none";
@@ -534,9 +539,6 @@ const Engine = {
             document.getElementById("gang-container").style.display = "none";
         }
 
-        if (Player.inGang()) {
-            clearGangUI();
-        }
         if (Player.corporation instanceof Corporation) {
             Player.corporation.clearUI();
         }
@@ -570,6 +572,7 @@ const Engine = {
         MainMenuLinks.Travel.classList.remove("active");
         MainMenuLinks.Job.classList.remove("active");
         MainMenuLinks.StockMarket.classList.remove("active");
+        MainMenuLinks.Gang.classList.remove("active");
         MainMenuLinks.Bladeburner.classList.remove("active");
         MainMenuLinks.Corporation.classList.remove("active");
         MainMenuLinks.Gang.classList.remove("active");
@@ -1321,6 +1324,9 @@ const Engine = {
         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.missionContent = document.getElementById("mission-container");
         Engine.Display.missionContent.style.display = "none";
 
@@ -1449,6 +1455,7 @@ const Engine = {
 
         MainMenuLinks.Gang.addEventListener("click", function() {
             Engine.loadGangContent();
+            MainMenuLinks.Gang.classList.add('active');
             return false;
         });
 

src/index.html

@@ -284,6 +284,10 @@ if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %>
         <!-- React Component -->
     </div>
 
+    <div id="gang-container" class="generic-menupage-container">
+        <!-- React Component -->
+    </div>
+
     <!-- Log Box -->
     <div id="log-box-container">
         <div id="log-box-content">