moved a bunch of files

src/ui/React/CodingContractPopup.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { KEY } from "../../../utils/helpers/keyCodes";
+import { KEY } from "../../utils/helpers/keyCodes";
 
 import { CodingContract, CodingContractType, CodingContractTypes } from "../../CodingContracts";
 import { ClickableTag, CopyableText } from "./CopyableText";

src/ui/React/DialogBox.tsx

@@ -0,0 +1,43 @@
+import { createPopup } from "./createPopup";
+import { getRandomInt } from "../../utils/helpers/getRandomInt";
+
+import React from "react";
+
+interface IProps {
+  content: JSX.Element;
+}
+
+function MessagePopup(props: IProps): React.ReactElement {
+  return <>{props.content}</>;
+}
+
+export function dialogBoxCreate(txt: string | JSX.Element, preformatted = false): void {
+  const popupId =
+    `popup-` +
+    Array.from(Array(16))
+      .map(() => `${getRandomInt(0, 9)}`)
+      .join("");
+  if (typeof txt === "string") {
+    if (preformatted) {
+      // For text files as they are often computed data that
+      // shouldn't be wrapped and should retain tabstops.
+      createPopup(popupId, MessagePopup, {
+        content: <pre dangerouslySetInnerHTML={{ __html: txt }} />,
+      });
+    } else {
+      createPopup(popupId, MessagePopup, {
+        content: (
+          <p
+            dangerouslySetInnerHTML={{
+              __html: txt.replace(/(?:\r\n|\r|\n)/g, "<br />"),
+            }}
+          />
+        ),
+      });
+    }
+  } else {
+    createPopup(popupId, MessagePopup, {
+      content: txt,
+    });
+  }
+}

src/ui/React/GameOptionsRoot.tsx

@@ -24,7 +24,7 @@ import DownloadIcon from "@mui/icons-material/Download";
 import UploadIcon from "@mui/icons-material/Upload";
 
 import { FileDiagnosticModal } from "../../Diagnostic/FileDiagnosticModal";
-import { dialogBoxCreate } from "../../../utils/DialogBox";
+import { dialogBoxCreate } from "./DialogBox";
 import { ConfirmationModal } from "./ConfirmationModal";
 import { ThemeEditorModal } from "./ThemeEditorModal";
 

src/ui/React/LogBox.tsx

@@ -0,0 +1,134 @@
+import React, { useState, useEffect } from "react";
+import ReactDOM from "react-dom";
+import { killWorkerScript } from "../../Netscript/killWorkerScript";
+import { RunningScript } from "../../Script/RunningScript";
+
+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);
+})();
+
+interface IProps {
+  script: RunningScript;
+  container: HTMLElement;
+  id: string;
+}
+
+function ScriptLogPopup(props: IProps): React.ReactElement {
+  const setRerender = useState(false)[1];
+
+  function rerender(): void {
+    setRerender((old) => !old);
+  }
+
+  useEffect(() => {
+    const id = setInterval(rerender, 1000);
+    return () => clearInterval(id);
+  }, []);
+
+  function close(): void {
+    const content = document.getElementById(props.id);
+    if (content == null) return;
+    ReactDOM.unmountComponentAtNode(content);
+    removeElementById(props.id);
+  }
+
+  useEffect(() => {
+    function closeHandler(event: KeyboardEvent): void {
+      if (event.keyCode === 27) {
+        close();
+      }
+    }
+
+    document.addEventListener("keydown", closeHandler);
+
+    return () => {
+      document.removeEventListener("keydown", closeHandler);
+    };
+  }, []);
+
+  function kill(): void {
+    killWorkerScript(props.script, props.script.server, true);
+    close();
+  }
+
+  function drag(event: React.MouseEvent<HTMLElement, MouseEvent>): void {
+    event.preventDefault();
+    let x = event.clientX;
+    let y = event.clientY;
+    let left = props.container.offsetLeft + props.container.clientWidth / 2;
+    let top = props.container.offsetTop + props.container.clientWidth / 5;
+    function mouseMove(event: MouseEvent): void {
+      left += event.clientX - x;
+      top += event.clientY - y;
+      props.container.style.left = left + "px";
+      props.container.style.top = top + "px";
+      // reset right and bottom to avoid the window stretching
+      props.container.style.right = "";
+      props.container.style.bottom = "";
+      x = event.clientX;
+      y = event.clientY;
+    }
+    function mouseUp(): void {
+      document.removeEventListener("mouseup", mouseUp);
+      document.removeEventListener("mousemove", mouseMove);
+    }
+    document.addEventListener("mouseup", mouseUp);
+    document.addEventListener("mousemove", mouseMove);
+  }
+
+  return (
+    <>
+      <div className="log-box-header" onMouseDown={drag}>
+        <p>
+          {props.script.filename} {props.script.args.map((x: any): string => `${x}`).join(" ")}
+        </p>
+        <div>
+          <button className="log-box-button" onClick={kill}>
+            Kill Script
+          </button>
+          <button className="log-box-button" onClick={close}>
+            Close
+          </button>
+        </div>
+      </div>
+      <div className="log-box-log-container">
+        <p>
+          {props.script.logs.map(
+            (line: string, i: number): JSX.Element => (
+              <span key={i} style={{ whiteSpace: "pre-line" }}>
+                {line}
+                <br />
+              </span>
+            ),
+          )}
+        </p>
+      </div>
+    </>
+  );
+}
+
+export function logBoxCreate(script: RunningScript): void {
+  const id = script.server + "-" + script.filename + script.args.map((x: any): string => `${x}`).join("-");
+  if (document.getElementById(id) !== null) return;
+  const container = createElement("div", {
+    class: "log-box-container",
+    id: id,
+  });
+  gameContainer.appendChild(container);
+  ReactDOM.render(<ScriptLogPopup script={script} id={id} container={container} />, container);
+}

src/ui/React/PopupButton.tsx

@@ -8,8 +8,8 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 
-import { KEY } from "../../../utils/helpers/keyCodes";
-import { removeElement } from "../../../utils/uiHelpers/removeElement";
+import { KEY } from "../../utils/helpers/keyCodes";
+import { removeElement } from "../uiHelpers/removeElement";
 
 export interface IPopupButtonProps {
   class?: string;

src/ui/React/PopupCloseButton.tsx

@@ -8,7 +8,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 
-import { removeElement } from "../../../utils/uiHelpers/removeElement";
+import { removeElement } from "../uiHelpers/removeElement";
 import { IPopupButtonProps, PopupButton } from "./PopupButton";
 
 export interface IPopupCloseButtonProps extends IPopupButtonProps {

src/ui/React/createPopup.tsx

@@ -11,8 +11,8 @@ import * as ReactDOM from "react-dom";
 
 import { Popup } from "./Popup";
 
-import { createElement } from "../../../utils/uiHelpers/createElement";
-import { removeElementById } from "../../../utils/uiHelpers/removeElementById";
+import { createElement } from "../uiHelpers/createElement";
+import { removeElementById } from "../uiHelpers/removeElementById";
 
 let gameContainer: HTMLElement;