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

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

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

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

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

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

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

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

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

@ -223,7 +223,7 @@ export class FactionRoot extends React.Component<IProps, IState> {
}
return (
<div>
<div id="faction-container">
<h1>{faction.name}</h1>
<Info faction={faction} factionInfo={factionInfo} />
{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 {
return (
<div>
<div id="faction-container">
<AugmentationsPage faction={this.props.faction} p={this.props.p} routeToMainPage={this.routeToMain} />
</div>
);

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

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

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

@ -30,7 +30,7 @@ export function MilestonesRoot(props: IProps): JSX.Element {
}
});
return (
<>
<div id="milestones-container">
<h1>Milestones</h1>
<p>
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>
<li>{milestones}</li>
</>
</div>
);
}

@ -60,9 +60,11 @@ const SortFunctions: {
Dexterity: (a: Resleeve, b: Resleeve): number => a.dexterity - b.dexterity,
Agility: (a: Resleeve, b: Resleeve): number => a.agility - b.agility,
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),
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),
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);
return (
<>
<div id="resleeve-container">
<p style={{ display: "block", width: "75%" }}>
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
@ -114,6 +116,6 @@ export function ResleeveRoot(props: IProps): React.ReactElement {
{props.player.resleeves.map((resleeve, i) => (
<ResleeveElem key={i} player={props.player} resleeve={resleeve} />
))}
</>
</div>
);
}

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

@ -19,7 +19,7 @@ export function ProgramsRoot(props: IProps): React.ReactElement {
}, []);
return (
<>
<div id="create-program-container">
<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
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>
</>
</div>
);
}

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

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

@ -2,7 +2,7 @@ import React from "react";
export function TutorialRoot(): React.ReactElement {
return (
<>
<div id="tutorial-container">
<h1>Tutorial (AKA Links to Documentation)</h1>
<a
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">
Keyboard Shortcuts
</a>
</>
</div>
);
}

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

@ -147,26 +147,8 @@
</table>
</div>
<!-- Character Info page -->
<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="generic-react-container" class="generic-menupage-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 -->
<div id="yes-no-box-container" class="popup-box-container">

@ -28,7 +28,7 @@ export function ActiveScriptsRoot(props: IProps): React.ReactElement {
}, []);
return (
<>
<div id="active-scripts-container">
<p>
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
@ -37,6 +37,6 @@ export function ActiveScriptsRoot(props: IProps): React.ReactElement {
<ScriptProduction {...props} />
<ServerAccordions {...props} />
</>
</div>
);
}

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