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) { %> +
+ +
+