unify the way engine loads pages

This commit is contained in:
Olivier Gagnon 2021-09-10 15:08:51 -04:00
parent c9611cc824
commit b45ab657c5
5 changed files with 157 additions and 115 deletions

@ -20,7 +20,8 @@ function ExpandButton(props: IExpandButtonProps): React.ReactElement {
const allIndustries = Object.keys(Industries).sort();
const possibleIndustries = allIndustries
.filter(
(industryType: string) => props.corp.divisions.find((division: IIndustry) => division.type === industryType) === undefined,
(industryType: string) =>
props.corp.divisions.find((division: IIndustry) => division.type === industryType) === undefined,
)
.sort();
if (possibleIndustries.length === 0) return <></>;
@ -50,7 +51,7 @@ export function CorporationRoot(props: IProps): React.ReactElement {
const [divisionName, setDivisionName] = useState("Overview");
useEffect(() => {
const id = setInterval(rerender, 150);
const id = setInterval(rerender, 20);
return () => clearInterval(id);
}, []);

@ -52,6 +52,7 @@ export function Overview(props: IProps): React.ReactElement {
}
function openBribeFactionPopup(): void {
console.log("hello click");
const popupId = "corp-bribe-popup";
createPopup(popupId, BribeFactionPopup, {
player: props.player,

@ -218,7 +218,7 @@ const Engine = {
loadCharacterContent: function () {
Engine.hideAllContent();
Engine.Display.characterContent.style.display = "block";
Engine.updateCharacterInfo();
ReactDOM.render(<CharacterInfo player={Player} />, Engine.Display.characterInfo);
routing.navigateTo(Page.CharacterInfo);
MainMenuLinks.Stats.classList.add("active");
},
@ -447,6 +447,8 @@ const Engine = {
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);
@ -540,11 +542,6 @@ const Engine = {
}
},
/// Display character info
updateCharacterInfo: function () {
ReactDOM.render(CharacterInfo(Player), Engine.Display.characterInfo);
},
// Main Game Loop
idleTimer: function () {
// Get time difference
@ -676,7 +673,6 @@ const Engine = {
autoSaveCounter: 300,
updateSkillLevelsCounter: 10,
updateDisplays: 3,
updateDisplaysMed: 9,
updateDisplaysLong: 15,
updateActiveScriptsDisplay: 5,
createProgramNotifications: 10,
@ -718,17 +714,6 @@ const Engine = {
Engine.Counters.updateSkillLevelsCounter = 10;
}
if (Engine.Counters.updateActiveScriptsDisplay <= 0) {
if (routing.isOn(Page.ActiveScripts)) {
ReactDOM.render(
<ActiveScriptsRoot p={Player} workerScripts={workerScripts} />,
Engine.Display.activeScriptsContent,
);
}
Engine.Counters.updateActiveScriptsDisplay = 5;
}
if (Engine.Counters.updateDisplays <= 0) {
Engine.displayCharacterOverviewInfo();
if (routing.isOn(Page.CreateProgram)) {
@ -738,13 +723,6 @@ const Engine = {
Engine.Counters.updateDisplays = 3;
}
if (Engine.Counters.updateDisplaysMed <= 0) {
if (routing.isOn(Page.CharacterInfo)) {
Engine.updateCharacterInfo();
}
Engine.Counters.updateDisplaysMed = 9;
}
if (Engine.Counters.createProgramNotifications <= 0) {
var num = getNumAvailableCreateProgram();
var elem = document.getElementById("create-program-notification");

@ -2,7 +2,7 @@
* Root React Component for the "Active Scripts" UI page. This page displays
* and provides information about all of the player's scripts that are currently running
*/
import * as React from "react";
import React, { useState, useEffect } from "react";
import { ScriptProduction } from "./ScriptProduction";
import { ServerAccordions } from "./ServerAccordions";
@ -15,23 +15,28 @@ type IProps = {
workerScripts: Map<number, WorkerScript>;
};
export class ActiveScriptsRoot extends React.Component<IProps> {
constructor(props: IProps) {
super(props);
export function ActiveScriptsRoot(props: IProps): React.ReactElement {
const setRerender = useState(false)[1];
function rerender(): void {
setRerender((old) => !old);
}
const [divisionName, setDivisionName] = useState("Overview");
render(): React.ReactNode {
return (
<>
<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 on which they are running.
</p>
useEffect(() => {
const id = setInterval(rerender, 20);
return () => clearInterval(id);
}, []);
<ScriptProduction {...this.props} />
<ServerAccordions {...this.props} />
</>
);
}
return (
<>
<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
on which they are running.
</p>
<ScriptProduction {...props} />
<ServerAccordions {...props} />
</>
);
}

@ -1,4 +1,4 @@
import * as React from "react";
import React, { useState, useEffect } from "react";
import { numeralWrapper } from "../ui/numeralFormat";
import { BitNodes } from "../BitNode/BitNode";
@ -13,12 +13,27 @@ import { HacknetServerConstants } from "../Hacknet/data/Constants";
import { StatsTable } from "./React/StatsTable";
import { Money } from "./React/Money";
export function CharacterInfo(p: IPlayer): React.ReactElement {
interface IProps {
player: IPlayer;
}
export function CharacterInfo(props: IProps): React.ReactElement {
const setRerender = useState(false)[1];
function rerender(): void {
setRerender((old) => !old);
}
const [divisionName, setDivisionName] = useState("Overview");
useEffect(() => {
const id = setInterval(rerender, 20);
return () => clearInterval(id);
}, []);
function LastEmployer(): React.ReactElement {
if (p.companyName) {
if (props.player.companyName) {
return (
<>
<span>Employer at which you last worked: {p.companyName}</span>
<span>Employer at which you last worked: {props.player.companyName}</span>
<br />
</>
);
@ -26,10 +41,10 @@ export function CharacterInfo(p: IPlayer): React.ReactElement {
return <></>;
}
function LastJob(): React.ReactElement {
if (p.companyName !== "") {
if (props.player.companyName !== "") {
return (
<>
<span>Job you last worked: {p.jobs[p.companyName]}</span>
<span>Job you last worked: {props.player.jobs[props.player.companyName]}</span>
<br />
</>
);
@ -37,13 +52,13 @@ export function CharacterInfo(p: IPlayer): React.ReactElement {
return <></>;
}
function Employers(): React.ReactElement {
if (p.jobs && Object.keys(p.jobs).length !== 0)
if (props.player.jobs && Object.keys(props.player.jobs).length !== 0)
return (
<>
<span>All Employers:</span>
<br />
<ul>
{Object.keys(p.jobs).map((j) => (
{Object.keys(props.player.jobs).map((j) => (
<li key={j}> * {j}</li>
))}
</ul>
@ -56,17 +71,17 @@ export function CharacterInfo(p: IPlayer): React.ReactElement {
function Hacknet(): React.ReactElement {
// Can't import HacknetHelpers for some reason.
if (!(p.bitNodeN === 9 || SourceFileFlags[9] > 0)) {
if (!(props.player.bitNodeN === 9 || SourceFileFlags[9] > 0)) {
return (
<>
<span>{`Hacknet Nodes owned: ${p.hacknetNodes.length}`}</span>
<span>{`Hacknet Nodes owned: ${props.player.hacknetNodes.length}`}</span>
<br />
</>
);
} else {
return (
<>
<span>{`Hacknet Servers owned: ${p.hacknetNodes.length} / ${HacknetServerConstants.MaxServers}`}</span>
<span>{`Hacknet Servers owned: ${props.player.hacknetNodes.length} / ${HacknetServerConstants.MaxServers}`}</span>
<br />
</>
);
@ -126,10 +141,10 @@ export function CharacterInfo(p: IPlayer): React.ReactElement {
<>
<u>Money earned since you last installed Augmentations:</u>
<br />
{convertMoneySourceTrackerToString(p.moneySourceA)}
{convertMoneySourceTrackerToString(props.player.moneySourceA)}
</>
);
if (p.sourceFiles.length !== 0) {
if (props.player.sourceFiles.length !== 0) {
content = (
<>
{content}
@ -137,7 +152,7 @@ export function CharacterInfo(p: IPlayer): React.ReactElement {
<br />
<u>Money earned in this BitNode:</u>
<br />
{convertMoneySourceTrackerToString(p.moneySourceB)}
{convertMoneySourceTrackerToString(props.player.moneySourceB)}
</>
);
}
@ -146,11 +161,11 @@ export function CharacterInfo(p: IPlayer): React.ReactElement {
}
function Intelligence(): React.ReactElement {
if (p.intelligence > 0 && (p.bitNodeN === 5 || SourceFileFlags[5] > 0)) {
if (props.player.intelligence > 0 && (props.player.bitNodeN === 5 || SourceFileFlags[5] > 0)) {
return (
<tr key="5">
<td>Intelligence:</td>
<td style={{ textAlign: "right" }}>{numeralWrapper.formatSkill(p.intelligence)}</td>
<td style={{ textAlign: "right" }}>{numeralWrapper.formatSkill(props.player.intelligence)}</td>
</tr>
);
}
@ -189,15 +204,15 @@ export function CharacterInfo(p: IPlayer): React.ReactElement {
}
function BladeburnerMults(): React.ReactElement {
if (!p.canAccessBladeburner()) return <></>;
if (!props.player.canAccessBladeburner()) return <></>;
return (
<>
<MultiplierTable
rows={[
["Bladeburner Success Chance", p.bladeburner_max_stamina_mult],
["Bladeburner Max Stamina", p.bladeburner_stamina_gain_mult],
["Bladeburner Stamina Gain", p.bladeburner_analysis_mult],
["Bladeburner Field Analysis", p.bladeburner_success_chance_mult],
["Bladeburner Success Chance", props.player.bladeburner_max_stamina_mult],
["Bladeburner Max Stamina", props.player.bladeburner_stamina_gain_mult],
["Bladeburner Stamina Gain", props.player.bladeburner_analysis_mult],
["Bladeburner Field Analysis", props.player.bladeburner_success_chance_mult],
]}
/>
<br />
@ -206,12 +221,12 @@ export function CharacterInfo(p: IPlayer): React.ReactElement {
}
function CurrentBitNode(): React.ReactElement {
if (p.sourceFiles.length > 0) {
const index = "BitNode" + p.bitNodeN;
if (props.player.sourceFiles.length > 0) {
const index = "BitNode" + props.player.bitNodeN;
return (
<>
<span>
Current BitNode: {p.bitNodeN} ({BitNodes[index].name})
Current BitNode: {props.player.bitNodeN} ({BitNodes[index].name})
</span>
<br />
<br />
@ -230,27 +245,29 @@ export function CharacterInfo(p: IPlayer): React.ReactElement {
return <></>;
}
const timeRows = [["Time played since last Augmentation:", convertTimeMsToTimeElapsedString(p.playtimeSinceLastAug)]];
if (p.sourceFiles.length > 0) {
const timeRows = [
["Time played since last Augmentation:", convertTimeMsToTimeElapsedString(props.player.playtimeSinceLastAug)],
];
if (props.player.sourceFiles.length > 0) {
timeRows.push([
"Time played since last Bitnode destroyed:",
convertTimeMsToTimeElapsedString(p.playtimeSinceLastBitnode),
convertTimeMsToTimeElapsedString(props.player.playtimeSinceLastBitnode),
]);
}
timeRows.push(["Total Time played:", convertTimeMsToTimeElapsedString(p.totalPlaytime)]);
timeRows.push(["Total Time played:", convertTimeMsToTimeElapsedString(props.player.totalPlaytime)]);
return (
<pre>
<b>General</b>
<br />
<br />
<span>Current City: {p.city}</span>
<span>Current City: {props.player.city}</span>
<br />
<LastEmployer />
<LastJob />
<Employers />
<span>
Money: <Money money={p.money.toNumber()} />
Money: <Money money={props.player.money.toNumber()} />
</span>
<button className="popup-box-button" style={{ display: "inline-block", float: "none" }} onClick={openMoneyModal}>
Money Statistics & Breakdown
@ -263,55 +280,55 @@ export function CharacterInfo(p: IPlayer): React.ReactElement {
<tr key="0">
<td key="0">Hacking:</td>
<td key="1" style={{ textAlign: "right" }}>
{numeralWrapper.formatSkill(p.hacking_skill)}
{numeralWrapper.formatSkill(props.player.hacking_skill)}
</td>
<td key="2" style={{ textAlign: "right" }}>
({numeralWrapper.formatExp(p.hacking_exp)} exp)
({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(p.strength)}
{numeralWrapper.formatSkill(props.player.strength)}
</td>
<td key="2" style={{ textAlign: "right" }}>
({numeralWrapper.formatExp(p.strength_exp)} exp)
({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(p.defense)}
{numeralWrapper.formatSkill(props.player.defense)}
</td>
<td key="2" style={{ textAlign: "right" }}>
({numeralWrapper.formatExp(p.defense_exp)} exp)
({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(p.dexterity)}
{numeralWrapper.formatSkill(props.player.dexterity)}
</td>
<td key="2" style={{ textAlign: "right" }}>
({numeralWrapper.formatExp(p.dexterity_exp)} exp)
({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(p.agility)}
{numeralWrapper.formatSkill(props.player.agility)}
</td>
<td key="2" style={{ textAlign: "right" }}>
({numeralWrapper.formatExp(p.agility_exp)} exp)
({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(p.charisma)}
{numeralWrapper.formatSkill(props.player.charisma)}
</td>
<td key="2" style={{ textAlign: "right" }}>
({numeralWrapper.formatExp(p.charisma_exp)} exp)
({numeralWrapper.formatExp(props.player.charisma_exp)} exp)
</td>
</tr>
<Intelligence />
@ -320,57 +337,93 @@ export function CharacterInfo(p: IPlayer): React.ReactElement {
<br />
<MultiplierTable
rows={[
["Hacking Chance", p.hacking_chance_mult],
["Hacking Speed", p.hacking_speed_mult],
["Hacking Money", p.hacking_money_mult, p.hacking_money_mult * BitNodeMultipliers.ScriptHackMoney],
["Hacking Growth", p.hacking_grow_mult, p.hacking_grow_mult * BitNodeMultipliers.ServerGrowthRate],
["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", p.hacking_mult, p.hacking_mult * BitNodeMultipliers.HackingLevelMultiplier],
["Hacking Experience", p.hacking_exp_mult, p.hacking_exp_mult * BitNodeMultipliers.HackExpGain],
[
"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", p.strength_mult, p.strength_mult * BitNodeMultipliers.StrengthLevelMultiplier],
["Strength Experience", p.strength_exp_mult],
[
"Strength Level",
props.player.strength_mult,
props.player.strength_mult * BitNodeMultipliers.StrengthLevelMultiplier,
],
["Strength Experience", props.player.strength_exp_mult],
]}
/>
<br />
<MultiplierTable
rows={[
["Defense Level", p.defense_mult, p.defense_mult * BitNodeMultipliers.DefenseLevelMultiplier],
["Defense Experience", p.defense_exp_mult],
[
"Defense Level",
props.player.defense_mult,
props.player.defense_mult * BitNodeMultipliers.DefenseLevelMultiplier,
],
["Defense Experience", props.player.defense_exp_mult],
]}
/>
<br />
<MultiplierTable
rows={[
["Dexterity Level", p.dexterity_mult, p.dexterity_mult * BitNodeMultipliers.DexterityLevelMultiplier],
["Dexterity Experience", p.dexterity_exp_mult],
[
"Dexterity Level",
props.player.dexterity_mult,
props.player.dexterity_mult * BitNodeMultipliers.DexterityLevelMultiplier,
],
["Dexterity Experience", props.player.dexterity_exp_mult],
]}
/>
<br />
<MultiplierTable
rows={[
["Agility Level", p.agility_mult, p.agility_mult * BitNodeMultipliers.AgilityLevelMultiplier],
["Agility Experience", p.agility_exp_mult],
[
"Agility Level",
props.player.agility_mult,
props.player.agility_mult * BitNodeMultipliers.AgilityLevelMultiplier,
],
["Agility Experience", props.player.agility_exp_mult],
]}
/>
<br />
<MultiplierTable
rows={[
["Charisma Level", p.charisma_mult, p.charisma_mult * BitNodeMultipliers.CharismaLevelMultiplier],
["Charisma Experience", p.charisma_exp_mult],
[
"Charisma Level",
props.player.charisma_mult,
props.player.charisma_mult * BitNodeMultipliers.CharismaLevelMultiplier,
],
["Charisma Experience", props.player.charisma_exp_mult],
]}
/>
<br />
@ -379,30 +432,34 @@ export function CharacterInfo(p: IPlayer): React.ReactElement {
rows={[
[
"Hacknet Node production",
p.hacknet_node_money_mult,
p.hacknet_node_money_mult * BitNodeMultipliers.HacknetNodeMoney,
props.player.hacknet_node_money_mult,
props.player.hacknet_node_money_mult * BitNodeMultipliers.HacknetNodeMoney,
],
["Hacknet Node purchase cost", p.hacknet_node_purchase_cost_mult],
["Hacknet Node RAM upgrade cost", p.hacknet_node_ram_cost_mult],
["Hacknet Node Core purchase cost", p.hacknet_node_core_cost_mult],
["Hacknet Node level upgrade cost", p.hacknet_node_level_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 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", p.company_rep_mult],
["Faction reputation gain", p.faction_rep_mult, p.faction_rep_mult * BitNodeMultipliers.FactionWorkRepGain],
["Salary", p.work_money_mult, p.work_money_mult * BitNodeMultipliers.CompanyWorkMoney],
["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", p.crime_success_mult],
["Crime money", p.crime_money_mult, p.crime_money_mult * BitNodeMultipliers.CrimeMoney],
["Crime success", props.player.crime_success_mult],
["Crime money", props.player.crime_money_mult, props.player.crime_money_mult * BitNodeMultipliers.CrimeMoney],
]}
/>
<br />
@ -413,10 +470,10 @@ export function CharacterInfo(p: IPlayer): React.ReactElement {
<b>Misc.</b>
<br />
<br />
<span>{`Servers owned: ${p.purchasedServers.length} / ${getPurchaseServerLimit()}`}</span>
<span>{`Servers owned: ${props.player.purchasedServers.length} / ${getPurchaseServerLimit()}`}</span>
<br />
<Hacknet />
<span>{`Augmentations installed: ${p.augmentations.length}`}</span>
<span>{`Augmentations installed: ${props.player.augmentations.length}`}</span>
<br />
<br />
{StatsTable(timeRows)}