rework options menu

src/DevMenu/ui/CodingContracts.tsx

@@ -40,12 +40,7 @@ export function CodingContracts(): React.ReactElement {
             </tr>
             <tr>
               <td>
-                <Select
+                <Select onChange={setCodingcontractDropdown} value={codingcontract}>
-                  id="contract-types-dropdown"
-                  className="dropdown"
-                  onChange={setCodingcontractDropdown}
-                  value={codingcontract}
-                >
                   {Object.values(CodingContractTypes).map((cc) => (
                     <MenuItem key={cc.name} value={cc.name}>
                       {cc.name}

src/IEngine.ts

@@ -29,4 +29,5 @@ export interface IEngine {
   loadInfiltrationContent: (name: string, difficulty: number, maxLevel: number) => void;
   loadMissionContent: () => void;
   loadResleevingContent: () => void;
+  loadGameOptionsContent: () => void;
 }

src/Sidebar/ui/SidebarRoot.tsx

@@ -254,6 +254,10 @@ export function SidebarRoot(props: IProps): React.ReactElement {
     setActiveTab("Milestones");
     props.engine.loadMilestonesContent();
   }
+  function clickOptions(): void {
+    setActiveTab("Options");
+    props.engine.loadGameOptionsContent();
+  }
 
   function clickDev(): void {
     setActiveTab("Dev");
@@ -355,7 +359,7 @@ export function SidebarRoot(props: IProps): React.ReactElement {
       >
         <ListItem button onClick={toggleDrawer}>
           <ListItemIcon>{!open ? <ChevronRightIcon /> : <ChevronLeftIcon />}</ListItemIcon>
-          <ListItemText primary={<Typography color="primary">Bitburner {CONSTANTS.Version}</Typography>} />
+          <ListItemText primary={<Typography color="primary">Bitburner v{CONSTANTS.Version}</Typography>} />
         </ListItem>
         <Divider />
         <List>
@@ -711,20 +715,21 @@ export function SidebarRoot(props: IProps): React.ReactElement {
                 </Typography>
               </ListItemText>
             </ListItem>
-            {/*<ListItem
+            <ListItem
               button
               key={"Options"}
               className={clsx({
                 [classes.active]: activeTab === "Options",
               })}
+              onClick={clickOptions}
             >
               <ListItemIcon>
                 <SettingsIcon color={activeTab !== "Options" ? "secondary" : "primary"} />
               </ListItemIcon>
               <ListItemText>
-                <Typography color={activeTab !== "Options" ? "secondary" : "primary"}>options</Typography>
+                <Typography color={activeTab !== "Options" ? "secondary" : "primary"}>Options</Typography>
               </ListItemText>
-            </ListItem>*/}
+            </ListItem>
             {process.env.NODE_ENV === "development" && (
               <ListItem
                 button

src/engine.jsx

@@ -26,6 +26,7 @@ import { SidebarRoot } from "./Sidebar/ui/SidebarRoot";
 import { CorporationRoot } from "./Corporation/ui/CorporationRoot";
 import { ResleeveRoot } from "./PersonObjects/Resleeving/ui/ResleeveRoot";
 import { GameOptionsRoot } from "./ui/React/GameOptionsRoot";
+import { Theme } from "./ui/React/Theme";
 import { SleeveRoot } from "./PersonObjects/Sleeve/ui/SleeveRoot";
 import { displayInfiltrationContent } from "./Infiltration/Helper";
 import {
@@ -360,7 +361,28 @@ const Engine = {
     routing.navigateTo(Page.GameOptions);
     Engine.Display.content.style.display = "block";
     MainMenuLinks.City.classList.add("active");
-    ReactDOM.render(<GameOptionsRoot />, Engine.Display.content);
+    ReactDOM.render(
+      <Theme>
+        <GameOptionsRoot
+          player={Player}
+          save={() => saveObject.saveGame(Engine.indexedDb)}
+          delete={() => saveObject.deleteGame(Engine.indexedDb)}
+          export={() => saveObject.exportGame()}
+          import={() => saveObject.importGame()}
+          forceKill={() => {
+            for (const hostname of Object.keys(AllServers)) {
+              AllServers[hostname].runningScripts = [];
+            }
+            dialogBoxCreate("Forcefully deleted all running scripts. Please save and refresh page.");
+          }}
+          softReset={() => {
+            dialogBoxCreate("Soft Reset!");
+            prestigeAugmentation();
+          }}
+        />
+      </Theme>,
+      Engine.Display.content,
+    );
   },
 
   // Helper function that hides all content

src/ui/React/GameOptionsRoot.tsx

@@ -1,337 +1,521 @@
-import React from "react";
+import React, { useState } from "react";
 
-interface IProps {}
+import { IPlayer } from "../../PersonObjects/IPlayer";
+
+import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
+import Typography from "@material-ui/core/Typography";
+import Slider from "@material-ui/core/Slider";
+import Grid from "@material-ui/core/Grid";
+import FormControlLabel from "@material-ui/core/FormControlLabel";
+import Switch from "@material-ui/core/Switch";
+import Select from "@material-ui/core/Select";
+import MenuItem from "@material-ui/core/MenuItem";
+import Button from "@material-ui/core/Button";
+import Box from "@material-ui/core/Box";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import Link from "@material-ui/core/Link";
+import Tooltip from "@material-ui/core/Tooltip";
+import { Modal } from "../../ui/React/Modal";
+import { FileDiagnosticPopup } from "../../Diagnostic/FileDiagnosticPopup";
+
+import { Settings } from "../../Settings/Settings";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: theme.spacing(50),
+      padding: theme.spacing(2),
+      userSelect: "none",
+    },
+    pad: {
+      padding: theme.spacing(2),
+    },
+  }),
+);
+
+interface IProps {
+  player: IPlayer;
+  save: () => void;
+  delete: () => void;
+  export: () => void;
+  import: () => void;
+  forceKill: () => void;
+  softReset: () => void;
+}
 
 export function GameOptionsRoot(props: IProps): React.ReactElement {
-  return (
+  const classes = useStyles();
-    <>
+
-      <h1>Game Options</h1>
+  const [execTime, setExecTime] = useState(Settings.CodeInstructionRunTime);
-    </>
+  const [logSize, setLogSize] = useState(Settings.MaxLogCapacity);
+  const [portSize, setPortSize] = useState(Settings.MaxPortCapacity);
+  const [autosaveInterval, setAutosaveInterval] = useState(Settings.AutosaveInterval);
+
+  const [suppressMessages, setSuppressMessages] = useState(Settings.SuppressMessages);
+  const [suppressFactionInvites, setSuppressFactionInvites] = useState(Settings.SuppressFactionInvites);
+  const [suppressTravelConfirmations, setSuppressTravelConfirmations] = useState(Settings.SuppressTravelConfirmation);
+  const [suppressBuyAugmentationConfirmation, setSuppressBuyAugmentationConfirmation] = useState(
+    Settings.SuppressBuyAugmentationConfirmation,
+  );
+  const [suppressHospitalizationPopup, setSuppressHospitalizationPopup] = useState(
+    Settings.SuppressHospitalizationPopup,
   );
-  /*
 
-          <h1>Game Options</h1>
+  const [suppressBladeburnerPopup, setSuppressBladeburnerPopup] = useState(Settings.SuppressBladeburnerPopup);
+
+  const [disableHotkeys, setDisableHotkeys] = useState(Settings.DisableHotkeys);
+  const [disableASCIIArt, setDisableASCIIArt] = useState(Settings.DisableASCIIArt);
+  const [disableTextEffects, setDisableTextEffects] = useState(Settings.DisableTextEffects);
+  const [locale, setLocale] = useState(Settings.Locale);
+  const [diagnosticOpen, setDiagnosticOpen] = useState(false);
+
+  function handleExecTimeChange(event: any, newValue: number | number[]): void {
+    setExecTime(newValue as number);
+    Settings.CodeInstructionRunTime = newValue as number;
+  }
+
+  function handleLogSizeChange(event: any, newValue: number | number[]): void {
+    setLogSize(newValue as number);
+    Settings.MaxLogCapacity = newValue as number;
+  }
+
+  function handlePortSizeChange(event: any, newValue: number | number[]): void {
+    setPortSize(newValue as number);
+    Settings.MaxPortCapacity = newValue as number;
+  }
+
+  function handleAutosaveIntervalChange(event: any, newValue: number | number[]): void {
+    setAutosaveInterval(newValue as number);
+    Settings.AutosaveInterval = newValue as number;
+  }
+
+  function handleSuppressMessagesChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    setSuppressMessages(event.target.checked);
+    Settings.SuppressMessages = event.target.checked;
+  }
+
+  function handleSuppressFactionInvitesChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    setSuppressFactionInvites(event.target.checked);
+    Settings.SuppressFactionInvites = event.target.checked;
+  }
+
+  function handleSuppressTravelConfirmationsChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    setSuppressTravelConfirmations(event.target.checked);
+    Settings.SuppressTravelConfirmation = event.target.checked;
+  }
+
+  function handleSuppressBuyAugmentationConfirmationChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    setSuppressBuyAugmentationConfirmation(event.target.checked);
+    Settings.SuppressBuyAugmentationConfirmation = event.target.checked;
+  }
+
+  function handleSuppressHospitalizationPopupChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    setSuppressHospitalizationPopup(event.target.checked);
+    Settings.SuppressHospitalizationPopup = event.target.checked;
+  }
+
+  function handleSuppressBladeburnerPopupChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    setSuppressBladeburnerPopup(event.target.checked);
+    Settings.SuppressBladeburnerPopup = event.target.checked;
+  }
+
+  function handleDisableHotkeysChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    setDisableHotkeys(event.target.checked);
+    Settings.DisableHotkeys = event.target.checked;
+  }
+
+  function handleDisableASCIIArtChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    setDisableASCIIArt(event.target.checked);
+    Settings.DisableASCIIArt = event.target.checked;
+  }
+
+  function handleDisableTextEffectsChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    setDisableTextEffects(event.target.checked);
+    Settings.DisableTextEffects = event.target.checked;
+  }
+  function handleLocaleChange(event: React.ChangeEvent<{ value: unknown }>): void {
+    setLocale(event.target.value as string);
+    Settings.Locale = event.target.value as string;
+  }
+
+  return (
+    <div className={classes.root} style={{ width: "90%" }}>
+      <Typography variant="h4" gutterBottom>
+        Options
+      </Typography>
+
+      <Grid container spacing={3}>
+        <Grid item xs={12} sm={6}>
+          <List>
+            <ListItem>
+              <Tooltip
+                title={
+                  <Typography>
+                    The minimum number of milliseconds it takes to execute an operation in Netscript. Setting this too
+                    low can result in poor performance if you have many scripts running.
+                  </Typography>
+                }
+              >
+                <Typography>Netscript exec time (ms)</Typography>
+              </Tooltip>
+              <Slider
+                value={execTime}
+                onChange={handleExecTimeChange}
+                step={1}
+                min={10}
+                max={100}
+                valueLabelDisplay="auto"
+              />
+            </ListItem>
+            <ListItem>
+              <Tooltip
+                title={
+                  <Typography>
+                    The maximum number of lines a script's logs can hold. Setting this too high can cause the game to
+                    use a lot of memory if you have many scripts running.
+                  </Typography>
+                }
+              >
+                <Typography>Netscript log size</Typography>
+              </Tooltip>
+              <Slider
+                value={logSize}
+                onChange={handleLogSizeChange}
+                step={1}
+                min={20}
+                max={100}
+                valueLabelDisplay="auto"
+              />
+            </ListItem>
+            <ListItem>
+              <Tooltip
+                title={
+                  <Typography>
+                    The maximum number of entries that can be written to a port using Netscript's write() function.
+                    Setting this too high can cause the game to use a lot of memory.
+                  </Typography>
+                }
+              >
+                <Typography>Netscript port size</Typography>
+              </Tooltip>
+              <Slider
+                value={portSize}
+                onChange={handlePortSizeChange}
+                step={1}
+                min={20}
+                max={100}
+                valueLabelDisplay="auto"
+              />
+            </ListItem>
+            <ListItem>
+              <Tooltip
+                title={
+                  <Typography>The time (in seconds) between each autosave. Set to 0 to disable autosave.</Typography>
+                }
+              >
+                <Typography>Autosave interval (s)</Typography>
+              </Tooltip>
+              <Slider
+                value={autosaveInterval}
+                onChange={handleAutosaveIntervalChange}
+                step={30}
+                min={0}
+                max={600}
+                valueLabelDisplay="auto"
+                marks
+              />
+            </ListItem>
+            <ListItem>
+              <FormControlLabel
+                control={<Switch color="primary" checked={suppressMessages} onChange={handleSuppressMessagesChange} />}
+                label={
+                  <Tooltip
+                    title={
+                      <Typography>
+                        If this is set, then any messages you receive will not appear as popups on the screen. They will
+                        still get sent to your home computer as '.msg' files and can be viewed with the 'cat' Terminal
+                        command.
+                      </Typography>
+                    }
+                  >
+                    <Typography>Supress messages</Typography>
+                  </Tooltip>
+                }
+              />
+            </ListItem>
+            <ListItem>
+              <FormControlLabel
+                control={
+                  <Switch
+                    color="primary"
+                    checked={suppressFactionInvites}
+                    onChange={handleSuppressFactionInvitesChange}
+                  />
+                }
+                label={
+                  <Tooltip
+                    title={
+                      <Typography>
+                        If this is set, then any faction invites you receive will not appear as popups on the screen.
+                        Your outstanding faction invites can be viewed in the 'Factions' page.
+                      </Typography>
+                    }
+                  >
+                    <Typography>Supress faction invites</Typography>
+                  </Tooltip>
+                }
+              />
+            </ListItem>
+            <ListItem>
+              <FormControlLabel
+                control={
+                  <Switch
+                    color="primary"
+                    checked={suppressTravelConfirmations}
+                    onChange={handleSuppressTravelConfirmationsChange}
+                  />
+                }
+                label={
+                  <Tooltip
+                    title={
+                      <Typography>
+                        If this is set, the confirmation message before traveling will not show up. You will
+                        automatically be deducted the travel cost as soon as you click.
+                      </Typography>
+                    }
+                  >
+                    <Typography>Supress travel confirmations</Typography>
+                  </Tooltip>
+                }
+              />
+            </ListItem>
+            <ListItem>
+              <FormControlLabel
+                control={
+                  <Switch
+                    color="primary"
+                    checked={suppressBuyAugmentationConfirmation}
+                    onChange={handleSuppressBuyAugmentationConfirmationChange}
+                  />
+                }
+                label={
+                  <Tooltip
+                    title={
+                      <Typography>
+                        If this is set, the confirmation message before buying augmentation will not show up.
+                      </Typography>
+                    }
+                  >
+                    <Typography>Supress buy augmentation confirmation</Typography>
+                  </Tooltip>
+                }
+              />
+            </ListItem>
+            <ListItem>
+              <FormControlLabel
+                control={
+                  <Switch
+                    color="primary"
+                    checked={suppressHospitalizationPopup}
+                    onChange={handleSuppressHospitalizationPopupChange}
+                  />
+                }
+                label={
+                  <Tooltip
+                    title={
+                      <Typography>
+                        If this is set, a popup message will no longer be shown when you are hospitalized after taking
+                        too much damage.
+                      </Typography>
+                    }
+                  >
+                    <Typography>Supress hospitalization popup</Typography>
+                  </Tooltip>
+                }
+              />
+            </ListItem>
+            {!!props.player.bladeburner && (
+              <ListItem>
+                <FormControlLabel
+                  control={
+                    <Switch
+                      color="primary"
+                      checked={suppressBladeburnerPopup}
+                      onChange={handleSuppressBladeburnerPopupChange}
+                    />
+                  }
+                  label={
+                    <Tooltip
+                      title={
+                        <Typography>
+                          If this is set, then having your Bladeburner actions interrupted by being busy with something
+                          else will not display a popup message.
+                        </Typography>
+                      }
+                    >
+                      <Typography>Supress bladeburner popup</Typography>
+                    </Tooltip>
+                  }
+                />
+              </ListItem>
+            )}
+            <ListItem>
+              <FormControlLabel
+                control={<Switch color="primary" checked={disableHotkeys} onChange={handleDisableHotkeysChange} />}
+                label={
+                  <Tooltip
+                    title={
+                      <Typography>
+                        If this is set, then most hotkeys (keyboard shortcuts) in the game are disabled. This includes
+                        Terminal commands, hotkeys to navigate between different parts of the game, and the "Save and
+                        Close (Ctrl + b)" hotkey in the Text Editor.
+                      </Typography>
+                    }
+                  >
+                    <Typography>Disable hotkeys</Typography>
+                  </Tooltip>
+                }
+              />
+            </ListItem>
+            <ListItem>
+              <FormControlLabel
+                control={<Switch color="primary" checked={disableASCIIArt} onChange={handleDisableASCIIArtChange} />}
+                label={
+                  <Tooltip title={<Typography>If this is set all ASCII art will be disabled.</Typography>}>
+                    <Typography>Disable ascii art</Typography>
+                  </Tooltip>
+                }
+              />
+            </ListItem>
+            <ListItem>
+              <FormControlLabel
+                control={
+                  <Switch color="primary" checked={disableTextEffects} onChange={handleDisableTextEffectsChange} />
+                }
+                label={
+                  <Tooltip
+                    title={
+                      <Typography>
+                        If this is set, text effects will not be displayed. This can help if text is difficult to read
+                        in certain areas.
+                      </Typography>
+                    }
+                  >
+                    <Typography>Disable text effects</Typography>
+                  </Tooltip>
+                }
+              />
+            </ListItem>
+            <ListItem>
+              <Tooltip title={<Typography>Sets the locale for displaying numbers.</Typography>}>
+                <Typography>Locale&nbsp;</Typography>
+              </Tooltip>
+              <Select value={locale} onChange={handleLocaleChange}>
+                <MenuItem value="en">en</MenuItem>
+                <MenuItem value="bg">bg</MenuItem>
+                <MenuItem value="cs">cs</MenuItem>
+                <MenuItem value="da-dk">da-dk</MenuItem>
+                <MenuItem value="de">de</MenuItem>
+                <MenuItem value="en-au">en-au</MenuItem>
+                <MenuItem value="en-gb">en-gb</MenuItem>
+                <MenuItem value="es">es</MenuItem>
+                <MenuItem value="fr">fr</MenuItem>
+                <MenuItem value="hu">hu</MenuItem>
+                <MenuItem value="it">it</MenuItem>
+                <MenuItem value="lv">lv</MenuItem>
+                <MenuItem value="no">no</MenuItem>
+                <MenuItem value="pl">pl</MenuItem>
+                <MenuItem value="ru">ru</MenuItem>
+              </Select>
+            </ListItem>
+          </List>
           <br />
-          <div id="game-options-left-panel">
+          <br />
-            <!-- Netscript execution time -->
+          <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
-            <fieldset>
+            <input type="hidden" name="cmd" value="_s-xclick" />
-              <label for="settingsNSExecTimeRangeVal" class="tooltip"
+            <input
-                >Netscript exec time:&nbsp;
+              type="hidden"
-                <span class="tooltiptext">
+              name="encrypted"
-                  The minimum number of milliseconds it takes to execute an operation in Netscript. Setting this too low
+              value="-----BEGIN PKCS7-----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-----END PKCS7-----"
-                  can result in poor performance if you have many scripts running. The default value is 25ms.
+            />
-                </span>
+            <input
-              </label>
+              type="image"
-
+              src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif"
-              <input
+              name="submit"
-                class="optionRange"
+              alt="PayPal - The safer, easier way to pay online!"
-                type="range"
+            />
-                max="100"
+          </form>
-                min="10"
+        </Grid>
-                step="1"
+        <Grid item xs={12} sm={6}>
-                name="settingsNSExecTimeRangeVal"
+          <Box>
-                id="settingsNSExecTimeRangeVal"
+            <Button onClick={() => props.save()}>Save Game</Button>
-                value="25"
+            <Button onClick={() => props.delete()}>Delete Game</Button>
-              />
+          </Box>
-              <em id="settingsNSExecTimeRangeValLabel" style="font-style: normal"></em>
+          <Box>
-            </fieldset>
+            <Button onClick={() => props.export()}>Export Game</Button>
-
+            <Button onClick={() => props.import()}>Import Game</Button>
-            <!-- Log capacity -->
+          </Box>
-            <fieldset>
+          <Box>
-              <label for="settingsNSLogRangeVal" class="tooltip"
+            <Tooltip
-                >Netscript log size:&nbsp;&nbsp;
+              title={
-                <span class="tooltiptext">
+                <Typography>
-                  The maximum number of lines a script's logs can hold. Setting this too high can cause the game to use
+                  Forcefully kill all active running scripts, in case there is a bug or some unexpected issue with the
-                  a lot of memory if you have many scripts running. The default value is 50.
+                  game. After using this, save the game and then reload the page. This is different then normal kill in
-                </span>
+                  that normal kill will tell the script to shut down while force kill just removes the references to it
-              </label>
+                  (and it should crash on it's own). This will not remove the files on your computer. Just forcefully
-
+                  kill all running instance of all scripts.
-              <input
+                </Typography>
-                class="optionRange"
+              }
-                type="range"
-                max="100"
-                min="20"
-                step="1"
-                name="settingsNSLogRangeVal"
-                id="settingsNSLogRangeVal"
-                value="50"
-              />
-              <em id="settingsNSLogRangeValLabel" style="font-style: normal"></em>
-            </fieldset>
-
-            <!-- Port capacity -->
-            <fieldset>
-              <label for="settingsNSPortRangeVal" class="tooltip"
-                >Netscript port size:&nbsp;
-                <span class="tooltiptext">
-                  The maximum number of entries that can be written to a port using Netscript's write() function.
-                  Setting this too high can cause the game to use a lot of memory. The default value is 50.
-                </span>
-              </label>
-
-              <input
-                class="optionRange"
-                type="range"
-                max="100"
-                min="20"
-                step="1"
-                name="settingsNSPortRangeVal"
-                id="settingsNSPortRangeVal"
-                value="50"
-              />
-              <em id="settingsNSPortRangeValLabel" style="font-style: normal"></em>
-            </fieldset>
-
-            <!-- Autosave Interval -->
-            <fieldset>
-              <label for="settingsAutosaveIntervalVal" class="tooltip"
-                >Autosave Interval:&nbsp;&nbsp;&nbsp;
-                <span class="tooltiptext">
-                  The time (in seconds) between each autosave. Set to 0 to disable autosave.
-                </span>
-              </label>
-
-              <input
-                class="optionRange"
-                type="range"
-                max="600"
-                min="0"
-                step="1"
-                name="settingsAutosaveIntervalVal"
-                id="settingsAutosaveIntervalVal"
-                value="60"
-              />
-              <em id="settingsAutosaveIntervalValLabel" style="font-style: normal"></em>
-            </fieldset>
-
-            <!-- Suppress messages -->
-            <fieldset>
-              <label for="settingsSuppressMessages" class="tooltip"
-                >Suppress Messages:
-                <span class="tooltiptext">
-                  If this is set, then any messages you receive will not appear as popups on the screen. They will still
-                  get sent to your home computer as '.msg' files and can be viewed with the 'cat' Terminal command.
-                </span>
-              </label>
-              <input
-                class="optionCheckbox"
-                type="checkbox"
-                name="settingsSuppressMessages"
-                id="settingsSuppressMessages"
-              />
-            </fieldset>
-
-            <!-- Suppress faction invites -->
-            <fieldset>
-              <label for="settingsSuppressFactionInvites" class="tooltip"
-                >Suppress Faction Invites:
-                <span class="tooltiptexthigh">
-                  If this is set, then any faction invites you receive will not appear as popups on the screen. Your
-                  outstanding faction invites can be viewed in the 'Factions' page.
-                </span>
-              </label>
-              <input
-                class="optionCheckbox"
-                type="checkbox"
-                name="settingsSuppressFactionInvites"
-                id="settingsSuppressFactionInvites"
-              />
-            </fieldset>
-
-            <!-- Suppress travel confirmation -->
-            <fieldset>
-              <label for="settingsSuppressTravelConfirmation" class="tooltip"
-                >Suppress Travel Confirmation:
-                <span class="tooltiptexthigh">
-                  If this is set, the confirmation message before traveling will not show up. You will automatically be
-                  deducted the travel cost as soon as you click.
-                </span>
-              </label>
-              <input
-                class="optionCheckbox"
-                type="checkbox"
-                name="settingsSuppressTravelConfirmation"
-                id="settingsSuppressTravelConfirmation"
-              />
-            </fieldset>
-
-            <!-- Suppress buy aug confirmation -->
-            <fieldset>
-              <label for="settingsSuppressBuyAugmentationConfirmation" class="tooltip"
-                >Suppress buy augmentation confirmation:
-                <span class="tooltiptexthigh">
-                  If this is set, the confirmation message before buying augmentation will not show up.
-                </span>
-              </label>
-              <input
-                class="optionCheckbox"
-                type="checkbox"
-                name="settingsSuppressBuyAugmentationConfirmation"
-                id="settingsSuppressBuyAugmentationConfirmation"
-              />
-            </fieldset>
-
-            <!-- Hospitalization Popup -->
-            <fieldset>
-              <label for="settingsSuppressHospitalizationPopup" class="tooltip"
-                >Suppress Hospitalization popup:
-                <span class="tooltiptexthigh">
-                  If this is set, a popup message will no longer be shown when you are hospitalized after taking too
-                  much damage.
-                </span>
-              </label>
-              <input
-                class="optionCheckbox"
-                type="checkbox"
-                name="settingsSuppressHospitalizationPopup"
-                id="settingsSuppressHospitalizationPopup"
-              />
-            </fieldset>
-
-            <!-- Suppress Bladeburner popups -->
-            <fieldset>
-              <label for="settingsSuppressBladeburnerPopup" class="tooltip"
-                >Suppress Bladeburner Popup:
-                <span class="tooltiptext">
-                  If this is set, then having your Bladeburner actions interrupted by being busy with something else
-                  will not display a popup message.
-                </span>
-              </label>
-              <input
-                class="optionCheckbox"
-                type="checkbox"
-                name="settingsSuppressBladeburnerPopup"
-                id="settingsSuppressBladeburnerPopup"
-              />
-            </fieldset>
-
-            <!-- Disable Terminal and Navigation Shortcuts -->
-            <fieldset>
-              <label for="settingsDisableHotkeys" class="tooltip"
-                >Disable Hotkeys:
-                <span class="tooltiptexthigh">
-                  If this is set, then most hotkeys (keyboard shortcuts) in the game are disabled. This includes
-                  Terminal commands, hotkeys to navigate between different parts of the game, and the "Save and Close
-                  (Ctrl + b)" hotkey in the Text Editor.
-                </span>
-              </label>
-              <input class="optionCheckbox" type="checkbox" name="settingsDisableHotkeys" id="settingsDisableHotkeys" />
-            </fieldset>
-
-            <!-- View city as list of buttons instead of ASCII art. -->
-            <fieldset>
-              <label for="settingsDisableASCIIArt" class="tooltip"
-                >Disable ASCII art:
-                <span class="tooltiptexthigh"> If this is set all ASCII art will be disabled. </span>
-              </label>
-              <input
-                class="optionCheckbox"
-                type="checkbox"
-                name="settingsDisableASCIIArt"
-                id="settingsDisableASCIIArt"
-              />
-            </fieldset>
-
-            <!-- Disable text effects such as corruption. -->
-            <fieldset>
-              <label for="settingsDisableTextEffects" class="tooltip"
-                >Disable Text Effects:
-                <span class="tooltiptexthigh">
-                  If this is set, text effects will not be displayed. This can help if text is difficult to read in
-                  certain areas.
-                </span>
-              </label>
-              <input
-                class="optionCheckbox"
-                type="checkbox"
-                name="settingsDisableTextEffects"
-                id="settingsDisableTextEffects"
-              />
-            </fieldset>
-
-            <!-- Locale for displaying numbers -->
-            <fieldset>
-              <label for="settingsLocale" class="tooltip"
-                >Locale:
-                <span class="tooltiptexthigh"> Sets the locale for displaying numbers. Defaults to 'en' </span>
-              </label>
-              <select name="settingsLocale" id="settingsLocale" class="dropdown">
-                <option value="en">en</option>
-                <option value="bg">bg</option>
-                <option value="cs">cs</option>
-                <option value="da-dk">da-dk</option>
-                <option value="de">de</option>
-                <option value="en-au">en-au</option>
-                <option value="en-gb">en-gb</option>
-                <option value="es">es</option>
-                <option value="fr">fr</option>
-                <option value="hu">hu</option>
-                <option value="it">it</option>
-                <option value="lv">lv</option>
-                <option value="no">no</option>
-                <option value="pl">pl</option>
-                <option value="ru">ru</option>
-              </select>
-            </fieldset>
-
-            <!-- Donate button -->
-            <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
-              <input type="hidden" name="cmd" value="_s-xclick" />
-              <input
-                type="hidden"
-                name="encrypted"
-                value="-----BEGIN PKCS7-----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-----END PKCS7-----
-                "
-              />
-              <input
-                type="image"
-                src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif"
-                border="0"
-                name="submit"
-                alt="PayPal - The safer, easier way to pay online!"
-              />
-              <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1" />
-            </form>
-          </div>
-          <div id="game-options-right-panel">
-            <a class="a-link-button" href="https://bitburner.readthedocs.io/en/latest/changelog.html" target="_blank">
-              Changelog
-            </a>
-            <a class="a-link-button" href="https://bitburner.readthedocs.io/en/latest/index.html" target="_blank"
-              >Documentation</a
             >
-            <a class="a-link-button" href="https://discord.gg/TFc3hKD" target="_blank">Discord</a>
+              <Button onClick={() => props.forceKill()}>Force kill all active scripts</Button>
-            <a class="a-link-button" href="https://www.reddit.com/r/bitburner" target="_blank">Subreddit</a>
+            </Tooltip>
-            <button id="save-game-link" class="a-link-button">Save Game</button>
+          </Box>
-            <button id="delete-game-link" class="a-link-button">Delete Game</button>
+          <Box>
-            <button id="export-game-link" class="a-link-button">Export Game</button>
+            <Tooltip
-            <input type="file" id="import-game-file-selector" name="file" />
+              title={
-            <button id="import-game-link" class="a-link-button">Import Game</button>
+                <Typography>
-            <button id="copy-save-to-clipboard-link" class="std-button">Copy Save data to Clipboard</button>
+                  Perform a soft reset. Resets everything as if you had just purchased an Augmentation.
-            <button id="debug-delete-scripts-link" class="a-link-button tooltip">
+                </Typography>
-              Force kill all active scripts
+              }
-              <span class="tooltiptextleft">
+            >
-                Forcefully kill all active running scripts, in case there is a bug or some unexpected issue with the
+              <Button onClick={() => props.softReset()}>Soft Reset</Button>
-                game. After using this, save the game and then reload the page. This is different then normal kill in
+            </Tooltip>
-                that normal kill will tell the script to shut down while force kill just removes the references to it
+          </Box>
-                (and it should crash on it's own). This will not remove the files on your computer. Just forcefully kill
+          <Box>
-                all running instance of all scripts.
+            <Tooltip
-              </span>
+              title={
-            </button>
+                <Typography>
-            <button id="debug-soft-reset" class="a-link-button tooltip">
+                  If your save file is extremely big you can use this button to view a map of all the files on every
-              Soft Reset
+                  server. Be careful there might be spoilers.
-              <span class="tooltiptextleft">
+                </Typography>
-                Perform a soft reset. Resets everything as if you had just purchased an Augmentation.
+              }
-              </span>
+            >
-            </button>
+              <Button onClick={() => setDiagnosticOpen(true)}>Diagnose files</Button>
-            <button id="debug-files" class="a-link-button tooltip">
+            </Tooltip>
-              Diagnose files
+          </Box>
-              <span class="tooltiptextleft">
+          <Box>
-                If your save file is extremely big you can use this button to view a map of all the files on every
+            <Link href="https://bitburner.readthedocs.io/en/latest/changelog.html" target="_blank">
-                server. Be careful there might be spoilers.
+              <Typography>Changelog</Typography>
-              </span>
+            </Link>
-            </button>
+            <Link href="https://bitburner.readthedocs.io/en/latest/index.html" target="_blank">
-          </div>
+              <Typography>Documentation</Typography>
-
+            </Link>
-    */
+            <Link href="https://bitburner.readthedocs.io/en/latest/changelog.html" target="_blank">
+              <Typography>Changelog</Typography>
+            </Link>
+            <Link href="https://discord.gg/TFc3hKD" target="_blank">
+              <Typography>Discord</Typography>
+            </Link>
+            <Link href="https://www.reddit.com/r/bitburner" target="_blank">
+              <Typography>Reddit</Typography>
+            </Link>
+          </Box>
+        </Grid>
+      </Grid>
+      <Modal open={diagnosticOpen} close={() => setDiagnosticOpen(false)}>
+        <FileDiagnosticPopup />
+      </Modal>
+    </div>
+  );
 }

src/ui/React/Modal.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { makeStyles, createStyles, Theme } from "@material-ui/core";
+import M from "@material-ui/core/Modal";
+import Backdrop from "@material-ui/core/Backdrop";
+import Fade from "@material-ui/core/Fade";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    modal: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    paper: {
+      backgroundColor: theme.palette.background.paper,
+      border: "2px solid " + theme.palette.primary.main,
+      boxShadow: theme.shadows[5],
+      padding: theme.spacing(2, 4, 3),
+    },
+  }),
+);
+
+interface IProps {
+  open: boolean;
+  close: () => void;
+  children: JSX.Element[] | JSX.Element;
+}
+
+export const Modal = (props: IProps): React.ReactElement => {
+  const classes = useStyles();
+  return (
+    <M
+      open={props.open}
+      onClose={props.close}
+      closeAfterTransition
+      className={classes.modal}
+      BackdropComponent={Backdrop}
+      BackdropProps={{
+        timeout: 500,
+      }}
+    >
+      <Fade in={props.open}>
+        <div className={classes.paper}>{props.children}</div>
+      </Fade>
+    </M>
+  );
+};

src/ui/React/Theme.tsx

@@ -14,6 +14,7 @@ export const colors = {
   secondary: "#888",
   secondarydark: "#666",
 
+  welllight: "#444",
   well: "#222",
   white: "#fff",
   black: "#000",
@@ -36,6 +37,9 @@ export const theme = createMuiTheme({
       main: colors.error,
       dark: colors.errordark,
     },
+    background: {
+      paper: colors.well,
+    },
   },
   typography: {
     fontFamily: "monospace",
@@ -150,12 +154,25 @@ export const theme = createMuiTheme({
         backgroundColor: colors.black,
       },
       paperAnchorDockedLeft: {
-        borderRight: "1px solid #444",
+        borderRight: "1px solid " + colors.welllight,
       },
     },
     MuiDivider: {
       root: {
-        backgroundColor: "#444",
+        backgroundColor: colors.welllight,
+      },
+    },
+    MuiFormControlLabel: {
+      root: {
+        color: colors.primary,
+      },
+    },
+    MuiSwitch: {
+      switchBase: {
+        color: colors.primarydark,
+      },
+      track: {
+        backgroundColor: colors.welllight,
       },
     },
   },

src/ui/navigationTracking.ts

@@ -122,6 +122,11 @@ export enum Page {
    * Purchase Resleeves
    */
   Resleeves = "Re-sleeving",
+
+  /**
+   * Game options
+   */
+  GameOptions = "GameOptions",
 }
 
 /**