import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; import { killWorkerScript } from "../src/Netscript/killWorkerScript"; import { RunningScript } from "../src/Script/RunningScript"; import { createElement } from "./uiHelpers/createElement"; import { removeElementById } from "./uiHelpers/removeElementById"; 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]; 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); } function kill(): void { killWorkerScript(props.script, props.script.server, true); close(); } function drag(event: React.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(): void { document.removeEventListener('mouseup', mouseUp) document.removeEventListener('mousemove', mouseMove) } document.addEventListener('mouseup', mouseUp) document.addEventListener('mousemove', mouseMove) } return (<>

{props.script.filename} {props.script.args.map((x: any): string => `${x}`).join(' ')}

{props.script.logs.map((line: string, i: number): JSX.Element => {line}
)}

); } 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(, container); }