merge dev

2026-04-27 03:25:44 +02:00 · 2021-10-26 23:11:47 -04:00
parent d4ba39995f e49dda0b35
commit 080b5a4a1f
82 changed files with 1280 additions and 793 deletions
@@ -0,0 +1,31 @@
+/**
+ * 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 React from "react";
+
+import { ScriptProduction } from "./ScriptProduction";
+import { ServerAccordions } from "./ServerAccordions";
+
+import { WorkerScript } from "../../Netscript/WorkerScript";
+
+import Typography from "@mui/material/Typography";
+
+interface IProps {
+  workerScripts: Map<number, WorkerScript>;
+}
+
+export function ActiveScriptsPage(props: IProps): React.ReactElement {
+  return (
+    <>
+      <Typography>
+        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.
+      </Typography>
+
+      <ScriptProduction />
+      <ServerAccordions {...props} />
+    </>
+  );
+}
@@ -3,17 +3,16 @@
 * and provides information about all of the player's scripts that are currently running
 */
 import React, { useState, useEffect } from "react";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";

-import { ScriptProduction } from "./ScriptProduction";
-import { ServerAccordions } from "./ServerAccordions";
-
+import { ActiveScriptsPage } from "./ActiveScriptsPage";
+import { RecentScriptsPage } from "./RecentScriptsPage";
 import { WorkerScript } from "../../Netscript/WorkerScript";

-import Typography from "@mui/material/Typography";
-
-type IProps = {
+interface IProps {
  workerScripts: Map<number, WorkerScript>;
-};
+}

 export function ActiveScriptsRoot(props: IProps): React.ReactElement {
  const setRerender = useState(false)[1];
@@ -26,17 +25,19 @@ export function ActiveScriptsRoot(props: IProps): React.ReactElement {
    return () => clearInterval(id);
  }, []);

+  const [tab, setTab] = useState<"active" | "recent">("active");
+  function handleChange(event: React.SyntheticEvent, tab: "active" | "recent"): void {
+    setTab(tab);
+  }
  return (
    <>
-      <Typography variant="h4">Active Scripts</Typography>
-      <Typography>
-        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.
-      </Typography>
+      <Tabs variant="fullWidth" value={tab} onChange={handleChange}>
+        <Tab label={"Active"} value={"active"} />
+        <Tab label={"Recent"} value={"recent"} />
+      </Tabs>

-      <ScriptProduction />
-      <ServerAccordions {...props} />
+      {tab === "active" && <ActiveScriptsPage workerScripts={props.workerScripts} />}
+      {tab === "recent" && <RecentScriptsPage />}
    </>
  );
 }
@@ -0,0 +1,165 @@
+/**
+ * React Component for displaying a single WorkerScript's info as an
+ * Accordion element
+ */
+import * as React from "react";
+
+import { numeralWrapper } from "../numeralFormat";
+
+import Table from "@mui/material/Table";
+import TableCell from "@mui/material/TableCell";
+import TableRow from "@mui/material/TableRow";
+import TableBody from "@mui/material/TableBody";
+import Box from "@mui/material/Box";
+import Paper from "@mui/material/Paper";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemText from "@mui/material/ListItemText";
+import makeStyles from "@mui/styles/makeStyles";
+
+import Collapse from "@mui/material/Collapse";
+import ExpandLess from "@mui/icons-material/ExpandLess";
+import ExpandMore from "@mui/icons-material/ExpandMore";
+
+import { convertTimeMsToTimeElapsedString } from "../../utils/StringHelperFunctions";
+import { arrayToString } from "../../utils/helpers/arrayToString";
+import { Money } from "../React/Money";
+import { MoneyRate } from "../React/MoneyRate";
+import { RecentScript } from "../..//Netscript/RecentScripts";
+import { LogBoxEvents } from "../React/LogBoxManager";
+
+const useStyles = makeStyles({
+  noborder: {
+    borderBottom: "none",
+  },
+});
+
+interface IProps {
+  recentScript: RecentScript;
+}
+
+export function RecentScriptAccordion(props: IProps): React.ReactElement {
+  const classes = useStyles();
+  const [open, setOpen] = React.useState(false);
+  const recentScript = props.recentScript;
+
+  // Calculations for script stats
+  const onlineMps = recentScript.runningScript.onlineMoneyMade / recentScript.runningScript.onlineRunningTime;
+  const onlineEps = recentScript.runningScript.onlineExpGained / recentScript.runningScript.onlineRunningTime;
+
+  function logClickHandler(): void {
+    LogBoxEvents.emit(recentScript.runningScript);
+  }
+  return (
+    <>
+      <ListItemButton onClick={() => setOpen((old) => !old)} component={Paper}>
+        <ListItemText
+          primary={
+            <Typography>
+              └ {recentScript.filename} (died{" "}
+              {convertTimeMsToTimeElapsedString(new Date().getTime() - recentScript.timestamp.getTime())} ago)
+            </Typography>
+          }
+        />
+        {open ? <ExpandLess color="primary" /> : <ExpandMore color="primary" />}
+      </ListItemButton>
+      <Collapse in={open} timeout={0} unmountOnExit>
+        <Box mx={6}>
+          <Table padding="none" size="small">
+            <TableBody>
+              <TableRow>
+                <TableCell className={classes.noborder}>
+                  <Typography>└ Threads:</Typography>
+                </TableCell>
+                <TableCell className={classes.noborder}>
+                  <Typography>{numeralWrapper.formatThreads(recentScript.runningScript.threads)}</Typography>
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className={classes.noborder} colSpan={2}>
+                  <Typography>└ Args: {arrayToString(recentScript.args)}</Typography>
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className={classes.noborder}>
+                  <Typography>└ Online Time:</Typography>
+                </TableCell>
+                <TableCell className={classes.noborder}>
+                  <Typography>
+                    {convertTimeMsToTimeElapsedString(recentScript.runningScript.onlineRunningTime * 1e3)}
+                  </Typography>
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className={classes.noborder}>
+                  <Typography>└ Offline Time:</Typography>
+                </TableCell>
+                <TableCell className={classes.noborder}>
+                  <Typography>
+                    {convertTimeMsToTimeElapsedString(recentScript.runningScript.offlineRunningTime * 1e3)}
+                  </Typography>
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className={classes.noborder}>
+                  <Typography>└ Total online production:</Typography>
+                </TableCell>
+                <TableCell className={classes.noborder} align="left">
+                  <Typography>
+                    <Money money={recentScript.runningScript.onlineMoneyMade} />
+                  </Typography>
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className={classes.noborder} colSpan={1} />
+                <TableCell className={classes.noborder} align="left">
+                  <Typography>
+                    &nbsp;{numeralWrapper.formatExp(recentScript.runningScript.onlineExpGained) + " hacking exp"}
+                  </Typography>
+                </TableCell>
+              </TableRow>
+
+              <TableRow>
+                <TableCell className={classes.noborder}>
+                  <Typography>└ Online production rate:</Typography>
+                </TableCell>
+                <TableCell className={classes.noborder} align="left">
+                  <Typography>
+                    <MoneyRate money={onlineMps} />
+                  </Typography>
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className={classes.noborder} colSpan={1} />
+                <TableCell className={classes.noborder} align="left">
+                  <Typography>&nbsp;{numeralWrapper.formatExp(onlineEps) + " hacking exp / sec"}</Typography>
+                </TableCell>
+              </TableRow>
+
+              <TableRow>
+                <TableCell className={classes.noborder}>
+                  <Typography>└ Total offline production:</Typography>
+                </TableCell>
+                <TableCell className={classes.noborder} align="left">
+                  <Typography>
+                    <Money money={recentScript.runningScript.offlineMoneyMade} />
+                  </Typography>
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell className={classes.noborder} colSpan={1} />
+                <TableCell className={classes.noborder} align="left">
+                  <Typography>
+                    &nbsp;{numeralWrapper.formatExp(recentScript.runningScript.offlineExpGained) + " hacking exp"}
+                  </Typography>
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+          <Button onClick={logClickHandler}>LOG</Button>
+        </Box>
+      </Collapse>
+    </>
+  );
+}
@@ -0,0 +1,20 @@
+/**
+ * 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 React from "react";
+import Typography from "@mui/material/Typography";
+
+import { recentScripts } from "../../Netscript/RecentScripts";
+import { RecentScriptAccordion } from "./RecentScriptAccordion";
+
+export function RecentScriptsPage(): React.ReactElement {
+  return (
+    <>
+      <Typography>List of all recently killed scripts.</Typography>
+      {recentScripts.map((r) => (
+        <RecentScriptAccordion key={r.pid} recentScript={r} />
+      ))}
+    </>
+  );
+}
@@ -76,6 +76,8 @@ import { InvitationModal } from "../Faction/ui/InvitationModal";
 import { enterBitNode } from "../RedPill";
 import { Context } from "./Context";

+const htmlLocation = location;
+
 interface IProps {
  terminal: ITerminal;
  player: IPlayer;
@@ -215,6 +217,14 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
    return ITutorialEvents.subscribe(rerender);
  }, []);

+  function killAllScripts(): void {
+    for (const server of GetAllServers()) {
+      server.runningScripts = [];
+    }
+    saveObject.saveGame();
+    setTimeout(() => htmlLocation.reload(), 2000);
+  }
+
  Router = {
    page: () => page,
    toActiveScripts: () => setPage(Page.ActiveScripts),
@@ -288,7 +298,7 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
      <Context.Router.Provider value={Router}>
        <Overview>
          {!ITutorial.isRunning ? (
-            <CharacterOverview save={() => saveObject.saveGame()} />
+            <CharacterOverview save={() => saveObject.saveGame()} killScripts={killAllScripts} />
          ) : (
            <InteractiveTutorialRoot />
          )}
@@ -372,12 +382,7 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
                    player={player}
                    save={() => saveObject.saveGame()}
                    export={() => saveObject.exportGame()}
-                    forceKill={() => {
-                      for (const server of GetAllServers()) {
-                        server.runningScripts = [];
-                      }
-                      dialogBoxCreate("Forcefully deleted all running scripts. Please save and refresh page.");
-                    }}
+                    forceKill={killAllScripts}
                    softReset={() => {
                      dialogBoxCreate("Soft Reset!");
                      prestigeAugmentation();
@@ -265,7 +265,7 @@ export function InteractiveTutorialRoot(): React.ReactElement {
      content: (
        <>
          <Typography>You now have root access! You can hack the server using </Typography>
-          <Typography classes={{ root: classes.textfield }}>{"[home ~/]> hack"}</Typography>
+          <Typography classes={{ root: classes.textfield }}>{"[n00dles ~/]> hack"}</Typography>

          <Typography> Try doing that now.</Typography>
        </>
@@ -296,7 +296,7 @@ export function InteractiveTutorialRoot(): React.ReactElement {
      content: (
        <>
          <Typography>From any server you can get back home using</Typography>
-          <Typography classes={{ root: classes.textfield }}>{"[home ~/]> home"}</Typography>
+          <Typography classes={{ root: classes.textfield }}>{"[n00dles ~/]> home"}</Typography>

          <Typography>Let's head home before creating our first script!</Typography>
        </>
@@ -468,7 +468,7 @@ export function InteractiveTutorialRoot(): React.ReactElement {
    [iTutorialSteps.HacknetNodesIntroduction as number]: {
      content: (
        <Typography>
-          here you can purchase new Hacknet Nodes and upgrade your existing ones. Let's purchase a new one now.
+          Here you can purchase new Hacknet Nodes and upgrade your existing ones. Let's purchase a new one now.
        </Typography>
      ),
      canNext: true,
@@ -6,23 +6,24 @@ import makeStyles from "@mui/styles/makeStyles";
 import createStyles from "@mui/styles/createStyles";
 import { numeralWrapper } from "../../ui/numeralFormat";
 import { Reputation } from "./Reputation";
+import { KillScriptsModal } from "./KillScriptsModal";

 import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableRow from "@mui/material/TableRow";
-import Paper from "@mui/material/Paper";
-import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import IconButton from "@mui/material/IconButton";
 import SaveIcon from "@mui/icons-material/Save";
+import ClearAllIcon from "@mui/icons-material/ClearAll";

 import { Settings } from "../../Settings/Settings";
 import { use } from "../Context";

 interface IProps {
  save: () => void;
+  killScripts: () => void;
 }

 function Intelligence(): React.ReactElement {
@@ -138,7 +139,8 @@ const useStyles = makeStyles((theme: Theme) =>
  }),
 );

-export function CharacterOverview({ save }: IProps): React.ReactElement {
+export function CharacterOverview({ save, killScripts }: IProps): React.ReactElement {
+  const [killOpen, setKillOpen] = useState(false);
  const player = use.Player();

  const setRerender = useState(false)[1];
@@ -150,162 +152,162 @@ export function CharacterOverview({ save }: IProps): React.ReactElement {

  const classes = useStyles();
  return (
-    <Paper square>
-      <Box m={1}>
-        <Table size="small">
-          <TableBody>
-            <TableRow>
-              <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
-                <Typography classes={{ root: classes.hp }}>HP&nbsp;</Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cellNone }}>
-                <Typography classes={{ root: classes.hp }}>
-                  {numeralWrapper.formatHp(player.hp)}&nbsp;/&nbsp;{numeralWrapper.formatHp(player.max_hp)}
-                </Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cellNone }}>
-                <Typography id="overview-hp-hook" classes={{ root: classes.hp }}>
-                  {/*Hook for player scripts*/}
-                </Typography>
-              </TableCell>
-            </TableRow>
+    <>
+      <Table sx={{ display: "block", m: 1 }}>
+        <TableBody>
+          <TableRow>
+            <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
+              <Typography classes={{ root: classes.hp }}>HP&nbsp;</Typography>
+            </TableCell>
+            <TableCell align="right" classes={{ root: classes.cellNone }}>
+              <Typography classes={{ root: classes.hp }}>
+                {numeralWrapper.formatHp(player.hp)}&nbsp;/&nbsp;{numeralWrapper.formatHp(player.max_hp)}
+              </Typography>
+            </TableCell>
+            <TableCell align="right" classes={{ root: classes.cellNone }}>
+              <Typography id="overview-hp-hook" classes={{ root: classes.hp }}>
+                {/*Hook for player scripts*/}
+              </Typography>
+            </TableCell>
+          </TableRow>

-            <TableRow>
-              <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
-                <Typography classes={{ root: classes.money }}>Money&nbsp;</Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cellNone }}>
-                <Typography classes={{ root: classes.money }}>
-                  {numeralWrapper.formatMoney(player.money.toNumber())}
-                </Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cellNone }}>
-                <Typography id="overview-money-hook" classes={{ root: classes.money }}>
-                  {/*Hook for player scripts*/}
-                </Typography>
-              </TableCell>
-            </TableRow>
+          <TableRow>
+            <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
+              <Typography classes={{ root: classes.money }}>Money&nbsp;</Typography>
+            </TableCell>
+            <TableCell align="right" classes={{ root: classes.cellNone }}>
+              <Typography classes={{ root: classes.money }}>
+                {numeralWrapper.formatMoney(player.money.toNumber())}
+              </Typography>
+            </TableCell>
+            <TableCell align="right" classes={{ root: classes.cellNone }}>
+              <Typography id="overview-money-hook" classes={{ root: classes.money }}>
+                {/*Hook for player scripts*/}
+              </Typography>
+            </TableCell>
+          </TableRow>

-            <TableRow>
-              <TableCell component="th" scope="row" classes={{ root: classes.cell }}>
-                <Typography classes={{ root: classes.hack }}>Hack&nbsp;</Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cell }}>
-                <Typography classes={{ root: classes.hack }}>
-                  {numeralWrapper.formatSkill(player.hacking_skill)}
-                </Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cell }}>
-                <Typography id="overview-hack-hook" classes={{ root: classes.hack }}>
-                  {/*Hook for player scripts*/}
-                </Typography>
-              </TableCell>
-            </TableRow>
+          <TableRow>
+            <TableCell component="th" scope="row" classes={{ root: classes.cell }}>
+              <Typography classes={{ root: classes.hack }}>Hack&nbsp;</Typography>
+            </TableCell>
+            <TableCell align="right" classes={{ root: classes.cell }}>
+              <Typography classes={{ root: classes.hack }}>
+                {numeralWrapper.formatSkill(player.hacking_skill)}
+              </Typography>
+            </TableCell>
+            <TableCell align="right" classes={{ root: classes.cell }}>
+              <Typography id="overview-hack-hook" classes={{ root: classes.hack }}>
+                {/*Hook for player scripts*/}
+              </Typography>
+            </TableCell>
+          </TableRow>

-            <TableRow>
-              <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
-                <Typography classes={{ root: classes.combat }}>Str&nbsp;</Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cellNone }}>
-                <Typography classes={{ root: classes.combat }}>
-                  {numeralWrapper.formatSkill(player.strength)}
-                </Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cellNone }}>
-                <Typography id="overview-str-hook" classes={{ root: classes.combat }}>
-                  {/*Hook for player scripts*/}
-                </Typography>
-              </TableCell>
-            </TableRow>
+          <TableRow>
+            <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
+              <Typography classes={{ root: classes.combat }}>Str&nbsp;</Typography>
+            </TableCell>
+            <TableCell align="right" classes={{ root: classes.cellNone }}>
+              <Typography classes={{ root: classes.combat }}>{numeralWrapper.formatSkill(player.strength)}</Typography>
+            </TableCell>
+            <TableCell align="right" classes={{ root: classes.cellNone }}>
+              <Typography id="overview-str-hook" classes={{ root: classes.combat }}>
+                {/*Hook for player scripts*/}
+              </Typography>
+            </TableCell>
+          </TableRow>

-            <TableRow>
-              <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
-                <Typography classes={{ root: classes.combat }}>Def&nbsp;</Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cellNone }}>
-                <Typography classes={{ root: classes.combat }}>{numeralWrapper.formatSkill(player.defense)}</Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cellNone }}>
-                <Typography id="overview-def-hook" classes={{ root: classes.combat }}>
-                  {/*Hook for player scripts*/}
-                </Typography>
-              </TableCell>
-            </TableRow>
+          <TableRow>
+            <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
+              <Typography classes={{ root: classes.combat }}>Def&nbsp;</Typography>
+            </TableCell>
+            <TableCell align="right" classes={{ root: classes.cellNone }}>
+              <Typography classes={{ root: classes.combat }}>{numeralWrapper.formatSkill(player.defense)}</Typography>
+            </TableCell>
+            <TableCell align="right" classes={{ root: classes.cellNone }}>
+              <Typography id="overview-def-hook" classes={{ root: classes.combat }}>
+                {/*Hook for player scripts*/}
+              </Typography>
+            </TableCell>
+          </TableRow>

-            <TableRow>
-              <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
-                <Typography classes={{ root: classes.combat }}>Dex&nbsp;</Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cellNone }}>
-                <Typography classes={{ root: classes.combat }}>
-                  {numeralWrapper.formatSkill(player.dexterity)}
-                </Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cellNone }}>
-                <Typography id="overview-dex-hook" classes={{ root: classes.combat }}>
-                  {/*Hook for player scripts*/}
-                </Typography>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell component="th" scope="row" classes={{ root: classes.cell }}>
-                <Typography classes={{ root: classes.combat }}>Agi&nbsp;</Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cell }}>
-                <Typography classes={{ root: classes.combat }}>{numeralWrapper.formatSkill(player.agility)}</Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cell }}>
-                <Typography id="overview-agi-hook" classes={{ root: classes.combat }}>
-                  {/*Hook for player scripts*/}
-                </Typography>
-              </TableCell>
-            </TableRow>
+          <TableRow>
+            <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
+              <Typography classes={{ root: classes.combat }}>Dex&nbsp;</Typography>
+            </TableCell>
+            <TableCell align="right" classes={{ root: classes.cellNone }}>
+              <Typography classes={{ root: classes.combat }}>{numeralWrapper.formatSkill(player.dexterity)}</Typography>
+            </TableCell>
+            <TableCell align="right" classes={{ root: classes.cellNone }}>
+              <Typography id="overview-dex-hook" classes={{ root: classes.combat }}>
+                {/*Hook for player scripts*/}
+              </Typography>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell component="th" scope="row" classes={{ root: classes.cell }}>
+              <Typography classes={{ root: classes.combat }}>Agi&nbsp;</Typography>
+            </TableCell>
+            <TableCell align="right" classes={{ root: classes.cell }}>
+              <Typography classes={{ root: classes.combat }}>{numeralWrapper.formatSkill(player.agility)}</Typography>
+            </TableCell>
+            <TableCell align="right" classes={{ root: classes.cell }}>
+              <Typography id="overview-agi-hook" classes={{ root: classes.combat }}>
+                {/*Hook for player scripts*/}
+              </Typography>
+            </TableCell>
+          </TableRow>

-            <TableRow>
-              <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
-                <Typography classes={{ root: classes.cha }}>Cha&nbsp;</Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cellNone }}>
-                <Typography classes={{ root: classes.cha }}>{numeralWrapper.formatSkill(player.charisma)}</Typography>
-              </TableCell>
-              <TableCell align="right" classes={{ root: classes.cellNone }}>
-                <Typography id="overview-cha-hook" classes={{ root: classes.cha }}>
-                  {/*Hook for player scripts*/}
-                </Typography>
-              </TableCell>
-            </TableRow>
-            <Intelligence />
+          <TableRow>
+            <TableCell component="th" scope="row" classes={{ root: classes.cellNone }}>
+              <Typography classes={{ root: classes.cha }}>Cha&nbsp;</Typography>
+            </TableCell>
+            <TableCell align="right" classes={{ root: classes.cellNone }}>
+              <Typography classes={{ root: classes.cha }}>{numeralWrapper.formatSkill(player.charisma)}</Typography>
+            </TableCell>
+            <TableCell align="right" classes={{ root: classes.cellNone }}>
+              <Typography id="overview-cha-hook" classes={{ root: classes.cha }}>
+                {/*Hook for player scripts*/}
+              </Typography>
+            </TableCell>
+          </TableRow>
+          <Intelligence />

-            <TableRow>
-              <TableCell component="th" scope="row" classes={{ root: classes.cell }}>
-                <Typography id="overview-extra-hook-0" classes={{ root: classes.hack }}>
-                  {/*Hook for player scripts*/}
-                </Typography>
-              </TableCell>
-              <TableCell component="th" scope="row" align="right" classes={{ root: classes.cell }}>
-                <Typography id="overview-extra-hook-1" classes={{ root: classes.hack }}>
-                  {/*Hook for player scripts*/}
-                </Typography>
-              </TableCell>
-              <TableCell component="th" scope="row" align="right" classes={{ root: classes.cell }}>
-                <Typography id="overview-extra-hook-2" classes={{ root: classes.hack }}>
-                  {/*Hook for player scripts*/}
-                </Typography>
-              </TableCell>
-            </TableRow>
-            <Work />
-            <Bladeburner />
+          <TableRow>
+            <TableCell component="th" scope="row" classes={{ root: classes.cell }}>
+              <Typography id="overview-extra-hook-0" classes={{ root: classes.hack }}>
+                {/*Hook for player scripts*/}
+              </Typography>
+            </TableCell>
+            <TableCell component="th" scope="row" align="right" classes={{ root: classes.cell }}>
+              <Typography id="overview-extra-hook-1" classes={{ root: classes.hack }}>
+                {/*Hook for player scripts*/}
+              </Typography>
+            </TableCell>
+            <TableCell component="th" scope="row" align="right" classes={{ root: classes.cell }}>
+              <Typography id="overview-extra-hook-2" classes={{ root: classes.hack }}>
+                {/*Hook for player scripts*/}
+              </Typography>
+            </TableCell>
+          </TableRow>
+          <Work />
+          <Bladeburner />

-            <TableRow>
-              <TableCell align="center" colSpan={2} classes={{ root: classes.cellNone }}>
-                <IconButton onClick={save}>
-                  <SaveIcon color={Settings.AutosaveInterval !== 0 ? "primary" : "error"} />
-                </IconButton>
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </Box>
-    </Paper>
+          <TableRow>
+            <TableCell align="center" classes={{ root: classes.cellNone }}>
+              <IconButton onClick={save}>
+                <SaveIcon color={Settings.AutosaveInterval !== 0 ? "primary" : "error"} />
+              </IconButton>
+            </TableCell>
+            <TableCell align="center" classes={{ root: classes.cellNone }}>
+              <IconButton onClick={() => setKillOpen(true)}>
+                <ClearAllIcon color="error" />
+              </IconButton>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+      <KillScriptsModal open={killOpen} onClose={() => setKillOpen(false)} killScripts={killScripts} />
+    </>
  );
 }
@@ -0,0 +1,24 @@
+import React from "react";
+import { Modal } from "./Modal";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+
+interface IProps {
+  open: boolean;
+  onClose: () => void;
+  killScripts: () => void;
+}
+
+export function KillScriptsModal(props: IProps): React.ReactElement {
+  function onClick(): void {
+    props.killScripts();
+    props.onClose();
+  }
+
+  return (
+    <Modal open={props.open} onClose={props.onClose}>
+      <Typography>Forcefully kill all running scripts? This will also save your game and reload the game.</Typography>
+      <Button onClick={onClick}>KILL</Button>
+    </Modal>
+  );
+}
@@ -1,17 +1,29 @@
 import React, { useState } from "react";

 import makeStyles from "@mui/styles/makeStyles";
-import Box from "@mui/material/Box";
 import Collapse from "@mui/material/Collapse";
 import Fab from "@mui/material/Fab";
+import Paper from "@mui/material/Paper";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import { use } from "../Context";
 import { Page } from "../Router";

 const useStyles = makeStyles({
-  nobackground: {
-    backgroundColor: "#0000",
+  visibilityToggle: {
+    backgroundColor: "transparent",
+    position: "absolute",
+    top: "100%",
+    right: 0,
+  },
+  overviewContainer: {
+    position: "fixed",
+    top: 0,
+    right: 0,
+    zIndex: 1500,
+    display: "flex",
+    justifyContent: "flex-end",
+    flexDirection: "column",
  },
 });

@@ -30,16 +42,13 @@ export function Overview({ children }: IProps): React.ReactElement {
  } else {
    icon = <VisibilityIcon color="primary" />;
  }
+
  return (
-    <div style={{ position: "fixed", top: 0, right: 0, zIndex: 1500 }}>
-      <Box display="flex" justifyContent="flex-end" flexDirection={"column"}>
-        <Collapse in={open}>{children}</Collapse>
-        <Box display="flex" justifyContent="flex-end">
-          <Fab classes={{ root: classes.nobackground }} onClick={() => setOpen((old) => !old)}>
-            {icon}
-          </Fab>
-        </Box>
-      </Box>
-    </div>
+    <Paper square classes={{ root: classes.overviewContainer }}>
+      <Collapse in={open}>{children}</Collapse>
+      <Fab size="small" classes={{ root: classes.visibilityToggle }} onClick={() => setOpen((old) => !old)}>
+        {icon}
+      </Fab>
+    </Paper>
  );
-}
+}
@@ -302,7 +302,7 @@ export function refreshTheme(): void {
            border: "1px solid " + Settings.theme.well,
          },
          standardSuccess: {
-            color: Settings.theme.primaryLight,
+            color: Settings.theme.primarylight,
          },
          standardError: {
            color: Settings.theme.errorlight,
@@ -222,7 +222,7 @@ export function WorkInProgressRoot(): React.ReactElement {

  if (player.workType == CONSTANTS.WorkTypeCompanyPartTime) {
    function cancel(): void {
-      player.finishWork(true);
+      player.finishWorkPartTime(true);
      router.toJob();
    }
    function unfocus(): void {