Added toast function

package-lock.json

@@ -51,6 +51,7 @@
         "monaco-editor": "^0.27.0",
         "node-sass": "^6.0.1",
         "normalize.css": "^8.0.0",
+        "notistack": "^2.0.2",
         "numeral": "2.0.6",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
@@ -18065,6 +18066,34 @@
       "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
       "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
     },
+    "node_modules/notistack": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/notistack/-/notistack-2.0.2.tgz",
+      "integrity": "sha512-Z2kD6QK9n/9V9zXQfN3ZgH22TefBWE3OZ/q74gMVslGPA9j9WGjoi+YxsgkTAOY8NqTYdUe8aijd2kXsGNYp6g==",
+      "dependencies": {
+        "clsx": "^1.1.0",
+        "hoist-non-react-statics": "^3.3.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/notistack"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material": "^5.0.0",
+        "react": "^16.8.0 || ^17.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/npm-conf": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/npm-conf/-/npm-conf-1.1.3.tgz",
@@ -42337,6 +42366,15 @@
       "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
       "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
     },
+    "notistack": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/notistack/-/notistack-2.0.2.tgz",
+      "integrity": "sha512-Z2kD6QK9n/9V9zXQfN3ZgH22TefBWE3OZ/q74gMVslGPA9j9WGjoi+YxsgkTAOY8NqTYdUe8aijd2kXsGNYp6g==",
+      "requires": {
+        "clsx": "^1.1.0",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "npm-conf": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/npm-conf/-/npm-conf-1.1.3.tgz",

package.json

@@ -52,6 +52,7 @@
     "monaco-editor": "^0.27.0",
     "node-sass": "^6.0.1",
     "normalize.css": "^8.0.0",
+    "notistack": "^2.0.2",
     "numeral": "2.0.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/NetscriptFunctions.ts

@@ -147,6 +147,7 @@ import { INetscriptSleeve, NetscriptSleeve } from "./NetscriptFunctions/Sleeve";
 import { INetscriptExtra, NetscriptExtra } from "./NetscriptFunctions/Extra";
 import { INetscriptHacknet, NetscriptHacknet } from "./NetscriptFunctions/Hacknet";
 import { dialogBoxCreate } from "./ui/React/DialogBox";
+import { SnackbarEvents } from "./ui/React/Snackbar";
 
 const defaultInterpreter = new Interpreter("", () => undefined);
 
@@ -2683,6 +2684,11 @@ function NetscriptFunctions(workerScript: WorkerScript): NS {
     alert: function (message: any): void {
       dialogBoxCreate(message);
     },
+    toast: function (message: any, variant: any = "success"): void {
+      if (!["success", "info", "warning", "error"].includes(variant))
+        throw new Error(`variant must be one of "success", "info", "warning", or "error"`);
+      SnackbarEvents.emit(message, variant);
+    },
     prompt: function (txt: any): any {
       if (!isString(txt)) {
         txt = JSON.stringify(txt);

src/SaveObject.tsx

@@ -10,7 +10,7 @@ import { Settings } from "./Settings/Settings";
 import { SourceFileFlags } from "./SourceFile/SourceFileFlags";
 import { loadStockMarket, StockMarket } from "./StockMarket/StockMarket";
 
-import { GameSavedEvents } from "./ui/React/Snackbar";
+import { SnackbarEvents } from "./ui/React/Snackbar";
 
 import * as ExportBonus from "./ExportBonus";
 
@@ -61,7 +61,7 @@ class BitburnerSaveObject {
     const saveString = this.getSaveString();
 
     save(saveString)
-      .then(() => GameSavedEvents.emit())
+      .then(() => SnackbarEvents.emit("Game Saved!", "info"))
       .catch((err) => console.error(err));
   }
 

src/ui/GameRoot.tsx

@@ -65,7 +65,7 @@ import { CharacterOverview } from "./React/CharacterOverview";
 import { BladeburnerCinematic } from "../Bladeburner/ui/BladeburnerCinematic";
 import { workerScripts } from "../Netscript/WorkerScripts";
 import { Unclickable } from "../Exploits/Unclickable";
-import { Snackbar } from "./React/Snackbar";
+import { Snackbar, SnackbarProvider } from "./React/Snackbar";
 import { LogBoxManager } from "./React/LogBoxManager";
 import { AlertManager } from "./React/AlertManager";
 import { PromptManager } from "./React/PromptManager";
@@ -294,6 +294,7 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
         ) : page === Page.Work ? (
           <WorkInProgressRoot />
         ) : (
+          <SnackbarProvider>
             <Box display="flex" flexDirection="row" width="100%">
               <SidebarRoot player={player} router={Router} page={page} />
               <Box className={classes.root} flexGrow={1} display="block" px={1} height="100vh">
@@ -385,9 +386,10 @@ export function GameRoot({ player, engine, terminal }: IProps): React.ReactEleme
                 )}
               </Box>
             </Box>
+            <Snackbar />
+          </SnackbarProvider>
         )}
         <Unclickable />
-        <Snackbar />
         <LogBoxManager />
         <AlertManager />
         <PromptManager />

src/ui/React/Snackbar.tsx

@@ -1,29 +1,48 @@
-import React, { useState, useEffect } from "react";
-
-import { Snackbar as S } from "@mui/material";
+import React, { useEffect } from "react";
+import { useSnackbar, SnackbarProvider as SB } from "notistack";
 import { EventEmitter } from "../../utils/EventEmitter";
-import Typography from "@mui/material/Typography";
+import Alert from "@mui/material/Alert";
 import Paper from "@mui/material/Paper";
 
-export const GameSavedEvents = new EventEmitter<[]>();
+interface IProps {
+  children: React.ReactNode | React.ReactNode[];
+}
 
-export function Snackbar(): React.ReactElement {
-  const [open, setOpen] = useState(false);
-
-  useEffect(() => GameSavedEvents.subscribe(() => setOpen(true)));
+export function SnackbarProvider(props: IProps): React.ReactElement {
   return (
-    <S
-      open={open}
-      anchorOrigin={{
-        vertical: "top",
-        horizontal: "center",
-      }}
-      autoHideDuration={2000}
-      onClose={() => setOpen(false)}
-    >
-      <Paper sx={{ p: 2 }}>
-        <Typography>Game Saved!</Typography>
-      </Paper>
-    </S>
+    <SB dense maxSnack={9} anchorOrigin={{ horizontal: "right", vertical: "bottom" }} autoHideDuration={2000}>
+      {props.children}
+    </SB>
   );
 }
+
+export const SnackbarEvents = new EventEmitter<[string, "success" | "warning" | "error" | "info"]>();
+
+export function Snackbar(): React.ReactElement {
+  const { enqueueSnackbar } = useSnackbar();
+
+  useEffect(() =>
+    SnackbarEvents.subscribe((s, variant) =>
+      enqueueSnackbar(<Alert severity={variant}>{s}</Alert>, {
+        content: (k, m) => <Paper key={k}>{m}</Paper>,
+        variant: variant,
+      }),
+    ),
+  );
+  return <></>;
+  // return (
+  //   <S
+  //     open={open}
+  //     anchorOrigin={{
+  //       vertical: "top",
+  //       horizontal: "center",
+  //     }}
+  //     autoHideDuration={2000}
+  //     onClose={() => setOpen(false)}
+  //   >
+  //     <Paper sx={{ p: 2 }}>
+  //       <Typography>Game Saved!</Typography>
+  //     </Paper>
+  //   </S>
+  // );
+}

src/ui/React/Theme.tsx

@@ -294,6 +294,27 @@ export function refreshTheme(): void {
           },
         },
       },
+      MuiAlert: {
+        styleOverrides: {
+          root: {
+            backgroundColor: Settings.theme.black,
+            borderRadius: 0,
+            border: "1px solid " + Settings.theme.well,
+          },
+          standardSuccess: {
+            color: Settings.theme.successLight,
+          },
+          standardError: {
+            color: Settings.theme.errorlight,
+          },
+          standardWarning: {
+            color: Settings.theme.warninglight,
+          },
+          standardInfo: {
+            color: Settings.theme.infolight,
+          },
+        },
+      },
     },
   });
 }