Merge pull request #1483 from danielyxie/dev

Added toast function

package.json

@@ -13,10 +13,10 @@
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@monaco-editor/react": "^4.2.2",
-    "@mui/icons-material": "^5.0.0-rc.1",
+    "@mui/icons-material": "^5.0.3",
     "@mui/lab": "^5.0.0-alpha.46",
-    "@mui/material": "^5.0.0-rc.1",
+    "@mui/material": "^5.0.3",
-    "@mui/styles": "^5.0.0-rc.1",
+    "@mui/styles": "^5.0.1",
     "@types/escodegen": "^0.0.7",
     "@types/js-beautify": "^1.13.2",
     "@types/numeral": "0.0.25",
@@ -30,6 +30,7 @@
     "arg": "^5.0.0",
     "async": "^2.6.1",
     "autosize": "^4.0.2",
+    "better-react-mathjax": "^1.0.3",
     "brace": "^0.11.1",
     "codemirror": "^5.58.2",
     "decimal.js": "7.2.3",
@@ -47,11 +48,11 @@
     "loader-utils": "^1.1.0",
     "material-ui-color": "^1.2.0",
     "mathjax-full": "^3.2.0",
-    "mathjax-react": "^1.0.6",
     "memory-fs": "~0.4.1",
     "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",
@@ -122,7 +123,6 @@
     "start-server-and-test": "^1.14.0",
     "style-loader": "^0.21.0",
     "stylelint": "^9.2.1",
-    "stylelint-declaration-use-variable": "^1.6.1",
     "stylelint-order": "^0.8.1",
     "typescript": "^4.2.4",
     "uglify-es": "^3.3.9",

src/Bladeburner/Bladeburner.tsx

@@ -132,7 +132,7 @@ export class Bladeburner implements IBladeburner {
             return this.resetAction();
           }
           this.actionTimeToComplete = action.getActionTime(this);
-        } catch (e) {
+        } catch (e: any) {
           exceptionAlert(e);
         }
         break;
@@ -149,7 +149,7 @@ export class Bladeburner implements IBladeburner {
             return this.resetAction();
           }
           this.actionTimeToComplete = action.getActionTime(this);
-        } catch (e) {
+        } catch (e: any) {
           exceptionAlert(e);
         }
         break;
@@ -169,7 +169,7 @@ export class Bladeburner implements IBladeburner {
             throw new Error("Failed to get BlackOperation object for: " + actionId.name);
           }
           this.actionTimeToComplete = action.getActionTime(this);
-        } catch (e) {
+        } catch (e: any) {
           exceptionAlert(e);
         }
         break;
@@ -220,7 +220,7 @@ export class Bladeburner implements IBladeburner {
       for (let i = 0; i < arrayOfCommands.length; ++i) {
         this.executeConsoleCommand(player, arrayOfCommands[i]);
       }
-    } catch (e) {
+    } catch (e: any) {
       exceptionAlert(e);
     }
   }
@@ -1298,7 +1298,7 @@ export class Bladeburner implements IBladeburner {
             action.level = action.maxLevel;
           } // Autolevel
           this.startAction(player, this.action); // Repeat action
-        } catch (e) {
+        } catch (e: any) {
           exceptionAlert(e);
         }
         break;
@@ -1387,7 +1387,7 @@ export class Bladeburner implements IBladeburner {
               this.log("You lost " + formatNumber(losses, 0) + " team members during " + action.name);
             }
           }
-        } catch (e) {
+        } catch (e: any) {
           exceptionAlert(e);
         }
         break;
@@ -2056,7 +2056,7 @@ export class Bladeburner implements IBladeburner {
       this.startAction(player, actionId);
       workerScript.log("bladeburner.startAction", `Starting bladeburner action with type '${type}' and name ${name}"`);
       return true;
-    } catch (e) {
+    } catch (e: any) {
       this.resetAction();
       workerScript.log("bladeburner.startAction", errorLogText);
       return false;

src/Corporation/Warehouse.ts

@@ -99,7 +99,7 @@ export class Warehouse {
   updateSize(corporation: ICorporation, industry: IIndustry): void {
     try {
       this.size = this.level * 100 * corporation.getStorageMultiplier() * industry.getStorageMultiplier();
-    } catch (e) {
+    } catch (e: any) {
       exceptionAlert(e);
     }
   }

src/Corporation/ui/IndustryProductEquation.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { IIndustry } from "../IIndustry";
-import { MathComponent } from "mathjax-react";
+import { MathJax, MathJaxContext } from "better-react-mathjax";
 
 interface IProps {
   division: IIndustry;
@@ -19,9 +19,8 @@ export function IndustryProductEquation(props: IProps): React.ReactElement {
   }
 
   return (
-    <MathComponent
+    <MathJaxContext>
-      display={false}
+      <MathJax>{"\\(" + reqs.join("+") + `\\Rightarrow` + prod.map((p) => `1\\text{ }${p}`).join("+") + "\\)"}</MathJax>
-      tex={reqs.join("+") + String.raw`\Rightarrow` + prod.map((p) => String.raw`1\text{ }${p}`).join("+")}
+    </MathJaxContext>
-    />
   );
 }

src/Faction/ui/DonateOption.tsx

@@ -15,7 +15,7 @@ import { Reputation } from "../../ui/React/Reputation";
 import { numeralWrapper } from "../../ui/numeralFormat";
 
 import { dialogBoxCreate } from "../../ui/React/DialogBox";
-import { MathComponent } from "mathjax-react";
+import { MathJax, MathJaxContext } from "better-react-mathjax";
 
 import Typography from "@mui/material/Typography";
 import Paper from "@mui/material/Paper";
@@ -98,9 +98,9 @@ export function DonateOption(props: IProps): React.ReactElement {
             }}
           />
           <Typography>
-            <MathComponent
+            <MathJaxContext>
-              tex={String.raw`reputation = \frac{\text{donation amount} \times \text{reputation multiplier}}{10^{${digits}}}`}
+              <MathJax>{`\\(reputation = \\frac{\\text{donation amount} \\cdot \\text{reputation multiplier}}{10^{${digits}}}\\)`}</MathJax>
-            />
+            </MathJaxContext>
           </Typography>
         </>
       )}

src/Faction/ui/Info.tsx

@@ -9,7 +9,7 @@ import { FactionInfo } from "../../Faction/FactionInfo";
 
 import { Reputation } from "../../ui/React/Reputation";
 import { Favor } from "../../ui/React/Favor";
-import { MathComponent } from "mathjax-react";
+import { MathJax, MathJaxContext } from "better-react-mathjax";
 
 import makeStyles from "@mui/styles/makeStyles";
 import createStyles from "@mui/styles/createStyles";
@@ -57,10 +57,14 @@ export function Info(props: IProps): React.ReactElement {
                 You will have <Favor favor={props.faction.favor + favorGain} /> faction favor after installing an
                 Augmentation.
               </Typography>
-              <MathComponent tex={String.raw`\large{r = \text{total faction reputation}}`} />
+              <MathJaxContext>
-              <MathComponent
+                <MathJax>{"\\(\\huge{r = \\text{total faction reputation}}\\)"}</MathJax>
-                tex={String.raw`\large{favor=\left\lfloor\log_{1.02}\left(\frac{r+25000}{25500}\right)\right\rfloor}`}
+              </MathJaxContext>
-              />
+              <MathJaxContext>
+                <MathJax>
+                  {"\\(\\huge{favor=\\left\\lfloor\\log_{1.02}\\left(\\frac{r+25000}{25500}\\right)\\right\\rfloor}\\)"}
+                </MathJax>
+              </MathJaxContext>
             </>
           }
         >
@@ -81,8 +85,13 @@ export function Info(props: IProps): React.ReactElement {
                 favor is gained whenever you install an Augmentation. The amount of favor you gain depends on the total
                 amount of reputation you earned with this faction. Across all resets.
               </Typography>
-              <MathComponent tex={String.raw`\large{r = reputation}`} />
+
-              <MathComponent tex={String.raw`\large{\Delta r = \Delta r \times \frac{100+favor}{100}}`} />
+              <MathJaxContext>
+                <MathJax>{"\\(\\huge{r = reputation}\\)"}</MathJax>
+              </MathJaxContext>
+              <MathJaxContext>
+                <MathJax>{"\\(\\huge{\\Delta r = \\Delta r \\times \\frac{100+favor}{100}}\\)"}</MathJax>
+              </MathJaxContext>
             </>
           }
         >

src/Gang/Gang.ts

@@ -97,7 +97,7 @@ export class Gang {
       this.processExperienceGains(cycles);
       this.processTerritoryAndPowerGains(cycles);
       this.storedCycles -= cycles;
-    } catch (e) {
+    } catch (e: any) {
       console.error(`Exception caught when processing Gang: ${e}`);
     }
   }
@@ -344,7 +344,7 @@ export class Gang {
         workerScript.log("ascend", `Ascended Gang member ${member.name}`);
       }
       return res;
-    } catch (e) {
+    } catch (e: any) {
       if (workerScript == null) {
         exceptionAlert(e);
       }

src/Locations/ui/CoresButton.tsx

@@ -5,7 +5,7 @@ import Tooltip from "@mui/material/Tooltip";
 import { IPlayer } from "../../PersonObjects/IPlayer";
 
 import { Money } from "../../ui/React/Money";
-import { MathComponent } from "mathjax-react";
+import { MathJax, MathJaxContext } from "better-react-mathjax";
 
 type IProps = {
   p: IPlayer;
@@ -19,7 +19,7 @@ export function CoresButton(props: IProps): React.ReactElement {
     return <Button>Upgrade 'home' cores - MAX</Button>;
   }
 
-  const cost = 1e9 * Math.pow(7.5, homeComputer.cpuCores);
+  const cost = props.p.getUpgradeHomeCoresCost();
 
   function buy(): void {
     if (maxCores) return;
@@ -30,7 +30,13 @@ export function CoresButton(props: IProps): React.ReactElement {
   }
 
   return (
-    <Tooltip title={<MathComponent tex={String.raw`\large{cost = 10^9 \times 7.5 ^{\text{cores}}}`} />}>
+    <Tooltip
+      title={
+        <MathJaxContext>
+          <MathJax>{`\\(\\large{cost = 10^9 \\cdot 7.5 ^{\\text{cores}}}\\)`}</MathJax>
+        </MathJaxContext>
+      }
+    >
       <span>
         <Button disabled={!props.p.canAfford(cost)} onClick={buy}>
           Upgrade 'home' cores ({homeComputer.cpuCores} -&gt; {homeComputer.cpuCores + 1}) -&nbsp;

src/Locations/ui/RamButton.tsx

@@ -7,8 +7,8 @@ import { IPlayer } from "../../PersonObjects/IPlayer";
 import { purchaseRamForHomeComputer } from "../../Server/ServerPurchases";
 
 import { Money } from "../../ui/React/Money";
-import { MathComponent } from "mathjax-react";
 import { numeralWrapper } from "../../ui/numeralFormat";
+import { MathJax, MathJaxContext } from "better-react-mathjax";
 
 type IProps = {
   p: IPlayer;
@@ -29,7 +29,13 @@ export function RamButton(props: IProps): React.ReactElement {
   }
 
   return (
-    <Tooltip title={<MathComponent tex={String.raw`\large{cost = 3.2 \times 10^3 \times 1.58^{log_2{(ram)}}}`} />}>
+    <Tooltip
+      title={
+        <MathJaxContext>
+          <MathJax>{`\\(\\large{cost = 3.2 \\cdot 10^3 \\cdot 1.58^{log_2{(ram)}}}\\)`}</MathJax>
+        </MathJaxContext>
+      }
+    >
       <span>
         <Button disabled={!props.p.canAfford(cost)} onClick={buy}>
           Upgrade 'home' RAM ({numeralWrapper.formatRAM(homeComputer.maxRam)} -&gt;&nbsp;

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);
 
@@ -2301,7 +2302,7 @@ function NetscriptFunctions(workerScript: WorkerScript): NS {
         // Coerce 'data' to be a string
         try {
           data = String(data);
-        } catch (e) {
+        } catch (e: any) {
           throw makeRuntimeErrorMsg("write", `Invalid data (${e}). Data being written must be convertible to a string`);
         }
 
@@ -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);
@@ -3959,7 +3965,7 @@ function NetscriptFunctions(workerScript: WorkerScript): NS {
         if (bladeburner === null) throw new Error("Should not be called without Bladeburner");
         try {
           return bladeburner.startActionNetscriptFn(Player, type, name, workerScript);
-        } catch (e) {
+        } catch (e: any) {
           throw makeRuntimeErrorMsg("bladeburner.startAction", e);
         }
       },
@@ -3984,7 +3990,7 @@ function NetscriptFunctions(workerScript: WorkerScript): NS {
         if (bladeburner === null) throw new Error("Should not be called without Bladeburner");
         try {
           return bladeburner.getActionTimeNetscriptFn(Player, type, name, workerScript);
-        } catch (e) {
+        } catch (e: any) {
           throw makeRuntimeErrorMsg("bladeburner.getActionTime", e);
         }
       },
@@ -3998,7 +4004,7 @@ function NetscriptFunctions(workerScript: WorkerScript): NS {
         if (bladeburner === null) throw new Error("Should not be called without Bladeburner");
         try {
           return bladeburner.getActionEstimatedSuccessChanceNetscriptFn(Player, type, name, workerScript);
-        } catch (e) {
+        } catch (e: any) {
           throw makeRuntimeErrorMsg("bladeburner.getActionEstimatedSuccessChance", e);
         }
       },
@@ -4022,7 +4028,7 @@ function NetscriptFunctions(workerScript: WorkerScript): NS {
         if (bladeburner === null) throw new Error("Should not be called without Bladeburner");
         try {
           return bladeburner.getActionCountRemainingNetscriptFn(type, name, workerScript);
-        } catch (e) {
+        } catch (e: any) {
           throw makeRuntimeErrorMsg("bladeburner.getActionCountRemaining", e);
         }
       },
@@ -4083,7 +4089,7 @@ function NetscriptFunctions(workerScript: WorkerScript): NS {
         if (bladeburner === null) throw new Error("Should not be called without Bladeburner");
         try {
           return bladeburner.getSkillLevelNetscriptFn(skillName, workerScript);
-        } catch (e) {
+        } catch (e: any) {
           throw makeRuntimeErrorMsg("bladeburner.getSkillLevel", e);
         }
       },
@@ -4094,7 +4100,7 @@ function NetscriptFunctions(workerScript: WorkerScript): NS {
         if (bladeburner === null) throw new Error("Should not be called without Bladeburner");
         try {
           return bladeburner.getSkillUpgradeCostNetscriptFn(skillName, workerScript);
-        } catch (e) {
+        } catch (e: any) {
           throw makeRuntimeErrorMsg("bladeburner.getSkillUpgradeCost", e);
         }
       },
@@ -4105,7 +4111,7 @@ function NetscriptFunctions(workerScript: WorkerScript): NS {
         if (bladeburner === null) throw new Error("Should not be called without Bladeburner");
         try {
           return bladeburner.upgradeSkillNetscriptFn(skillName, workerScript);
-        } catch (e) {
+        } catch (e: any) {
           throw makeRuntimeErrorMsg("bladeburner.upgradeSkill", e);
         }
       },
@@ -4116,7 +4122,7 @@ function NetscriptFunctions(workerScript: WorkerScript): NS {
         if (bladeburner === null) throw new Error("Should not be called without Bladeburner");
         try {
           return bladeburner.getTeamSizeNetscriptFn(type, name, workerScript);
-        } catch (e) {
+        } catch (e: any) {
           throw makeRuntimeErrorMsg("bladeburner.getTeamSize", e);
         }
       },
@@ -4127,7 +4133,7 @@ function NetscriptFunctions(workerScript: WorkerScript): NS {
         if (bladeburner === null) throw new Error("Should not be called without Bladeburner");
         try {
           return bladeburner.setTeamSizeNetscriptFn(type, name, size, workerScript);
-        } catch (e) {
+        } catch (e: any) {
           throw makeRuntimeErrorMsg("bladeburner.setTeamSize", e);
         }
       },

src/NetscriptWorker.ts

@@ -93,7 +93,7 @@ function startNetscript2Script(workerScript: WorkerScript): Promise<WorkerScript
       let result;
       try {
         result = f(...args);
-      } catch (e) {
+      } catch (e: any) {
         runningFn = null;
         throw e;
       }
@@ -151,7 +151,7 @@ function startNetscript1Script(workerScript: WorkerScript): Promise<WorkerScript
     const importProcessingRes = processNetscript1Imports(code, workerScript);
     codeWithImports = importProcessingRes.code;
     codeLineOffset = importProcessingRes.lineOffset;
-  } catch (e) {
+  } catch (e: any) {
     dialogBoxCreate("Error processing Imports in " + workerScript.name + ":<br>" + e);
     workerScript.env.stopFlag = true;
     workerScript.running = false;
@@ -251,7 +251,7 @@ function startNetscript1Script(workerScript: WorkerScript): Promise<WorkerScript
   let interpreter: any;
   try {
     interpreter = new Interpreter(codeWithImports, interpreterInitialization, codeLineOffset);
-  } catch (e) {
+  } catch (e: any) {
     dialogBoxCreate("Syntax ERROR in " + workerScript.name + ":<br>" + e);
     workerScript.env.stopFlag = true;
     workerScript.running = false;
@@ -271,7 +271,7 @@ function startNetscript1Script(workerScript: WorkerScript): Promise<WorkerScript
         } else {
           resolve(workerScript);
         }
-      } catch (e) {
+      } catch (e: any) {
         e = e.toString();
         if (!isScriptErrorMessage(e)) {
           e = makeRuntimeRejectMsg(workerScript, e);
@@ -283,7 +283,7 @@ function startNetscript1Script(workerScript: WorkerScript): Promise<WorkerScript
 
     try {
       runInterpreter();
-    } catch (e) {
+    } catch (e: any) {
       if (isString(e)) {
         workerScript.errorMessage = e;
         return reject(workerScript);

src/PersonObjects/IPlayer.ts

@@ -191,6 +191,7 @@ export interface IPlayer {
   getHomeComputer(): Server;
   getNextCompanyPosition(company: Company, entryPosType: CompanyPosition): CompanyPosition | null;
   getUpgradeHomeRamCost(): number;
+  getUpgradeHomeCoresCost(): number;
   gotoLocation(to: LocationName): boolean;
   hasAugmentation(aug: string | Augmentation): boolean;
   hasCorporation(): boolean;

src/PersonObjects/Player/PlayerObject.ts

@@ -198,6 +198,7 @@ export class PlayerObject implements IPlayer {
   getHomeComputer: () => Server;
   getNextCompanyPosition: (company: Company, entryPosType: CompanyPosition) => CompanyPosition | null;
   getUpgradeHomeRamCost: () => number;
+  getUpgradeHomeCoresCost: () => number;
   gotoLocation: (to: LocationName) => boolean;
   hasAugmentation: (aug: string | Augmentation) => boolean;
   hasCorporation: () => boolean;
@@ -567,6 +568,7 @@ export class PlayerObject implements IPlayer {
     this.getCurrentServer = serverMethods.getCurrentServer;
     this.getHomeComputer = serverMethods.getHomeComputer;
     this.getUpgradeHomeRamCost = serverMethods.getUpgradeHomeRamCost;
+    this.getUpgradeHomeCoresCost = serverMethods.getUpgradeHomeCoresCost;
     this.createHacknetServer = serverMethods.createHacknetServer;
     this.factionWorkType = "";
     this.committingCrimeThruSingFn = false;

src/PersonObjects/Player/PlayerObjectServerMethods.ts

@@ -40,6 +40,10 @@ export function getUpgradeHomeRamCost(this: IPlayer): number {
   return cost;
 }
 
+export function getUpgradeHomeCoresCost(this: IPlayer): number {
+  return 1e9 * Math.pow(7.5, this.getHomeComputer().cpuCores);
+}
+
 export function createHacknetServer(this: IPlayer): HacknetServer {
   const numOwned = this.hacknetNodes.length;
   const name = `hacknet-node-${numOwned}`;

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));
   }
 
@@ -73,9 +73,10 @@ class BitburnerSaveObject {
     const bn = Player.bitNodeN;
     const filename = `bitburnerSave_BN${bn}x${SourceFileFlags[bn]}_${epochTime}.json`;
     const file = new Blob([saveString], { type: "text/plain" });
-    if (window.navigator.msSaveOrOpenBlob) {
+    const navigator = window.navigator as any;
+    if (navigator.msSaveOrOpenBlob) {
       // IE10+
-      window.navigator.msSaveOrOpenBlob(file, filename);
+      navigator.msSaveOrOpenBlob(file, filename);
     } else {
       // Others
       const a = document.createElement("a"),

src/TextFile.ts

@@ -35,9 +35,10 @@ export class TextFile {
     const filename: string = this.fn;
     const file: Blob = new Blob([this.text], { type: "text/plain" });
     /* tslint:disable-next-line:strict-boolean-expressions */
-    if (window.navigator.msSaveOrOpenBlob) {
+    const navigator = window.navigator as any;
+    if (navigator.msSaveOrOpenBlob) {
       // IE10+
-      window.navigator.msSaveOrOpenBlob(file, filename);
+      navigator.msSaveOrOpenBlob(file, filename);
     } else {
       // Others
       const a: HTMLAnchorElement = document.createElement("a");

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 React, { useEffect } from "react";
-
+import { useSnackbar, SnackbarProvider as SB } from "notistack";
-import { Snackbar as S } from "@mui/material";
 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 {
+export function SnackbarProvider(props: IProps): React.ReactElement {
-  const [open, setOpen] = useState(false);
-
-  useEffect(() => GameSavedEvents.subscribe(() => setOpen(true)));
   return (
-    <S
+    <SB dense maxSnack={9} anchorOrigin={{ horizontal: "right", vertical: "bottom" }} autoHideDuration={2000}>
-      open={open}
+      {props.children}
-      anchorOrigin={{
+    </SB>
-        vertical: "top",
-        horizontal: "center",
-      }}
-      autoHideDuration={2000}
-      onClose={() => setOpen(false)}
-    >
-      <Paper sx={{ p: 2 }}>
-        <Typography>Game Saved!</Typography>
-      </Paper>
-    </S>
   );
 }
+
+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,
+          },
+        },
+      },
     },
   });
 }

stylelint.config.js

@@ -1,7 +1,6 @@
 /* eslint-disable spaced-comment */
 module.exports = {
   plugins: [
-    "stylelint-declaration-use-variable",
     "stylelint-order" /*,
         "stylelint-scss" */,
   ],