From 907314e76b869e36d694ab2d4703e3df6cf792d0 Mon Sep 17 00:00:00 2001 From: Olivier Gagnon Date: Fri, 17 Sep 2021 21:30:02 -0400 Subject: [PATCH 1/2] more work --- css/activescripts.scss | 128 ------------------ src/DevMenu.tsx | 39 +++--- src/DevMenu/ui/Augmentations.tsx | 2 +- src/DevMenu/ui/Bladeburner.tsx | 2 +- src/DevMenu/ui/CodingContracts.tsx | 2 +- src/DevMenu/ui/Companies.tsx | 2 +- src/DevMenu/ui/Corporation.tsx | 2 +- src/DevMenu/ui/Factions.tsx | 2 +- src/DevMenu/ui/Gang.tsx | 2 +- src/DevMenu/ui/General.tsx | 2 +- src/DevMenu/ui/Programs.tsx | 2 +- src/DevMenu/ui/Servers.tsx | 2 +- src/DevMenu/ui/Sleeves.tsx | 2 +- src/DevMenu/ui/SourceFiles.tsx | 2 +- src/DevMenu/ui/Stats.tsx | 2 +- src/DevMenu/ui/StockMarket.tsx | 2 +- src/DevMenu/ui/TimeSkip.tsx | 2 +- src/Gang/ui/GangStats.tsx | 4 +- src/Gang/ui/TaskSelector.tsx | 2 +- src/Hacknet/ui/HacknetNodeElem.tsx | 3 +- src/Hacknet/ui/PlayerInfo.tsx | 2 +- src/PersonObjects/Sleeve/ui/SleeveElem.tsx | 2 +- src/engineStyle.js | 1 - src/ui/ActiveScripts/ActiveScriptsRoot.tsx | 12 +- src/ui/ActiveScripts/ScriptProduction.tsx | 80 +++++++---- src/ui/ActiveScripts/ServerAccordion.tsx | 20 ++- .../ActiveScripts/ServerAccordionContent.tsx | 12 +- src/ui/ActiveScripts/ServerAccordions.tsx | 95 +++++-------- .../ActiveScripts/WorkerScriptAccordion.tsx | 73 +++++----- src/ui/GameRoot.tsx | 2 +- src/ui/React/MoneyRate.tsx | 2 +- src/ui/React/Theme.tsx | 40 +++--- src/ui/WorkInProgressRoot.tsx | 12 +- 33 files changed, 234 insertions(+), 325 deletions(-) delete mode 100644 css/activescripts.scss diff --git a/css/activescripts.scss b/css/activescripts.scss deleted file mode 100644 index f5f7593ba..000000000 --- a/css/activescripts.scss +++ /dev/null @@ -1,128 +0,0 @@ -@import "theme"; - -.active-scripts-list { - list-style-type: none; -} - -.active-scripts-container { - > p { - margin: 6px; - padding: 4px; - } - - .accordion-header { - > pre { - color: white; - } - } -} - -.active-scripts-server-header { - background-color: #444; - font-size: $defaultFontSize * 1.25; - color: #fff; - margin: 6px 6px 0 6px; - padding: 6px; - cursor: pointer; - width: 60%; - 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 { - &: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 { - margin: 0 6px 6px 6px; - padding: 0 6px 6px 6px; - width: 55%; - margin-left: 5%; - display: none; - - div, - ul, - ul > li { - background-color: #555; - } -} - -.active-scripts-script-header { - background-color: #555; - 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 (+) */ - font-size: $defaultFontSize * 0.8125; - float: right; - margin-left: 5px; - color: transparent; - text-shadow: 0 0 0 var(--my-font-color); - position: absolute; - bottom: 4px; - } - - &.active:after { - content: "\2796"; /* "minus" sign (-) */ - } - - &:hover, - &.active:hover { - background-color: #666; - } - - &.active { - background-color: #555; - } -} - -.active-scripts-script-panel { - background-color: #555; - display: none; - font-size: 14px; - margin-bottom: 6px; - padding: 0 18px; - width: auto; - - pre, - h2, - ul, - li { - background-color: #555; - width: auto; - color: #fff; - margin-left: 5%; - } -} diff --git a/src/DevMenu.tsx b/src/DevMenu.tsx index 03a2dbfab..fdf6fa816 100644 --- a/src/DevMenu.tsx +++ b/src/DevMenu.tsx @@ -4,7 +4,6 @@ import { IEngine } from "./IEngine"; import { IRouter } from "./ui/Router"; import React from "react"; -import { TTheme as Theme } from "./ui/React/Theme"; import { General } from "./DevMenu/ui/General"; import { Stats } from "./DevMenu/ui/Stats"; @@ -30,32 +29,30 @@ interface IProps { export function DevMenuRoot(props: IProps): React.ReactElement { return ( - - <> -

Development Menu - Only meant to be used for testing/debugging

- - - - - - - - + <> +

Development Menu - Only meant to be used for testing/debugging

+ + + + + + + + - {props.player.bladeburner instanceof Bladeburner && } + {props.player.bladeburner instanceof Bladeburner && } - {props.player.inGang() && } + {props.player.inGang() && } - {props.player.hasCorporation() && } + {props.player.hasCorporation() && } - + - {props.player.hasWseAccount && } + {props.player.hasWseAccount && } - {props.player.sleeves.length > 0 && } + {props.player.sleeves.length > 0 && } - - - + + ); } diff --git a/src/DevMenu/ui/Augmentations.tsx b/src/DevMenu/ui/Augmentations.tsx index eb5b6b4d9..eb9f75c84 100644 --- a/src/DevMenu/ui/Augmentations.tsx +++ b/src/DevMenu/ui/Augmentations.tsx @@ -40,7 +40,7 @@ export function Augmentations(props: IProps): React.ReactElement { } return ( - + }>

Augmentations

 diff --git a/src/DevMenu/ui/Bladeburner.tsx b/src/DevMenu/ui/Bladeburner.tsx index c8b0e267a..0a435dfa5 100644 --- a/src/DevMenu/ui/Bladeburner.tsx +++ b/src/DevMenu/ui/Bladeburner.tsx @@ -55,7 +55,7 @@ export function Bladeburner(props: IProps): React.ReactElement { } return ( - + }>

Bladeburner

 diff --git a/src/DevMenu/ui/CodingContracts.tsx b/src/DevMenu/ui/CodingContracts.tsx index fc5923cf3..f8b1180c2 100644 --- a/src/DevMenu/ui/CodingContracts.tsx +++ b/src/DevMenu/ui/CodingContracts.tsx @@ -25,7 +25,7 @@ export function CodingContracts(): React.ReactElement { } return ( - + }>

Coding Contracts

 diff --git a/src/DevMenu/ui/Companies.tsx b/src/DevMenu/ui/Companies.tsx index c9bbb3ba2..ec4a55851 100644 --- a/src/DevMenu/ui/Companies.tsx +++ b/src/DevMenu/ui/Companies.tsx @@ -69,7 +69,7 @@ export function Companies(): React.ReactElement { } return ( - + }>

Companies

 diff --git a/src/DevMenu/ui/Corporation.tsx b/src/DevMenu/ui/Corporation.tsx index 321aee7c3..d2ad09299 100644 --- a/src/DevMenu/ui/Corporation.tsx +++ b/src/DevMenu/ui/Corporation.tsx @@ -67,7 +67,7 @@ export function Corporation(props: IProps): React.ReactElement { } return ( - + }>

Corporation

 diff --git a/src/DevMenu/ui/Factions.tsx b/src/DevMenu/ui/Factions.tsx index 1921a34bb..08ba1b470 100644 --- a/src/DevMenu/ui/Factions.tsx +++ b/src/DevMenu/ui/Factions.tsx @@ -97,7 +97,7 @@ export function Factions(props: IProps): React.ReactElement { } return ( - + }>

Factions

 diff --git a/src/DevMenu/ui/Gang.tsx b/src/DevMenu/ui/Gang.tsx index 2307ec301..9d51bd480 100644 --- a/src/DevMenu/ui/Gang.tsx +++ b/src/DevMenu/ui/Gang.tsx @@ -36,7 +36,7 @@ export function Gang(props: IProps): React.ReactElement { } return ( - + }>

Gang

 diff --git a/src/DevMenu/ui/General.tsx b/src/DevMenu/ui/General.tsx index 700b07d53..fd2a4d041 100644 --- a/src/DevMenu/ui/General.tsx +++ b/src/DevMenu/ui/General.tsx @@ -43,7 +43,7 @@ export function General(props: IProps): React.ReactElement { } return ( - + }>

General

 diff --git a/src/DevMenu/ui/Programs.tsx b/src/DevMenu/ui/Programs.tsx index 6294315f0..af06cf852 100644 --- a/src/DevMenu/ui/Programs.tsx +++ b/src/DevMenu/ui/Programs.tsx @@ -35,7 +35,7 @@ export function Programs(props: IProps): React.ReactElement { } return ( - + }>

Programs

 diff --git a/src/DevMenu/ui/Servers.tsx b/src/DevMenu/ui/Servers.tsx index 256f58bc6..a96291255 100644 --- a/src/DevMenu/ui/Servers.tsx +++ b/src/DevMenu/ui/Servers.tsx @@ -75,7 +75,7 @@ export function Servers(): React.ReactElement { } return ( - + }>

Servers

 diff --git a/src/DevMenu/ui/Sleeves.tsx b/src/DevMenu/ui/Sleeves.tsx index 0750bc71c..8ee395e0b 100644 --- a/src/DevMenu/ui/Sleeves.tsx +++ b/src/DevMenu/ui/Sleeves.tsx @@ -38,7 +38,7 @@ export function Sleeves(props: IProps): React.ReactElement { } return ( - + }>

Sleeves

 diff --git a/src/DevMenu/ui/SourceFiles.tsx b/src/DevMenu/ui/SourceFiles.tsx index 2772d1b43..acedef7b0 100644 --- a/src/DevMenu/ui/SourceFiles.tsx +++ b/src/DevMenu/ui/SourceFiles.tsx @@ -51,7 +51,7 @@ export function SourceFiles(props: IProps): React.ReactElement { } return ( - + }>

Source-Files

 diff --git a/src/DevMenu/ui/Stats.tsx b/src/DevMenu/ui/Stats.tsx index 205abe610..b7f03418d 100644 --- a/src/DevMenu/ui/Stats.tsx +++ b/src/DevMenu/ui/Stats.tsx @@ -136,7 +136,7 @@ export function Stats(props: IProps): React.ReactElement { } return ( - + }>

Experience / Stats

 diff --git a/src/DevMenu/ui/StockMarket.tsx b/src/DevMenu/ui/StockMarket.tsx index 2d3446c15..c98e175c7 100644 --- a/src/DevMenu/ui/StockMarket.tsx +++ b/src/DevMenu/ui/StockMarket.tsx @@ -80,7 +80,7 @@ export function StockMarket(): React.ReactElement { ); } return ( - + }>

Stock Market

 diff --git a/src/DevMenu/ui/TimeSkip.tsx b/src/DevMenu/ui/TimeSkip.tsx index 375043806..b08d8f531 100644 --- a/src/DevMenu/ui/TimeSkip.tsx +++ b/src/DevMenu/ui/TimeSkip.tsx @@ -28,7 +28,7 @@ export function TimeSkip(props: IProps): React.ReactElement { } return ( - + }>

Time skip

 diff --git a/src/Gang/ui/GangStats.tsx b/src/Gang/ui/GangStats.tsx index 99b04c9dd..eb8ebad0b 100644 --- a/src/Gang/ui/GangStats.tsx +++ b/src/Gang/ui/GangStats.tsx @@ -55,7 +55,9 @@ export function GangStats(props: IProps): React.ReactElement {


-

Money gain rate: {MoneyRate(5 * props.gang.moneyGainRate)}

+

+ Money gain rate: +


diff --git a/src/Gang/ui/TaskSelector.tsx b/src/Gang/ui/TaskSelector.tsx index 24207e1bb..eeab69358 100644 --- a/src/Gang/ui/TaskSelector.tsx +++ b/src/Gang/ui/TaskSelector.tsx @@ -28,7 +28,7 @@ export function TaskSelector(props: IProps): React.ReactElement { const tasks = props.gang.getAllTaskNames(); const data = [ - [`Money:`, MoneyRate(5 * props.member.calculateMoneyGain(props.gang))], + [`Money:`, ], [`Respect:`, `${numeralWrapper.formatRespect(5 * props.member.calculateRespectGain(props.gang))} / sec`], [`Wanted Level:`, `${numeralWrapper.formatWanted(5 * props.member.calculateWantedLevelGain(props.gang))} / sec`], [`Total Respect:`, `${numeralWrapper.formatRespect(props.member.earnedRespect)}`], diff --git a/src/Hacknet/ui/HacknetNodeElem.tsx b/src/Hacknet/ui/HacknetNodeElem.tsx index 9809cf79c..4cd6ede38 100644 --- a/src/Hacknet/ui/HacknetNodeElem.tsx +++ b/src/Hacknet/ui/HacknetNodeElem.tsx @@ -144,7 +144,8 @@ export function HacknetNodeElem(props: IProps): React.ReactElement {

Production:

- ({MoneyRate(node.moneyGainRatePerSecond)}) + ( + )
diff --git a/src/Hacknet/ui/PlayerInfo.tsx b/src/Hacknet/ui/PlayerInfo.tsx index 52c7a26bb..260966a88 100644 --- a/src/Hacknet/ui/PlayerInfo.tsx +++ b/src/Hacknet/ui/PlayerInfo.tsx @@ -25,7 +25,7 @@ export function PlayerInfo(props: IProps): React.ReactElement { if (hasServers) { prod = HashRate(props.totalProduction); } else { - prod = MoneyRate(props.totalProduction); + prod = ; } return ( diff --git a/src/PersonObjects/Sleeve/ui/SleeveElem.tsx b/src/PersonObjects/Sleeve/ui/SleeveElem.tsx index 28917012d..c7b9529b3 100644 --- a/src/PersonObjects/Sleeve/ui/SleeveElem.tsx +++ b/src/PersonObjects/Sleeve/ui/SleeveElem.tsx @@ -175,7 +175,7 @@ export function SleeveElem(props: IProps): React.ReactElement { // }); } else { data = [ - [`Money:`, MoneyRate(5 * props.sleeve.gainRatesForTask.money)], + [`Money:`, ], [`Hacking Exp:`, `${numeralWrapper.formatExp(5 * props.sleeve.gainRatesForTask.hack)} / s`], [`Strength Exp:`, `${numeralWrapper.formatExp(5 * props.sleeve.gainRatesForTask.str)} / s`], [`Defense Exp:`, `${numeralWrapper.formatExp(5 * props.sleeve.gainRatesForTask.def)} / s`], diff --git a/src/engineStyle.js b/src/engineStyle.js index ff7d57a03..ab7b0bd32 100644 --- a/src/engineStyle.js +++ b/src/engineStyle.js @@ -8,7 +8,6 @@ import "../css/mainmenu.scss"; import "../css/characteroverview.scss"; import "../css/terminal.scss"; import "../css/scripteditor.scss"; -import "../css/activescripts.scss"; import "../css/hacknetnodes.scss"; import "../css/menupages.scss"; import "../css/augmentations.scss"; diff --git a/src/ui/ActiveScripts/ActiveScriptsRoot.tsx b/src/ui/ActiveScripts/ActiveScriptsRoot.tsx index 4d0679564..61e3ad832 100644 --- a/src/ui/ActiveScripts/ActiveScriptsRoot.tsx +++ b/src/ui/ActiveScripts/ActiveScriptsRoot.tsx @@ -8,10 +8,10 @@ import { ScriptProduction } from "./ScriptProduction"; import { ServerAccordions } from "./ServerAccordions"; import { WorkerScript } from "../../Netscript/WorkerScript"; -import { IPlayer } from "../../PersonObjects/IPlayer"; + +import Typography from "@mui/material/Typography"; type IProps = { - p: IPlayer; workerScripts: Map; }; @@ -27,15 +27,15 @@ export function ActiveScriptsRoot(props: IProps): React.ReactElement { }, []); 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/ActiveScripts/ScriptProduction.tsx b/src/ui/ActiveScripts/ScriptProduction.tsx index f70649f12..13ee22f22 100644 --- a/src/ui/ActiveScripts/ScriptProduction.tsx +++ b/src/ui/ActiveScripts/ScriptProduction.tsx @@ -5,16 +5,44 @@ import * as React from "react"; import { WorkerScript } from "../../Netscript/WorkerScript"; -import { IPlayer } from "../../PersonObjects/IPlayer"; import { Money } from "../React/Money"; +import { MoneyRate } from "../React/MoneyRate"; +import { use } from "../Context"; + +import Typography from "@mui/material/Typography"; +import Box from "@mui/material/Box"; + +import { Theme } from "@mui/material/styles"; +import makeStyles from "@mui/styles/makeStyles"; +import createStyles from "@mui/styles/createStyles"; +import Table from "@mui/material/Table"; +import TableBody from "@mui/material/TableBody"; +import TableCell from "@mui/material/TableCell"; +import TableContainer from "@mui/material/TableContainer"; +import TableHead from "@mui/material/TableHead"; +import TableRow from "@mui/material/TableRow"; type IProps = { - p: IPlayer; workerScripts: Map; }; +const useStyles = makeStyles((theme: Theme) => + createStyles({ + cell: { + borderBottom: "none", + padding: theme.spacing(1), + margin: theme.spacing(1), + whiteSpace: "nowrap", + }, + size: { + width: "1px", + }, + }), +); export function ScriptProduction(props: IProps): React.ReactElement { - const prodRateSinceLastAug = props.p.scriptProdSinceLastAug / (props.p.playtimeSinceLastAug / 1000); + const player = use.Player(); + const classes = useStyles(); + const prodRateSinceLastAug = player.scriptProdSinceLastAug / (player.playtimeSinceLastAug / 1000); let onlineProduction = 0; for (const ws of props.workerScripts.values()) { @@ -22,27 +50,29 @@ export function ScriptProduction(props: IProps): React.ReactElement { } return ( -

- Total online production of Active scripts:  - - - - {" "} - / sec - -
- Total online production since last Aug installation:  - - - -  ( - - - - {" "} - / sec - - ) -

+ + + + + Total online production of Active scripts: + + + + + + + + + + Total online production since last Aug installation: + + + + () + + + + +
); } diff --git a/src/ui/ActiveScripts/ServerAccordion.tsx b/src/ui/ActiveScripts/ServerAccordion.tsx index 5bb090b25..ca41e0957 100644 --- a/src/ui/ActiveScripts/ServerAccordion.tsx +++ b/src/ui/ActiveScripts/ServerAccordion.tsx @@ -4,7 +4,11 @@ */ import * as React from "react"; -import { BBAccordion } from "../React/BBAccordion"; +import Typography from "@mui/material/Typography"; +import Accordion from "@mui/material/Accordion"; +import AccordionSummary from "@mui/material/AccordionSummary"; +import AccordionDetails from "@mui/material/AccordionDetails"; +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import { ServerAccordionContent } from "./ServerAccordionContent"; import { BaseServer } from "../../Server/BaseServer"; @@ -34,9 +38,15 @@ export function ServerAccordion(props: IProps): React.ReactElement { const headerTxt = `${paddedName} ${createProgressBarText(barOptions)}`; return ( - {headerTxt}} - panelContent={} - /> + + }> + + {headerTxt} + + + + + + ); } diff --git a/src/ui/ActiveScripts/ServerAccordionContent.tsx b/src/ui/ActiveScripts/ServerAccordionContent.tsx index 308f2f8ad..7f288be6f 100644 --- a/src/ui/ActiveScripts/ServerAccordionContent.tsx +++ b/src/ui/ActiveScripts/ServerAccordionContent.tsx @@ -14,11 +14,13 @@ export function ServerAccordionContent(props: IProps): React.ReactElement { return ; } - const scripts = props.workerScripts.map((ws) => { - return ; - }); - - return
    {scripts}
; + return ( +
    + {props.workerScripts.map((ws) => { + return ; + })} +
+ ); } export function ServerAccordionContentPaginated(props: IProps): React.ReactElement { diff --git a/src/ui/ActiveScripts/ServerAccordions.tsx b/src/ui/ActiveScripts/ServerAccordions.tsx index f723666d2..0cc3aa1ca 100644 --- a/src/ui/ActiveScripts/ServerAccordions.tsx +++ b/src/ui/ActiveScripts/ServerAccordions.tsx @@ -2,7 +2,7 @@ * React Component for rendering the Accordion elements for all servers * on which scripts are running */ -import * as React from "react"; +import React, { useState, useEffect } from "react"; import { ServerAccordion } from "./ServerAccordion"; @@ -18,7 +18,7 @@ interface IServerData { } interface IServerToScriptsMap { - [key: string]: IServerData; + [key: string]: IServerData | undefined; } type IProps = { @@ -31,72 +31,47 @@ type IState = { const subscriberId = "ActiveScriptsUI"; -export class ServerAccordions extends React.Component { - serverToScriptMap: IServerToScriptsMap = {}; - - constructor(props: IProps) { - super(props); - - this.state = { - rerenderFlag: false, - }; - - this.updateServerToScriptsMap(); - - this.rerender = this.rerender.bind(this); +export function ServerAccordions(props: IProps): React.ReactElement { + const setRerender = useState(false)[1]; + function rerender(): void { + setRerender((old) => !old); } - componentDidMount(): void { + useEffect(() => { WorkerScriptStartStopEventEmitter.addSubscriber({ - cb: this.rerender, + cb: rerender, id: subscriberId, }); - } + return () => WorkerScriptStartStopEventEmitter.removeSubscriber(subscriberId); + }, []); - componentWillUnmount(): void { - WorkerScriptStartStopEventEmitter.removeSubscriber(subscriberId); - } - - updateServerToScriptsMap(): void { - const map: IServerToScriptsMap = {}; - - for (const ws of this.props.workerScripts.values()) { - const server = getServer(ws.serverIp); - if (server == null) { - console.warn(`WorkerScript has invalid IP address: ${ws.serverIp}`); - continue; - } - - if (map[server.hostname] == null) { - map[server.hostname] = { - server: server, - workerScripts: [], - }; - } - - map[server.hostname].workerScripts.push(ws); + const serverToScriptMap: IServerToScriptsMap = {}; + for (const ws of props.workerScripts.values()) { + const server = getServer(ws.serverIp); + if (server == null) { + console.warn(`WorkerScript has invalid IP address: ${ws.serverIp}`); + continue; } - this.serverToScriptMap = map; + let data = serverToScriptMap[server.hostname]; + + if (data === undefined) { + serverToScriptMap[server.hostname] = { + server: server, + workerScripts: [], + }; + data = serverToScriptMap[server.hostname]; + } + if (data !== undefined) data.workerScripts.push(ws); } - rerender(): void { - this.updateServerToScriptsMap(); - this.setState((prevState) => { - return { rerenderFlag: !prevState.rerenderFlag }; - }); - } - - render(): React.ReactNode { - const elems = Object.keys(this.serverToScriptMap).map((serverName) => { - const data = this.serverToScriptMap[serverName]; - return ; - }); - - return ( -
    - {elems} -
- ); - } + return ( +
    + {Object.values(serverToScriptMap).map((data) => { + return ( + data && + ); + })} +
+ ); } diff --git a/src/ui/ActiveScripts/WorkerScriptAccordion.tsx b/src/ui/ActiveScripts/WorkerScriptAccordion.tsx index 3b4f2f5e2..9e95681c6 100644 --- a/src/ui/ActiveScripts/WorkerScriptAccordion.tsx +++ b/src/ui/ActiveScripts/WorkerScriptAccordion.tsx @@ -6,8 +6,15 @@ import * as React from "react"; import { numeralWrapper } from "../numeralFormat"; -import { BBAccordion } from "../React/BBAccordion"; +import Button from "@mui/material/Button"; +import Typography from "@mui/material/Typography"; +import Accordion from "@mui/material/Accordion"; +import AccordionSummary from "@mui/material/AccordionSummary"; +import AccordionDetails from "@mui/material/AccordionDetails"; +import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import { AccordionButton } from "../React/AccordionButton"; +import IconButton from "@mui/material/IconButton"; +import DeleteIcon from "@mui/icons-material/Delete"; import { killWorkerScript } from "../../Netscript/killWorkerScript"; import { WorkerScript } from "../../Netscript/WorkerScript"; @@ -41,37 +48,39 @@ export function WorkerScriptAccordion(props: IProps): React.ReactElement { const offlineEps = scriptRef.offlineExpGained / scriptRef.offlineRunningTime; return ( - {props.workerScript.name}} - panelClass="active-scripts-script-panel" - panelContent={ - <> - 
Threads: {numeralWrapper.formatThreads(props.workerScript.scriptRef.threads)}
- 
Args: {arrayToString(props.workerScript.args)}
- 
Online Time: {convertTimeMsToTimeElapsedString(scriptRef.onlineRunningTime * 1e3)}
- 
Offline Time: {convertTimeMsToTimeElapsedString(scriptRef.offlineRunningTime * 1e3)}
- 
-            Total online production: 
-
- 
{Array(26).join(" ") + numeralWrapper.formatExp(scriptRef.onlineExpGained) + " hacking exp"}
- 
-            Online production rate:  / second
-
- 
{Array(25).join(" ") + numeralWrapper.formatExp(onlineEps) + " hacking exp / second"}
- 
-            Total offline production: 
-
- 
{Array(27).join(" ") + numeralWrapper.formatExp(scriptRef.offlineExpGained) + " hacking exp"}
- 
-            Offline production rate:  / second
-
- 
{Array(26).join(" ") + numeralWrapper.formatExp(offlineEps) + " hacking exp / second"}
+ + }> + {props.workerScript.name} + + + 
Threads: {numeralWrapper.formatThreads(props.workerScript.scriptRef.threads)}
+ 
Args: {arrayToString(props.workerScript.args)}
+ 
Online Time: {convertTimeMsToTimeElapsedString(scriptRef.onlineRunningTime * 1e3)}
+ 
Offline Time: {convertTimeMsToTimeElapsedString(scriptRef.offlineRunningTime * 1e3)}
+ 
+          Total online production: 
+
+ 
{Array(26).join(" ") + numeralWrapper.formatExp(scriptRef.onlineExpGained) + " hacking exp"}
+ 
+          Online production rate:  / second
+
+ 
{Array(25).join(" ") + numeralWrapper.formatExp(onlineEps) + " hacking exp / second"}
+ 
+          Total offline production: 
+
+ 
{Array(27).join(" ") + numeralWrapper.formatExp(scriptRef.offlineExpGained) + " hacking exp"}
+ 
+          Offline production rate:  / second
+
+ 
{Array(26).join(" ") + numeralWrapper.formatExp(offlineEps) + " hacking exp / second"}
- - - - } - /> + + + + + + ); } diff --git a/src/ui/GameRoot.tsx b/src/ui/GameRoot.tsx index 801fa9f57..058b2f92e 100644 --- a/src/ui/GameRoot.tsx +++ b/src/ui/GameRoot.tsx @@ -278,7 +278,7 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme ) : page === Page.CreateScript ? ( ) : page === Page.ActiveScripts ? ( - + ) : page === Page.Hacknet ? ( ) : page === Page.CreateProgram ? ( diff --git a/src/ui/React/MoneyRate.tsx b/src/ui/React/MoneyRate.tsx index 4c7b54551..0e1f92fd6 100644 --- a/src/ui/React/MoneyRate.tsx +++ b/src/ui/React/MoneyRate.tsx @@ -2,6 +2,6 @@ import React from "react"; import { numeralWrapper } from "../../ui/numeralFormat"; import { Money } from "../../ui/React/Money"; -export function MoneyRate(money: number): JSX.Element { +export function MoneyRate({ money }: { money: number }): JSX.Element { return ; } diff --git a/src/ui/React/Theme.tsx b/src/ui/React/Theme.tsx index eb9ded35f..968f22341 100644 --- a/src/ui/React/Theme.tsx +++ b/src/ui/React/Theme.tsx @@ -19,6 +19,10 @@ export const colors = { secondary: "#888", secondarydark: "#666", + warninglight: "#ff0", + warning: "#cc0", + warningdark: "#990", + welllight: "#444", well: "#222", white: "#fff", @@ -49,6 +53,11 @@ export const theme = createTheme({ main: colors.error, dark: colors.errordark, }, + warning: { + light: colors.warninglight, + main: colors.warning, + dark: colors.warningdark, + }, background: { paper: colors.well, }, @@ -66,7 +75,6 @@ export const theme = createTheme({ backgroundColor: colors.well, }, input: { - color: colors.primary, "&::placeholder": { userSelect: "none", color: colors.primarydark, @@ -106,22 +114,22 @@ export const theme = createTheme({ }, }, }, - MuiButton: { - styleOverrides: { - root: { - backgroundColor: "#333", - border: "1px solid " + colors.well, - // color: colors.primary, - margin: "5px", - padding: "3px 5px", - "&:hover": { - backgroundColor: colors.black, - }, + // MuiButton: { + // styleOverrides: { + // root: { + // backgroundColor: "#333", + // border: "1px solid " + colors.well, + // // color: colors.primary, + // margin: "5px", + // padding: "3px 5px", + // "&:hover": { + // backgroundColor: colors.black, + // }, - borderRadius: 0, - }, - }, - }, + // borderRadius: 0, + // }, + // }, + // }, MuiSelect: { styleOverrides: { icon: { diff --git a/src/ui/WorkInProgressRoot.tsx b/src/ui/WorkInProgressRoot.tsx index 54b1e9d4d..a2a4d4673 100644 --- a/src/ui/WorkInProgressRoot.tsx +++ b/src/ui/WorkInProgressRoot.tsx @@ -47,7 +47,8 @@ export function WorkInProgressRoot(): React.ReactElement {
You have earned:

- ({MoneyRate(player.workMoneyGainRate * CYCLES_PER_SEC)})
+ (){" "} +

{Reputation(player.workRepGained)} ({ReputationRate(player.workRepGainRate * CYCLES_PER_SEC)}) reputation for this faction
@@ -112,7 +113,8 @@ export function WorkInProgressRoot(): React.ReactElement {

This has cost you:
- ({MoneyRate(player.workMoneyLossRate * CYCLES_PER_SEC)})
+ (){" "} +

You have gained:
{numeralWrapper.formatExp(player.workHackExpGained)} ( @@ -173,7 +175,8 @@ export function WorkInProgressRoot(): React.ReactElement {
You have earned:

- ({MoneyRate(player.workMoneyGainRate * CYCLES_PER_SEC)})
+ (){" "} +

{Reputation(player.workRepGained)} ({ReputationRate(player.workRepGainRate * CYCLES_PER_SEC)}) reputation for this company
@@ -241,7 +244,8 @@ export function WorkInProgressRoot(): React.ReactElement {
You have earned:

- ({MoneyRate(player.workMoneyGainRate * CYCLES_PER_SEC)})
+ (){" "} +

{Reputation(player.workRepGained)} ( {Reputation(`${numeralWrapper.formatExp(player.workRepGainRate * CYCLES_PER_SEC)} / sec`)} From 1996deaf0a33997caa30ad35eae58e2219454317 Mon Sep 17 00:00:00 2001 From: Olivier Gagnon Date: Sat, 18 Sep 2021 00:16:02 -0400 Subject: [PATCH 2/2] Active Scripts --- css/loader.scss | 2 +- css/styles.scss | 2 +- src/Casino/Blackjack.tsx | 6 +- src/DevMenu/ui/Adjuster.tsx | 12 +-- src/DevMenu/ui/Augmentations.tsx | 8 +- src/DevMenu/ui/Factions.tsx | 4 +- src/Fconf/Fconf.js | 8 +- src/NetscriptWorker.js | 2 +- src/Sidebar/ui/SidebarRoot.tsx | 28 +++---- src/ui/ActiveScripts/ActiveScriptsRoot.tsx | 1 + src/ui/ActiveScripts/ServerAccordion.tsx | 30 ++++--- .../ActiveScripts/ServerAccordionContent.tsx | 79 +++++++------------ src/ui/ActiveScripts/ServerAccordions.tsx | 64 +++++++++++++-- .../ActiveScripts/WorkerScriptAccordion.tsx | 78 ++++++++++-------- src/ui/React/GameOptionsRoot.tsx | 37 ++------- src/ui/React/TablePaginationActionsAll.tsx | 69 ++++++++++++++++ src/ui/React/Theme.tsx | 48 +++++++---- 17 files changed, 289 insertions(+), 189 deletions(-) create mode 100644 src/ui/React/TablePaginationActionsAll.tsx diff --git a/css/loader.scss b/css/loader.scss index 33ce9e8c2..f1ef2c55e 100644 --- a/css/loader.scss +++ b/css/loader.scss @@ -32,7 +32,7 @@ .loaderoverlay { $spinnerBoxSize: 200px; - $themeColor: #6f3; + $themeColor: #0c0; position: absolute; width: 100%; diff --git a/css/styles.scss b/css/styles.scss index 1f9ffe5ae..4932ba5d9 100644 --- a/css/styles.scss +++ b/css/styles.scss @@ -4,7 +4,7 @@ @import "reset"; :root { - --my-font-color: #6f3; + --my-font-color: #0c0; --my-background-color: #000; --my-highlight-color: #fff; --my-prompt-color: #f92672; diff --git a/src/Casino/Blackjack.tsx b/src/Casino/Blackjack.tsx index 8d6abb029..03112e74c 100644 --- a/src/Casino/Blackjack.tsx +++ b/src/Casino/Blackjack.tsx @@ -340,15 +340,13 @@ export class Blackjack extends Game { {/* Buttons */} {!gameInProgress ? (
- + Start
) : (
- - Hit - + Hit Stay diff --git a/src/DevMenu/ui/Adjuster.tsx b/src/DevMenu/ui/Adjuster.tsx index f567862f3..0a39365ad 100644 --- a/src/DevMenu/ui/Adjuster.tsx +++ b/src/DevMenu/ui/Adjuster.tsx @@ -37,12 +37,12 @@ export function Adjuster(props: IProps): React.ReactElement { startAdornment: ( <> - + - add(typeof value !== "string" ? value : 0)} size="large"> + add(typeof value !== "string" ? value : 0)} size="large"> @@ -51,16 +51,12 @@ export function Adjuster(props: IProps): React.ReactElement { endAdornment: ( <> - subtract(typeof value !== "string" ? value : 0)} - size="large" - > + subtract(typeof value !== "string" ? value : 0)} size="large"> - + diff --git a/src/DevMenu/ui/Augmentations.tsx b/src/DevMenu/ui/Augmentations.tsx index eb9f75c84..82a4d65b8 100644 --- a/src/DevMenu/ui/Augmentations.tsx +++ b/src/DevMenu/ui/Augmentations.tsx @@ -53,23 +53,21 @@ export function Augmentations(props: IProps): React.ReactElement {