diff --git a/src/CharacterOverview.js b/src/CharacterOverview.js deleted file mode 100644 index 46f2ef916..000000000 --- a/src/CharacterOverview.js +++ /dev/null @@ -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}; diff --git a/src/Corporation/Corporation.jsx b/src/Corporation/Corporation.jsx index e8d510de2..1a26bf92d 100644 --- a/src/Corporation/Corporation.jsx +++ b/src/Corporation/Corporation.jsx @@ -1523,7 +1523,7 @@ Employee.prototype.createUI = function(panel, corporation, industry) { } } - selector.addEventListener("change", ()=>{ + selector.addEventListener("change", () => { this.pos = selector.options[selector.selectedIndex].value; }); diff --git a/src/engine.js b/src/engine.jsx similarity index 99% rename from src/engine.js rename to src/engine.jsx index a2f2966b1..8b0646aa8 100644 --- a/src/engine.js +++ b/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(, document.getElementById('character-overview-text')); const save = document.getElementById("character-overview-save-button"); const flashClass = "flashing-button"; diff --git a/src/index.html b/src/index.html index b88c3e468..5dd72486b 100644 --- a/src/index.html +++ b/src/index.html @@ -796,35 +796,7 @@ if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Hp:
Money: 
Hack: 
Str: 
Def: 
Dex: 
Agi: 
Cha: 
Int: 
+
diff --git a/src/ui/React/CharacterOverview.jsx b/src/ui/React/CharacterOverview.jsx new file mode 100644 index 000000000..1bdc69c9c --- /dev/null +++ b/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=( + + Int: {(Player.intelligence).toLocaleString()} + +); + } + + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + {intelligence} + +
Hp:{Player.hp + " / " + Player.max_hp}
Money: {numeralWrapper.format(Player.money.toNumber(), '$0.000a')}
Hack: {(Player.hacking_skill).toLocaleString()}
Str: {(Player.strength).toLocaleString()}
Def: {(Player.defense).toLocaleString()}
Dex: {(Player.dexterity).toLocaleString()}
Agi: {(Player.agility).toLocaleString()}
Cha: {(Player.charisma).toLocaleString()}
+
+ ) + } +} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 5808115ad..324aa6e72 100644 --- a/webpack.config.js +++ b/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"; }