Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-11-18 21:53:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

Character overview is now through react

Browse Source
This commit is contained in:
Olivier Gagnon 2019-03-14 00:56:48 -04:00 committed by danielyxie
parent 8470f307ac
commit b4057fcb26
6 changed files with 61 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/CharacterOverview.js
View File

@ -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};

7
src/engine.js → src/engine.jsx
View File

@ -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";

30
src/index.html
View File

@ -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>
<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>
<!-- ReactJS Component -->
</div>
<div class="character-quick-options">
<button id="character-overview-save-button" class="character-overview-btn">Save Game</button>

54
src/ui/React/CharacterOverview.jsx Normal file
View File

@ -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>
)
}
}

2
webpack.config.js
View File

@ -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";
}