Fixed issues with Active Scripts UI. Implemented event emitter for Active Scripts UI

src/ui/ActiveScripts/Root.tsx

@@ -15,7 +15,7 @@ type IProps = {
     workerScripts: WorkerScript[];
 }
 
-export class ActiveScriptsRoot extends React.Component<IProps, any> {
+export class ActiveScriptsRoot extends React.Component<IProps> {
     constructor(props: IProps) {
         super(props);
     }

src/ui/ActiveScripts/ScriptProduction.tsx

@@ -35,6 +35,7 @@ export function ScriptProduction(props: IProps): React.ReactElement {
             <span id="active-scripts-total-prod-aug-total" className="money-gold">
                 {numeralWrapper.formatMoney(props.p.scriptProdSinceLastAug)}
             </span>
+            
             (<span className="money-gold">
                 <span id="active-scripts-total-prod-aug-avg" className="money-gold">
                     {numeralWrapper.formatMoney(prodRateSinceLastAug)}

src/ui/ActiveScripts/ServerAccordion.tsx

@@ -28,7 +28,7 @@ export function ServerAccordion(props: IProps): React.ReactElement {
         progress: server.ramUsed / server.maxRam,
         totalTicks: 30
     };
-    const headerTxt = `${paddedName} ${createProgressBarText(barOptions)}`.replace(/\s/g, ' ');
+    const headerTxt = `${paddedName} ${createProgressBarText(barOptions)}`;
 
     const scripts = props.workerScripts.map((ws) => {
         return (
@@ -39,7 +39,7 @@ export function ServerAccordion(props: IProps): React.ReactElement {
     return (
         <Accordion
             headerContent={
-                <p>{headerTxt}</p>
+                <pre>{headerTxt}</pre>
             }
             panelContent={
                 <ul>{scripts}</ul>

src/ui/ActiveScripts/ServerAccordions.tsx

@@ -6,9 +6,10 @@ import * as React from "react";
 
 import { ServerAccordion } from "./ServerAccordion";
 
+import { WorkerScript } from "../../Netscript/WorkerScript";
+import { WorkerScriptStartStopEventEmitter } from "../../Netscript/WorkerScriptStartStopEventEmitter";
 import { getServer } from "../../Server/ServerHelpers";
 import { BaseServer } from "../../Server/BaseServer";
-import { WorkerScript } from "../../Netscript/WorkerScript";
 
 // Map of server hostname -> all workerscripts on that server for all active scripts
 interface IServerData {
@@ -24,17 +25,37 @@ type IProps = {
     workerScripts: WorkerScript[];
 };
 
-export class ServerAccordions extends React.Component<IProps> {
+type IState = {
+    rerenderFlag: boolean;
+}
+
+
+const subscriberId = "ActiveScriptsUI";
+
+export class ServerAccordions extends React.Component<IProps, IState> {
     serverToScriptMap: IServerToScriptsMap = {};
 
     constructor(props: IProps) {
         super(props);
 
+        this.state = {
+            rerenderFlag: false,
+        }
+
         this.updateServerToScriptsMap();
 
-        // TODO
-        // We subscribe to an event emitter that publishes whenever a script is
-        // started/stopped. This allows us to only update the map when necessary
+        this.rerender = this.rerender.bind(this);
+    }
+
+    componentDidMount() {
+        WorkerScriptStartStopEventEmitter.addSubscriber({
+            cb: this.rerender,
+            id: subscriberId,
+        })
+    }
+
+    componentWillUnmount() {
+        WorkerScriptStartStopEventEmitter.removeSubscriber(subscriberId);
     }
 
     updateServerToScriptsMap(): void {
@@ -60,6 +81,13 @@ export class ServerAccordions extends React.Component<IProps> {
         this.serverToScriptMap = map;
     }
 
+    rerender() {
+        this.updateServerToScriptsMap();
+        this.setState((prevState) => {
+            return { rerenderFlag: !prevState.rerenderFlag }
+        });
+    }
+
     render() {
         const elems = Object.keys(this.serverToScriptMap).map((serverName) => {
             const data = this.serverToScriptMap[serverName];

src/ui/ActiveScripts/WorkerScriptAccordion.tsx

@@ -12,6 +12,7 @@ import { AccordionButton } from "../React/AccordionButton";
 import { killWorkerScript } from "../../Netscript/killWorkerScript";
 import { WorkerScript } from "../../Netscript/WorkerScript";
 
+import { dialogBoxCreate } from "../../../utils/DialogBox";
 import { logBoxCreate } from "../../../utils/LogBox";
 import { convertTimeMsToTimeElapsedString } from "../../../utils/StringHelperFunctions";
 import { arrayToString } from "../../../utils/helpers/arrayToString";
@@ -24,8 +25,14 @@ export function WorkerScriptAccordion(props: IProps): React.ReactElement {
     const workerScript = props.workerScript;
     const scriptRef = workerScript.scriptRef;
 
+
     const logClickHandler = logBoxCreate.bind(null, scriptRef);
-    const killScriptButton = killWorkerScript.bind(null, scriptRef, scriptRef.server);
+    const killScript = killWorkerScript.bind(null, scriptRef, scriptRef.server);
+
+    function killScriptClickHandler() {
+        killScript();
+        dialogBoxCreate("Killing script");
+    }
 
     // Calculations for script stats
     const onlineMps = scriptRef.onlineMoneyMade / scriptRef.onlineRunningTime;
@@ -37,31 +44,30 @@ export function WorkerScriptAccordion(props: IProps): React.ReactElement {
         <Accordion
             headerClass="active-scripts-script-header"
             headerContent={
-                <>
-                </>
+                <>{props.workerScript.name}</>
             }
             panelClass="active-scripts-script-panel"
             panelContent={
                 <>
-                <p>Threads: {props.workerScript.scriptRef.threads}</p>
-                <p>Args: {arrayToString(props.workerScript.args)}</p>
-                <p>Online Time: {convertTimeMsToTimeElapsedString(scriptRef.onlineRunningTime * 1e3)}</p>
-                <p>Offline Time: {convertTimeMsToTimeElapsedString(scriptRef.offlineRunningTime * 1e3)}</p>
-                <p>Total online production: {numeralWrapper.formatMoney(scriptRef.onlineMoneyMade)}</p>
-                <p>{(Array(26).join(" ") + numeralWrapper.formatBigNumber(scriptRef.onlineExpGained) + " hacking exp").replace( / /g, "&nbsp;")}</p>
-                <p>Online production rate: {numeralWrapper.formatMoney(onlineMps)} / second</p>
-                <p>{(Array(25).join(" ") + numeralWrapper.formatBigNumber(onlineEps) + " hacking exp / second").replace( / /g, "&nbsp;")}</p>
-                <p>Total offline production: {numeralWrapper.formatMoney(scriptRef.offlineMoneyMade)}</p>
-                <p>{(Array(27).join(" ") + numeralWrapper.formatBigNumber(scriptRef.offlineExpGained) + " hacking exp").replace( / /g, "&nbsp;")}</p>
-                <p>Offline production rate: {numeralWrapper.formatMoney(offlineMps)} / second</p>
-                <p>{(Array(26).join(" ") + numeralWrapper.formatBigNumber(offlineEps) +  " hacking exp / second").replace( / /g, "&nbsp;")}</p>
+                <pre>Threads: {props.workerScript.scriptRef.threads}</pre>
+                <pre>Args: {arrayToString(props.workerScript.args)}</pre>
+                <pre>Online Time: {convertTimeMsToTimeElapsedString(scriptRef.onlineRunningTime * 1e3)}</pre>
+                <pre>Offline Time: {convertTimeMsToTimeElapsedString(scriptRef.offlineRunningTime * 1e3)}</pre>
+                <pre>Total online production: {numeralWrapper.formatMoney(scriptRef.onlineMoneyMade)}</pre>
+                <pre>{(Array(26).join(" ") + numeralWrapper.formatBigNumber(scriptRef.onlineExpGained) + " hacking exp")}</pre>
+                <pre>Online production rate: {numeralWrapper.formatMoney(onlineMps)} / second</pre>
+                <pre>{(Array(25).join(" ") + numeralWrapper.formatBigNumber(onlineEps) + " hacking exp / second")}</pre>
+                <pre>Total offline production: {numeralWrapper.formatMoney(scriptRef.offlineMoneyMade)}</pre>
+                <pre>{(Array(27).join(" ") + numeralWrapper.formatBigNumber(scriptRef.offlineExpGained) + " hacking exp")}</pre>
+                <pre>Offline production rate: {numeralWrapper.formatMoney(offlineMps)} / second</pre>
+                <pre>{(Array(26).join(" ") + numeralWrapper.formatBigNumber(offlineEps) +  " hacking exp / second")}</pre>
 
                 <AccordionButton
                     onClick={logClickHandler}
                     text="Log"
                 />
                 <AccordionButton
-                    onClick={killScriptButton}
+                    onClick={killScriptClickHandler}
                     text="Kill Script"
                 />
                 </>