fix research tree, kinda

src/ui/React/MuiTextField.tsx

@@ -1,81 +0,0 @@
-/**
- * Wrapper around material-ui's TextField component that styles it with
- * Bitburner's UI theme
- */
-
-import React from "react";
-import { TextField, TextFieldProps } from "@mui/material";
-
-import makeStyles from "@mui/styles/makeStyles";
-
-const backgroundColorStyles = {
-  backgroundColor: "rgba(57, 54, 54, 0.9)",
-  "&:hover": {
-    backgroundColor: "rgba(70, 70, 70, 0.9)",
-  },
-};
-
-const formControlStyles = {
-  border: "1px solid #e2e2e1",
-  overflow: "hidden",
-  borderRadius: 4,
-  color: "white",
-  ...backgroundColorStyles,
-};
-
-const useStyles = makeStyles({
-  root: {
-    ...formControlStyles,
-  },
-});
-
-const useInputStyles = makeStyles({
-  root: {
-    ...backgroundColorStyles,
-    color: "white",
-  },
-  focused: {
-    backgroundColor: "rgba(70, 70, 70, 0.9)",
-  },
-  disabled: {
-    color: "white",
-  },
-});
-
-const useLabelStyles = makeStyles({
-  root: {
-    color: "white",
-  },
-  focused: {
-    color: "white !important", // Need important to override styles from FormLabel
-  },
-  disabled: {
-    color: "white !important", // Need important to override styles from FormLabel
-  },
-});
-
-export const MuiTextField: React.FC<TextFieldProps> = (props: TextFieldProps) => {
-  return (
-    <TextField
-      {...props}
-      classes={{
-        ...useStyles(),
-        ...props.classes,
-      }}
-      InputProps={{
-        classes: {
-          ...useInputStyles(),
-          ...props.InputProps?.classes,
-        },
-        ...props.InputProps,
-      }}
-      InputLabelProps={{
-        classes: {
-          ...useLabelStyles(),
-          ...props.InputLabelProps?.classes,
-        },
-        ...props.InputLabelProps,
-      }}
-    />
-  );
-};

src/ui/React/Select.tsx

@@ -1,38 +0,0 @@
-/**
- * Wrapper around material-ui's Button component that styles it with
- * Bitburner's UI theme
- */
-
-import React from "react";
-import { Select as MuiSelect, SelectProps } from "@mui/material";
-import { Theme } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
-import createStyles from "@mui/styles/createStyles";
-
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      backgroundColor: theme.palette.background.paper,
-      color: theme.palette.primary.dark,
-      margin: "5px",
-      padding: "3px 5px",
-      "&:after": {
-        backgroundColor: theme.palette.background.paper,
-      },
-
-      borderRadius: 0,
-    },
-  }),
-);
-
-export const Select: React.FC<SelectProps> = (props: SelectProps) => {
-  return (
-    <MuiSelect
-      {...props}
-      classes={{
-        ...useStyles(),
-        ...props.classes,
-      }}
-    />
-  );
-};

src/ui/React/createPopup.tsx

@@ -1,95 +0,0 @@
-/**
- * Create a pop-up dialog box using React.
- *
- * Calling this function with the same ID and React Root Component will trigger a re-render
- *
- * @param id The (hopefully) unique identifier for the popup container
- * @param rootComponent Root React Component for the content (NOT the popup containers themselves)
- */
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-
-import { Popup } from "./Popup";
-
-import { createElement } from "../uiHelpers/createElement";
-import { removeElementById } from "../uiHelpers/removeElementById";
-
-let gameContainer: HTMLElement;
-
-(function () {
-  function getGameContainer(): void {
-    const container = document.getElementById("root");
-    if (container == null) {
-      throw new Error(`Failed to find game container DOM element`);
-    }
-
-    gameContainer = container;
-    document.removeEventListener("DOMContentLoaded", getGameContainer);
-  }
-
-  document.addEventListener("DOMContentLoaded", getGameContainer);
-})();
-
-// This variable is used to avoid setting the semi-transparent background
-// several times on top of one another. Sometimes there's several popup at once.
-let deepestPopupId = "";
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export function createPopup<T>(
-  id: string,
-  rootComponent: (props: T) => React.ReactElement,
-  props: T,
-  onClose?: () => void,
-): HTMLElement | null {
-  let container = document.getElementById(id);
-  if (container == null) {
-    function onClick(this: HTMLElement, event: MouseEvent): void {
-      if (!event.srcElement) return;
-      if (!(event.srcElement instanceof HTMLElement)) return;
-      const clickedId = (event.srcElement as HTMLElement).id;
-      if (clickedId !== id) return;
-      removePopup(id);
-      if (onClose) onClose();
-    }
-    const backgroundColor = deepestPopupId === "" ? "rgba(0,0,0,0.5)" : "rgba(0,0,0,0)";
-    container = createElement("div", {
-      class: "popup-box-container",
-      display: "flex",
-      id: id,
-      backgroundColor: backgroundColor,
-      mouseDown: onClick,
-    });
-
-    gameContainer.appendChild(container);
-  }
-
-  if (deepestPopupId === "") deepestPopupId = id;
-  ReactDOM.render(
-    <Popup
-      content={rootComponent}
-      id={id}
-      props={props}
-      removePopup={() => {
-        removePopup(id);
-        if (onClose) onClose();
-      }}
-    />,
-    container,
-  );
-
-  return container;
-}
-
-/**
- * Closes a popup created with the createPopup() function above
- */
-export function removePopup(id: string): void {
-  const content = document.getElementById(`${id}`);
-  if (content == null) return;
-
-  ReactDOM.unmountComponentAtNode(content);
-
-  removeElementById(id);
-  removeElementById(`${id}-close`);
-  if (id === deepestPopupId) deepestPopupId = "";
-}