diff --git a/src/Gang/Helpers.tsx b/src/Gang/Helpers.tsx
index 0d7091a52..ddcac421c 100644
--- a/src/Gang/Helpers.tsx
+++ b/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) {
- UIElems.gangContentCreated = true;
-
- // Create gang container
- UIElems.gangContainer = createElement("div", {
- id:"gang-container", class:"generic-menupage-container",
- });
-
- ReactDOM.render(, UIElems.gangContainer);
-
- const container = document.getElementById("entire-game-container");
- if(!container) throw new Error('entire-game-container was null');
- container.appendChild(UIElems.gangContainer);
+ if (!routing.isOn(Page.Gang)) {
+ return;
}
- if(UIElems.gangContainer) UIElems.gangContainer.style.display = "block";
-}
-export function clearGangUI(): void {
- if(UIElems.gangContainer) UIElems.gangContainer.style.display = 'none';
- if (UIElems.gangContainer instanceof Element) ReactDOM.unmountComponentAtNode(UIElems.gangContainer);
- UIElems.gangContainer = null;
- UIElems.gangContentCreated = false;
-}
+ ReactDOM.render(, gangContainer);
+}
\ No newline at end of file
diff --git a/src/Gang/ui/TaskSelector.tsx b/src/Gang/ui/TaskSelector.tsx
index 9a87ebb10..c18eb3199 100644
--- a/src/Gang/ui/TaskSelector.tsx
+++ b/src/Gang/ui/TaskSelector.tsx
@@ -40,8 +40,7 @@ export function TaskSelector(props: IProps): React.ReactElement {
className="dropdown"
value={currentTask}>
- {tasks.map((task: string, i: number) =>
- )}
+ {tasks.map((task: string, i: number) => )}
{StatsTable(data, null)}
>);
diff --git a/src/Prestige.js b/src/Prestige.js
index d21bbe182..1362a129a 100755
--- a/src/Prestige.js
+++ b/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";
diff --git a/src/engine.jsx b/src/engine.jsx
index ab6181941..b38fafc54 100644
--- a/src/engine.jsx
+++ b/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()) {
- displayGangContent(this, Player.gang, Player);
+ if (Player.inGang()) {
+ Engine.Display.gangContent.style.display = "block";
routing.navigateTo(Page.Gang);
+ displayGangContent(this, Player.gang, Player);
} else {
Engine.loadTerminalContent();
routing.navigateTo(Page.Terminal);
@@ -524,6 +526,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";
@@ -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;
});
diff --git a/src/index.html b/src/index.html
index 55429742d..9bdd2598b 100644
--- a/src/index.html
+++ b/src/index.html
@@ -284,6 +284,10 @@ if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %>
+
+