Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2025-02-18 19:03:43 +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;
}
#generic-react-container {
position: fixed;
padding: 10px;
}
/* Character Info */
#character-container {
padding-top: 10px;

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

@ -44,6 +44,7 @@ export class AugmentationsRoot extends React.Component<IProps, IState> {
}
return (
<div id="augmentations-container">
<div id="augmentations-content">
<h1>Purchased Augmentations</h1>
<p>
@ -62,8 +63,8 @@ export class AugmentationsRoot extends React.Component<IProps, IState> {
<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)
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}
@ -86,6 +87,7 @@ export class AugmentationsRoot extends React.Component<IProps, IState> {
<br /> <br />
<PlayerMultipliers />
</div>
</div>
);
}
}

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

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

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

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

2
src/DevMenu.tsx
View File

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

2
src/Faction/FactionHelpers.jsx
View File

@ -86,7 +86,7 @@ export function displayFactionContent(factionName, initiallyOnAugmentationsPage
p={Player}
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 (
<>
<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>
);
}

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

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

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

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

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

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

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

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

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

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

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,
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>
);
}

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

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

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

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

2
src/StockMarket/StockMarket.tsx
View File

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

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

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

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

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

221
src/engine.jsx
View File

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

20
src/index.html
View File

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

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

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

20
src/ui/CharacterInfo.tsx
View File

@ -257,6 +257,7 @@ export function CharacterInfo(props: IProps): React.ReactElement {
timeRows.push(["Total Time played:", convertTimeMsToTimeElapsedString(props.player.totalPlaytime)]);
return (
<div id="character-container">
<pre>
<b>General</b>
<br />
@ -269,7 +270,11 @@ export function CharacterInfo(props: IProps): React.ReactElement {
<span>
Money: <Money money={props.player.money.toNumber()} />
</span>
<button className="popup-box-button" style={{ display: "inline-block", float: "none" }} onClick={openMoneyModal}>
<button
className="popup-box-button"
style={{ display: "inline-block", float: "none" }}
onClick={openMoneyModal}
>
Money Statistics & Breakdown
</button>
<br />
@ -451,7 +456,11 @@ export function CharacterInfo(props: IProps): React.ReactElement {
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],
[
"Salary",
props.player.work_money_mult,
props.player.work_money_mult * BitNodeMultipliers.CompanyWorkMoney,
],
]}
/>
<br />
@ -459,7 +468,11 @@ export function CharacterInfo(props: IProps): React.ReactElement {
<MultiplierTable
rows={[
["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,
props.player.crime_money_mult * BitNodeMultipliers.CrimeMoney,
],
]}
/>
<br />
@ -480,5 +493,6 @@ export function CharacterInfo(props: IProps): React.ReactElement {
<br />
<CurrentBitNode />
</pre>
</div>
);
}