Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-11-22 23:53:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Olivier Gagnon 2021-08-19 22:22:21 -04:00
parent df457a0c6e
commit 6e1100750e
6 changed files with 159 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
css/popupboxes.scss
View File

@ -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;

2
css/styles.scss
View File

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

4
src/engine.jsx
View File

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

10
src/index.html
View File

@ -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">

106
utils/LogBox.ts
View File

@ -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;
}
}

114
utils/LogBox.tsx Normal file
View File

@ -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);
}