branch 'dev' of github.com:danielyxie/bitburner into dev

src/ScriptEditor/ui/OptionsModal.tsx

@@ -9,6 +9,10 @@ import Select from "@mui/material/Select";
 import Switch from "@mui/material/Switch";
 import MenuItem from "@mui/material/MenuItem";
 import TextField from "@mui/material/TextField";
+import EditIcon from "@mui/icons-material/Edit";
+import SaveIcon from "@mui/icons-material/Save";
+
+import { ThemeEditorModal } from "./ThemeEditorModal";
 
 interface IProps {
   options: Options;
@@ -23,6 +27,7 @@ export function OptionsModal(props: IProps): React.ReactElement {
   const [fontSize, setFontSize] = useState(props.options.fontSize);
   const [wordWrap, setWordWrap] = useState(props.options.wordWrap);
   const [vim, setVim] = useState(props.options.vim);
+  const [themeEditorOpen, setThemeEditorOpen] = useState(false);
 
   function save(): void {
     props.save({
@@ -43,6 +48,7 @@ export function OptionsModal(props: IProps): React.ReactElement {
 
   return (
     <Modal open={props.open} onClose={props.onClose}>
+      <ThemeEditorModal open={themeEditorOpen} onClose={() => setThemeEditorOpen(false)} />
       <Box display="flex" flexDirection="row" alignItems="center">
         <Typography>Theme: </Typography>
         <Select onChange={(event) => setTheme(event.target.value)} value={theme}>
@@ -53,7 +59,11 @@ export function OptionsModal(props: IProps): React.ReactElement {
           <MenuItem value="light">light</MenuItem>
           <MenuItem value="dracula">dracula</MenuItem>
           <MenuItem value="one-dark">one-dark</MenuItem>
+          <MenuItem value="customTheme">Custom theme</MenuItem>
         </Select>
+        <Button onClick={() => setThemeEditorOpen(true)} sx={{ mx: 1 }} startIcon={<EditIcon />}>
+          Edit custom theme
+        </Button>
       </Box>
 
       <Box display="flex" flexDirection="row" alignItems="center">
@@ -80,7 +90,9 @@ export function OptionsModal(props: IProps): React.ReactElement {
         <TextField type="number" label="Font size" value={fontSize} onChange={onFontChange} />
       </Box>
       <br />
-      <Button onClick={save}>Save</Button>
+      <Button onClick={save} startIcon={<SaveIcon />}>
+        Save
+      </Button>
     </Modal>
   );
 }

src/ScriptEditor/ui/ScriptEditorRoot.tsx

@@ -25,7 +25,7 @@ import { Settings } from "../../Settings/Settings";
 import { iTutorialNextStep, ITutorial, iTutorialSteps } from "../../InteractiveTutorial";
 import { debounce } from "lodash";
 import { saveObject } from "../../SaveObject";
-import { loadThemes } from "./themes";
+import { loadThemes, makeTheme, sanitizeTheme } from "./themes";
 import { GetServer } from "../../Server/AllServers";
 
 import Button from "@mui/material/Button";
@@ -362,6 +362,8 @@ export function Root(props: IProps): React.ReactElement {
     monaco.languages.typescript.javascriptDefaults.addExtraLib(source, "netscript.d.ts");
     monaco.languages.typescript.typescriptDefaults.addExtraLib(source, "netscript.d.ts");
     loadThemes(monaco);
+    sanitizeTheme(Settings.EditorTheme);
+    monaco.editor.defineTheme("customTheme", makeTheme(Settings.EditorTheme));
   }
 
   // When the editor is mounted
@@ -993,7 +995,11 @@ export function Root(props: IProps): React.ReactElement {
         </Box>
         <OptionsModal
           open={optionsOpen}
-          onClose={() => setOptionsOpen(false)}
+          onClose={() => {
+            sanitizeTheme(Settings.EditorTheme);
+            monacoRef.current?.editor.defineTheme("customTheme", makeTheme(Settings.EditorTheme));
+            setOptionsOpen(false);
+          }}
           options={{
             theme: Settings.MonacoTheme,
             insertSpaces: Settings.MonacoInsertSpaces,
@@ -1002,6 +1008,8 @@ export function Root(props: IProps): React.ReactElement {
             vim: Settings.MonacoVim,
           }}
           save={(options: Options) => {
+            sanitizeTheme(Settings.EditorTheme);
+            monacoRef.current?.editor.defineTheme("customTheme", makeTheme(Settings.EditorTheme));
             setOptions(options);
             Settings.MonacoTheme = options.theme;
             Settings.MonacoInsertSpaces = options.insertSpaces;

src/ScriptEditor/ui/ThemeEditorModal.tsx

@@ -0,0 +1,276 @@
+import { History, Reply, Save } from "@mui/icons-material";
+import { Box, Button, Paper, TextField, Tooltip, Typography } from "@mui/material";
+import IconButton from "@mui/material/IconButton";
+import _ from "lodash";
+import { Color, ColorPicker } from "material-ui-color";
+import React, { useState } from "react";
+import { Settings } from "../../Settings/Settings";
+import { Modal } from "../../ui/React/Modal";
+import { OptionSwitch } from "../../ui/React/OptionSwitch";
+import { defaultMonacoTheme, IScriptEditorTheme } from "./themes";
+
+interface IProps {
+  onClose: () => void;
+  open: boolean;
+}
+
+interface IColorEditorProps {
+  label: string;
+  themePath: string;
+  color: string | undefined;
+  onColorChange: (name: string, value: string) => void;
+  defaultColor: string;
+}
+
+// Slightly tweaked version of the same function found in game options
+function ColorEditor({ label, themePath, onColorChange, color, defaultColor }: IColorEditorProps): React.ReactElement {
+  if (color === undefined) {
+    console.error(`color ${themePath} was undefined, reverting to default`);
+    color = defaultColor;
+  }
+
+  return (
+    <>
+      <Tooltip title={label}>
+        <span>
+          <TextField
+            label={themePath}
+            value={"#" + color}
+            sx={{ display: "block", my: 1 }}
+            InputProps={{
+              startAdornment: (
+                <>
+                  <ColorPicker
+                    hideTextfield
+                    deferred
+                    value={"#" + color}
+                    onChange={(newColor: Color) => onColorChange(themePath, newColor.hex)}
+                    disableAlpha
+                  />
+                </>
+              ),
+              endAdornment: (
+                <>
+                  <IconButton onClick={() => onColorChange(themePath, defaultColor)}>
+                    <Reply color="primary" />
+                  </IconButton>
+                </>
+              ),
+            }}
+          />
+        </span>
+      </Tooltip>
+    </>
+  );
+}
+
+export function ThemeEditorModal(props: IProps): React.ReactElement {
+  const setRerender = useState(false)[1];
+  function rerender(): void {
+    setRerender((o) => !o);
+  }
+
+  // Need to deep copy the object since it has nested attributes
+  const [themeCopy, setThemeCopy] = useState<IScriptEditorTheme>(JSON.parse(JSON.stringify(Settings.EditorTheme)));
+
+  function onColorChange(name: string, value: string): void {
+    setThemeCopy(_.set(themeCopy, name, value));
+    rerender();
+  }
+
+  function onThemeChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    try {
+      const importedTheme = JSON.parse(event.target.value);
+      if (typeof importedTheme !== "object") return;
+      setThemeCopy(importedTheme);
+    } catch (err) {
+      // ignore
+    }
+  }
+
+  return (
+    <Modal
+      open={props.open}
+      onClose={() => {
+        setThemeCopy(Settings.EditorTheme);
+        props.onClose();
+      }}
+    >
+      <Typography variant="h4">Customize Editor theme</Typography>
+      <Typography>Hover over input boxes for more information</Typography>
+      <Paper sx={{ p: 1, my: 1 }}>
+        <OptionSwitch
+          checked={themeCopy.base === "vs"}
+          onChange={(val) => {
+            setThemeCopy(_.set(themeCopy, "base", val ? "vs" : "vs-dark"));
+            rerender();
+          }}
+          text="Use light theme as base"
+          tooltip={
+            <>
+              If enabled, the <code>vs</code> light theme will be used as the theme base, otherwise,{" "}
+              <code>vs-dark</code> will be used.
+            </>
+          }
+        />
+        <Box display="grid" sx={{ gridTemplateColumns: "1fr 1fr", width: "fit-content", gap: 1 }}>
+          <Box>
+            <Typography variant="h6">UI</Typography>
+            <ColorEditor
+              label="Background color"
+              themePath="common.bg"
+              onColorChange={onColorChange}
+              color={themeCopy.common.bg}
+              defaultColor={defaultMonacoTheme.common.bg}
+            />
+            <ColorEditor
+              label="Current line and minimap background color"
+              themePath="ui.line"
+              onColorChange={onColorChange}
+              color={themeCopy.ui.line}
+              defaultColor={defaultMonacoTheme.ui.line}
+            />
+            <ColorEditor
+              label="Base text color"
+              themePath="common.fg"
+              onColorChange={onColorChange}
+              color={themeCopy.common.fg}
+              defaultColor={defaultMonacoTheme.common.fg}
+            />
+            <ColorEditor
+              label="Popup background color"
+              themePath="ui.panel.bg"
+              onColorChange={onColorChange}
+              color={themeCopy.ui.panel.bg}
+              defaultColor={defaultMonacoTheme.ui.panel.bg}
+            />
+            <ColorEditor
+              label="Background color for selected item in popup"
+              themePath="ui.panel.selected"
+              onColorChange={onColorChange}
+              color={themeCopy.ui.panel.selected}
+              defaultColor={defaultMonacoTheme.ui.panel.selected}
+            />
+            <ColorEditor
+              label="Popup border color"
+              themePath="ui.panel.border"
+              onColorChange={onColorChange}
+              color={themeCopy.ui.panel.border}
+              defaultColor={defaultMonacoTheme.ui.panel.border}
+            />
+            <ColorEditor
+              label="Background color of highlighted text"
+              themePath="ui.selection.bg"
+              onColorChange={onColorChange}
+              color={themeCopy.ui.selection.bg}
+              defaultColor={defaultMonacoTheme.ui.selection.bg}
+            />
+          </Box>
+          <Box>
+            <Typography variant="h6">Syntax</Typography>
+            <ColorEditor
+              label="Numbers, function names, and other key vars"
+              themePath="common.accent"
+              onColorChange={onColorChange}
+              color={themeCopy.common.accent}
+              defaultColor={defaultMonacoTheme.common.accent}
+            />
+            <ColorEditor
+              label="Keywords"
+              themePath="syntax.keyword"
+              onColorChange={onColorChange}
+              color={themeCopy.syntax.keyword}
+              defaultColor={defaultMonacoTheme.syntax.keyword}
+            />
+            <ColorEditor
+              label="Strings"
+              themePath="syntax.string"
+              onColorChange={onColorChange}
+              color={themeCopy.syntax.string}
+              defaultColor={defaultMonacoTheme.syntax.string}
+            />
+            <ColorEditor
+              label="Regexp literals as well as escapes within strings"
+              themePath="syntax.regexp"
+              onColorChange={onColorChange}
+              color={themeCopy.syntax.regexp}
+              defaultColor={defaultMonacoTheme.syntax.regexp}
+            />
+            <ColorEditor
+              label="Constants"
+              themePath="syntax.constant"
+              onColorChange={onColorChange}
+              color={themeCopy.syntax.constant}
+              defaultColor={defaultMonacoTheme.syntax.constant}
+            />
+            <ColorEditor
+              label="Entities"
+              themePath="syntax.entity"
+              onColorChange={onColorChange}
+              color={themeCopy.syntax.entity}
+              defaultColor={defaultMonacoTheme.syntax.entity}
+            />
+            <ColorEditor
+              label="'this', 'ns', types, and tags"
+              themePath="syntax.tag"
+              onColorChange={onColorChange}
+              color={themeCopy.syntax.tag}
+              defaultColor={defaultMonacoTheme.syntax.tag}
+            />
+            <ColorEditor
+              label="Netscript functions and constructors"
+              themePath="syntax.markup"
+              onColorChange={onColorChange}
+              color={themeCopy.syntax.markup}
+              defaultColor={defaultMonacoTheme.syntax.markup}
+            />
+            <ColorEditor
+              label="Errors"
+              themePath="syntax.error"
+              onColorChange={onColorChange}
+              color={themeCopy.syntax.error}
+              defaultColor={defaultMonacoTheme.syntax.error}
+            />
+            <ColorEditor
+              label="Comments"
+              themePath="syntax.comment"
+              onColorChange={onColorChange}
+              color={themeCopy.syntax.comment}
+              defaultColor={defaultMonacoTheme.syntax.comment}
+            />
+          </Box>
+        </Box>
+      </Paper>
+      <Paper sx={{ p: 1 }}>
+        <TextField
+          multiline
+          fullWidth
+          maxRows={10}
+          label={"import / export theme"}
+          value={JSON.stringify(themeCopy, undefined, 2)}
+          onChange={onThemeChange}
+        />
+        <Box sx={{ mt: 1 }}>
+          <Button
+            onClick={() => {
+              Settings.EditorTheme = { ...themeCopy };
+              props.onClose();
+            }}
+            startIcon={<Save />}
+          >
+            Save
+          </Button>
+          <Button
+            onClick={() => {
+              setThemeCopy(defaultMonacoTheme);
+              rerender();
+            }}
+            startIcon={<History />}
+          >
+            Reset to default
+          </Button>
+        </Box>
+      </Paper>
+    </Modal>
+  );
+}

src/ScriptEditor/ui/themes.ts

@@ -1,3 +1,216 @@
+export interface IScriptEditorTheme {
+  [key: string]: any;
+  base: string;
+  inherit: boolean;
+  common: {
+    [key: string]: string;
+    accent: string;
+    bg: string;
+    fg: string;
+  };
+  syntax: {
+    [key: string]: string;
+    tag: string;
+    entity: string;
+    string: string;
+    regexp: string;
+    markup: string;
+    keyword: string;
+    comment: string;
+    constant: string;
+    error: string;
+  };
+  ui: {
+    [key: string]: any;
+    line: string;
+    panel: {
+      [key: string]: string;
+      bg: string;
+      selected: string;
+      border: string;
+    };
+    selection: {
+      [key: string]: string;
+      bg: string;
+    };
+  };
+}
+
+export const defaultMonacoTheme: IScriptEditorTheme = {
+  base: "vs-dark",
+  inherit: true,
+  common: {
+    accent: "B5CEA8",
+    bg: "1E1E1E",
+    fg: "D4D4D4",
+  },
+  syntax: {
+    tag: "569CD6",
+    entity: "569CD6",
+    string: "CE9178",
+    regexp: "646695",
+    markup: "569CD6",
+    keyword: "569CD6",
+    comment: "6A9955",
+    constant: "569CD6",
+    error: "F44747",
+  },
+  ui: {
+    line: "1E1E1E",
+    panel: {
+      bg: "252526",
+      selected: "252526",
+      border: "1E1E1E",
+    },
+    selection: {
+      bg: "ADD6FF26",
+    },
+  },
+};
+
+// Regex used for token color validation
+// https://github.com/microsoft/vscode/blob/973684056e67153952f495fce93bf50d0ec0b892/src/vs/editor/common/languages/supports/tokenization.ts#L153
+const colorRegExp = /^#?([0-9A-Fa-f]{6})([0-9A-Fa-f]{2})?$/;
+
+// Recursively sanitize the theme data to prevent errors
+// Invalid data will be replaced with FF0000 (bright red)
+export const sanitizeTheme = (theme: IScriptEditorTheme): void => {
+  for (const [k, v] of Object.entries(theme)) {
+    switch (k) {
+      case "base":
+        if (!["vs-dark", "vs"].includes(theme.base)) theme.base = "vs-dark";
+        continue;
+      case "inherit":
+        if (typeof theme.inherit !== "boolean") theme.inherit = true;
+        continue;
+    }
+
+    const repairBlock = (block: { [key: string]: any }): void => {
+      for (const [k, v] of Object.entries(block)) {
+        if (typeof v === "object") {
+          repairBlock(v as { [key: string]: string });
+        } else if (!v.match(colorRegExp)) block[k] = "FF0000";
+      }
+    };
+    repairBlock(v);
+  }
+};
+
+export function makeTheme(theme: IScriptEditorTheme): any {
+  const themeRules = [
+    {
+      token: "",
+      background: theme.ui.line,
+      foreground: theme.common.fg,
+    },
+    {
+      token: "identifier",
+      foreground: theme.common.accent,
+    },
+    {
+      token: "keyword",
+      foreground: theme.syntax.keyword,
+    },
+    {
+      token: "string",
+      foreground: theme.syntax.string,
+    },
+    {
+      token: "string.escape",
+      foreground: theme.syntax.regexp,
+    },
+    {
+      token: "comment",
+      foreground: theme.syntax.comment,
+    },
+    {
+      token: "constant",
+      foreground: theme.syntax.constant,
+    },
+    {
+      token: "entity",
+      foreground: theme.syntax.entity,
+    },
+    {
+      token: "type",
+      foreground: theme.syntax.tag,
+    },
+    {
+      token: "tag",
+      foreground: theme.syntax.tag,
+    },
+    {
+      token: "regexp",
+      foreground: theme.syntax.regexp,
+    },
+    {
+      token: "attribute",
+      foreground: theme.syntax.tag,
+    },
+    {
+      token: "constructor",
+      foreground: theme.syntax.markup,
+    },
+    {
+      token: "invalid",
+      foreground: theme.syntax.error,
+    },
+    {
+      token: "number",
+      foreground: theme.common.accent,
+    },
+    {
+      token: "delimiter",
+      foreground: theme.common.fg,
+    },
+    // Custom tokens
+    {
+      token: "ns",
+      foreground: theme.syntax.tag,
+    },
+    {
+      token: "netscriptfunction",
+      foreground: theme.syntax.markup,
+    },
+    {
+      token: "otherkeywords",
+      foreground: theme.syntax.keyword,
+    },
+    {
+      token: "otherkeyvars",
+      foreground: theme.common.accent,
+    },
+    {
+      token: "this",
+      foreground: theme.syntax.tag,
+    },
+  ];
+
+  const themeColors = Object.fromEntries(
+    [
+      ["editor.background", theme.common.bg],
+      ["editor.foreground", theme.common.fg],
+      ["editor.lineHighlightBackground", theme.ui.line],
+      ["editor.selectionBackground", theme.ui.selection.bg],
+
+      ["editorSuggestWidget.background", theme.ui.panel.bg],
+      ["editorSuggestWidget.border", theme.ui.panel.border],
+      ["editorSuggestWidget.selectedBackground", theme.ui.panel.selected],
+
+      ["editorHoverWidget.background", theme.ui.panel.bg],
+      ["editorHoverWidget.border", theme.ui.panel.border],
+
+      ["editorWidget.background", theme.ui.panel.bg],
+      ["editorWidget.border", theme.ui.panel.border],
+
+      ["input.background", theme.ui.panel.bg],
+      ["input.border", theme.ui.panel.border],
+    ].map(([k, v]) => [k, "#" + v]),
+  );
+
+  return { base: theme.base, inherit: theme.inherit, rules: themeRules, colors: themeColors };
+}
+
 export async function loadThemes(monaco: { editor: any }): Promise<void> {
   monaco.editor.defineTheme("monokai", {
     base: "vs-dark",
@@ -261,6 +474,7 @@ export async function loadThemes(monaco: { editor: any }): Promise<void> {
         foreground: "FFB86C",
         fontStyle: "italic",
       },
+
       {
         token: "netscriptfunction",
         foreground: "FF79C6",

src/Settings/Settings.ts

@@ -5,6 +5,7 @@ import { defaultStyles } from "../Themes/Styles";
 import { WordWrapOptions } from "../ScriptEditor/ui/Options";
 import { OverviewSettings } from "../ui/React/Overview";
 import { IStyleSettings } from "../ScriptEditor/NetscriptDefinitions";
+import { defaultMonacoTheme, IScriptEditorTheme } from "../ScriptEditor/ui/themes";
 
 /**
  * Represents the default settings the player could customize.
@@ -157,6 +158,11 @@ interface IDefaultSettings {
    *  If the game's sidebar is opened
    */
   IsSidebarOpened: boolean;
+
+  /**
+   *  Script editor theme data
+   */
+  EditorTheme: IScriptEditorTheme;
 }
 
 /**
@@ -216,6 +222,8 @@ export const defaultSettings: IDefaultSettings = {
   theme: defaultTheme,
   styles: defaultStyles,
   overview: { x: 0, y: 0, opened: true },
+
+  EditorTheme: defaultMonacoTheme,
 };
 
 /**
@@ -262,6 +270,7 @@ export const Settings: ISettings & ISelfInitializer & ISelfLoading = {
   theme: { ...defaultTheme },
   styles: { ...defaultStyles },
   overview: defaultSettings.overview,
+  EditorTheme: { ...defaultMonacoTheme },
   init() {
     Object.assign(Settings, defaultSettings);
   },
@@ -273,6 +282,8 @@ export const Settings: ISettings & ISelfInitializer & ISelfLoading = {
     delete save.styles;
     Object.assign(Settings.overview, save.overview);
     delete save.overview;
+    Object.assign(Settings.EditorTheme, save.EditorTheme);
+    delete save.EditorTheme;
     Object.assign(Settings, save);
   },
 };

src/Themes/ui/ThemeEditorModal.tsx

@@ -366,9 +366,9 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
           sx={{ mb: 1 }}
           multiline
           fullWidth
-          maxRows={3}
+          maxRows={10}
           label={"import / export theme"}
-          value={JSON.stringify(customTheme)}
+          value={JSON.stringify(customTheme, undefined, 2)}
           onChange={onThemeChange}
         />
         <>