Merge branch 'dev' of https://github.com/danielyxie/bitburner into dev

src/CharacterOverview.js

@@ -1,59 +0,0 @@
-import {Player}  from "./Player";
-
-import {numeralWrapper} from "./ui/numeralFormat";
-
-function CharacterOverview() {
-	this.hp = document.getElementById("character-hp-text");
-	this.money = document.getElementById("character-money-text");
-	this.hack = document.getElementById("character-hack-text");
-	this.str = document.getElementById("character-str-text");
-	this.def = document.getElementById("character-def-text");
-	this.dex = document.getElementById("character-dex-text");
-	this.agi = document.getElementById("character-agi-text");
-	this.cha = document.getElementById("character-cha-text");
-	this.int = document.getElementById("character-int-text");
-	this.intWrapper = document.getElementById("character-int-wrapper");
-	this.repaintElem = document.getElementById("character-overview-text");
-}
-
-CharacterOverview.prototype.repaint = function() {
-	// this is an arbitrary function we can call to trigger a repaint.
-	this.repaintElem.getClientRects();
-}
-
-CharacterOverview.prototype.update = function() {
-		if (Player.hp == null) {Player.hp = Player.max_hp;}
-
-        const replaceAndChanged = function(elem, text) {
-            if(elem.textContent === text) {
-                return false;
-            }
-            elem.textContent = text;
-            return true;
-        }
-
-        let changed = false;
-        changed = replaceAndChanged(this.hp, Player.hp + " / " + Player.max_hp) || changed;
-        changed = replaceAndChanged(this.money, numeralWrapper.format(Player.money.toNumber(), '$0.000a')) || changed;
-        changed = replaceAndChanged(this.hack, (Player.hacking_skill).toLocaleString()) || changed;
-        changed = replaceAndChanged(this.str, (Player.strength).toLocaleString()) || changed;
-        changed = replaceAndChanged(this.def, (Player.defense).toLocaleString()) || changed;
-        changed = replaceAndChanged(this.dex, (Player.dexterity).toLocaleString()) || changed;
-        changed = replaceAndChanged(this.agi, (Player.agility).toLocaleString()) || changed;
-        changed = replaceAndChanged(this.cha, (Player.charisma).toLocaleString()) || changed;
-        changed = replaceAndChanged(this.int, (Player.intelligence).toLocaleString()) || changed;
-
-        // handle int appearing
-        const int = this.intWrapper;
-        const old = int.style.display;
-        const now = Player.intelligence >= 1 ? "" : "none";
-        if(old !== now) {
-            int.style.display = now;
-            changed = true;
-        }
-
-        // recalculate box size if something changed
-        if(changed) this.repaint();
-}
-
-export {CharacterOverview};

src/Corporation/Corporation.jsx

@@ -1526,7 +1526,7 @@ Employee.prototype.createUI = function(panel, corporation, industry) {
         }
     }
 
-    selector.addEventListener("change", ()=>{
+    selector.addEventListener("change", () => {
         this.pos = selector.options[selector.selectedIndex].value;
     });
 

src/engine.jsx

@@ -14,7 +14,7 @@ import { AugmentationNames }                            from "./Augmentation/dat
 import {BitNodes, initBitNodes,
         initBitNodeMultipliers}                         from "./BitNode/BitNode";
 import {Bladeburner}                                    from "./Bladeburner";
-import {CharacterOverview}                              from "./CharacterOverview";
+import { CharacterOverviewComponent }                   from "./ui/React/CharacterOverview";
 import {cinematicTextFlag}                              from "./CinematicText";
 import {generateRandomContract}                         from "./CodingContractGenerator";
 import {CompanyPositions}                               from "./Company/CompanyPositions";
@@ -96,6 +96,8 @@ import { exceptionAlert }                               from "../utils/helpers/e
 import { removeLoadingScreen }                          from "../utils/uiHelpers/removeLoadingScreen";
 import {KEY}                                            from "../utils/helpers/keyCodes";
 
+import React                                            from "react";
+import ReactDOM                                         from "react-dom";
 
 // These should really be imported with the module that is presenting that UI, but because they very much depend on the
 // cascade order, we'll pull them all in here.
@@ -202,7 +204,6 @@ $(document).keydown(function(e) {
 const Engine = {
     version: "",
     Debug: true,
-    overview: new CharacterOverview(),
 
     //Clickable objects
     Clickables: {
@@ -570,7 +571,7 @@ const Engine = {
     },
 
     displayCharacterOverviewInfo: function() {
-        Engine.overview.update();
+        ReactDOM.render(<CharacterOverviewComponent />, document.getElementById('character-overview-text'));
 
         const save = document.getElementById("character-overview-save-button");
         const flashClass = "flashing-button";

src/index.html

@@ -796,35 +796,7 @@ if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %>
     <div id="character-overview-wrapper">
     <div id="character-overview-container">
         <div id="character-overview-text">
-            <table>
+            <!-- ReactJS Component -->
-                <tr id="character-hp-wrapper">
-                    <td>Hp:</td><td id="character-hp-text" class="character-stat-cell"></td>
-                </tr>
-                <tr id="character-money-wrapper">
-                    <td>Money:&nbsp;</td><td id="character-money-text" class="character-stat-cell"></td>
-                </tr>
-                <tr id="character-hack-wrapper">
-                    <td>Hack:&nbsp;</td><td id="character-hack-text" class="character-stat-cell"></td>
-                </tr>
-                <tr id="character-str-wrapper">
-                    <td>Str:&nbsp;</td><td id="character-str-text" class="character-stat-cell"></td>
-                </tr>
-                <tr id="character-def-wrapper">
-                    <td>Def:&nbsp;</td><td id="character-def-text" class="character-stat-cell"></td>
-                </tr>
-                <tr id="character-dex-wrapper">
-                    <td>Dex:&nbsp;</td><td id="character-dex-text" class="character-stat-cell"></td>
-                </tr>
-                <tr id="character-agi-wrapper">
-                    <td>Agi:&nbsp;</td><td id="character-agi-text" class="character-stat-cell"></td>
-                </tr>
-                <tr id="character-cha-wrapper">
-                    <td>Cha:&nbsp;</td><td id="character-cha-text" class="character-stat-cell"></td>
-                </tr>
-                <tr id="character-int-wrapper">
-                    <td>Int:&nbsp;</td><td id="character-int-text" class="character-stat-cell"></td>
-                </tr>
-            </table>
         </div>
         <div class="character-quick-options">
             <button id="character-overview-save-button" class="character-overview-btn">Save Game</button>

src/ui/React/CharacterOverview.jsx

@@ -0,0 +1,54 @@
+// Root React Component for the Corporation UI
+import React from "react";
+
+import { Player }         from "../../Player";
+import { numeralWrapper } from "../../ui/numeralFormat";
+
+const Component = React.Component;
+
+export class CharacterOverviewComponent extends Component {
+    render() {
+        let intelligence = "";
+        if (Player.intelligence >= 1) {
+            intelligence=(
+<tr id="character-int-wrapper">
+    <td>Int:&nbsp;</td><td id="character-int-text" className="character-stat-cell">{(Player.intelligence).toLocaleString()}</td>
+</tr>
+);
+        }
+
+        return (
+<div id="character-overview-text">
+    <table>
+    <tbody>
+        <tr id="character-hp-wrapper">
+            <td>Hp:</td><td id="character-hp-text" className="character-stat-cell">{Player.hp + " / " + Player.max_hp}</td>
+        </tr>
+        <tr id="character-money-wrapper">
+            <td>Money:&nbsp;</td><td id="character-money-text" className="character-stat-cell">{numeralWrapper.format(Player.money.toNumber(), '$0.000a')}</td>
+        </tr>
+        <tr id="character-hack-wrapper">
+            <td>Hack:&nbsp;</td><td id="character-hack-text" className="character-stat-cell">{(Player.hacking_skill).toLocaleString()}</td>
+        </tr>
+        <tr id="character-str-wrapper">
+            <td>Str:&nbsp;</td><td id="character-str-text" className="character-stat-cell">{(Player.strength).toLocaleString()}</td>
+        </tr>
+        <tr id="character-def-wrapper">
+            <td>Def:&nbsp;</td><td id="character-def-text" className="character-stat-cell">{(Player.defense).toLocaleString()}</td>
+        </tr>
+        <tr id="character-dex-wrapper">
+            <td>Dex:&nbsp;</td><td id="character-dex-text" className="character-stat-cell">{(Player.dexterity).toLocaleString()}</td>
+        </tr>
+        <tr id="character-agi-wrapper">
+            <td>Agi:&nbsp;</td><td id="character-agi-text" className="character-stat-cell">{(Player.agility).toLocaleString()}</td>
+        </tr>
+        <tr id="character-cha-wrapper">
+            <td>Cha:&nbsp;</td><td id="character-cha-text" className="character-stat-cell">{(Player.charisma).toLocaleString()}</td>
+        </tr>
+        {intelligence}
+     </tbody>
+    </table>
+</div>
+        )
+    }
+}

webpack.config.js

@@ -8,7 +8,7 @@ module.exports = (env, argv) => {
     const isDevelopment = argv.mode === 'development';
     const outputDirectory = isDevServer ? "dist-dev" : "dist";
     const entries = {};
-    entries[`${outputDirectory}/engine`] = "./src/engine.js";
+    entries[`${outputDirectory}/engine`] = "./src/engine.jsx";
     if (!isDevServer) {
         entries["tests/tests"] = "./tests/index.js";
     }