dev menu in react

src/IEngine.ts

@@ -3,6 +3,8 @@
  * to TypeScript at the moment
  */
 export interface IEngine {
+  indexedDb: any;
+  _lastUpdate: number;
   hideAllContent: () => void;
   loadBladeburnerContent: () => void;
   loadFactionContent: () => void;

src/PersonObjects/IPlayer.ts

@@ -21,15 +21,18 @@ import { IPlayerOwnedSourceFile } from "../SourceFile/PlayerOwnedSourceFile";
 import { MoneySourceTracker } from "../utils/MoneySourceTracker";
 import { Exploit } from "../Exploits/Exploit";
 import { ICorporation } from "../Corporation/ICorporation";
+import { IGang } from "../Gang/IGang";
+import { IBladeburner } from "../Bladeburner/IBladeburner";
 
 export interface IPlayer {
   // Class members
   augmentations: IPlayerOwnedAugmentation[];
-  bladeburner: any;
   bitNodeN: number;
   city: CityName;
   companyName: string;
   corporation: ICorporation;
+  gang: IGang;
+  bladeburner: IBladeburner;
   currentServer: string;
   factions: string[];
   factionInvitations: string[];
@@ -63,6 +66,7 @@ export interface IPlayer {
   sleevesFromCovenant: number;
   sourceFiles: IPlayerOwnedSourceFile[];
   exploits: Exploit[];
+  lastUpdate: number;
   totalPlaytime: number;
 
   // Stats
@@ -81,6 +85,7 @@ export interface IPlayer {
   dexterity_exp: number;
   agility_exp: number;
   charisma_exp: number;
+  intelligence_exp: number;
 
   // Multipliers
   hacking_chance_mult: number;
@@ -193,4 +198,7 @@ export interface IPlayer {
   quitJob(company: string): void;
   createHacknetServer(): void;
   startCreateProgramWork(programName: string, time: number, reqLevel: number): void;
+  queueAugmentation(augmentationName: string): void;
+  receiveInvite(factionName: string): void;
+  updateSkillLevels(): void;
 }

src/SaveObject.d.ts

@@ -0,0 +1 @@
+export declare const saveObject: any;

src/engine.jsx

@@ -21,7 +21,7 @@ import { generateRandomContract } from "./CodingContractGenerator";
 import { initCompanies } from "./Company/Companies";
 import { Corporation } from "./Corporation/Corporation";
 import { CONSTANTS } from "./Constants";
-import { createDevMenu, closeDevMenu } from "./DevMenu";
+import { DevMenuRoot } from "./DevMenu";
 import { Factions, initFactions } from "./Faction/Factions";
 import { processPassiveFactionRepGain, inviteToFaction } from "./Faction/FactionHelpers";
 import { FactionList } from "./Faction/ui/FactionList";
@@ -188,6 +188,7 @@ const Engine = {
     factionContent: null,
     augmentationsContent: null,
     milestonesContent: null,
+    devMenuContent: null,
     tutorialContent: null,
     infiltrationContent: null,
     stockMarketContent: null,
@@ -313,7 +314,11 @@ const Engine = {
   // TODO reactify
   loadDevMenuContent: function () {
     Engine.hideAllContent();
-    createDevMenu();
+    if (process.env.NODE_ENV !== "development") {
+      throw new Error("Cannot create Dev Menu because you are not in a dev build");
+    }
+    Engine.Display.devMenuContent.style.display = "block";
+    ReactDOM.render(<DevMenuRoot player={Player} engine={this} />, Engine.Display.devMenuContent);
     routing.navigateTo(Page.DevMenu);
     MainMenuLinks.DevMenu.classList.add("active");
   },
@@ -472,6 +477,7 @@ const Engine = {
 
     Engine.Display.activeScriptsContent.style.display = "none";
     ReactDOM.unmountComponentAtNode(Engine.Display.activeScriptsContent);
+
     Engine.Display.infiltrationContent.style.display = "none";
     ReactDOM.unmountComponentAtNode(Engine.Display.infiltrationContent);
 
@@ -479,6 +485,7 @@ const Engine = {
     ReactDOM.unmountComponentAtNode(Engine.Display.hacknetNodesContent);
 
     Engine.Display.createProgramContent.style.display = "none";
+    ReactDOM.unmountComponentAtNode(Engine.Display.createProgramContent);
 
     Engine.Display.factionsContent.style.display = "none";
     ReactDOM.unmountComponentAtNode(Engine.Display.factionsContent);
@@ -489,8 +496,14 @@ const Engine = {
     Engine.Display.augmentationsContent.style.display = "none";
     ReactDOM.unmountComponentAtNode(Engine.Display.augmentationsContent);
 
-    Engine.Display.milestonesContent.style.display = "none";
     Engine.Display.tutorialContent.style.display = "none";
+    ReactDOM.unmountComponentAtNode(Engine.Display.tutorialContent);
+
+    Engine.Display.milestonesContent.style.display = "none";
+    ReactDOM.unmountComponentAtNode(Engine.Display.milestonesContent);
+
+    Engine.Display.devMenuContent.style.display = "none";
+    ReactDOM.unmountComponentAtNode(Engine.Display.devMenuContent);
 
     Engine.Display.locationContent.style.display = "none";
     ReactDOM.unmountComponentAtNode(Engine.Display.locationContent);
@@ -518,34 +531,13 @@ const Engine = {
 
     // Make nav menu tabs inactive
     Engine.inactivateMainMenuLinks();
-
-    // Close dev menu
-    closeDevMenu();
   },
 
   // Remove 'active' css class from all main menu links
   inactivateMainMenuLinks: function () {
-    MainMenuLinks.Terminal.classList.remove("active");
-    MainMenuLinks.ScriptEditor.classList.remove("active");
-    MainMenuLinks.ActiveScripts.classList.remove("active");
-    MainMenuLinks.CreateProgram.classList.remove("active");
-    MainMenuLinks.Stats.classList.remove("active");
-    MainMenuLinks.Factions.classList.remove("active");
-    MainMenuLinks.Augmentations.classList.remove("active");
-    MainMenuLinks.HacknetNodes.classList.remove("active");
-    MainMenuLinks.Sleeves.classList.remove("active");
-    MainMenuLinks.City.classList.remove("active");
-    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");
-    MainMenuLinks.Milestones.classList.remove("active");
-    MainMenuLinks.Tutorial.classList.remove("active");
-    MainMenuLinks.Options.classList.remove("active");
-    MainMenuLinks.DevMenu.classList.remove("active");
+    for (const link of Object.keys(MainMenuLinks)) {
+      MainMenuLinks[link].classList.remove("active");
+    }
   },
 
   displayCharacterOverviewInfo: function () {
@@ -1225,6 +1217,9 @@ const Engine = {
     Engine.Display.milestonesContent = document.getElementById("milestones-container");
     Engine.Display.milestonesContent.style.display = "none";
 
+    Engine.Display.devMenuContent = document.getElementById("dev-menu-container");
+    Engine.Display.devMenuContent.style.display = "none";
+
     Engine.Display.tutorialContent = document.getElementById("tutorial-container");
     Engine.Display.tutorialContent.style.display = "none";
 

src/index.html

@@ -166,6 +166,7 @@
       <div id="gang-container" class="generic-menupage-container"></div>
       <div id="corporation-container" class="generic-menupage-container"></div>
       <div id="sleeves-container" class="generic-menupage-container"></div>
+      <div id="dev-menu-container" class="generic-menupage-container"></div>
 
       <!-- Generic Yes/No Pop Up box -->
       <div id="yes-no-box-container" class="popup-box-container">

src/ui/MainMenu/Links.ts

@@ -3,6 +3,7 @@
 import { clearEventListeners } from "../../../utils/uiHelpers/clearEventListeners";
 
 interface IMainMenuLinks {
+  [key: string]: HTMLElement | undefined;
   Terminal: HTMLElement;
   ScriptEditor: HTMLElement;
   ActiveScripts: HTMLElement;