mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2026-04-27 11:27:04 +02:00
pre-dialogbox-convert
This commit is contained in:
Olivier Gagnon
@@ -0,0 +1,50 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { EventEmitter } from "../../utils/EventEmitter";
|
||||
import { Modal } from "../../ui/React/Modal";
|
||||
import Typography from "@mui/material/Typography";
|
||||
|
||||
export const AlertEvents = new EventEmitter<[string | JSX.Element]>();
|
||||
|
||||
interface Alert {
|
||||
id: string;
|
||||
text: string | JSX.Element;
|
||||
}
|
||||
|
||||
let i = 0;
|
||||
export function AlertManager(): React.ReactElement {
|
||||
const [alerts, setAlerts] = useState<Alert[]>([]);
|
||||
useEffect(
|
||||
() =>
|
||||
AlertEvents.subscribe((text: string | JSX.Element) => {
|
||||
const id = i + "";
|
||||
i++;
|
||||
setAlerts((old) => {
|
||||
return [
|
||||
...old,
|
||||
{
|
||||
id: id,
|
||||
text: text,
|
||||
},
|
||||
];
|
||||
});
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
function close(): void {
|
||||
console.log("close");
|
||||
setAlerts((old) => {
|
||||
return old.slice(0, -1);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{alerts.length > 0 && (
|
||||
<Modal open={true} onClose={close}>
|
||||
<Typography>{alerts[0].text}</Typography>
|
||||
</Modal>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,134 +0,0 @@
|
||||
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);
|
||||
}
|
||||
@@ -0,0 +1,161 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { EventEmitter } from "../../utils/EventEmitter";
|
||||
import { RunningScript } from "../../Script/RunningScript";
|
||||
import { killWorkerScript } from "../../Netscript/killWorkerScript";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
import Paper from "@mui/material/Paper";
|
||||
|
||||
export const LogBoxEvents = new EventEmitter<[RunningScript]>();
|
||||
|
||||
interface Log {
|
||||
id: string;
|
||||
script: RunningScript;
|
||||
}
|
||||
|
||||
export function LogBoxManager(): React.ReactElement {
|
||||
const [logs, setLogs] = useState<Log[]>([]);
|
||||
useEffect(
|
||||
() =>
|
||||
LogBoxEvents.subscribe((script: RunningScript) => {
|
||||
const id = script.server + "-" + script.filename + script.args.map((x: any): string => `${x}`).join("-");
|
||||
setLogs((old) => {
|
||||
return [
|
||||
...old,
|
||||
{
|
||||
id: id,
|
||||
script: script,
|
||||
},
|
||||
];
|
||||
});
|
||||
}),
|
||||
[],
|
||||
);
|
||||
|
||||
function close(id: string): void {
|
||||
setLogs((old) => old.filter((l) => l.id !== id));
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{logs.map((log) => (
|
||||
<LogWindow key={log.id} script={log.script} id={log.id} onClose={() => close(log.id)} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
interface IProps {
|
||||
script: RunningScript;
|
||||
id: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
function LogWindow(props: IProps): React.ReactElement {
|
||||
const container = useRef<HTMLDivElement>(null);
|
||||
const setRerender = useState(false)[1];
|
||||
function rerender(): void {
|
||||
setRerender((old) => !old);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const id = setInterval(rerender, 1000);
|
||||
return () => clearInterval(id);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
function closeHandler(event: KeyboardEvent): void {
|
||||
if (event.keyCode === 27) {
|
||||
props.onClose();
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("keydown", closeHandler);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener("keydown", closeHandler);
|
||||
};
|
||||
}, []);
|
||||
|
||||
function kill(): void {
|
||||
killWorkerScript(props.script, props.script.server, true);
|
||||
props.onClose();
|
||||
}
|
||||
|
||||
function drag(event: React.MouseEvent<HTMLElement, MouseEvent>): void {
|
||||
const c = container.current;
|
||||
if (c === null) return;
|
||||
event.preventDefault();
|
||||
let x = event.clientX;
|
||||
let y = event.clientY;
|
||||
let left = c.offsetLeft + c.clientWidth / 2;
|
||||
let top = c.offsetTop + c.clientWidth / 5;
|
||||
function mouseMove(event: MouseEvent): void {
|
||||
const c = container.current;
|
||||
if (c === null) return;
|
||||
left += event.clientX - x;
|
||||
top += event.clientY - y;
|
||||
c.style.left = left + "px";
|
||||
c.style.top = top + "px";
|
||||
// reset right and bottom to avoid the window stretching
|
||||
c.style.right = "";
|
||||
c.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 (
|
||||
<Paper
|
||||
style={{
|
||||
display: "flex",
|
||||
flexFlow: "column",
|
||||
backgroundColor: "gray",
|
||||
width: "50%",
|
||||
position: "fixed",
|
||||
left: "50%",
|
||||
top: "40%",
|
||||
margin: "-10% 0 0 -25%",
|
||||
height: "auto",
|
||||
maxHeight: "50%",
|
||||
zIndex: 10,
|
||||
border: "2px solid $hacker-green",
|
||||
}}
|
||||
ref={container}
|
||||
>
|
||||
<Paper
|
||||
style={{
|
||||
cursor: "grab",
|
||||
}}
|
||||
>
|
||||
<Box display="flex" alignItems="center" onMouseDown={drag}>
|
||||
<Typography color="primary" variant="h6" noWrap component="div">
|
||||
{props.script.filename} {props.script.args.map((x: any): string => `${x}`).join(" ")}
|
||||
</Typography>
|
||||
|
||||
<Box display="flex" marginLeft="auto">
|
||||
<Button onClick={kill}>Kill Script</Button>
|
||||
<Button onClick={props.onClose}>Close</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
</Paper>
|
||||
<Paper>
|
||||
{props.script.logs.map(
|
||||
(line: string, i: number): JSX.Element => (
|
||||
<Typography key={i} style={{ whiteSpace: "pre-line" }}>
|
||||
{line}
|
||||
<br />
|
||||
</Typography>
|
||||
),
|
||||
)}
|
||||
</Paper>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
@@ -33,7 +33,7 @@ interface IProps {
|
||||
export function WorldMap(props: IProps): React.ReactElement {
|
||||
// prettier-ignore
|
||||
return (
|
||||
<div className="noselect">
|
||||
<>
|
||||
<Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> ,_ . ._. _. .</Typography>
|
||||
<Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> , _-\','|~\~ ~/ ;-'_ _-' ,;_;_, ~~-</Typography>
|
||||
<Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> /~~-\_/-'~'--' \~~| ', ,' / / ~|-_\_/~/~ ~~--~~~~'--_</Typography>
|
||||
@@ -56,6 +56,6 @@ export function WorldMap(props: IProps): React.ReactElement {
|
||||
<Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> / ,' ~</Typography>
|
||||
<Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> ',| ~</Typography>
|
||||
<Typography sx={{lineHeight: '1em',whiteSpace: 'pre'}}> ~'</Typography>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user