Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-12-18 20:25:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
danielyxie 2019-05-17 13:41:16 -07:00
parent c1ec3c5eba
commit 3b7f9c9fb0
15 changed files with 160 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
css/activescripts.scss
View File

@ -13,6 +13,12 @@
margin: 6px;
padding: 4px;
}
.accordion-header {
> pre {
color: white;
}
}
}
.active-scripts-server-header {
@ -26,31 +32,32 @@
text-align: left;
border: none;
outline: none;
&:after {
content: '\02795'; /* "plus" sign (+) */
font-size: $defaultFontSize * 0.8125;
color: #fff;
float: right;
margin-left: 5px;
}
&.active, &:hover {
background-color: #555;
}
}
.active-scripts-server-header.active,
.active-scripts-server-header:hover {
background-color: #555;
}
.active-scripts-server-header.active {
&:after {
content: "\2796"; /* "minus" sign (-) */
font-size: $defaultFontSize * 0.8125;
color: #fff;
float: right;
margin-left: 5px;
}
.active-scripts-server-header.active:hover {
background-color: #666;
}
.active-scripts-server-header:after {
content: '\02795'; /* "plus" sign (+) */
font-size: $defaultFontSize * 0.8125;
color: #fff;
float: right;
margin-left: 5px;
}
.active-scripts-server-header.active:after {
content: "\2796"; /* "minus" sign (-) */
font-size: $defaultFontSize * 0.8125;
color: #fff;
float: right;
margin-left: 5px;
&:hover {
background-color: #666;
}
}
.active-scripts-server-panel {
@ -59,24 +66,23 @@
width: 55%;
margin-left: 5%;
display: none;
}
.active-scripts-server-panel div,
.active-scripts-server-panel ul,
.active-scripts-server-panel ul > li {
background-color: #555;
div, ul, ul > li {
background-color: #555;
}
}
.active-scripts-script-header {
background-color: #555;
color: var(--my-font-color);
padding: 4px 25px 4px 10px;
cursor: pointer;
width: auto;
text-align: left;
border: none;
color: var(--my-font-color);
cursor: pointer;
display: block;
outline: none;
padding: 4px 25px 4px 10px;
position: relative;
text-align: left;
width: auto;
&:after {
content: '\02795'; /* "plus" sign (+) */
@ -104,13 +110,14 @@
}
.active-scripts-script-panel {
padding: 0 18px;
background-color: #555;
width: auto;
display: none;
font-size: 14px;
margin-bottom: 6px;
padding: 0 18px;
width: auto;
p, h2, ul, li {
pre, h2, ul, li {
background-color: #555;
width: auto;
color: #fff;

2
css/styles.scss
View File

@ -243,8 +243,8 @@ a:visited {
/* Accordion menus (Header with collapsible panel) */
.accordion-header {
background-color: #444;
font-size: $defaultFontSize * 1.25;
color: #fff;
font-size: $defaultFontSize * 1.25;
margin: 6px 6px 0 6px;
padding: 4px 6px;
cursor: pointer;

6
src/Netscript/WorkerScriptStartStopEventEmitter.ts Normal file
View File

@ -0,0 +1,6 @@
/**
* Event emitter that triggers when scripts are started/stopped
*/
import { EventEmitter } from "../utils/EventEmitter";
export const WorkerScriptStartStopEventEmitter = new EventEmitter();

2
src/Netscript/killWorkerScript.ts
View File

@ -4,6 +4,7 @@
*/
import { WorkerScript } from "./WorkerScript";
import { workerScripts } from "./WorkerScripts";
import { WorkerScriptStartStopEventEmitter } from "./WorkerScriptStartStopEventEmitter";
import { RunningScript } from "../Script/RunningScript";
import { AllServers } from "../Server/AllServers";
@ -106,6 +107,7 @@ function removeWorkerScript(id: WorkerScript | number): void {
// Delete script from global pool (workerScripts)
workerScripts.splice(<number>index, 1);
WorkerScriptStartStopEventEmitter.emitEvent();
}
/**

13
src/NetscriptWorker.js
View File

@ -5,6 +5,7 @@
import { killWorkerScript } from "./Netscript/killWorkerScript";
import { WorkerScript } from "./Netscript/WorkerScript";
import { workerScripts } from "./Netscript/WorkerScripts";
import { WorkerScriptStartStopEventEmitter } from "./Netscript/WorkerScriptStartStopEventEmitter";
import { CONSTANTS } from "./Constants";
import { Engine } from "./engine";
@ -25,7 +26,6 @@ import {
} from "./Script/ScriptHelpers";
import { AllServers } from "./Server/AllServers";
import { Settings } from "./Settings/Settings";
import { EventEmitter } from "./utils/EventEmitter";
import { setTimeoutRef } from "./utils/SetTimeoutRef";
import { generate } from "escodegen";
@ -45,9 +45,6 @@ for (var i = 0; i < CONSTANTS.NumNetscriptPorts; ++i) {
NetscriptPorts.push(new NetscriptPort());
}
// WorkerScript-related event emitter. Used for the UI
export const WorkerScriptEventEmitter = new EventEmitter();
export function prestigeWorkerScripts() {
for (var i = 0; i < workerScripts.length; ++i) {
// TODO Signal event emitter
@ -138,7 +135,7 @@ function startNetscript2Script(workerScript) {
}
function startNetscript1Script(workerScript) {
var code = workerScript.code;
const code = workerScript.code;
workerScript.running = true;
//Process imports
@ -448,9 +445,9 @@ export function addWorkerScript(runningScriptObj, server) {
// Start the script's execution
let p = null; // Script's resulting promise
if (s.name.endsWith(".js") || s.name.endsWith(".ns")) {
p = startNetscript2Script(workerScripts[i]);
p = startNetscript2Script(s);
} else {
p = startNetscript1Script(workerScripts[i]);
p = startNetscript1Script(s);
if (!(p instanceof Promise)) { return; }
}
@ -488,6 +485,7 @@ export function addWorkerScript(runningScriptObj, server) {
w.scriptRef.log("Script crashed with runtime error");
} else {
w.scriptRef.log("Script killed");
return; // Already killed, so stop here
}
w.running = false;
w.env.stopFlag = true;
@ -505,6 +503,7 @@ export function addWorkerScript(runningScriptObj, server) {
// Add the WorkerScript to the global pool
workerScripts.push(s);
WorkerScriptStartStopEventEmitter.emitEvent();
return;
}

12
src/Script/RunningScript.ts
View File

@ -1,5 +1,7 @@
// Class representing a Script instance that is actively running.
// A Script can have multiple active instances
/**
* Class representing a Script instance that is actively running.
* A Script can have multiple active instances
*/
import { Script } from "./Script";
import { FconfSettings } from "../Fconf/FconfSettings";
import { Settings } from "../Settings/Settings";
@ -22,10 +24,8 @@ export class RunningScript {
// Script arguments
args: any[] = [];
// Holds a map of servers hacked, where server = key and the value for each
// server is an array of four numbers. The four numbers represent:
// [MoneyStolen, NumTimesHacked, NumTimesGrown, NumTimesWeaken]
// This data is used for offline progress
// Map of [key: server ip] -> Hacking data. Used for offline progress calculations.
// Hacking data format: [MoneyStolen, NumTimesHacked, NumTimesGrown, NumTimesWeaken]
dataMap: IMap<number[]> = {};
// Script filename

31
src/Script/Script.ts
View File

@ -1,6 +1,9 @@
// Class representing a script file
// This does NOT represent a script that is actively running and
// being evaluated. See RunningScript for that
/**
* Class representing a script file.
*
* This does NOT represent a script that is actively running and
* being evaluated. See RunningScript for that
*/
import { calculateRamUsage } from "./RamCalculations";
import { Page, routing } from "../ui/navigationTracking";
@ -34,7 +37,6 @@ export class Script {
// IP of server that this script is on.
server: string = "";
constructor(fn: string="", code: string="", server: string="", otherScripts: Script[]=[]) {
this.filename = fn;
this.code = code;
@ -44,6 +46,9 @@ export class Script {
if (this.code !== "") { this.updateRamUsage(otherScripts); }
};
/**
* Download the script as a file
*/
download(): void {
const filename = this.filename + ".js";
const file = new Blob([this.code], {type: 'text/plain'});
@ -63,10 +68,14 @@ export class Script {
}
}
// Save a script FROM THE SCRIPT EDITOR
/**
* Save a script from the script editor
* @param {string} code - The new contents of the script
* @param {Script[]} otherScripts - Other scripts on the server. Used to process imports
*/
saveScript(code: string, serverIp: string, otherScripts: Script[]): void {
if (routing.isOn(Page.ScriptEditor)) {
//Update code and filename
// Update code and filename
this.code = code.replace(/^\s+|\s+$/g, '');
const filenameElem: HTMLInputElement | null = document.getElementById("script-editor-filename") as HTMLInputElement;
@ -75,18 +84,16 @@ export class Script {
return;
}
this.filename = filenameElem!.value;
// Server
this.server = serverIp;
//Calculate/update ram usage, execution time, etc.
this.updateRamUsage(otherScripts);
this.module = "";
}
}
// Updates the script's RAM usage based on its code
/**
* Calculates and updates the script's RAM usage based on its code
* @param {Script[]} otherScripts - Other scripts on the server. Used to process imports
*/
async updateRamUsage(otherScripts: Script[]) {
var res = await calculateRamUsage(this.code, otherScripts);
if (res > 0) {

22
src/engine.jsx
View File

@ -45,6 +45,7 @@ import { LocationName } from "./Locations/data/LocationNames";
import { LocationRoot } from "./Locations/ui/Root";
import { checkForMessagesToSend, initMessages } from "./Message/MessageHelpers";
import { inMission, currMission } from "./Missions";
import { workerScripts } from "./Netscript/WorkerScripts";
import {
loadAllRunningScripts,
updateOnlineScriptTimes,
@ -90,6 +91,8 @@ import { displayCharacterInfo } from "./ui/displayCharacterInfo";
import { Page, routing } from "./ui/navigationTracking";
import { numeralWrapper } from "./ui/numeralFormat";
import { setSettingsLabels } from "./ui/setSettingsLabels";
import { ActiveScriptsRoot } from "./ui/ActiveScripts/Root";
import { initializeMainMenuHeaders } from "./ui/MainMenu/Headers";
import { initializeMainMenuLinks, MainMenuLinks } from "./ui/MainMenu/Links";
@ -262,7 +265,10 @@ const Engine = {
Engine.hideAllContent();
Engine.Display.activeScriptsContent.style.display = "block";
routing.navigateTo(Page.ActiveScripts);
updateActiveScriptsItems();
ReactDOM.render(
<ActiveScriptsRoot p={Player} workerScripts={workerScripts} />,
Engine.Display.activeScriptsContent
)
MainMenuLinks.ActiveScripts.classList.add("active");
},
@ -474,7 +480,10 @@ const Engine = {
Engine.Display.terminalContent.style.display = "none";
Engine.Display.characterContent.style.display = "none";
Engine.Display.scriptEditorContent.style.display = "none";
Engine.Display.activeScriptsContent.style.display = "none";
ReactDOM.unmountComponentAtNode(Engine.Display.activeScriptsContent);
clearHacknetNodesUI();
Engine.Display.createProgramContent.style.display = "none";
@ -805,13 +814,14 @@ const Engine = {
}
if (Engine.Counters.updateActiveScriptsDisplay <= 0) {
// Always update, but make the interval longer if the page isn't active
updateActiveScriptsItems();
if (routing.isOn(Page.ActiveScripts)) {
Engine.Counters.updateActiveScriptsDisplay = 5;
} else {
Engine.Counters.updateActiveScriptsDisplay = 10;
ReactDOM.render(
<ActiveScriptsRoot p={Player} workerScripts={workerScripts} />,
Engine.Display.activeScriptsContent
)
}
Engine.Counters.updateActiveScriptsDisplay = 5;
}
if (Engine.Counters.updateDisplays <= 0) {

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

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

1
src/ui/ActiveScripts/ScriptProduction.tsx
View File

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

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

@ -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, '&nbsp;');
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>

38
src/ui/ActiveScripts/ServerAccordions.tsx
View File

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

38
src/ui/ActiveScripts/WorkerScriptAccordion.tsx
View File

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

1
src/ui/React/Accordion.tsx
View File

@ -9,6 +9,7 @@ type IProps = {
panelClass?: string; // Override default class
panelContent: React.ReactElement;
panelInitiallyOpened?: boolean;
style?: string;
}
type IState = {

3
utils/LogBox.ts
View File

@ -23,7 +23,6 @@ function logBoxInit(): void {
console.error(`Could not find LogBox's close button`);
return;
}
logBoxClose();
closeButton.addEventListener("click", function() {
logBoxClose();
@ -40,6 +39,8 @@ function logBoxInit(): void {
logBoxContainer = document.getElementById("log-box-container");
logText = document.getElementById("log-box-text");
logBoxClose();
document.removeEventListener("DOMContentLoaded", logBoxInit);
};