script log boxes can now be dragged around and multiple of them can be on screen at once.

css/popupboxes.scss

@@ -13,7 +13,6 @@
     justify-content: center;
     width: 100%;
     height: 100%;
-    overflow: auto;
     background-color: rbga(var(--my-background-color), 0.4);
 }
 
@@ -58,8 +57,7 @@
     background-color: #000;
 }
 
-.dialog-box-container,
-#log-box-container {
+.dialog-box-container {
     display: block;
     position: absolute;
     z-index: 10;
@@ -74,8 +72,48 @@
     border: 5px solid var(--my-highlight-color);
 }
 
-.dialog-box-content,
-#log-box-content {
+
+.log-box-container {
+    display: flex;
+    flex-flow: column;
+    background-color: gray;
+    width: 50%;
+    position: absolute;
+    left: 50%;
+    top: 40%;
+    margin: -10% 0 0 -25%;
+    height: auto;
+    max-height: 50%;
+    z-index: 10;
+    background-color: var(--my-background-color);
+    border: 2px solid var(--my-highlight-color);
+}
+
+.log-box-header {
+    background-color: #333;
+    border: 1px solid var(--my-highlight-color);
+    display: flex;
+    flex: row nowrap;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.log-box-log-container {
+    max-width: 400px;
+    overflow-y: auto;
+}
+
+.log-box-button {
+    color: #aaa;
+    font-size: $defaultFontSize;
+    font-weight: bold;
+    padding: 2px;
+    margin: 6px;
+    border: 1px solid #fff;
+    background-color: #000;
+}
+
+.dialog-box-content {
     z-index: 2;
     background-color: var(--my-background-color);
     padding: 10px;

css/styles.scss

@@ -17,6 +17,8 @@ body {
 p,
 pre,
 h2,
+h3,
+h4,
 .text,
 td {
     color: var(--my-font-color);

src/engine.jsx

@@ -784,10 +784,6 @@ const Engine = {
                 updateSleevesPage();
             }
 
-            if (logBoxOpened) {
-                logBoxUpdateText();
-            }
-
             Engine.Counters.updateDisplays = 3;
         }
 

src/index.html

@@ -290,16 +290,6 @@ if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %>
         <!-- React Component -->
     </div>
 
-    <!-- Log Box -->
-    <div id="log-box-container">
-        <div id="log-box-content">
-            <button id="log-box-close" class="popup-box-button"> Close </button>
-            <button id="log-box-kill-script" class="popup-box-button">Kill Script</button>
-            <p id="log-box-text-header"> </p>
-            <p id="log-box-text"> </p>
-        </div>
-    </div>
-
     <!-- Generic Yes/No Pop Up box -->
     <div id="yes-no-box-container" class="popup-box-container">
         <div id="yes-no-box-content" class="popup-box-content">

utils/LogBox.ts

@@ -1,106 +0,0 @@
-import { killWorkerScript } from "../src/Netscript/killWorkerScript";
-import { RunningScript } from "../src/Script/RunningScript";
-
-import { clearEventListeners } from "./uiHelpers/clearEventListeners";
-import { arrayToString } from "./helpers/arrayToString";
-
-import { KEY } from "./helpers/keyCodes";
-
-document.addEventListener("keydown", function(event: KeyboardEvent) {
-    if (logBoxOpened && event.keyCode == KEY.ESC) {
-        logBoxClose();
-    }
-});
-
-let logBoxContainer: HTMLElement | null;
-let textHeader: HTMLElement | null;
-let logText: HTMLElement | null;
-
-function logBoxInit(): void {
-    // Initialize Close button click listener
-    const closeButton = document.getElementById("log-box-close");
-    if (closeButton == null) {
-        console.error(`Could not find LogBox's close button`);
-        return;
-    }
-
-    closeButton.addEventListener("click", function() {
-        logBoxClose();
-        return false;
-    });
-
-    // Initialize text header
-    textHeader = document.getElementById("log-box-text-header");
-    if (textHeader instanceof HTMLElement) {
-        textHeader.style.display = "inline-block";
-    }
-
-    // Initialize references to other DOM elements
-    logBoxContainer = document.getElementById("log-box-container");
-    logText = document.getElementById("log-box-text");
-
-    logBoxClose();
-
-    document.removeEventListener("DOMContentLoaded", logBoxInit);
-}
-
-document.addEventListener("DOMContentLoaded", logBoxInit);
-
-function logBoxClose(): void {
-    logBoxOpened = false;
-    if (logBoxContainer instanceof HTMLElement) {
-        logBoxContainer.style.display = "none";
-    }
-}
-
-function logBoxOpen(): void {
-    logBoxOpened = true;
-
-    if (logBoxContainer instanceof HTMLElement) {
-        logBoxContainer.style.display = "block";
-    }
-}
-
-
-export let logBoxOpened = false;
-let logBoxCurrentScript: RunningScript | null = null;
-export function logBoxCreate(script: RunningScript): void {
-    logBoxCurrentScript = script;
-
-    const killScriptBtn = clearEventListeners("log-box-kill-script");
-    if (killScriptBtn == null) {
-        console.error(`Could not find LogBox's 'Kill Script' button`);
-        return;
-    }
-
-    killScriptBtn.addEventListener("click", () => {
-        killWorkerScript(script, script.server, true);
-        return false;
-    });
-
-    killScriptBtn.style.display = "inline-block";
-
-    logBoxOpen();
-
-    if (textHeader instanceof HTMLElement) {
-        textHeader.innerHTML = `${logBoxCurrentScript.filename} ${arrayToString(logBoxCurrentScript.args)}:<br><br>`;
-    } else {
-        console.warn(`LogBox's Text Header DOM element is null`);
-    }
-
-    logBoxCurrentScript.logUpd = true;
-    logBoxUpdateText();
-}
-
-export function logBoxUpdateText(): void {
-    if (!(logText instanceof HTMLElement)) { return; }
-
-    if (logBoxCurrentScript && logBoxOpened && logBoxCurrentScript.logUpd) {
-        logText.innerHTML = "";
-        for (let i = 0; i < logBoxCurrentScript.logs.length; ++i) {
-            logText.innerHTML += logBoxCurrentScript.logs[i];
-            logText.innerHTML += "<br>";
-        }
-        logBoxCurrentScript.logUpd = false;
-    }
-}

utils/LogBox.tsx

@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from "react";
+import ReactDOM from "react-dom";
+import { killWorkerScript } from "../src/Netscript/killWorkerScript";
+import { RunningScript } from "../src/Script/RunningScript";
+
+import { clearEventListeners } from "./uiHelpers/clearEventListeners";
+import { arrayToString } from "./helpers/arrayToString";
+import { createElement } from "./uiHelpers/createElement";
+import { removeElementById } from "./uiHelpers/removeElementById";
+import Grid from '@material-ui/core/Grid';
+
+
+import { KEY } from "./helpers/keyCodes";
+
+let gameContainer: HTMLElement;
+
+(function() {
+    function getGameContainer(): void {
+        const container = document.getElementById("entire-game-container");
+        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];
+    const [pos, setPos] = useState([0, 0]);
+
+    function rerender() {
+        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);
+    }
+
+    function kill(): void {
+        killWorkerScript(props.script, props.script.server, true);
+        close();
+    }
+
+    function drag(event: React.MouseEvent<HTMLElement, MouseEvent>): void {
+        event.preventDefault();
+        //console.log(props.container.clientWidth);
+        //console.log(props.container.clientHeight);
+        let x = event.clientX;
+        let y = event.clientY;
+        let left = props.container.offsetLeft+props.container.clientWidth/2;
+        let top = props.container.offsetTop+props.container.clientHeight/2;
+        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(event: MouseEvent): 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}>{line}<br /></span>)}</p>
+        </div>
+    </>);
+}
+
+let logBoxCurrentScript: RunningScript | null = null;
+export function logBoxCreate(script: RunningScript): void {
+    const id = script.filename+script.args.map((x: any): string => `${x}`).join('');
+    const container = createElement("div", {
+        class: "log-box-container",
+        id: id,
+    });
+    gameContainer.appendChild(container);
+    ReactDOM.render(<ScriptLogPopup script={script} id={id} container={container} />, container);
+}
+