Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-11-26 09:33:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactored a bunch of engine.jsx, now all the react container load into the same div

Browse Source
This commit is contained in:
Olivier Gagnon 2021-09-10 17:29:07 -04:00
parent 5f64187a0f
commit 4bedf05b1c
22 changed files with 354 additions and 476 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/menupages.scss
View File

@ -12,6 +12,11 @@
overflow-y: scroll; overflow-y: scroll;
} }
#generic-react-container {
position: fixed;
padding: 10px;
}
/* Character Info */ /* Character Info */
#character-container { #character-container {
padding-top: 10px; padding-top: 10px;

84
src/Augmentation/ui/Root.tsx
View File

@ -44,47 +44,49 @@ export class AugmentationsRoot extends React.Component<IProps, IState> {
} }
return ( return (
<div id="augmentations-content"> <div id="augmentations-container">
<h1>Purchased Augmentations</h1> <div id="augmentations-content">
<p> <h1>Purchased Augmentations</h1>
Below is a list of all Augmentations you have purchased but not yet installed. Click the button below to <p>
install them. Below is a list of all Augmentations you have purchased but not yet installed. Click the button below to
</p> install them.
<p>WARNING: Installing your Augmentations resets most of your progress, including:</p> </p>
<br /> <p>WARNING: Installing your Augmentations resets most of your progress, including:</p>
<p>- Stats/Skill levels and Experience</p> <br />
<p>- Money</p> <p>- Stats/Skill levels and Experience</p>
<p>- Scripts on every computer but your home computer</p> <p>- Money</p>
<p>- Purchased servers</p> <p>- Scripts on every computer but your home computer</p>
<p>- Hacknet Nodes</p> <p>- Purchased servers</p>
<p>- Faction/Company reputation</p> <p>- Hacknet Nodes</p>
<p>- Stocks</p> <p>- Faction/Company reputation</p>
<br /> <p>- Stocks</p>
<p> <br />
Installing Augmentations lets you start over with the perks and benefits granted by all of the Augmentations <p>
you have ever installed. Also, you will keep any scripts and RAM/Core upgrades on your home computer (but you Installing Augmentations lets you start over with the perks and benefits granted by all of the Augmentations
will lose all programs besides NUKE.exe) you have ever installed. Also, you will keep any scripts and RAM/Core upgrades on your home computer (but
</p> you will lose all programs besides NUKE.exe)
<StdButton </p>
onClick={this.props.installAugmentationsFn} <StdButton
text="Install Augmentations" onClick={this.props.installAugmentationsFn}
tooltip="'I never asked for this'" text="Install Augmentations"
/> tooltip="'I never asked for this'"
<StdButton />
addClasses="flashing-button" <StdButton
onClick={this.export} addClasses="flashing-button"
text={`Backup Save ${exportBonusStr()}`} onClick={this.export}
tooltip="It's always a good idea to backup/export your save!" text={`Backup Save ${exportBonusStr()}`}
/> tooltip="It's always a good idea to backup/export your save!"
<PurchasedAugmentations /> />
<h1>Installed Augmentations</h1> <PurchasedAugmentations />
<p> <h1>Installed Augmentations</h1>
{`List of all Augmentations ${Player.sourceFiles.length > 0 ? "and Source Files " : ""} ` + <p>
`that have been installed. You have gained the effects of these.`} {`List of all Augmentations ${Player.sourceFiles.length > 0 ? "and Source Files " : ""} ` +
</p> `that have been installed. You have gained the effects of these.`}
<InstalledAugmentationsAndSourceFiles /> </p>
<br /> <br /> <InstalledAugmentationsAndSourceFiles />
<PlayerMultipliers /> <br /> <br />
<PlayerMultipliers />
</div>
</div> </div>
); );
} }

4
src/Bladeburner/ui/Root.tsx
View File

@ -15,7 +15,7 @@ interface IProps {
export function Root(props: IProps): React.ReactElement { export function Root(props: IProps): React.ReactElement {
return ( return (
<> <div id="bladeburner-container">
<div style={{ height: "60%", display: "block", position: "relative" }}> <div style={{ height: "60%", display: "block", position: "relative" }}>
<div <div
style={{ style={{
@ -41,6 +41,6 @@ export function Root(props: IProps): React.ReactElement {
> >
<AllPages bladeburner={props.bladeburner} player={props.player} /> <AllPages bladeburner={props.bladeburner} player={props.player} />
</div> </div>
</> </div>
); );
} }

4
src/Corporation/ui/CorporationRoot.tsx
View File

@ -56,7 +56,7 @@ export function CorporationRoot(props: IProps): React.ReactElement {
}, []); }, []);
return ( return (
<> <div id="corporation-container">
<div> <div>
<HeaderTab <HeaderTab
current={divisionName === "Overview"} current={divisionName === "Overview"}
@ -75,6 +75,6 @@ export function CorporationRoot(props: IProps): React.ReactElement {
<ExpandButton corp={props.corp} setDivisionName={setDivisionName} /> <ExpandButton corp={props.corp} setDivisionName={setDivisionName} />
</div> </div>
<MainPanel rerender={rerender} corp={props.corp} divisionName={divisionName} player={props.player} /> <MainPanel rerender={rerender} corp={props.corp} divisionName={divisionName} player={props.player} />
</> </div>
); );
} }

2
src/DevMenu.tsx
View File

@ -757,7 +757,7 @@ export function DevMenuRoot(props: IProps): React.ReactElement {
} }
return ( return (
<div className="col"> <div id="dev-menu-container" className="col">
<div className="row"> <div className="row">
<h1>Development Menu - Only meant to be used for testing/debugging</h1> <h1>Development Menu - Only meant to be used for testing/debugging</h1>
</div> </div>

2
src/Faction/FactionHelpers.jsx
View File

@ -86,7 +86,7 @@ export function displayFactionContent(factionName, initiallyOnAugmentationsPage
p={Player} p={Player}
startHackingMissionFn={startHackingMission} startHackingMissionFn={startHackingMission}
/>, />,
Engine.Display.factionContent, Engine.Display.content,
); );
} }

4
src/Faction/ui/FactionList.tsx
View File

@ -24,7 +24,7 @@ export function FactionList(props: IProps): React.ReactElement {
} }
return ( return (
<> <div id="factions-container">
<h1>Factions</h1> <h1>Factions</h1>
<p>Lists all factions you have joined</p> <p>Lists all factions you have joined</p>
<br /> <br />
@ -60,6 +60,6 @@ export function FactionList(props: IProps): React.ReactElement {
</li> </li>
))} ))}
</ul> </ul>
</> </div>
); );
} }

4
src/Faction/ui/Root.tsx
View File

@ -223,7 +223,7 @@ export class FactionRoot extends React.Component<IProps, IState> {
} }
return ( return (
<div> <div id="faction-container">
<h1>{faction.name}</h1> <h1>{faction.name}</h1>
<Info faction={faction} factionInfo={factionInfo} /> <Info faction={faction} factionInfo={factionInfo} />
{canAccessGang && <Option buttonText={"Manage Gang"} infoText={gangInfo} onClick={this.manageGang} />} {canAccessGang && <Option buttonText={"Manage Gang"} infoText={gangInfo} onClick={this.manageGang} />}
@ -266,7 +266,7 @@ export class FactionRoot extends React.Component<IProps, IState> {
renderAugmentationsPage(): React.ReactNode { renderAugmentationsPage(): React.ReactNode {
return ( return (
<div> <div id="faction-container">
<AugmentationsPage faction={this.props.faction} p={this.props.p} routeToMainPage={this.routeToMain} /> <AugmentationsPage faction={this.props.faction} p={this.props.p} routeToMainPage={this.routeToMain} />
</div> </div>
); );

4
src/Gang/ui/Root.tsx
View File

@ -30,7 +30,7 @@ export function Root(props: IProps): React.ReactElement {
} }
return ( return (
<> <div id="gang-container">
<a className="a-link-button" style={{ display: "inline-block" }} onClick={back}> <a className="a-link-button" style={{ display: "inline-block" }} onClick={back}>
Back Back
</a> </a>
@ -53,6 +53,6 @@ export function Root(props: IProps): React.ReactElement {
) : ( ) : (
<TerritorySubpage gang={props.gang} /> <TerritorySubpage gang={props.gang} />
)} )}
</> </div>
); );
} }

2
src/Hacknet/ui/HacknetRoot.tsx
View File

@ -121,7 +121,7 @@ export function HacknetRoot(props: IProps): React.ReactElement {
}); });
return ( return (
<div> <div id="hacknet-nodes-container">
<h1>Hacknet {hasHacknetServers(props.player) ? "Servers" : "Nodes"}</h1> <h1>Hacknet {hasHacknetServers(props.player) ? "Servers" : "Nodes"}</h1>
<GeneralInfo hasHacknetServers={hasHacknetServers(props.player)} /> <GeneralInfo hasHacknetServers={hasHacknetServers(props.player)} />

2
src/Locations/ui/Root.tsx
View File

@ -144,7 +144,7 @@ export class LocationRoot extends React.Component<IProps, IState> {
render(): React.ReactNode { render(): React.ReactNode {
if (this.state.inCity) { if (this.state.inCity) {
return this.renderCity(); return <div id="location-container">{this.renderCity()}</div>;
} else { } else {
return this.renderLocation(); return this.renderLocation();
} }

4
src/Milestones/ui/MilestonesRoot.tsx
View File

@ -30,7 +30,7 @@ export function MilestonesRoot(props: IProps): JSX.Element {
} }
}); });
return ( return (
<> <div id="milestones-container">
<h1>Milestones</h1> <h1>Milestones</h1>
<p> <p>
Milestones don't reward you for completing them. They are here to guide you if you're lost. They will reset when Milestones don't reward you for completing them. They are here to guide you if you're lost. They will reset when
@ -40,6 +40,6 @@ export function MilestonesRoot(props: IProps): JSX.Element {
<h2>Completing fl1ght.exe</h2> <h2>Completing fl1ght.exe</h2>
<li>{milestones}</li> <li>{milestones}</li>
</> </div>
); );
} }

10
src/PersonObjects/Resleeving/ui/ResleeveRoot.tsx
View File

@ -60,9 +60,11 @@ const SortFunctions: {
Dexterity: (a: Resleeve, b: Resleeve): number => a.dexterity - b.dexterity, Dexterity: (a: Resleeve, b: Resleeve): number => a.dexterity - b.dexterity,
Agility: (a: Resleeve, b: Resleeve): number => a.agility - b.agility, Agility: (a: Resleeve, b: Resleeve): number => a.agility - b.agility,
Charisma: (a: Resleeve, b: Resleeve): number => a.charisma - b.charisma, Charisma: (a: Resleeve, b: Resleeve): number => a.charisma - b.charisma,
AverageCombatStats: (a: Resleeve, b: Resleeve): number => getAverage(a.strength, a.defense, a.dexterity, a.agility) - AverageCombatStats: (a: Resleeve, b: Resleeve): number =>
getAverage(a.strength, a.defense, a.dexterity, a.agility) -
getAverage(b.strength, b.defense, b.dexterity, b.agility), getAverage(b.strength, b.defense, b.dexterity, b.agility),
AverageAllStats: (a: Resleeve, b: Resleeve): number => getAverage(a.hacking_skill, a.strength, a.defense, a.dexterity, a.agility, a.charisma) - AverageAllStats: (a: Resleeve, b: Resleeve): number =>
getAverage(a.hacking_skill, a.strength, a.defense, a.dexterity, a.agility, a.charisma) -
getAverage(b.hacking_skill, b.strength, b.defense, b.dexterity, b.agility, b.charisma), getAverage(b.hacking_skill, b.strength, b.defense, b.dexterity, b.agility, b.charisma),
TotalNumAugmentations: (a: Resleeve, b: Resleeve): number => a.augmentations.length - b.augmentations.length, TotalNumAugmentations: (a: Resleeve, b: Resleeve): number => a.augmentations.length - b.augmentations.length,
}; };
@ -87,7 +89,7 @@ export function ResleeveRoot(props: IProps): React.ReactElement {
props.player.resleeves.sort(sortFunction); props.player.resleeves.sort(sortFunction);
return ( return (
<> <div id="resleeve-container">
<p style={{ display: "block", width: "75%" }}> <p style={{ display: "block", width: "75%" }}>
Re-sleeving is the process of digitizing and transferring your consciousness into a new human body, or 'sleeve'. Re-sleeving is the process of digitizing and transferring your consciousness into a new human body, or 'sleeve'.
Here at VitaLife, you can purchase new specially-engineered bodies for the re-sleeve process. Many of these Here at VitaLife, you can purchase new specially-engineered bodies for the re-sleeve process. Many of these
@ -114,6 +116,6 @@ export function ResleeveRoot(props: IProps): React.ReactElement {
{props.player.resleeves.map((resleeve, i) => ( {props.player.resleeves.map((resleeve, i) => (
<ResleeveElem key={i} player={props.player} resleeve={resleeve} /> <ResleeveElem key={i} player={props.player} resleeve={resleeve} />
))} ))}
</> </div>
); );
} }

2
src/PersonObjects/Sleeve/ui/SleeveRoot.tsx
View File

@ -20,7 +20,7 @@ export function SleeveRoot(props: IProps): React.ReactElement {
}, []); }, []);
return ( return (
<div style={{ width: "70%" }}> <div id="sleeves-container" style={{ width: "70%" }}>
<h1>Sleeves</h1> <h1>Sleeves</h1>
<p> <p>
Duplicate Sleeves are MK-V Synthoids (synthetic androids) into which your consciousness has been copied. In Duplicate Sleeves are MK-V Synthoids (synthetic androids) into which your consciousness has been copied. In

4
src/Programs/ui/ProgramsRoot.tsx
View File

@ -19,7 +19,7 @@ export function ProgramsRoot(props: IProps): React.ReactElement {
}, []); }, []);
return ( return (
<> <div id="create-program-container">
<p id="create-program-page-text"> <p id="create-program-page-text">
This page displays any programs that you are able to create. Writing the code for a program takes time, which This page displays any programs that you are able to create. Writing the code for a program takes time, which
can vary based on how complex the program is. If you are working on creating a program you can cancel at any can vary based on how complex the program is. If you are working on creating a program you can cancel at any
@ -44,6 +44,6 @@ export function ProgramsRoot(props: IProps): React.ReactElement {
); );
})} })}
</ul> </ul>
</> </div>
); );
} }

2
src/StockMarket/StockMarket.tsx
View File

@ -307,7 +307,7 @@ export function processStockPrices(numCycles = 1): void {
let stockMarketContainer: HTMLElement | null = null; let stockMarketContainer: HTMLElement | null = null;
function setStockMarketContainer(): void { function setStockMarketContainer(): void {
stockMarketContainer = document.getElementById("stock-market-container"); stockMarketContainer = document.getElementById("generic-react-container");
document.removeEventListener("DOMContentLoaded", setStockMarketContainer); document.removeEventListener("DOMContentLoaded", setStockMarketContainer);
} }

2
src/StockMarket/ui/Root.tsx
View File

@ -61,7 +61,7 @@ export class StockMarketRoot extends React.Component<IProps, IState> {
render(): React.ReactNode { render(): React.ReactNode {
return ( return (
<div> <div id="stock-market-container">
<InfoAndPurchases initStockMarket={this.props.initStockMarket} p={this.props.p} rerender={this.rerender} /> <InfoAndPurchases initStockMarket={this.props.initStockMarket} p={this.props.p} rerender={this.rerender} />
{this.props.p.hasWseAccount && ( {this.props.p.hasWseAccount && (
<StockTickers <StockTickers

4
src/Tutorial/ui/TutorialRoot.tsx
View File

@ -2,7 +2,7 @@ import React from "react";
export function TutorialRoot(): React.ReactElement { export function TutorialRoot(): React.ReactElement {
return ( return (
<> <div id="tutorial-container">
<h1>Tutorial (AKA Links to Documentation)</h1> <h1>Tutorial (AKA Links to Documentation)</h1>
<a <a
id="tutorial-getting-started-link" id="tutorial-getting-started-link"
@ -94,6 +94,6 @@ export function TutorialRoot(): React.ReactElement {
<a className="a-link-button" target="_blank" href="https://bitburner.readthedocs.io/en/latest/shortcuts.html"> <a className="a-link-button" target="_blank" href="https://bitburner.readthedocs.io/en/latest/shortcuts.html">
Keyboard Shortcuts Keyboard Shortcuts
</a> </a>
</> </div>
); );
} }

221
src/engine.jsx
View File

@ -177,27 +177,11 @@ const Engine = {
// Display objects // Display objects
// TODO-Refactor this into its own component // TODO-Refactor this into its own component
Display: { Display: {
// Generic page that most react loads into.
content: null,
// Main menu content // Main menu content
terminalContent: null, terminalContent: null,
characterContent: null,
scriptEditorContent: null,
activeScriptsContent: null,
hacknetNodesContent: null,
createProgramContent: null,
factionsContent: null,
factionContent: null,
augmentationsContent: null,
milestonesContent: null,
devMenuContent: null,
tutorialContent: null,
infiltrationContent: null, infiltrationContent: null,
stockMarketContent: null,
gangContent: null,
bladeburnerContent: null,
resleeveContent: null,
sleeveContent: null,
corporationContent: null,
locationContent: null,
workInProgressContent: null, workInProgressContent: null,
redPillContent: null, redPillContent: null,
cinematicTextContent: null, cinematicTextContent: null,
@ -219,68 +203,65 @@ const Engine = {
loadCharacterContent: function () { loadCharacterContent: function () {
Engine.hideAllContent(); Engine.hideAllContent();
Engine.Display.characterContent.style.display = "block"; Engine.Display.content.style.display = "block";
routing.navigateTo(Page.CharacterInfo); routing.navigateTo(Page.CharacterInfo);
ReactDOM.render(<CharacterInfo player={Player} />, Engine.Display.characterContent); ReactDOM.render(<CharacterInfo player={Player} />, Engine.Display.content);
MainMenuLinks.Stats.classList.add("active"); MainMenuLinks.Stats.classList.add("active");
}, },
loadScriptEditorContent: function (filename = "", code = "") { loadScriptEditorContent: function (filename = "", code = "") {
Engine.hideAllContent(); Engine.hideAllContent();
Engine.Display.scriptEditorContent.style.display = "block"; Engine.Display.content.style.display = "block";
routing.navigateTo(Page.ScriptEditor); routing.navigateTo(Page.ScriptEditor);
MainMenuLinks.ScriptEditor.classList.add("active"); MainMenuLinks.ScriptEditor.classList.add("active");
ReactDOM.render( ReactDOM.render(
<ScriptEditorRoot filename={filename} code={code} player={Player} engine={this} />, <ScriptEditorRoot filename={filename} code={code} player={Player} engine={this} />,
Engine.Display.scriptEditorContent, Engine.Display.content,
); );
}, },
loadActiveScriptsContent: function () { loadActiveScriptsContent: function () {
Engine.hideAllContent(); Engine.hideAllContent();
Engine.Display.activeScriptsContent.style.display = "block"; Engine.Display.content.style.display = "block";
routing.navigateTo(Page.ActiveScripts); routing.navigateTo(Page.ActiveScripts);
MainMenuLinks.ActiveScripts.classList.add("active"); MainMenuLinks.ActiveScripts.classList.add("active");
ReactDOM.render( ReactDOM.render(<ActiveScriptsRoot p={Player} workerScripts={workerScripts} />, Engine.Display.content);
<ActiveScriptsRoot p={Player} workerScripts={workerScripts} />,
Engine.Display.activeScriptsContent,
);
}, },
loadHacknetNodesContent: function () { loadHacknetNodesContent: function () {
Engine.hideAllContent(); Engine.hideAllContent();
Engine.Display.hacknetNodesContent.style.display = "block"; Engine.Display.content.style.display = "block";
routing.navigateTo(Page.HacknetNodes); routing.navigateTo(Page.HacknetNodes);
MainMenuLinks.HacknetNodes.classList.add("active"); MainMenuLinks.HacknetNodes.classList.add("active");
ReactDOM.render(<HacknetRoot player={Player} />, Engine.Display.hacknetNodesContent); ReactDOM.render(<HacknetRoot player={Player} />, Engine.Display.content);
}, },
loadCreateProgramContent: function () { loadCreateProgramContent: function () {
Engine.hideAllContent(); Engine.hideAllContent();
Engine.Display.createProgramContent.style.display = "block"; Engine.Display.content.style.display = "block";
routing.navigateTo(Page.CreateProgram); routing.navigateTo(Page.CreateProgram);
MainMenuLinks.CreateProgram.classList.add("active"); MainMenuLinks.CreateProgram.classList.add("active");
ReactDOM.render(<ProgramsRoot player={Player} />, Engine.Display.createProgramContent); ReactDOM.render(<ProgramsRoot player={Player} />, Engine.Display.content);
}, },
loadFactionsContent: function () { loadFactionsContent: function () {
Engine.hideAllContent(); Engine.hideAllContent();
Engine.Display.factionsContent.style.display = "block"; Engine.Display.content.style.display = "block";
routing.navigateTo(Page.Factions); routing.navigateTo(Page.Factions);
MainMenuLinks.Factions.classList.add("active"); MainMenuLinks.Factions.classList.add("active");
ReactDOM.render(<FactionList player={Player} engine={this} />, Engine.Display.factionsContent); ReactDOM.render(<FactionList player={Player} engine={this} />, Engine.Display.content);
}, },
// TODO reactify // TODO reactify
loadFactionContent: function () { loadFactionContent: function () {
Engine.hideAllContent(); Engine.hideAllContent();
Engine.Display.factionContent.style.display = "block"; Engine.Display.content.style.display = "block";
routing.navigateTo(Page.Faction); routing.navigateTo(Page.Faction);
}, },
loadAugmentationsContent: function () { loadAugmentationsContent: function () {
Engine.hideAllContent(); Engine.hideAllContent();
Engine.Display.augmentationsContent.style.display = "block"; Engine.Display.content.style.display = "block";
routing.navigateTo(Page.Augmentations); routing.navigateTo(Page.Augmentations);
MainMenuLinks.Augmentations.classList.add("active"); MainMenuLinks.Augmentations.classList.add("active");
@ -291,46 +272,45 @@ const Engine = {
ReactDOM.render( ReactDOM.render(
<AugmentationsRoot exportGameFn={backup} installAugmentationsFn={installAugmentations} />, <AugmentationsRoot exportGameFn={backup} installAugmentationsFn={installAugmentations} />,
Engine.Display.augmentationsContent, Engine.Display.content,
); );
}, },
loadMilestonesContent: function () { loadMilestonesContent: function () {
Engine.hideAllContent(); Engine.hideAllContent();
Engine.Display.milestonesContent.style.display = "block"; Engine.Display.content.style.display = "block";
routing.navigateTo(Page.Milestones); routing.navigateTo(Page.Milestones);
MainMenuLinks.Milestones.classList.add("active"); MainMenuLinks.Milestones.classList.add("active");
ReactDOM.render(<MilestonesRoot player={Player} />, Engine.Display.milestonesContent); ReactDOM.render(<MilestonesRoot player={Player} />, Engine.Display.content);
}, },
loadTutorialContent: function () { loadTutorialContent: function () {
Engine.hideAllContent(); Engine.hideAllContent();
Engine.Display.tutorialContent.style.display = "block"; Engine.Display.content.style.display = "block";
routing.navigateTo(Page.Tutorial); routing.navigateTo(Page.Tutorial);
MainMenuLinks.Tutorial.classList.add("active"); MainMenuLinks.Tutorial.classList.add("active");
ReactDOM.render(<TutorialRoot />, Engine.Display.tutorialContent); ReactDOM.render(<TutorialRoot />, Engine.Display.content);
}, },
// TODO reactify
loadDevMenuContent: function () { loadDevMenuContent: function () {
Engine.hideAllContent(); Engine.hideAllContent();
if (process.env.NODE_ENV !== "development") { if (process.env.NODE_ENV !== "development") {
throw new Error("Cannot create Dev Menu because you are not in a dev build"); throw new Error("Cannot create Dev Menu because you are not in a dev build");
} }
Engine.Display.devMenuContent.style.display = "block"; Engine.Display.content.style.display = "block";
ReactDOM.render(<DevMenuRoot player={Player} engine={this} />, Engine.Display.devMenuContent); ReactDOM.render(<DevMenuRoot player={Player} engine={this} />, Engine.Display.content);
routing.navigateTo(Page.DevMenu); routing.navigateTo(Page.DevMenu);
MainMenuLinks.DevMenu.classList.add("active"); MainMenuLinks.DevMenu.classList.add("active");
}, },
loadLocationContent: function (initiallyInCity = true) { loadLocationContent: function (initiallyInCity = true) {
Engine.hideAllContent(); Engine.hideAllContent();
Engine.Display.locationContent.style.display = "block"; Engine.Display.content.style.display = "block";
routing.navigateTo(Page.Location); routing.navigateTo(Page.Location);
MainMenuLinks.City.classList.add("active"); MainMenuLinks.City.classList.add("active");
ReactDOM.render( ReactDOM.render(
<LocationRoot initiallyInCity={initiallyInCity} engine={Engine} p={Player} />, <LocationRoot initiallyInCity={initiallyInCity} engine={Engine} p={Player} />,
Engine.Display.locationContent, Engine.Display.content,
); );
}, },
@ -339,13 +319,10 @@ const Engine = {
// and make sure that the 'City' main menu link doesnt become 'active' // and make sure that the 'City' main menu link doesnt become 'active'
Engine.hideAllContent(); Engine.hideAllContent();
Player.gotoLocation(LocationName.TravelAgency); Player.gotoLocation(LocationName.TravelAgency);
Engine.Display.locationContent.style.display = "block"; Engine.Display.content.style.display = "block";
routing.navigateTo(Page.Location); routing.navigateTo(Page.Location);
MainMenuLinks.Travel.classList.add("active"); MainMenuLinks.Travel.classList.add("active");
ReactDOM.render( ReactDOM.render(<LocationRoot initiallyInCity={false} engine={Engine} p={Player} />, Engine.Display.content);
<LocationRoot initiallyInCity={false} engine={Engine} p={Player} />,
Engine.Display.locationContent,
);
}, },
loadJobContent: function () { loadJobContent: function () {
@ -359,13 +336,10 @@ const Engine = {
} }
Engine.hideAllContent(); Engine.hideAllContent();
Player.gotoLocation(Player.companyName); Player.gotoLocation(Player.companyName);
Engine.Display.locationContent.style.display = "block"; Engine.Display.content.style.display = "block";
routing.navigateTo(Page.Location); routing.navigateTo(Page.Location);
MainMenuLinks.Job.classList.add("active"); MainMenuLinks.Job.classList.add("active");
ReactDOM.render( ReactDOM.render(<LocationRoot initiallyInCity={false} engine={Engine} p={Player} />, Engine.Display.content);
<LocationRoot initiallyInCity={false} engine={Engine} p={Player} />,
Engine.Display.locationContent,
);
}, },
// TODO reactify // TODO reactify
@ -407,7 +381,7 @@ const Engine = {
loadStockMarketContent: function () { loadStockMarketContent: function () {
Engine.hideAllContent(); Engine.hideAllContent();
Engine.Display.stockMarketContent.style.display = "block"; Engine.Display.content.style.display = "block";
routing.navigateTo(Page.StockMarket); routing.navigateTo(Page.StockMarket);
MainMenuLinks.StockMarket.classList.add("active"); MainMenuLinks.StockMarket.classList.add("active");
displayStockMarketContent(); displayStockMarketContent();
@ -416,10 +390,10 @@ const Engine = {
loadGangContent: function () { loadGangContent: function () {
if (!Player.inGang()) return; if (!Player.inGang()) return;
Engine.hideAllContent(); Engine.hideAllContent();
Engine.Display.gangContent.style.display = "block"; Engine.Display.content.style.display = "block";
routing.navigateTo(Page.Gang); routing.navigateTo(Page.Gang);
MainMenuLinks.Gang.classList.add("active"); MainMenuLinks.Gang.classList.add("active");
ReactDOM.render(<GangRoot engine={this} gang={Player.gang} player={Player} />, Engine.Display.gangContent); ReactDOM.render(<GangRoot engine={this} gang={Player.gang} player={Player} />, Engine.Display.content);
}, },
loadMissionContent: function () { loadMissionContent: function () {
@ -433,100 +407,52 @@ const Engine = {
loadCorporationContent: function () { loadCorporationContent: function () {
if (!(Player.corporation instanceof Corporation)) return; if (!(Player.corporation instanceof Corporation)) return;
Engine.hideAllContent(); Engine.hideAllContent();
Engine.Display.corporationContent.style.display = "block"; Engine.Display.content.style.display = "block";
routing.navigateTo(Page.Corporation); routing.navigateTo(Page.Corporation);
MainMenuLinks.Corporation.classList.add("active"); MainMenuLinks.Corporation.classList.add("active");
ReactDOM.render(<CorporationRoot corp={Player.corporation} player={Player} />, Engine.Display.corporationContent); ReactDOM.render(<CorporationRoot corp={Player.corporation} player={Player} />, Engine.Display.content);
}, },
loadBladeburnerContent: function () { loadBladeburnerContent: function () {
if (!(Player.bladeburner instanceof Bladeburner)) return; if (!(Player.bladeburner instanceof Bladeburner)) return;
Engine.hideAllContent(); Engine.hideAllContent();
Engine.Display.bladeburnerContent.style.display = "block"; Engine.Display.content.style.display = "block";
routing.navigateTo(Page.Bladeburner); routing.navigateTo(Page.Bladeburner);
MainMenuLinks.Bladeburner.classList.add("active"); MainMenuLinks.Bladeburner.classList.add("active");
ReactDOM.render( ReactDOM.render(
<BladeburnerRoot bladeburner={Player.bladeburner} player={Player} engine={this} />, <BladeburnerRoot bladeburner={Player.bladeburner} player={Player} engine={this} />,
Engine.Display.bladeburnerContent, Engine.Display.content,
); );
}, },
loadSleevesContent: function () { loadSleevesContent: function () {
Engine.hideAllContent(); Engine.hideAllContent();
Engine.Display.sleevesContent.style.display = "block"; Engine.Display.content.style.display = "block";
routing.navigateTo(Page.Sleeves); routing.navigateTo(Page.Sleeves);
ReactDOM.render(<SleeveRoot player={Player} />, Engine.Display.sleevesContent); ReactDOM.render(<SleeveRoot player={Player} />, Engine.Display.content);
}, },
loadResleevingContent: function () { loadResleevingContent: function () {
Engine.hideAllContent(); Engine.hideAllContent();
routing.navigateTo(Page.Resleeves); routing.navigateTo(Page.Resleeves);
Engine.Display.resleeveContent.style.display = "block"; Engine.Display.content.style.display = "block";
MainMenuLinks.City.classList.add("active"); MainMenuLinks.City.classList.add("active");
ReactDOM.render(<ResleeveRoot player={Player} />, Engine.Display.resleeveContent); ReactDOM.render(<ResleeveRoot player={Player} />, Engine.Display.content);
}, },
// Helper function that hides all content // Helper function that hides all content
hideAllContent: function () { hideAllContent: function () {
Engine.Display.terminalContent.style.display = "none"; Engine.Display.terminalContent.style.display = "none";
Engine.Display.characterContent.style.display = "none";
ReactDOM.unmountComponentAtNode(Engine.Display.characterContent);
Engine.Display.scriptEditorContent.style.display = "none"; Engine.Display.content.style.display = "none";
ReactDOM.unmountComponentAtNode(Engine.Display.scriptEditorContent); ReactDOM.unmountComponentAtNode(Engine.Display.content);
Engine.Display.activeScriptsContent.style.display = "none";
ReactDOM.unmountComponentAtNode(Engine.Display.activeScriptsContent);
Engine.Display.infiltrationContent.style.display = "none"; Engine.Display.infiltrationContent.style.display = "none";
ReactDOM.unmountComponentAtNode(Engine.Display.infiltrationContent); ReactDOM.unmountComponentAtNode(Engine.Display.infiltrationContent);
Engine.Display.hacknetNodesContent.style.display = "none";
ReactDOM.unmountComponentAtNode(Engine.Display.hacknetNodesContent);
Engine.Display.createProgramContent.style.display = "none";
ReactDOM.unmountComponentAtNode(Engine.Display.createProgramContent);
Engine.Display.factionsContent.style.display = "none";
ReactDOM.unmountComponentAtNode(Engine.Display.factionsContent);
Engine.Display.factionContent.style.display = "none";
ReactDOM.unmountComponentAtNode(Engine.Display.factionContent);
Engine.Display.augmentationsContent.style.display = "none";
ReactDOM.unmountComponentAtNode(Engine.Display.augmentationsContent);
Engine.Display.tutorialContent.style.display = "none";
ReactDOM.unmountComponentAtNode(Engine.Display.tutorialContent);
Engine.Display.milestonesContent.style.display = "none";
ReactDOM.unmountComponentAtNode(Engine.Display.milestonesContent);
Engine.Display.devMenuContent.style.display = "none";
ReactDOM.unmountComponentAtNode(Engine.Display.devMenuContent);
Engine.Display.locationContent.style.display = "none";
ReactDOM.unmountComponentAtNode(Engine.Display.locationContent);
Engine.Display.gangContent.style.display = "none";
ReactDOM.unmountComponentAtNode(Engine.Display.gangContent);
Engine.Display.bladeburnerContent.style.display = "none";
ReactDOM.unmountComponentAtNode(Engine.Display.bladeburnerContent);
Engine.Display.resleeveContent.style.display = "none";
ReactDOM.unmountComponentAtNode(Engine.Display.resleeveContent);
Engine.Display.sleevesContent.style.display = "none";
ReactDOM.unmountComponentAtNode(Engine.Display.sleevesContent);
Engine.Display.corporationContent.style.display = "none";
ReactDOM.unmountComponentAtNode(Engine.Display.corporationContent);
Engine.Display.workInProgressContent.style.display = "none"; Engine.Display.workInProgressContent.style.display = "none";
Engine.Display.redPillContent.style.display = "none"; Engine.Display.redPillContent.style.display = "none";
Engine.Display.cinematicTextContent.style.display = "none"; Engine.Display.cinematicTextContent.style.display = "none";
Engine.Display.stockMarketContent.style.display = "none";
Engine.Display.missionContent.style.display = "none"; Engine.Display.missionContent.style.display = "none";
// Make nav menu tabs inactive // Make nav menu tabs inactive
@ -1186,71 +1112,15 @@ const Engine = {
}, },
setDisplayElements: function () { setDisplayElements: function () {
Engine.Display.content = document.getElementById("generic-react-container");
Engine.Display.content.style.display = "none";
// Content elements // Content elements
Engine.Display.terminalContent = document.getElementById("terminal-container"); Engine.Display.terminalContent = document.getElementById("terminal-container");
routing.navigateTo(Page.Terminal); routing.navigateTo(Page.Terminal);
Engine.Display.characterContent = document.getElementById("character-container");
Engine.Display.characterContent.style.display = "none";
Engine.Display.scriptEditorContent = document.getElementById("script-editor-container");
Engine.Display.scriptEditorContent.style.display = "none";
Engine.Display.activeScriptsContent = document.getElementById("active-scripts-container");
Engine.Display.activeScriptsContent.style.display = "none";
Engine.Display.hacknetNodesContent = document.getElementById("hacknet-nodes-container");
Engine.Display.hacknetNodesContent.style.display = "none";
Engine.Display.createProgramContent = document.getElementById("create-program-container");
Engine.Display.createProgramContent.style.display = "none";
Engine.Display.factionsContent = document.getElementById("factions-container");
Engine.Display.factionsContent.style.display = "none";
Engine.Display.factionContent = document.getElementById("faction-container");
Engine.Display.factionContent.style.display = "none";
Engine.Display.augmentationsContent = document.getElementById("augmentations-container");
Engine.Display.augmentationsContent.style.display = "none";
Engine.Display.milestonesContent = document.getElementById("milestones-container");
Engine.Display.milestonesContent.style.display = "none";
Engine.Display.devMenuContent = document.getElementById("dev-menu-container");
Engine.Display.devMenuContent.style.display = "none";
Engine.Display.tutorialContent = document.getElementById("tutorial-container");
Engine.Display.tutorialContent.style.display = "none";
Engine.Display.infiltrationContent = document.getElementById("infiltration-container");
Engine.Display.infiltrationContent.style.display = "none";
Engine.Display.stockMarketContent = document.getElementById("stock-market-container");
Engine.Display.stockMarketContent.style.display = "none";
Engine.Display.gangContent = document.getElementById("gang-container");
Engine.Display.gangContent.style.display = "none";
Engine.Display.bladeburnerContent = document.getElementById("bladeburner-container");
Engine.Display.bladeburnerContent.style.display = "none";
Engine.Display.resleeveContent = document.getElementById("resleeve-container");
Engine.Display.resleeveContent.style.display = "none";
Engine.Display.sleevesContent = document.getElementById("sleeves-container");
Engine.Display.sleevesContent.style.display = "none";
Engine.Display.corporationContent = document.getElementById("corporation-container");
Engine.Display.corporationContent.style.display = "none";
Engine.Display.missionContent = document.getElementById("mission-container"); Engine.Display.missionContent = document.getElementById("mission-container");
Engine.Display.missionContent.style.display = "none"; Engine.Display.missionContent.style.display = "none";
// Location page (page that shows up when you visit a specific location in World)
Engine.Display.locationContent = document.getElementById("location-container");
Engine.Display.locationContent.style.display = "none";
// Work In Progress // Work In Progress
Engine.Display.workInProgressContent = document.getElementById("work-in-progress-container"); Engine.Display.workInProgressContent = document.getElementById("work-in-progress-container");
Engine.Display.workInProgressContent.style.display = "none"; Engine.Display.workInProgressContent.style.display = "none";
@ -1259,6 +1129,9 @@ const Engine = {
Engine.Display.redPillContent = document.getElementById("red-pill-container"); Engine.Display.redPillContent = document.getElementById("red-pill-container");
Engine.Display.redPillContent.style.display = "none"; Engine.Display.redPillContent.style.display = "none";
Engine.Display.infiltrationContent = document.getElementById("infiltration-container");
Engine.Display.infiltrationContent.style.display = "none";
// Cinematic Text // Cinematic Text
Engine.Display.cinematicTextContent = document.getElementById("cinematic-text-container"); Engine.Display.cinematicTextContent = document.getElementById("cinematic-text-container");
Engine.Display.cinematicTextContent.style.display = "none"; Engine.Display.cinematicTextContent.style.display = "none";

20
src/index.html
View File

@ -147,26 +147,8 @@
</table> </table>
</div> </div>
<!-- Character Info page --> <div id="generic-react-container" class="generic-menupage-container"></div>
<div id="character-container" class="generic-menupage-container"></div>
<div id="active-scripts-container" class="generic-menupage-container"></div>
<div id="script-editor-container" class="generic-menupage-container"></div>
<div id="hacknet-nodes-container" class="generic-menupage-container"></div>
<div id="create-program-container" class="generic-menupage-container"></div>
<div id="factions-container" class="generic-menupage-container"></div>
<div id="faction-container" class="generic-menupage-container"></div>
<div id="augmentations-container" class="generic-menupage-container"></div>
<div id="milestones-container" class="generic-menupage-container"></div>
<div id="tutorial-container" class="generic-menupage-container"></div>
<div id="location-container" class="generic-menupage-container"></div>
<div id="infiltration-container" class="generic-fullscreen-container"></div> <div id="infiltration-container" class="generic-fullscreen-container"></div>
<div id="stock-market-container" class="generic-menupage-container"></div>
<div id="bladeburner-container" class="generic-menupage-container"></div>
<div id="resleeve-container" class="generic-menupage-container"></div>
<div id="gang-container" class="generic-menupage-container"></div>
<div id="corporation-container" class="generic-menupage-container"></div>
<div id="sleeves-container" class="generic-menupage-container"></div>
<div id="dev-menu-container" class="generic-menupage-container"></div>
<!-- Generic Yes/No Pop Up box --> <!-- Generic Yes/No Pop Up box -->
<div id="yes-no-box-container" class="popup-box-container"> <div id="yes-no-box-container" class="popup-box-container">

4
src/ui/ActiveScripts/Root.tsx
View File

@ -28,7 +28,7 @@ export function ActiveScriptsRoot(props: IProps): React.ReactElement {
}, []); }, []);
return ( return (
<> <div id="active-scripts-container">
<p> <p>
This page displays a list of all of your scripts that are currently running across every machine. It also This page displays a list of all of your scripts that are currently running across every machine. It also
provides information about each script's production. The scripts are categorized by the hostname of the servers provides information about each script's production. The scripts are categorized by the hostname of the servers
@ -37,6 +37,6 @@ export function ActiveScriptsRoot(props: IProps): React.ReactElement {
<ScriptProduction {...props} /> <ScriptProduction {...props} />
<ServerAccordions {...props} /> <ServerAccordions {...props} />
</> </div>
); );
} }

440
src/ui/CharacterInfo.tsx
View File

@ -257,228 +257,242 @@ export function CharacterInfo(props: IProps): React.ReactElement {
timeRows.push(["Total Time played:", convertTimeMsToTimeElapsedString(props.player.totalPlaytime)]); timeRows.push(["Total Time played:", convertTimeMsToTimeElapsedString(props.player.totalPlaytime)]);
return ( return (
<pre> <div id="character-container">
<b>General</b> <pre>
<br /> <b>General</b>
<br /> <br />
<span>Current City: {props.player.city}</span> <br />
<br /> <span>Current City: {props.player.city}</span>
<LastEmployer /> <br />
<LastJob /> <LastEmployer />
<Employers /> <LastJob />
<span> <Employers />
Money: <Money money={props.player.money.toNumber()} /> <span>
</span> Money: <Money money={props.player.money.toNumber()} />
<button className="popup-box-button" style={{ display: "inline-block", float: "none" }} onClick={openMoneyModal}> </span>
Money Statistics & Breakdown <button
</button> className="popup-box-button"
<br /> style={{ display: "inline-block", float: "none" }}
<br /> onClick={openMoneyModal}
<b>Stats</b> >
<table> Money Statistics & Breakdown
<tbody> </button>
<tr key="0"> <br />
<td key="0">Hacking:</td> <br />
<td key="1" style={{ textAlign: "right" }}> <b>Stats</b>
{numeralWrapper.formatSkill(props.player.hacking_skill)} <table>
</td> <tbody>
<td key="2" style={{ textAlign: "right" }}> <tr key="0">
({numeralWrapper.formatExp(props.player.hacking_exp)} exp) <td key="0">Hacking:</td>
</td> <td key="1" style={{ textAlign: "right" }}>
</tr> {numeralWrapper.formatSkill(props.player.hacking_skill)}
<tr key="1"> </td>
<td key="0">Strength:</td> <td key="2" style={{ textAlign: "right" }}>
<td key="1" style={{ textAlign: "right" }}> ({numeralWrapper.formatExp(props.player.hacking_exp)} exp)
{numeralWrapper.formatSkill(props.player.strength)} </td>
</td> </tr>
<td key="2" style={{ textAlign: "right" }}> <tr key="1">
({numeralWrapper.formatExp(props.player.strength_exp)} exp) <td key="0">Strength:</td>
</td> <td key="1" style={{ textAlign: "right" }}>
</tr> {numeralWrapper.formatSkill(props.player.strength)}
<tr key="2"> </td>
<td key="0">Defense:</td> <td key="2" style={{ textAlign: "right" }}>
<td key="1" style={{ textAlign: "right" }}> ({numeralWrapper.formatExp(props.player.strength_exp)} exp)
{numeralWrapper.formatSkill(props.player.defense)} </td>
</td> </tr>
<td key="2" style={{ textAlign: "right" }}> <tr key="2">
({numeralWrapper.formatExp(props.player.defense_exp)} exp) <td key="0">Defense:</td>
</td> <td key="1" style={{ textAlign: "right" }}>
</tr> {numeralWrapper.formatSkill(props.player.defense)}
<tr key="3"> </td>
<td key="0">Dexterity:</td> <td key="2" style={{ textAlign: "right" }}>
<td key="1" style={{ textAlign: "right" }}> ({numeralWrapper.formatExp(props.player.defense_exp)} exp)
{numeralWrapper.formatSkill(props.player.dexterity)} </td>
</td> </tr>
<td key="2" style={{ textAlign: "right" }}> <tr key="3">
({numeralWrapper.formatExp(props.player.dexterity_exp)} exp) <td key="0">Dexterity:</td>
</td> <td key="1" style={{ textAlign: "right" }}>
</tr> {numeralWrapper.formatSkill(props.player.dexterity)}
<tr key="4"> </td>
<td key="0">Agility:</td> <td key="2" style={{ textAlign: "right" }}>
<td key="1" style={{ textAlign: "right" }}> ({numeralWrapper.formatExp(props.player.dexterity_exp)} exp)
{numeralWrapper.formatSkill(props.player.agility)} </td>
</td> </tr>
<td key="2" style={{ textAlign: "right" }}> <tr key="4">
({numeralWrapper.formatExp(props.player.agility_exp)} exp) <td key="0">Agility:</td>
</td> <td key="1" style={{ textAlign: "right" }}>
</tr> {numeralWrapper.formatSkill(props.player.agility)}
<tr key="5"> </td>
<td key="0">Charisma:</td> <td key="2" style={{ textAlign: "right" }}>
<td key="1" style={{ textAlign: "right" }}> ({numeralWrapper.formatExp(props.player.agility_exp)} exp)
{numeralWrapper.formatSkill(props.player.charisma)} </td>
</td> </tr>
<td key="2" style={{ textAlign: "right" }}> <tr key="5">
({numeralWrapper.formatExp(props.player.charisma_exp)} exp) <td key="0">Charisma:</td>
</td> <td key="1" style={{ textAlign: "right" }}>
</tr> {numeralWrapper.formatSkill(props.player.charisma)}
<Intelligence /> </td>
</tbody> <td key="2" style={{ textAlign: "right" }}>
</table> ({numeralWrapper.formatExp(props.player.charisma_exp)} exp)
<br /> </td>
<MultiplierTable </tr>
rows={[ <Intelligence />
["Hacking Chance", props.player.hacking_chance_mult], </tbody>
["Hacking Speed", props.player.hacking_speed_mult], </table>
[ <br />
"Hacking Money", <MultiplierTable
props.player.hacking_money_mult, rows={[
props.player.hacking_money_mult * BitNodeMultipliers.ScriptHackMoney, ["Hacking Chance", props.player.hacking_chance_mult],
], ["Hacking Speed", props.player.hacking_speed_mult],
[ [
"Hacking Growth", "Hacking Money",
props.player.hacking_grow_mult, props.player.hacking_money_mult,
props.player.hacking_grow_mult * BitNodeMultipliers.ServerGrowthRate, props.player.hacking_money_mult * BitNodeMultipliers.ScriptHackMoney,
], ],
]} [
/> "Hacking Growth",
<br /> props.player.hacking_grow_mult,
<MultiplierTable props.player.hacking_grow_mult * BitNodeMultipliers.ServerGrowthRate,
rows={[ ],
[ ]}
"Hacking Level", />
props.player.hacking_mult, <br />
props.player.hacking_mult * BitNodeMultipliers.HackingLevelMultiplier, <MultiplierTable
], rows={[
[ [
"Hacking Experience", "Hacking Level",
props.player.hacking_exp_mult, props.player.hacking_mult,
props.player.hacking_exp_mult * BitNodeMultipliers.HackExpGain, props.player.hacking_mult * BitNodeMultipliers.HackingLevelMultiplier,
], ],
]} [
/> "Hacking Experience",
<br /> props.player.hacking_exp_mult,
props.player.hacking_exp_mult * BitNodeMultipliers.HackExpGain,
],
]}
/>
<br />
<MultiplierTable <MultiplierTable
rows={[ rows={[
[ [
"Strength Level", "Strength Level",
props.player.strength_mult, props.player.strength_mult,
props.player.strength_mult * BitNodeMultipliers.StrengthLevelMultiplier, props.player.strength_mult * BitNodeMultipliers.StrengthLevelMultiplier,
], ],
["Strength Experience", props.player.strength_exp_mult], ["Strength Experience", props.player.strength_exp_mult],
]} ]}
/> />
<br /> <br />
<MultiplierTable <MultiplierTable
rows={[ rows={[
[ [
"Defense Level", "Defense Level",
props.player.defense_mult, props.player.defense_mult,
props.player.defense_mult * BitNodeMultipliers.DefenseLevelMultiplier, props.player.defense_mult * BitNodeMultipliers.DefenseLevelMultiplier,
], ],
["Defense Experience", props.player.defense_exp_mult], ["Defense Experience", props.player.defense_exp_mult],
]} ]}
/> />
<br /> <br />
<MultiplierTable <MultiplierTable
rows={[ rows={[
[ [
"Dexterity Level", "Dexterity Level",
props.player.dexterity_mult, props.player.dexterity_mult,
props.player.dexterity_mult * BitNodeMultipliers.DexterityLevelMultiplier, props.player.dexterity_mult * BitNodeMultipliers.DexterityLevelMultiplier,
], ],
["Dexterity Experience", props.player.dexterity_exp_mult], ["Dexterity Experience", props.player.dexterity_exp_mult],
]} ]}
/> />
<br /> <br />
<MultiplierTable <MultiplierTable
rows={[ rows={[
[ [
"Agility Level", "Agility Level",
props.player.agility_mult, props.player.agility_mult,
props.player.agility_mult * BitNodeMultipliers.AgilityLevelMultiplier, props.player.agility_mult * BitNodeMultipliers.AgilityLevelMultiplier,
], ],
["Agility Experience", props.player.agility_exp_mult], ["Agility Experience", props.player.agility_exp_mult],
]} ]}
/> />
<br /> <br />
<MultiplierTable <MultiplierTable
rows={[ rows={[
[ [
"Charisma Level", "Charisma Level",
props.player.charisma_mult, props.player.charisma_mult,
props.player.charisma_mult * BitNodeMultipliers.CharismaLevelMultiplier, props.player.charisma_mult * BitNodeMultipliers.CharismaLevelMultiplier,
], ],
["Charisma Experience", props.player.charisma_exp_mult], ["Charisma Experience", props.player.charisma_exp_mult],
]} ]}
/> />
<br /> <br />
<MultiplierTable <MultiplierTable
rows={[ rows={[
[ [
"Hacknet Node production", "Hacknet Node production",
props.player.hacknet_node_money_mult, props.player.hacknet_node_money_mult,
props.player.hacknet_node_money_mult * BitNodeMultipliers.HacknetNodeMoney, props.player.hacknet_node_money_mult * BitNodeMultipliers.HacknetNodeMoney,
], ],
["Hacknet Node purchase cost", props.player.hacknet_node_purchase_cost_mult], ["Hacknet Node purchase cost", props.player.hacknet_node_purchase_cost_mult],
["Hacknet Node RAM upgrade cost", props.player.hacknet_node_ram_cost_mult], ["Hacknet Node RAM upgrade cost", props.player.hacknet_node_ram_cost_mult],
["Hacknet Node Core purchase cost", props.player.hacknet_node_core_cost_mult], ["Hacknet Node Core purchase cost", props.player.hacknet_node_core_cost_mult],
["Hacknet Node level upgrade cost", props.player.hacknet_node_level_cost_mult], ["Hacknet Node level upgrade cost", props.player.hacknet_node_level_cost_mult],
]} ]}
/> />
<br /> <br />
<MultiplierTable <MultiplierTable
rows={[ rows={[
["Company reputation gain", props.player.company_rep_mult], ["Company reputation gain", props.player.company_rep_mult],
[ [
"Faction reputation gain", "Faction reputation gain",
props.player.faction_rep_mult, props.player.faction_rep_mult,
props.player.faction_rep_mult * BitNodeMultipliers.FactionWorkRepGain, props.player.faction_rep_mult * BitNodeMultipliers.FactionWorkRepGain,
], ],
["Salary", props.player.work_money_mult, props.player.work_money_mult * BitNodeMultipliers.CompanyWorkMoney], [
]} "Salary",
/> props.player.work_money_mult,
<br /> props.player.work_money_mult * BitNodeMultipliers.CompanyWorkMoney,
],
]}
/>
<br />
<MultiplierTable <MultiplierTable
rows={[ rows={[
["Crime success", props.player.crime_success_mult], ["Crime success", props.player.crime_success_mult],
["Crime money", props.player.crime_money_mult, props.player.crime_money_mult * BitNodeMultipliers.CrimeMoney], [
]} "Crime money",
/> props.player.crime_money_mult,
<br /> props.player.crime_money_mult * BitNodeMultipliers.CrimeMoney,
],
]}
/>
<br />
<BladeburnerMults /> <BladeburnerMults />
<br /> <br />
<b>Misc.</b> <b>Misc.</b>
<br /> <br />
<br /> <br />
<span>{`Servers owned: ${props.player.purchasedServers.length} / ${getPurchaseServerLimit()}`}</span> <span>{`Servers owned: ${props.player.purchasedServers.length} / ${getPurchaseServerLimit()}`}</span>
<br /> <br />
<Hacknet /> <Hacknet />
<span>{`Augmentations installed: ${props.player.augmentations.length}`}</span> <span>{`Augmentations installed: ${props.player.augmentations.length}`}</span>
<br /> <br />
<br /> <br />
{StatsTable(timeRows)} {StatsTable(timeRows)}
<br /> <br />
<CurrentBitNode /> <CurrentBitNode />
</pre> </pre>
</div>
); );
} }