more conversion

package-lock.json

@@ -1,12 +1,11 @@
 {
   "name": "bitburner",
-  "version": "0.52.8",
+  "version": "0.52.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "bitburner",
+      "version": "0.52.9",
-      "version": "0.52.8",
       "hasInstallScript": true,
       "license": "SEE LICENSE IN license.txt",
       "dependencies": {
@@ -48,6 +47,7 @@
         "react-modal": "^3.12.1",
         "sprintf-js": "^1.1.1",
         "tapable": "^1.0.0",
+        "treant-js": "^1.0.1",
         "uuid": "^3.2.1",
         "w3c-blob": "0.0.1"
       },
@@ -21562,6 +21562,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/treant-js": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/treant-js/-/treant-js-1.0.1.tgz",
+      "integrity": "sha1-aRdSt+9maSCzQiP8ZlJUaTtG/VQ="
+    },
     "node_modules/trim": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
@@ -41058,6 +41063,11 @@
         }
       }
     },
+    "treant-js": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/treant-js/-/treant-js-1.0.1.tgz",
+      "integrity": "sha1-aRdSt+9maSCzQiP8ZlJUaTtG/VQ="
+    },
     "trim": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",

package.json

@@ -44,6 +44,7 @@
     "react-modal": "^3.12.1",
     "sprintf-js": "^1.1.1",
     "tapable": "^1.0.0",
+    "treant-js": "^1.0.1",
     "uuid": "^3.2.1",
     "w3c-blob": "0.0.1"
   },

src/Corporation/Corporation.jsx

@@ -1333,111 +1333,6 @@ Industry.prototype.getStorageMultiplier = function() {
     return IndustryResearchTrees[this.type].getStorageMultiplier();
 }
 
-// Create the Research Tree UI for this Industry
-Industry.prototype.createResearchBox = function() {
-    const boxId = "corporation-research-popup-box";
-
-    if (researchTreeBoxOpened) {
-        // It's already opened, so delete it to refresh content
-        removeElementById(boxId);
-        researchTreeBox = null;
-    }
-
-    const researchTree = IndustryResearchTrees[this.type];
-
-    // Create the popup first, so that the tree diagram can be added to it
-    // This is handled by Treant
-    researchTreeBox = createPopup(boxId, [], { backgroundColor: "black" });
-
-    // Get the tree's markup (i.e. config) for Treant
-    const markup = researchTree.createTreantMarkup();
-    markup.chart.container = "#" + boxId + "-content";
-    markup.chart.nodeAlign = "BOTTOM";
-    markup.chart.rootOrientation = "WEST";
-    markup.chart.siblingSeparation = 40;
-    markup.chart.connectors = {
-        type: "step",
-        style: {
-            "arrow-end": "block-wide-long",
-            "stroke": "white",
-            "stroke-width": 2,
-        },
-    }
-
-    // Construct the tree with Treant
-    // This is required for side effect.
-    // eslint-disable-next-line no-new
-    new Treant(markup);
-
-    // Add Event Listeners for all Nodes
-    const allResearch = researchTree.getAllNodes();
-    for (let i = 0; i < allResearch.length; ++i) {
-        // If this is already Researched, skip it
-        if (this.researched[allResearch[i]] === true) {
-            continue;
-        }
-
-        // Get the Research object
-        const research = ResearchMap[allResearch[i]];
-
-        // Get the DOM Element to add a click listener to it
-        const sanitizedName = allResearch[i].replace(/\s/g, '');
-        const div = document.getElementById(sanitizedName + "-corp-research-click-listener");
-        if (div == null) {
-            console.warn(`Could not find Research Tree div for ${sanitizedName}`);
-            continue;
-        }
-
-        div.addEventListener("click", () => {
-            if (this.sciResearch.qty >= research.cost) {
-                this.sciResearch.qty -= research.cost;
-
-                // Get the Node from the Research Tree and set its 'researched' property
-                researchTree.research(allResearch[i]);
-                this.researched[allResearch[i]] = true;
-
-                const researchBox = this.createResearchBox();
-                dialogBoxCreate(`Researched ${allResearch[i]}. It may take a market cycle ` +
-                                `(~${SecsPerMarketCycle} seconds) before the effects of ` +
-                                `the Research apply.`);
-
-                return researchBox;
-            } else {
-                dialogBoxCreate(`You do not have enough Scientific Research for ${research.name}`);
-            }
-        });
-    }
-
-
-    const boxContent = document.getElementById(`${boxId}-content`);
-    if (boxContent != null) {
-        // Add information about multipliers from research at the bottom of the popup
-        appendLineBreaks(boxContent, 2);
-        boxContent.appendChild(createElement("pre", {
-            display: "block",
-            innerText:  `Multipliers from research:\n` +
-                        ` * Advertising Multiplier: x${researchTree.getAdvertisingMultiplier()}\n` +
-                        ` * Employee Charisma Multiplier: x${researchTree.getEmployeeChaMultiplier()}\n` +
-                        ` * Employee Creativity Multiplier: x${researchTree.getEmployeeCreMultiplier()}\n` +
-                        ` * Employee Efficiency Multiplier: x${researchTree.getEmployeeEffMultiplier()}\n` +
-                        ` * Employee Intelligence Multiplier: x${researchTree.getEmployeeIntMultiplier()}\n` +
-                        ` * Production Multiplier: x${researchTree.getProductionMultiplier()}\n` +
-                        ` * Sales Multiplier: x${researchTree.getSalesMultiplier()}\n` +
-                        ` * Scientific Research Multiplier: x${researchTree.getScientificResearchMultiplier()}\n` +
-                        ` * Storage Multiplier: x${researchTree.getStorageMultiplier()}`,
-        }));
-
-        // Close button
-        boxContent.appendChild(createPopupCloseButton(researchTreeBox, {
-            class: "std-button",
-            display: "block",
-            innerText: "Close",
-        }));
-    }
-
-    researchTreeBoxOpened = true;
-}
-
 Industry.prototype.toJSON = function() {
     return Generic_toJSON("Industry", this);
 }

src/Corporation/ui/IndustryOverview.tsx

@@ -9,6 +9,7 @@ import { numeralWrapper }           from "../../ui/numeralFormat";
 import { dialogBoxCreate }          from "../../../utils/DialogBox";
 import { createProgressBarText }    from "../../../utils/helpers/createProgressBarText";
 import { MakeProductPopup }         from "./MakeProductPopup";
+import { ResearchPopup }            from "./ResearchPopup";
 import { createPopup }              from "../../ui/React/createPopup";
 
 interface IProps {
@@ -153,6 +154,14 @@ export function IndustryOverview(props: IProps): React.ReactElement {
                             `Real Estate: ${convertEffectFacToGraphic(division.reFac)}`);
         }
 
+        function openResearchPopup(): void {
+            const popupId = "corporation-research-popup-box";
+            createPopup(popupId, ResearchPopup, {
+                industry: division,
+                popupId: popupId,
+            });
+        }
+
         return (
             <div>
                 {genInfo}
@@ -195,7 +204,7 @@ export function IndustryOverview(props: IProps): React.ReactElement {
                         products that you produce.
                     </span>
                 </p>
-                <button className={"help-tip"} onClick={division.createResearchBox.bind(division)}>
+                <button className={"help-tip"} onClick={openResearchPopup}>
                     Research
                 </button>
             </div>

src/Corporation/ui/ResearchPopup.tsx

@@ -0,0 +1,110 @@
+import React, { useState, useEffect } from 'react';
+import { Warehouse } from "../Warehouse";
+import { dialogBoxCreate } from "../../../utils/DialogBox";
+import { createElement } from "../../../utils/uiHelpers/createElement";
+import { removePopup } from "../../ui/React/createPopup";
+import { createOptionElement } from "../../../utils/uiHelpers/createOptionElement";
+import { clearSelector } from "../../../utils/uiHelpers/clearSelector";
+import { getSelectText,
+         getSelectValue } from "../../../utils/uiHelpers/getSelectData";
+import { MaterialSizes } from "../MaterialSizes";
+import { numeralWrapper } from "../../ui/numeralFormat";
+import { IndustryResearchTrees } from "../IndustryData";
+import { CorporationConstants } from "../data/Constants";
+import { ResearchMap } from "../ResearchMap";
+import { ResearchTree } from "../ResearchTree";
+import { Treant } from 'treant-js';
+
+interface IProps {
+    industry: any;
+    popupId: string;
+}
+
+// Create the Research Tree UI for this Industry
+export function ResearchPopup(props: IProps): React.ReactElement {
+
+    useEffect(() => {
+        const researchTree = IndustryResearchTrees[props.industry.type];
+        if(researchTree === undefined) return;
+
+        // Get the tree's markup (i.e. config) for Treant
+        const markup = researchTree.createTreantMarkup();
+        markup.chart.container = "#" + props.popupId + "-content";
+        markup.chart.nodeAlign = "BOTTOM";
+        markup.chart.rootOrientation = "WEST";
+        markup.chart.siblingSeparation = 40;
+        markup.chart.connectors = {
+            type: "step",
+            style: {
+                "arrow-end": "block-wide-long",
+                "stroke": "white",
+                "stroke-width": 2,
+            },
+        }
+
+        // Construct the tree with Treant
+        // This is required for side effect.
+        // eslint-disable-next-line no-new
+        Treant(markup);
+
+        // Add Event Listeners for all Nodes
+        const allResearch = researchTree.getAllNodes();
+        for (let i = 0; i < allResearch.length; ++i) {
+            // If this is already Researched, skip it
+            if (props.industry.researched[allResearch[i]] === true) {
+                continue;
+            }
+
+            // Get the Research object
+            const research = ResearchMap[allResearch[i]];
+
+            // Get the DOM Element to add a click listener to it
+            const sanitizedName = allResearch[i].replace(/\s/g, '');
+            const div = document.getElementById(sanitizedName + "-corp-research-click-listener");
+            if (div == null) {
+                console.warn(`Could not find Research Tree div for ${sanitizedName}`);
+                continue;
+            }
+
+            div.addEventListener("click", () => {
+                if (props.industry.sciResearch.qty >= research.cost) {
+                    props.industry.sciResearch.qty -= research.cost;
+
+                    // Get the Node from the Research Tree and set its 'researched' property
+                    researchTree.research(allResearch[i]);
+                    props.industry.researched[allResearch[i]] = true;
+
+                    const researchBox = props.industry.createResearchBox();
+                    dialogBoxCreate(`Researched ${allResearch[i]}. It may take a market cycle ` +
+                                    `(~${CorporationConstants.SecsPerMarketCycle} seconds) before the effects of ` +
+                                    `the Research apply.`);
+                } else {
+                    dialogBoxCreate(`You do not have enough Scientific Research for ${research.name}`);
+                }
+            });
+        }
+
+
+        const boxContent = document.getElementById(`${props.popupId}-content`);
+        if (boxContent != null) {
+            // Add information about multipliers from research at the bottom of the popup
+            //appendLineBreaks(boxContent, 2);
+            boxContent.appendChild(createElement("pre", {
+                display: "block",
+                innerText:  `Multipliers from research:\n` +
+                            ` * Advertising Multiplier: x${researchTree.getAdvertisingMultiplier()}\n` +
+                            ` * Employee Charisma Multiplier: x${researchTree.getEmployeeChaMultiplier()}\n` +
+                            ` * Employee Creativity Multiplier: x${researchTree.getEmployeeCreMultiplier()}\n` +
+                            ` * Employee Efficiency Multiplier: x${researchTree.getEmployeeEffMultiplier()}\n` +
+                            ` * Employee Intelligence Multiplier: x${researchTree.getEmployeeIntMultiplier()}\n` +
+                            ` * Production Multiplier: x${researchTree.getProductionMultiplier()}\n` +
+                            ` * Sales Multiplier: x${researchTree.getSalesMultiplier()}\n` +
+                            ` * Scientific Research Multiplier: x${researchTree.getScientificResearchMultiplier()}\n` +
+                            ` * Storage Multiplier: x${researchTree.getStorageMultiplier()}`,
+            }));
+        }
+    });
+
+    return <div id={props.popupId}></div>
+
+}

src/ThirdParty/treant-js.d.ts

@@ -0,0 +1 @@
+declare module "treant-js";