create script in mui

src/Programs/ui/ProgramsRoot.tsx

@@ -28,24 +28,28 @@ export function ProgramsRoot(): React.ReactElement {
             at any time. Your progress will be saved and you can continue later.
           </Typography>
         </Box>
-        <ButtonGroup>
+
         {getAvailableCreatePrograms(player).map((program) => {
           const create = program.create;
           if (create === null) return <></>;
 
           return (
-              <Tooltip key={program.name} title={create.tooltip}>
+            <React.Fragment key={program.name}>
+              <Tooltip title={create.tooltip}>
                 <Button
-                  onClick={() => {
+                  sx={{ my: 1 }}
+                  onClick={(event) => {
+                    if (!event.isTrusted) return;
                     player.startCreateProgramWork(router, program.name, create.time, create.level);
                   }}
                 >
                   {program.name}
                 </Button>
               </Tooltip>
+              <br />
+            </React.Fragment>
           );
         })}
-        </ButtonGroup>
       </div>
     </>
   );

src/ScriptEditor/ui/OptionsModal.tsx

@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import { Options } from "./Options";
+import { StdButton } from "../../ui/React/StdButton";
+import { removePopup } from "../../ui/React/createPopup";
+import { Modal } from "../../ui/React/Modal";
+
+import Button from "@mui/material/Button";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import Select from "@mui/material/Select";
+import Switch from "@mui/material/Switch";
+import MenuItem from "@mui/material/MenuItem";
+
+interface IProps {
+  options: Options;
+  save: (options: Options) => void;
+  onClose: () => void;
+  open: boolean;
+}
+
+export function OptionsModal(props: IProps): React.ReactElement {
+  const [theme, setTheme] = useState(props.options.theme);
+  const [insertSpaces, setInsertSpaces] = useState(props.options.insertSpaces);
+
+  function save(): void {
+    props.save({
+      theme: theme,
+      insertSpaces: insertSpaces,
+    });
+    props.onClose();
+  }
+
+  return (
+    <Modal open={props.open} onClose={props.onClose}>
+      <Box display="flex" flexDirection="row" alignItems="center">
+        <Typography>Theme: </Typography>
+        <Select
+          variant="standard"
+          color="primary"
+          onChange={(event) => setTheme(event.target.value)}
+          defaultValue={props.options.theme}
+        >
+          <MenuItem value="vs-dark">dark</MenuItem>
+          <MenuItem value="light">light</MenuItem>
+        </Select>
+      </Box>
+
+      <Box display="flex" flexDirection="row" alignItems="center">
+        <Typography>Use whitespace over tabs: </Typography>
+        <Switch onChange={(event) => setInsertSpaces(event.target.checked)} checked={insertSpaces} />
+      </Box>
+      <br />
+      <Button onClick={save}>Save</Button>
+    </Modal>
+  );
+}

src/ScriptEditor/ui/OptionsPopup.tsx

@@ -1,41 +0,0 @@
-import React, { useState } from "react";
-import { Options } from "./Options";
-import { StdButton } from "../../ui/React/StdButton";
-import { removePopup } from "../../ui/React/createPopup";
-
-interface IProps {
-  id: string;
-  options: Options;
-  save: (options: Options) => void;
-}
-
-export function OptionsPopup(props: IProps): React.ReactElement {
-  const [theme, setTheme] = useState(props.options.theme);
-  const [insertSpaces, setInsertSpaces] = useState(props.options.insertSpaces);
-
-  function save(): void {
-    props.save({
-      theme: theme,
-      insertSpaces: insertSpaces,
-    });
-    removePopup(props.id);
-  }
-
-  return (
-    <div className="editor-options-container noselect">
-      <div className="editor-options-line">
-        <p>Theme: </p>
-        <select className="dropdown" onChange={(event) => setTheme(event.target.value)} defaultValue={theme}>
-          <option value="vs-dark">vs-dark</option>
-          <option value="light">light</option>
-        </select>
-      </div>
-      <div className="editor-options-line">
-        <p>Use whitespace over tabs: </p>
-        <input type="checkbox" onChange={(event) => setInsertSpaces(event.target.checked)} checked={insertSpaces} />
-      </div>
-      <br />
-      <StdButton style={{ width: "50px" }} text={"Save"} onClick={save} />
-    </div>
-  );
-}

src/ScriptEditor/ui/Root.tsx

@@ -4,7 +4,7 @@ import Editor from "@monaco-editor/react";
 import * as monaco from "monaco-editor";
 type IStandaloneCodeEditor = monaco.editor.IStandaloneCodeEditor;
 import { createPopup } from "../../ui/React/createPopup";
-import { OptionsPopup } from "./OptionsPopup";
+import { OptionsModal } from "./OptionsModal";
 import { Options } from "./Options";
 import { js_beautify as beautifyCode } from "js-beautify";
 import { isValidFilePath } from "../../Terminal/DirectoryHelpers";
@@ -24,6 +24,14 @@ import { WorkerScript } from "../../Netscript/WorkerScript";
 import { Settings } from "../../Settings/Settings";
 import { iTutorialNextStep, ITutorial, iTutorialSteps } from "../../InteractiveTutorial";
 
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+import Link from "@mui/material/Link";
+import Box from "@mui/material/Box";
+import TextField from "@mui/material/TextField";
+import IconButton from "@mui/material/IconButton";
+import SettingsIcon from "@mui/icons-material/Settings";
+
 let loaded = false;
 let symbols: string[] = [];
 (function () {
@@ -78,6 +86,7 @@ export function Root(props: IProps): React.ReactElement {
   const [filename, setFilename] = useState(props.filename ? props.filename : lastFilename);
   const [code, setCode] = useState<string>(props.filename ? props.code : lastCode);
   const [ram, setRAM] = useState("RAM: ???");
+  const [optionsOpen, setOptionsOpen] = useState(false);
   const [options, setOptions] = useState<Options>({
     theme: Settings.MonacoTheme,
     insertSpaces: Settings.MonacoInsertSpaces,
@@ -198,24 +207,6 @@ export function Root(props: IProps): React.ReactElement {
     setFilename(event.target.value);
   }
 
-  function openOptions(): void {
-    const id = "script-editor-options-popup";
-    const newOptions = {
-      theme: "",
-      insertSpaces: false,
-    };
-    Object.assign(newOptions, options);
-    createPopup(id, OptionsPopup, {
-      id: id,
-      options: newOptions,
-      save: (options: Options) => {
-        setOptions(options);
-        Settings.MonacoTheme = options.theme;
-        Settings.MonacoInsertSpaces = options.insertSpaces;
-      },
-    });
-  }
-
   function updateCode(newCode?: string): void {
     if (newCode === undefined) return;
     lastCode = newCode;
@@ -307,21 +298,16 @@ export function Root(props: IProps): React.ReactElement {
 
   return (
     <>
-      <div id="script-editor-filename-wrapper">
+      <Box display="flex" flexDirection="row" alignItems="center">
-        <p id="script-editor-filename-tag" className="noselect">
+        <Typography>Script name: </Typography>
-          {" "}
+        <TextField variant="standard" type="text" tabIndex={1} value={filename} onChange={onFilenameChange} />
-          <strong style={{ backgroundColor: "#555" }}>Script name: </strong>
+        <IconButton onClick={() => setOptionsOpen(true)}>
-        </p>
+          <>
-        <input
+            <SettingsIcon />
-          id="script-editor-filename"
+            options
-          type="text"
+          </>
-          maxLength={100}
+        </IconButton>
-          tabIndex={1}
+      </Box>
-          value={filename}
-          onChange={onFilenameChange}
-        />
-        <StdButton text={"options"} onClick={openOptions} />
-      </div>
       <Editor
         beforeMount={beforeMount}
         onMount={onMount}
@@ -333,23 +319,27 @@ export function Root(props: IProps): React.ReactElement {
         theme={options.theme}
         options={options}
       />
-      <div id="script-editor-buttons-wrapper">
+      <Box display="flex" flexDirection="row" sx={{ m: 1 }} alignItems="center">
-        <StdButton text={"Beautify"} onClick={beautify} />
+        <Button onClick={beautify}>Beautify</Button>
-        <p id="script-editor-status-text" style={{ display: "inline-block", margin: "10px" }}>
+        <Typography sx={{ mx: 1 }}>{ram}</Typography>
-          {ram}
+        <Button onClick={save}>Save & Close (Ctrl/Cmd + b)</Button>
-        </p>
+        <Link sx={{ mx: 1 }} target="_blank" href="https://bitburner.readthedocs.io/en/latest/index.html">
-        <button className="std-button" style={{ display: "inline-block" }} onClick={save}>
-          Save & Close (Ctrl/Cmd + b)
-        </button>
-        <a
-          className="std-button"
-          style={{ display: "inline-block" }}
-          target="_blank"
-          href="https://bitburner.readthedocs.io/en/latest/index.html"
-        >
           Netscript Documentation
-        </a>
+        </Link>
-      </div>
+      </Box>
+      <OptionsModal
+        open={optionsOpen}
+        onClose={() => setOptionsOpen(false)}
+        options={{
+          theme: Settings.MonacoTheme,
+          insertSpaces: Settings.MonacoInsertSpaces,
+        }}
+        save={(options: Options) => {
+          setOptions(options);
+          Settings.MonacoTheme = options.theme;
+          Settings.MonacoInsertSpaces = options.insertSpaces;
+        }}
+      />
     </>
   );
 }