diff --git a/src/Corporation/ui/CorporationRoot.tsx b/src/Corporation/ui/CorporationRoot.tsx index 662b08e29..0895703bc 100644 --- a/src/Corporation/ui/CorporationRoot.tsx +++ b/src/Corporation/ui/CorporationRoot.tsx @@ -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); }, []); diff --git a/src/Corporation/ui/Overview.tsx b/src/Corporation/ui/Overview.tsx index 0121af4f3..a0f93e075 100644 --- a/src/Corporation/ui/Overview.tsx +++ b/src/Corporation/ui/Overview.tsx @@ -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, diff --git a/src/engine.jsx b/src/engine.jsx index 4cfceede5..7807a157b 100644 --- a/src/engine.jsx +++ b/src/engine.jsx @@ -218,7 +218,7 @@ const Engine = { loadCharacterContent: function () { Engine.hideAllContent(); Engine.Display.characterContent.style.display = "block"; - Engine.updateCharacterInfo(); + ReactDOM.render(, 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( - , - 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"); diff --git a/src/ui/ActiveScripts/Root.tsx b/src/ui/ActiveScripts/Root.tsx index 373cd848f..c5915d0c5 100644 --- a/src/ui/ActiveScripts/Root.tsx +++ b/src/ui/ActiveScripts/Root.tsx @@ -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; }; -export class ActiveScriptsRoot extends React.Component { - 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 ( - <> -

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

+ useEffect(() => { + const id = setInterval(rerender, 20); + return () => clearInterval(id); + }, []); - - - - ); - } + return ( + <> +

+ 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. +

+ + + + + ); } diff --git a/src/ui/CharacterInfo.tsx b/src/ui/CharacterInfo.tsx index d98085556..9f315b87f 100644 --- a/src/ui/CharacterInfo.tsx +++ b/src/ui/CharacterInfo.tsx @@ -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 ( <> - Employer at which you last worked: {p.companyName} + Employer at which you last worked: {props.player.companyName}
); @@ -26,10 +41,10 @@ export function CharacterInfo(p: IPlayer): React.ReactElement { return <>; } function LastJob(): React.ReactElement { - if (p.companyName !== "") { + if (props.player.companyName !== "") { return ( <> - Job you last worked: {p.jobs[p.companyName]} + Job you last worked: {props.player.jobs[props.player.companyName]}
); @@ -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 ( <> All Employers:
    - {Object.keys(p.jobs).map((j) => ( + {Object.keys(props.player.jobs).map((j) => (
  • * {j}
  • ))}
@@ -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 ( <> - {`Hacknet Nodes owned: ${p.hacknetNodes.length}`} + {`Hacknet Nodes owned: ${props.player.hacknetNodes.length}`}
); } else { return ( <> - {`Hacknet Servers owned: ${p.hacknetNodes.length} / ${HacknetServerConstants.MaxServers}`} + {`Hacknet Servers owned: ${props.player.hacknetNodes.length} / ${HacknetServerConstants.MaxServers}`}
); @@ -126,10 +141,10 @@ export function CharacterInfo(p: IPlayer): React.ReactElement { <> Money earned since you last installed Augmentations:
- {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 {
Money earned in this BitNode:
- {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 ( Intelligence: - {numeralWrapper.formatSkill(p.intelligence)} + {numeralWrapper.formatSkill(props.player.intelligence)} ); } @@ -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 ( <>
@@ -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 ( <> - Current BitNode: {p.bitNodeN} ({BitNodes[index].name}) + Current BitNode: {props.player.bitNodeN} ({BitNodes[index].name})

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

- Current City: {p.city} + Current City: {props.player.city}
- Money: + Money: