2021-08-20 07:57:32 +02:00
|
|
|
import React, { useState, useEffect, useRef } from 'react';
|
2021-08-20 07:21:37 +02:00
|
|
|
import { StdButton } from "../../ui/React/StdButton";
|
|
|
|
import Editor from "@monaco-editor/react";
|
2021-08-20 07:57:32 +02:00
|
|
|
import * as monaco from "monaco-editor";
|
2021-08-27 01:14:56 +02:00
|
|
|
type IStandaloneCodeEditor = monaco.editor.IStandaloneCodeEditor;
|
2021-08-20 07:21:37 +02:00
|
|
|
import { createPopup } from "../../ui/React/createPopup";
|
2021-08-20 08:14:27 +02:00
|
|
|
import { OptionsPopup } from "./OptionsPopup";
|
|
|
|
import { Options } from "./Options";
|
2021-08-20 07:21:37 +02:00
|
|
|
import { js_beautify as beautifyCode } from 'js-beautify';
|
|
|
|
import { isValidFilePath } from "../../Terminal/DirectoryHelpers";
|
|
|
|
import { IPlayer } from "../../PersonObjects/IPlayer";
|
|
|
|
import { IEngine } from "../../IEngine";
|
|
|
|
import { dialogBoxCreate } from "../../../utils/DialogBox";
|
|
|
|
import { parseFconfSettings } from "../../Fconf/Fconf";
|
|
|
|
import { isScriptFilename } from "../../Script/ScriptHelpersTS";
|
|
|
|
import { Script } from "../../Script/Script";
|
|
|
|
import { TextFile } from "../../TextFile";
|
|
|
|
import { calculateRamUsage } from "../../Script/RamCalculations";
|
|
|
|
import { RamCalculationErrorCode } from "../../Script/RamCalculationErrorCodes";
|
|
|
|
import { numeralWrapper } from "../../ui/numeralFormat";
|
2021-08-20 07:57:32 +02:00
|
|
|
import { CursorPositions } from "../../ScriptEditor/CursorPositions";
|
2021-08-20 22:11:49 +02:00
|
|
|
import { libSource } from "../NetscriptDefinitions";
|
2021-08-21 06:17:26 +02:00
|
|
|
import { NetscriptFunctions } from "../../NetscriptFunctions";
|
|
|
|
import { WorkerScript } from "../../Netscript/WorkerScript";
|
|
|
|
import { Settings } from "../../Settings/Settings";
|
2021-08-23 13:03:20 +02:00
|
|
|
import { GetServerByHostname } from "../../Server/ServerHelpers";
|
2021-08-21 06:51:07 +02:00
|
|
|
import {
|
|
|
|
iTutorialNextStep,
|
|
|
|
ITutorial,
|
|
|
|
iTutorialSteps,
|
|
|
|
} from "../../InteractiveTutorial";
|
2021-08-21 06:17:26 +02:00
|
|
|
|
|
|
|
let symbols: string[] = [];
|
|
|
|
(function() {
|
|
|
|
const ns = NetscriptFunctions(({} as WorkerScript));
|
|
|
|
|
|
|
|
function populate(ns: any): string[] {
|
|
|
|
let symbols: string[] = [];
|
|
|
|
const keys = Object.keys(ns);
|
|
|
|
for(const key of keys) {
|
|
|
|
if(typeof ns[key] === 'object') {
|
|
|
|
symbols.push(key);
|
|
|
|
symbols = symbols.concat(populate(ns[key]));
|
|
|
|
}
|
|
|
|
if(typeof ns[key] === 'function') {
|
|
|
|
symbols.push(key);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return symbols;
|
|
|
|
}
|
|
|
|
symbols = populate(ns);
|
|
|
|
})();
|
2021-08-20 07:21:37 +02:00
|
|
|
|
|
|
|
interface IProps {
|
|
|
|
filename: string;
|
|
|
|
code: string;
|
|
|
|
player: IPlayer;
|
|
|
|
engine: IEngine;
|
2021-08-27 01:14:56 +02:00
|
|
|
}
|
2021-08-20 07:21:37 +02:00
|
|
|
|
2021-08-21 07:54:39 +02:00
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
2021-08-20 07:21:37 +02:00
|
|
|
// How to load function definition in monaco
|
|
|
|
// https://github.com/Microsoft/monaco-editor/issues/1415
|
|
|
|
// https://microsoft.github.io/monaco-editor/api/modules/monaco.languages.html
|
|
|
|
// https://www.npmjs.com/package/@monaco-editor/react#development-playground
|
2021-08-20 10:03:00 +02:00
|
|
|
// https://microsoft.github.io/monaco-editor/playground.html#extending-language-services-custom-languages
|
2021-08-20 19:57:32 +02:00
|
|
|
// https://github.com/threehams/typescript-error-guide/blob/master/stories/components/Editor.tsx#L11-L39
|
2021-08-20 07:21:37 +02:00
|
|
|
|
2021-08-23 08:09:49 +02:00
|
|
|
// These variables are used to reload a script when it's clicked on. Because we
|
|
|
|
// won't have references to the old script.
|
|
|
|
let lastFilename = "";
|
|
|
|
let lastCode = "";
|
|
|
|
let lastPosition: monaco.Position | null = null;
|
|
|
|
|
2021-08-20 07:21:37 +02:00
|
|
|
export function Root(props: IProps): React.ReactElement {
|
2021-08-20 07:57:32 +02:00
|
|
|
const editorRef = useRef<IStandaloneCodeEditor | null>(null);
|
2021-08-23 08:09:49 +02:00
|
|
|
const [filename, setFilename] = useState(props.filename ? props.filename : lastFilename);
|
|
|
|
const [code, setCode] = useState<string>(props.code ? props.code : lastCode);
|
|
|
|
const [ram, setRAM] = useState('RAM: ???');
|
2021-08-21 06:17:26 +02:00
|
|
|
const [options, setOptions] = useState<Options>({
|
|
|
|
theme: Settings.MonacoTheme,
|
|
|
|
insertSpaces: Settings.MonacoInsertSpaces,
|
|
|
|
});
|
2021-08-20 07:21:37 +02:00
|
|
|
|
2021-08-23 08:09:49 +02:00
|
|
|
// store the last known state in case we need to restart without nano.
|
|
|
|
useEffect(() => {
|
|
|
|
if(props.filename === "") return;
|
|
|
|
lastFilename = props.filename;
|
|
|
|
lastCode = props.code;
|
|
|
|
lastPosition = null;
|
|
|
|
}, []);
|
|
|
|
|
2021-08-20 07:21:37 +02:00
|
|
|
function save(): void {
|
2021-08-20 07:57:32 +02:00
|
|
|
if(editorRef.current !== null) {
|
|
|
|
const position = editorRef.current.getPosition();
|
|
|
|
if(position !== null) {
|
|
|
|
CursorPositions.saveCursor(filename, {
|
|
|
|
row: position.lineNumber,
|
|
|
|
column: position.column,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
2021-08-23 08:09:49 +02:00
|
|
|
lastPosition = null;
|
2021-08-20 07:21:37 +02:00
|
|
|
|
|
|
|
// TODO(hydroflame): re-enable the tutorial.
|
2021-08-21 06:51:07 +02:00
|
|
|
if (ITutorial.isRunning && ITutorial.currStep === iTutorialSteps.TerminalTypeScript) {
|
|
|
|
//Make sure filename + code properly follow tutorial
|
|
|
|
if (filename !== "n00dles.script") {
|
|
|
|
dialogBoxCreate("Leave the script name as 'n00dles'!");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (code.replace(/\s/g, "").indexOf("while(true){hack('n00dles');}") == -1) {
|
|
|
|
dialogBoxCreate("Please copy and paste the code from the tutorial!");
|
|
|
|
return;
|
|
|
|
}
|
2021-08-20 07:21:37 +02:00
|
|
|
|
2021-08-21 06:51:07 +02:00
|
|
|
//Save the script
|
2021-08-23 15:33:49 +02:00
|
|
|
const server = props.player.getCurrentServer();
|
2021-08-23 08:09:49 +02:00
|
|
|
if(server === null) throw new Error('Server should not be null but it is.');
|
|
|
|
for (let i = 0; i < server.scripts.length; i++) {
|
|
|
|
if (filename == server.scripts[i].filename) {
|
2021-08-23 15:33:49 +02:00
|
|
|
server.scripts[i].saveScript(code, props.player.currentServer, server.scripts);
|
2021-08-21 06:51:07 +02:00
|
|
|
props.engine.loadTerminalContent();
|
|
|
|
return iTutorialNextStep();
|
|
|
|
}
|
|
|
|
}
|
2021-08-20 07:21:37 +02:00
|
|
|
|
2021-08-21 06:51:07 +02:00
|
|
|
// If the current script does NOT exist, create a new one
|
2021-08-23 08:09:49 +02:00
|
|
|
const script = new Script();
|
2021-08-23 15:33:49 +02:00
|
|
|
script.saveScript(code, props.player.currentServer, server.scripts);
|
2021-08-23 08:09:49 +02:00
|
|
|
server.scripts.push(script);
|
2021-08-20 07:21:37 +02:00
|
|
|
|
2021-08-21 06:51:07 +02:00
|
|
|
return iTutorialNextStep();
|
|
|
|
}
|
2021-08-20 07:21:37 +02:00
|
|
|
|
|
|
|
if (filename == "") {
|
|
|
|
dialogBoxCreate("You must specify a filename!");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (filename !== ".fconf" && !isValidFilePath(filename)) {
|
|
|
|
dialogBoxCreate("Script filename can contain only alphanumerics, hyphens, and underscores, and must end with an extension.");
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2021-08-23 15:33:49 +02:00
|
|
|
const server = props.player.getCurrentServer();
|
2021-08-23 08:09:49 +02:00
|
|
|
if(server === null) throw new Error('Server should not be null but it is.');
|
2021-08-20 07:21:37 +02:00
|
|
|
if (filename === ".fconf") {
|
|
|
|
try {
|
|
|
|
parseFconfSettings(code);
|
|
|
|
} catch(e) {
|
|
|
|
dialogBoxCreate(`Invalid .fconf file: ${e}`);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
} else if (isScriptFilename(filename)) {
|
|
|
|
//If the current script already exists on the server, overwrite it
|
2021-08-23 08:09:49 +02:00
|
|
|
for (let i = 0; i < server.scripts.length; i++) {
|
|
|
|
if (filename == server.scripts[i].filename) {
|
2021-08-23 15:33:49 +02:00
|
|
|
server.scripts[i].saveScript(code, props.player.currentServer, server.scripts);
|
2021-08-20 07:21:37 +02:00
|
|
|
props.engine.loadTerminalContent();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
//If the current script does NOT exist, create a new one
|
|
|
|
const script = new Script();
|
2021-08-23 15:33:49 +02:00
|
|
|
script.saveScript(code, props.player.currentServer, server.scripts);
|
2021-08-23 08:09:49 +02:00
|
|
|
server.scripts.push(script);
|
2021-08-20 07:21:37 +02:00
|
|
|
} else if (filename.endsWith(".txt")) {
|
2021-08-23 08:09:49 +02:00
|
|
|
for (let i = 0; i < server.textFiles.length; ++i) {
|
|
|
|
if (server.textFiles[i].fn === filename) {
|
|
|
|
server.textFiles[i].write(code);
|
2021-08-20 07:21:37 +02:00
|
|
|
props.engine.loadTerminalContent();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const textFile = new TextFile(filename, code);
|
2021-08-23 08:09:49 +02:00
|
|
|
server.textFiles.push(textFile);
|
2021-08-20 07:21:37 +02:00
|
|
|
} else {
|
2021-08-21 08:06:48 +02:00
|
|
|
dialogBoxCreate("Invalid filename. Must be either a script (.script, .js, or .ns) or " +
|
2021-08-20 07:21:37 +02:00
|
|
|
" or text file (.txt)")
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
props.engine.loadTerminalContent();
|
|
|
|
}
|
|
|
|
|
|
|
|
function beautify(): void {
|
2021-08-25 22:14:47 +02:00
|
|
|
if (editorRef.current === null) return;
|
|
|
|
const pretty = beautifyCode(code, {
|
2021-08-20 08:14:27 +02:00
|
|
|
indent_with_tabs: !options.insertSpaces,
|
2021-08-20 07:21:37 +02:00
|
|
|
indent_size: 4,
|
|
|
|
brace_style: "preserve-inline",
|
2021-08-25 22:14:47 +02:00
|
|
|
});
|
|
|
|
editorRef.current.setValue(pretty);
|
2021-08-20 07:21:37 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
function onFilenameChange(event: React.ChangeEvent<HTMLInputElement>): void {
|
2021-08-23 08:09:49 +02:00
|
|
|
lastFilename = filename;
|
2021-08-20 07:21:37 +02:00
|
|
|
setFilename(event.target.value);
|
|
|
|
}
|
|
|
|
|
2021-08-20 08:14:27 +02:00
|
|
|
function openOptions(): void {
|
|
|
|
const id="script-editor-options-popup";
|
2021-08-21 06:17:26 +02:00
|
|
|
const newOptions = {
|
|
|
|
theme: '',
|
|
|
|
insertSpaces: false,
|
|
|
|
};
|
|
|
|
Object.assign(newOptions, options);
|
2021-08-20 08:14:27 +02:00
|
|
|
createPopup(id, OptionsPopup, {
|
2021-08-20 07:21:37 +02:00
|
|
|
id: id,
|
2021-08-21 06:17:26 +02:00
|
|
|
options: newOptions,
|
|
|
|
save: (options: Options) => {
|
|
|
|
setOptions(options);
|
|
|
|
Settings.MonacoTheme = options.theme;
|
|
|
|
Settings.MonacoInsertSpaces = options.insertSpaces;
|
2021-08-27 01:14:56 +02:00
|
|
|
},
|
2021-08-20 07:21:37 +02:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function updateCode(newCode?: string): void {
|
|
|
|
if(newCode === undefined) return;
|
2021-08-23 08:09:49 +02:00
|
|
|
lastCode = newCode;
|
|
|
|
if(editorRef.current !== null) {
|
|
|
|
lastPosition = editorRef.current.getPosition();
|
|
|
|
}
|
2021-08-20 07:21:37 +02:00
|
|
|
setCode(newCode);
|
|
|
|
}
|
|
|
|
|
2021-08-20 07:57:32 +02:00
|
|
|
async function updateRAM(): Promise<void> {
|
|
|
|
const codeCopy = code+"";
|
|
|
|
const ramUsage = await calculateRamUsage(codeCopy, props.player.getCurrentServer().scripts);
|
|
|
|
if (ramUsage > 0) {
|
|
|
|
setRAM("RAM: " + numeralWrapper.formatRAM(ramUsage));
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
switch (ramUsage) {
|
|
|
|
case RamCalculationErrorCode.ImportError: {
|
|
|
|
setRAM("RAM: Import Error");
|
|
|
|
break;
|
2021-08-20 07:21:37 +02:00
|
|
|
}
|
2021-08-20 07:57:32 +02:00
|
|
|
case RamCalculationErrorCode.URLImportError: {
|
|
|
|
setRAM("RAM: HTTP Import Error");
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
case RamCalculationErrorCode.SyntaxError:
|
|
|
|
default: {
|
|
|
|
setRAM("RAM: Syntax Error");
|
|
|
|
break;
|
2021-08-20 07:21:37 +02:00
|
|
|
}
|
|
|
|
}
|
2021-08-20 07:57:32 +02:00
|
|
|
return new Promise<void>(() => undefined);
|
|
|
|
}
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
const id = setInterval(updateRAM, 1000);
|
2021-08-20 07:21:37 +02:00
|
|
|
return () => clearInterval(id);
|
2021-08-20 07:57:32 +02:00
|
|
|
}, [code]);
|
|
|
|
|
2021-08-21 07:54:39 +02:00
|
|
|
useEffect(() => {
|
|
|
|
function maybeSave(event: KeyboardEvent) {
|
|
|
|
if (Settings.DisableHotkeys) return;
|
|
|
|
//Ctrl + b
|
|
|
|
if (event.keyCode == 66 && (event.ctrlKey || event.metaKey)) {
|
|
|
|
event.preventDefault();
|
|
|
|
save();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
document.addEventListener('keydown', maybeSave);
|
|
|
|
return () => document.removeEventListener('keydown', maybeSave);
|
|
|
|
})
|
|
|
|
|
2021-08-20 07:57:32 +02:00
|
|
|
function onMount(editor: IStandaloneCodeEditor): void {
|
|
|
|
editorRef.current = editor;
|
|
|
|
if(editorRef.current === null) return;
|
|
|
|
const position = CursorPositions.getCursor(filename);
|
2021-08-23 08:09:49 +02:00
|
|
|
if(position.row !== -1)
|
|
|
|
editorRef.current.setPosition({lineNumber: position.row, column: position.column});
|
|
|
|
else if(lastPosition !== null)
|
|
|
|
editorRef.current.setPosition({lineNumber: lastPosition.lineNumber, column: lastPosition.column+1});
|
2021-08-20 07:57:32 +02:00
|
|
|
editorRef.current.focus();
|
|
|
|
}
|
2021-08-20 07:21:37 +02:00
|
|
|
|
2021-08-20 21:30:19 +02:00
|
|
|
function beforeMount(monaco: any): void {
|
2021-08-20 23:14:20 +02:00
|
|
|
monaco.languages.registerCompletionItemProvider('javascript', {
|
|
|
|
provideCompletionItems: () => {
|
2021-08-21 06:17:26 +02:00
|
|
|
const suggestions = [];
|
|
|
|
for(const symbol of symbols) {
|
|
|
|
suggestions.push({
|
|
|
|
label: symbol,
|
2021-08-20 23:14:20 +02:00
|
|
|
kind: monaco.languages.CompletionItemKind.Function,
|
2021-08-21 06:17:26 +02:00
|
|
|
insertText: symbol,
|
2021-08-20 23:14:20 +02:00
|
|
|
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
|
2021-08-21 06:17:26 +02:00
|
|
|
});
|
|
|
|
}
|
|
|
|
return { suggestions: suggestions };
|
2021-08-27 01:14:56 +02:00
|
|
|
},
|
2021-08-20 23:14:20 +02:00
|
|
|
});
|
2021-08-20 22:11:49 +02:00
|
|
|
monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, 'netscript.d.ts');
|
|
|
|
monaco.languages.typescript.typescriptDefaults.addExtraLib(libSource, 'netscript.d.ts');
|
2021-08-20 21:30:19 +02:00
|
|
|
}
|
|
|
|
|
2021-08-20 07:21:37 +02:00
|
|
|
return (<div id="script-editor-wrapper">
|
|
|
|
<div id="script-editor-filename-wrapper">
|
2021-08-20 08:14:27 +02:00
|
|
|
<p id="script-editor-filename-tag" className="noselect"> <strong style={{backgroundColor:'#555'}}>Script name: </strong></p>
|
2021-08-20 07:21:37 +02:00
|
|
|
<input id="script-editor-filename" type="text" maxLength={100} tabIndex={1} value={filename} onChange={onFilenameChange} />
|
2021-08-20 08:14:27 +02:00
|
|
|
<StdButton text={"options"} onClick={openOptions} />
|
2021-08-20 07:21:37 +02:00
|
|
|
</div>
|
|
|
|
<Editor
|
2021-08-20 21:30:19 +02:00
|
|
|
beforeMount={beforeMount}
|
2021-08-20 07:57:32 +02:00
|
|
|
onMount={onMount}
|
2021-08-20 07:21:37 +02:00
|
|
|
loading={<p>Loading script editor!</p>}
|
|
|
|
height="80%"
|
2021-08-20 23:14:20 +02:00
|
|
|
defaultLanguage="javascript"
|
2021-08-23 05:57:00 +02:00
|
|
|
defaultValue={code}
|
2021-08-20 07:21:37 +02:00
|
|
|
onChange={updateCode}
|
2021-08-21 06:17:26 +02:00
|
|
|
theme={options.theme}
|
2021-08-20 08:14:27 +02:00
|
|
|
options={options}
|
2021-08-20 07:21:37 +02:00
|
|
|
/>
|
|
|
|
<div id="script-editor-buttons-wrapper">
|
|
|
|
<StdButton text={"Beautify"} onClick={beautify} />
|
|
|
|
<p id="script-editor-status-text" style={{display:"inline-block", margin:"10px"}}>{ram}</p>
|
|
|
|
<button className="std-button" style={{display: "inline-block"}} onClick={save}>Save & Close (Ctrl/Cmd + b)</button>
|
|
|
|
<a className="std-button" style={{display: "inline-block"}} target="_blank" href="https://bitburner.readthedocs.io/en/latest/index.html">Netscript Documentation</a>
|
|
|
|
</div>
|
|
|
|
</div>);
|
2021-08-23 12:21:05 +02:00
|
|
|
}
|