The blade UI is fully converted to React, the business logic is left to do.

src/Bladeburner.jsx

@@ -36,6 +36,7 @@ import { BlackOperations } from "./Bladeburner/BlackOperations";
 import { Contract } from "./Bladeburner/Contract";
 import { GeneralActions } from "./Bladeburner/GeneralActions";
 import { ActionTypes } from "./Bladeburner/data/ActionTypes";
+import { ActionIdentifier } from "./Bladeburner/ActionIdentifier";
 
 import { addOffset } from "../utils/helpers/addOffset";
 import { clearObject } from "../utils/helpers/clearObject";
@@ -63,21 +64,6 @@ import { Money } from "./ui/React/Money";
 import React from "react";
 import ReactDOM from "react-dom";
 
-function ActionIdentifier(params={}) {
-    if (params.name) {this.name = params.name;}
-    if (params.type) {this.type = params.type;}
-}
-
-ActionIdentifier.prototype.toJSON = function() {
-    return Generic_toJSON("ActionIdentifier", this);
-}
-
-ActionIdentifier.fromJSON = function(value) {
-    return Generic_fromJSON(ActionIdentifier, value.data);
-}
-
-Reviver.constructors.ActionIdentifier = ActionIdentifier;
-
 function Bladeburner(params={}) {
     this.numHosp        = 0; // Number of hospitalizations
     this.moneyLost      = 0; // Money lost due to hospitalizations
@@ -149,10 +135,12 @@ function Bladeburner(params={}) {
 
     // Console command history
     this.consoleHistory = [];
-    this.consoleLogs = [];
+    this.consoleLogs = [
+        "Bladeburner Console",
+        "Type 'help' to see console commands",
+    ];
 
     // Initialization
-    this.initializeDomElementRefs();
     if (params.new) {this.create();}
 }
 
@@ -1131,58 +1119,6 @@ Bladeburner.prototype.triggerMigration = function(sourceCityName) {
     destCity.pop += count;
 }
 
-let DomElems = {};
-
-Bladeburner.prototype.initializeDomElementRefs = function() {
-    DomElems = {
-        bladeburnerDiv: null,
-    };
-}
-
-Bladeburner.prototype.createContent = function() {
-    DomElems.bladeburnerDiv = createElement("div");
-
-    ReactDOM.render(<Root bladeburner={this} player={Player} engine={Engine} />, DomElems.bladeburnerDiv);
-
-    document.getElementById("entire-game-container").appendChild(DomElems.bladeburnerDiv);
-
-    if (this.consoleLogs.length === 0) {
-        this.postToConsole("Bladeburner Console");
-        this.postToConsole("Type 'help' to see console commands");
-    } else {
-        for (let i = 0; i < this.consoleLogs.length; ++i) {
-            this.postToConsole(this.consoleLogs[i], false);
-        }
-    }
-}
-
-Bladeburner.prototype.clearContent = function() {
-    if (DomElems.bladeburnerDiv instanceof Element) {
-        removeChildrenFromElement(DomElems.bladeburnerDiv);
-        removeElement(DomElems.bladeburnerDiv);
-    }
-    clearObject(DomElems);
-    this.initializeDomElementRefs();
-}
-
-////////////////////////////////////////////////////////////////////////////////
-////////////////////////////////////////////////////////////////////////////////
-////////////////////////////////////////////////////////////////////////////////
-////////////////////////////////////////////////////////////////////////////////
-////////////////////////////////////////////////////////////////////////////////
-////////////////////////////////////////////////////////////////////////////////
-////////////////////////////////////////////////////////////////////////////////
-////////////////////////////////////////////////////////////////////////////////
-///////////////////////////////HYDRO END OF UI//////////////////////////////////
-////////////////////////////////////////////////////////////////////////////////
-////////////////////////////////////////////////////////////////////////////////
-////////////////////////////////////////////////////////////////////////////////
-////////////////////////////////////////////////////////////////////////////////
-////////////////////////////////////////////////////////////////////////////////
-////////////////////////////////////////////////////////////////////////////////
-////////////////////////////////////////////////////////////////////////////////
-////////////////////////////////////////////////////////////////////////////////
-
 // Bladeburner Console Window
 Bladeburner.prototype.postToConsole = function(input, saveToLogs=true) {
     const MaxConsoleEntries = 100;

src/Bladeburner/ActionIdentifier.ts

@@ -0,0 +1,27 @@
+import { Generic_fromJSON, Generic_toJSON, Reviver } from "../../utils/JSONReviver";
+
+interface IParams {
+    name?: string;
+    type?: number;
+}
+
+export class ActionIdentifier {
+    name?: string;
+    type?: number;
+
+    constructor(params: IParams = {}) {
+        if (params.name) this.name = params.name;
+        if (params.type) this.type = params.type;
+    }
+
+    toJSON(): any {
+        return Generic_toJSON("ActionIdentifier", this);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    static fromJSON(value: any): ActionIdentifier {
+        return Generic_fromJSON(ActionIdentifier, value.data);
+    }
+}
+
+Reviver.constructors.ActionIdentifier = ActionIdentifier;

src/Bladeburner/IActionIdentifier.ts

@@ -1,4 +1,4 @@
 export interface IActionIdentifier {
     name: string;
-    type: string;
+    type: number;
 }

src/Bladeburner/IBladeburner.ts

@@ -1,5 +1,6 @@
 import { IActionIdentifier } from "./IActionIdentifier";
 import { City } from "./City";
+import { Skill } from "./Skill";
 
 export interface IBladeburner {
     numHosp: number;
@@ -14,6 +15,7 @@ export interface IBladeburner {
     randomEventCounter: number;
     actionTimeToComplete: number;
     actionTimeCurrent: number;
+    actionTimeOverflow: number;
     action: IActionIdentifier;
     cities: any;
     city: string;
@@ -36,4 +38,8 @@ export interface IBladeburner {
 
     getCurrentCity(): City;
     calculateStaminaPenalty(): number;
+    startAction(action: IActionIdentifier): void;
+    upgradeSkill(skill: Skill): void;
+    executeConsoleCommands(command: string): void;
+    postToConsole(input: string, saveToLogs: boolean): void;
 }

src/Bladeburner/ui/AllPages.tsx

@@ -5,9 +5,10 @@ import { OperationPage } from "./OperationPage";
 import { BlackOpPage } from "./BlackOpPage";
 import { SkillPage } from "./SkillPage";
 import { stealthIcon, killIcon } from "../data/Icons";
+import { IBladeburner } from "../IBladeburner";
 
 interface IProps {
-    bladeburner: any;
+    bladeburner: IBladeburner;
 }
 
 export function AllPages(props: IProps): React.ReactElement {

src/Bladeburner/ui/BlackOpElem.tsx

@@ -8,9 +8,10 @@ import { createProgressBarText } from "../../../utils/helpers/createProgressBarT
 import { stealthIcon, killIcon } from "../data/Icons";
 import { createPopup } from "../../ui/React/createPopup";
 import { TeamSizePopup } from "./TeamSizePopup";
+import { IBladeburner } from "../IBladeburner";
 
 interface IProps {
-    bladeburner: any;
+    bladeburner: IBladeburner;
     action: any;
 }
 

src/Bladeburner/ui/BlackOpList.tsx

@@ -9,9 +9,10 @@ import { stealthIcon, killIcon } from "../data/Icons";
 import { BlackOperations } from "../BlackOperations";
 import { BlackOperation } from "../BlackOperation";
 import { BlackOpElem } from "./BlackOpElem";
+import { IBladeburner } from "../IBladeburner";
 
 interface IProps {
-    bladeburner: any;
+    bladeburner: IBladeburner;
 }
 
 export function BlackOpList(props: IProps): React.ReactElement {

src/Bladeburner/ui/BlackOpPage.tsx

@@ -1,8 +1,9 @@
 import * as React from "react";
 import { BlackOpList } from "./BlackOpList";
+import { IBladeburner } from "../IBladeburner";
 
 interface IProps {
-    bladeburner: any;
+    bladeburner: IBladeburner;
 }
 
 export function BlackOpPage(props: IProps): React.ReactElement {

src/Bladeburner/ui/Console.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
+import { IBladeburner } from "../IBladeburner";
 
 interface ILineProps {
     content: any;
@@ -11,7 +12,7 @@ function Line(props: ILineProps): React.ReactElement {
 }
 
 interface IProps {
-    bladeburner: any;
+    bladeburner: IBladeburner;
 }
 
 export function Console(props: IProps): React.ReactElement {
@@ -45,7 +46,7 @@ export function Console(props: IProps): React.ReactElement {
             const command = event.currentTarget.value;
             event.currentTarget.value = "";
             if (command.length > 0) {
-                props.bladeburner.postToConsole("> " + command);
+                props.bladeburner.postToConsole("> " + command, true);
                 props.bladeburner.executeConsoleCommands(command);
                 setConsoleHistoryIndex(props.bladeburner.consoleHistory.length);
                 rerender();

src/Bladeburner/ui/ContractElem.tsx

@@ -7,9 +7,10 @@ import {
 } from "../../../utils/StringHelperFunctions";
 import { stealthIcon, killIcon } from "../data/Icons";
 import { BladeburnerConstants } from "../data/Constants";
+import { IBladeburner } from "../IBladeburner";
 
 interface IProps {
-    bladeburner: any;
+    bladeburner: IBladeburner;
     action: any;
 }
 

src/Bladeburner/ui/ContractList.tsx

@@ -5,9 +5,10 @@ import {
 } from "../../../utils/StringHelperFunctions";
 import { ContractElem } from "./ContractElem";
 import { Contract } from "../Contract";
+import { IBladeburner } from "../IBladeburner";
 
 interface IProps {
-    bladeburner: any;
+    bladeburner: IBladeburner;
 }
 
 export function ContractList(props: IProps): React.ReactElement {

src/Bladeburner/ui/ContractPage.tsx

@@ -1,8 +1,9 @@
 import * as React from "react";
 import { ContractList } from "./ContractList";
+import { IBladeburner } from "../IBladeburner";
 
 interface IProps {
-    bladeburner: any;
+    bladeburner: IBladeburner;
 }
 
 export function ContractPage(props: IProps): React.ReactElement {

src/Bladeburner/ui/GeneralActionElem.tsx

@@ -7,9 +7,10 @@ import {
 } from "../../../utils/StringHelperFunctions";
 import { stealthIcon, killIcon } from "../data/Icons";
 import { BladeburnerConstants } from "../data/Constants";
+import { IBladeburner } from "../IBladeburner";
 
 interface IProps {
-    bladeburner: any;
+    bladeburner: IBladeburner;
     action: any;
 }
 

src/Bladeburner/ui/GeneralActionList.tsx

@@ -6,9 +6,10 @@ import {
 import { GeneralActionElem } from "./GeneralActionElem";
 import { Action } from "../Action";
 import { GeneralActions } from "../GeneralActions";
+import { IBladeburner } from "../IBladeburner";
 
 interface IProps {
-    bladeburner: any;
+    bladeburner: IBladeburner;
 }
 
 export function GeneralActionList(props: IProps): React.ReactElement {

src/Bladeburner/ui/GeneralActionPage.tsx

@@ -1,8 +1,9 @@
 import * as React from "react";
 import { GeneralActionList } from "./GeneralActionList";
+import { IBladeburner } from "../IBladeburner";
 
 interface IProps {
-    bladeburner: any;
+    bladeburner: IBladeburner;
 }
 
 export function GeneralActionPage(props: IProps): React.ReactElement {

src/Bladeburner/ui/OperationElem.tsx

@@ -9,9 +9,10 @@ import { stealthIcon, killIcon } from "../data/Icons";
 import { BladeburnerConstants } from "../data/Constants";
 import { createPopup } from "../../ui/React/createPopup";
 import { TeamSizePopup } from "./TeamSizePopup";
+import { IBladeburner } from "../IBladeburner";
 
 interface IProps {
-    bladeburner: any;
+    bladeburner: IBladeburner;
     action: any;
 }
 

src/Bladeburner/ui/OperationList.tsx

@@ -5,9 +5,10 @@ import {
 } from "../../../utils/StringHelperFunctions";
 import { OperationElem } from "./OperationElem";
 import { Operation } from "../Operation";
+import { IBladeburner } from "../IBladeburner";
 
 interface IProps {
-    bladeburner: any;
+    bladeburner: IBladeburner;
 }
 
 export function OperationList(props: IProps): React.ReactElement {

src/Bladeburner/ui/OperationPage.tsx

@@ -1,8 +1,9 @@
 import * as React from "react";
 import { OperationList } from "./OperationList";
+import { IBladeburner } from "../IBladeburner";
 
 interface IProps {
-    bladeburner: any;
+    bladeburner: IBladeburner;
 }
 
 export function OperationPage(props: IProps): React.ReactElement {

src/Bladeburner/ui/Root.tsx

@@ -5,15 +5,16 @@ import { AllPages } from "./AllPages";
 
 import { IPlayer } from "../../PersonObjects/IPlayer";
 import { IEngine } from "../../IEngine";
+import { IBladeburner } from "../IBladeburner";
 
 interface IProps {
-    bladeburner: any;
+    bladeburner: IBladeburner;
     engine: IEngine;
     player: IPlayer;
 }
 
 export function Root(props: IProps): React.ReactElement {
-    return (<div id="bladeburner-container" className="generic-menupage-container" style={{position:"fixed"}}>
+    return (<div id="bladeburner-container">
         <div style={{height:"60%", display:"block", position:"relative"}}>
             <div style={{height: '100%', width:"30%", display:"inline-block", border:"1px solid white"}}>
                 <Stats bladeburner={props.bladeburner} player={props.player} engine={props.engine} />

src/Bladeburner/ui/SkillElem.tsx

@@ -1,10 +1,11 @@
 import React, { useState } from "react";
 import { CopyableText } from "../../ui/React/CopyableText";
 import { formatNumber } from "../../../utils/StringHelperFunctions";
+import { IBladeburner } from "../IBladeburner";
 
 interface IProps {
     skill: any;
-    bladeburner: any;
+    bladeburner: IBladeburner;
     onUpgrade: () => void;
 }
 

src/Bladeburner/ui/SkillList.tsx

@@ -1,9 +1,10 @@
 import * as React from "react";
 import { SkillElem } from "./SkillElem";
 import { Skills } from "../Skills";
+import { IBladeburner } from "../IBladeburner";
 
 interface IProps {
-    bladeburner: any;
+    bladeburner: IBladeburner;
     onUpgrade: () => void;
 }
 

src/Bladeburner/ui/SkillPage.tsx

@@ -2,9 +2,10 @@ import React, { useState } from "react";
 import { SkillList } from "./SkillList";
 import { BladeburnerConstants } from "../data/Constants";
 import { formatNumber } from "../../../utils/StringHelperFunctions";
+import { IBladeburner } from "../IBladeburner";
 
 interface IProps {
-    bladeburner: any;
+    bladeburner: IBladeburner;
 }
 
 

src/Bladeburner/ui/Stats.tsx

@@ -16,11 +16,12 @@ import {
     joinFaction,
     displayFactionContent,
 } from "../../Faction/FactionHelpers";
+import { IBladeburner } from "../IBladeburner";
 
 import { TravelPopup } from "./TravelPopup";
 
 interface IProps {
-    bladeburner: any;
+    bladeburner: IBladeburner;
     engine: IEngine;
     player: IPlayer;
 }

src/Bladeburner/ui/TeamSizePopup.tsx

@@ -3,9 +3,10 @@ import { removePopup } from "../../ui/React/createPopup";
 import { BladeburnerConstants } from "../data/Constants";
 import { dialogBoxCreate } from "../../../utils/DialogBox";
 import { Action } from "../Action";
+import { IBladeburner } from "../IBladeburner";
 
 interface IProps {
-    bladeburner: any;
+    bladeburner: IBladeburner;
     action: Action;
     popupId: string;
 }

src/Bladeburner/ui/TravelPopup.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import { removePopup } from "../../ui/React/createPopup";
 import { BladeburnerConstants } from "../data/Constants";
+import { IBladeburner } from "../IBladeburner";
 
 interface IProps {
-    bladeburner: any;
+    bladeburner: IBladeburner;
     popupId: string;
 }
 

src/engine.jsx

@@ -36,6 +36,7 @@ import {
     FactionList,
 } from "./Faction/ui/FactionList";
 import { displayGangContent } from "./Gang/Helpers";
+import { Root as BladeburnerRoot } from "./Bladeburner/ui/Root";
 import { displayInfiltrationContent } from "./Infiltration/Helper";
 import { 
     getHackingWorkRepGain,
@@ -229,6 +230,7 @@ const Engine = {
         infiltrationContent:            null,
         stockMarketContent:             null,
         gangContent:                    null,
+        bladeburnerContent:             null,
         locationContent:                null,
         workInProgressContent:          null,
         redPillContent:                 null,
@@ -470,16 +472,15 @@ const Engine = {
     },
 
     loadBladeburnerContent: function() {
-        if (Player.bladeburner instanceof Bladeburner) {
+        if (!(Player.bladeburner instanceof Bladeburner)) return;
-            try {
+        Engine.hideAllContent();
-                Engine.hideAllContent();
+        routing.navigateTo(Page.Bladeburner);
-                routing.navigateTo(Page.Bladeburner);
+        Engine.Display.bladeburnerContent.style.display = "block";
-                Player.bladeburner.createContent();
+        ReactDOM.render(
-                MainMenuLinks.Bladeburner.classList.add("active");
+            <BladeburnerRoot bladeburner={Player.bladeburner} player={Player} engine={this} />,
-            } catch(e) {
+            Engine.Display.bladeburnerContent,
-                exceptionAlert(e);
+        );
-            }
+        MainMenuLinks.Bladeburner.classList.add("active");
-        }
     },
 
     loadSleevesContent: function() {
@@ -535,6 +536,9 @@ const Engine = {
         Engine.Display.gangContent.style.display = "none";
         ReactDOM.unmountComponentAtNode(Engine.Display.gangContent);
 
+        Engine.Display.bladeburnerContent.style.display = "none";
+        ReactDOM.unmountComponentAtNode(Engine.Display.bladeburnerContent);
+
         Engine.Display.workInProgressContent.style.display = "none";
         Engine.Display.redPillContent.style.display = "none";
         Engine.Display.cinematicTextContent.style.display = "none";
@@ -548,10 +552,6 @@ const Engine = {
             Player.corporation.clearUI();
         }
 
-        if (Player.bladeburner instanceof Bladeburner) {
-            Player.bladeburner.clearContent();
-        }
-
         clearResleevesPage();
         clearSleevesPage();
 
@@ -1260,6 +1260,9 @@ 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.style.display = "none";
+
         Engine.Display.missionContent = document.getElementById("mission-container");
         Engine.Display.missionContent.style.display = "none";
 

src/index.html

@@ -232,8 +232,10 @@ if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %>
 	<div id="augmentations-container" class="generic-menupage-container"></div>
 
     <!-- Milestones content -->
-    <div id="milestones-container" class="generic-menupage-container">
+    <div id="milestones-container" class="generic-menupage-container"></div>
-    </div>
+    
+    <!-- Bladeburner -->
+    <div id="bladeburner-container" class="generic-menupage-container"></div>
 
 	<!-- Tutorial content -->
 	<div id="tutorial-container" class="generic-menupage-container">