mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-11-22 23:53:48 +01:00
Merge pull request #2684 from nickofolas/improvement/script-editor
Script Editor Improvements
This commit is contained in:
commit
7bebc86b11
@ -32,9 +32,13 @@ import Button from "@mui/material/Button";
|
|||||||
import Typography from "@mui/material/Typography";
|
import Typography from "@mui/material/Typography";
|
||||||
import Link from "@mui/material/Link";
|
import Link from "@mui/material/Link";
|
||||||
import Box from "@mui/material/Box";
|
import Box from "@mui/material/Box";
|
||||||
import IconButton from "@mui/material/IconButton";
|
|
||||||
import SettingsIcon from "@mui/icons-material/Settings";
|
import SettingsIcon from "@mui/icons-material/Settings";
|
||||||
|
import Table from "@mui/material/Table";
|
||||||
|
import TableCell from "@mui/material/TableCell";
|
||||||
|
import TableRow from "@mui/material/TableRow";
|
||||||
|
import TableBody from "@mui/material/TableBody";
|
||||||
import { PromptEvent } from "../../ui/React/PromptManager";
|
import { PromptEvent } from "../../ui/React/PromptManager";
|
||||||
|
import { Modal } from "../../ui/React/Modal";
|
||||||
|
|
||||||
import libSource from "!!raw-loader!../NetscriptDefinitions.d.ts";
|
import libSource from "!!raw-loader!../NetscriptDefinitions.d.ts";
|
||||||
|
|
||||||
@ -109,6 +113,7 @@ export function Root(props: IProps): React.ReactElement {
|
|||||||
const [editor, setEditor] = useState<IStandaloneCodeEditor | null>(null);
|
const [editor, setEditor] = useState<IStandaloneCodeEditor | null>(null);
|
||||||
|
|
||||||
const [ram, setRAM] = useState("RAM: ???");
|
const [ram, setRAM] = useState("RAM: ???");
|
||||||
|
const [ramEntries, setRamEntries] = useState<string[][]>([["???", ""]]);
|
||||||
const [updatingRam, setUpdatingRam] = useState(false);
|
const [updatingRam, setUpdatingRam] = useState(false);
|
||||||
const [decorations, setDecorations] = useState<string[]>([]);
|
const [decorations, setDecorations] = useState<string[]>([]);
|
||||||
|
|
||||||
@ -121,6 +126,8 @@ export function Root(props: IProps): React.ReactElement {
|
|||||||
vim: props.vim || Settings.MonacoVim,
|
vim: props.vim || Settings.MonacoVim,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const [ramInfoOpen, setRamInfoOpen] = useState(false);
|
||||||
|
|
||||||
// Prevent Crash if script is open on deleted server
|
// Prevent Crash if script is open on deleted server
|
||||||
openScripts = openScripts.filter((script) => {
|
openScripts = openScripts.filter((script) => {
|
||||||
return GetServer(script.hostname) !== null;
|
return GetServer(script.hostname) !== null;
|
||||||
@ -198,7 +205,7 @@ export function Root(props: IProps): React.ReactElement {
|
|||||||
});
|
});
|
||||||
editor.focus();
|
editor.focus();
|
||||||
});
|
});
|
||||||
} catch {}
|
} catch { }
|
||||||
} else if (!options.vim) {
|
} else if (!options.vim) {
|
||||||
// Whem vim mode is disabled
|
// Whem vim mode is disabled
|
||||||
vimEditor?.dispose();
|
vimEditor?.dispose();
|
||||||
@ -222,8 +229,9 @@ export function Root(props: IProps): React.ReactElement {
|
|||||||
|
|
||||||
const debouncedSetRAM = useMemo(
|
const debouncedSetRAM = useMemo(
|
||||||
() =>
|
() =>
|
||||||
debounce((s) => {
|
debounce((s, e) => {
|
||||||
setRAM(s);
|
setRAM(s);
|
||||||
|
setRamEntries(e);
|
||||||
setUpdatingRam(false);
|
setUpdatingRam(false);
|
||||||
}, 300),
|
}, 300),
|
||||||
[],
|
[],
|
||||||
@ -231,28 +239,34 @@ export function Root(props: IProps): React.ReactElement {
|
|||||||
|
|
||||||
async function updateRAM(newCode: string): Promise<void> {
|
async function updateRAM(newCode: string): Promise<void> {
|
||||||
if (currentScript != null && currentScript.fileName.endsWith(".txt")) {
|
if (currentScript != null && currentScript.fileName.endsWith(".txt")) {
|
||||||
debouncedSetRAM("");
|
debouncedSetRAM("N/A", [["N/A", ""]]);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setUpdatingRam(true);
|
setUpdatingRam(true);
|
||||||
const codeCopy = newCode + "";
|
const codeCopy = newCode + "";
|
||||||
const ramUsage = await calculateRamUsage(props.player, codeCopy, props.player.getCurrentServer().scripts);
|
const ramUsage = await calculateRamUsage(props.player, codeCopy, props.player.getCurrentServer().scripts);
|
||||||
if (ramUsage.cost > 0) {
|
if (ramUsage.cost > 0) {
|
||||||
debouncedSetRAM("RAM: " + numeralWrapper.formatRAM(ramUsage.cost));
|
const entries = ramUsage.entries?.sort((a, b) => b.cost - a.cost) ?? [];
|
||||||
|
const entriesDisp = [];
|
||||||
|
for (const entry of entries) {
|
||||||
|
entriesDisp.push([`${entry.name} (${entry.type})`, numeralWrapper.formatRAM(entry.cost)]);
|
||||||
|
}
|
||||||
|
|
||||||
|
debouncedSetRAM("RAM: " + numeralWrapper.formatRAM(ramUsage.cost), entriesDisp);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
switch (ramUsage.cost) {
|
switch (ramUsage.cost) {
|
||||||
case RamCalculationErrorCode.ImportError: {
|
case RamCalculationErrorCode.ImportError: {
|
||||||
debouncedSetRAM("RAM: Import Error");
|
debouncedSetRAM("RAM: Import Error", [["Import Error", ""]]);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case RamCalculationErrorCode.URLImportError: {
|
case RamCalculationErrorCode.URLImportError: {
|
||||||
debouncedSetRAM("RAM: HTTP Import Error");
|
debouncedSetRAM("RAM: HTTP Import Error", [["HTTP Import Error", ""]]);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case RamCalculationErrorCode.SyntaxError:
|
case RamCalculationErrorCode.SyntaxError:
|
||||||
default: {
|
default: {
|
||||||
debouncedSetRAM("RAM: Syntax Error");
|
debouncedSetRAM("RAM: Syntax Error", [["Syntax Error", ""]]);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -432,7 +446,7 @@ export function Root(props: IProps): React.ReactElement {
|
|||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
infLoop(newCode);
|
infLoop(newCode);
|
||||||
} catch (err) {}
|
} catch (err) { }
|
||||||
}
|
}
|
||||||
|
|
||||||
function saveScript(scriptToSave: OpenScript): void {
|
function saveScript(scriptToSave: OpenScript): void {
|
||||||
@ -714,7 +728,9 @@ export function Root(props: IProps): React.ReactElement {
|
|||||||
ref={provided.innerRef}
|
ref={provided.innerRef}
|
||||||
{...provided.droppableProps}
|
{...provided.droppableProps}
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: snapshot.isDraggingOver ? "#1F2022" : Settings.theme.backgroundprimary,
|
backgroundColor: snapshot.isDraggingOver
|
||||||
|
? Settings.theme.backgroundsecondary
|
||||||
|
: Settings.theme.backgroundprimary,
|
||||||
overflowX: "scroll",
|
overflowX: "scroll",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
@ -738,11 +754,13 @@ export function Root(props: IProps): React.ReactElement {
|
|||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
onClick={() => onTabClick(index)}
|
onClick={() => onTabClick(index)}
|
||||||
style={{
|
style={
|
||||||
background:
|
currentScript?.fileName === openScripts[index].fileName ? {
|
||||||
currentScript?.fileName === openScripts[index].fileName
|
background: Settings.theme.button,
|
||||||
? Settings.theme.secondarydark
|
color: Settings.theme.primary
|
||||||
: "",
|
} : {
|
||||||
|
background: Settings.theme.backgroundsecondary,
|
||||||
|
color: Settings.theme.secondary
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{hostname}:~/{fileName} {dirty(index)}
|
{hostname}:~/{fileName} {dirty(index)}
|
||||||
@ -752,10 +770,13 @@ export function Root(props: IProps): React.ReactElement {
|
|||||||
style={{
|
style={{
|
||||||
maxWidth: "20px",
|
maxWidth: "20px",
|
||||||
minWidth: "20px",
|
minWidth: "20px",
|
||||||
background:
|
...(currentScript?.fileName === openScripts[index].fileName ? {
|
||||||
currentScript?.fileName === openScripts[index].fileName
|
background: Settings.theme.button,
|
||||||
? Settings.theme.secondarydark
|
color: Settings.theme.primary
|
||||||
: "",
|
} : {
|
||||||
|
background: Settings.theme.backgroundsecondary,
|
||||||
|
color: Settings.theme.secondary
|
||||||
|
})
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
x
|
x
|
||||||
@ -792,10 +813,11 @@ export function Root(props: IProps): React.ReactElement {
|
|||||||
></Box>
|
></Box>
|
||||||
|
|
||||||
<Box display="flex" flexDirection="row" sx={{ m: 1 }} alignItems="center">
|
<Box display="flex" flexDirection="row" sx={{ m: 1 }} alignItems="center">
|
||||||
|
<Button startIcon={<SettingsIcon />} onClick={() => setOptionsOpen(true)} sx={{ mr: 1 }}>Options</Button>
|
||||||
<Button onClick={beautify}>Beautify</Button>
|
<Button onClick={beautify}>Beautify</Button>
|
||||||
<Typography color={updatingRam ? "secondary" : "primary"} sx={{ mx: 1 }}>
|
<Button color={updatingRam ? "secondary" : "primary"} sx={{ mx: 1 }} onClick={() => { setRamInfoOpen(true) }}>
|
||||||
{ram}
|
{ram}
|
||||||
</Typography>
|
</Button>
|
||||||
<Button onClick={save}>Save (Ctrl/Cmd + s)</Button>
|
<Button onClick={save}>Save (Ctrl/Cmd + s)</Button>
|
||||||
<Button onClick={props.router.toTerminal}>Close (Ctrl/Cmd + b)</Button>
|
<Button onClick={props.router.toTerminal}>Close (Ctrl/Cmd + b)</Button>
|
||||||
<Typography sx={{ mx: 1 }}>
|
<Typography sx={{ mx: 1 }}>
|
||||||
@ -809,12 +831,6 @@ export function Root(props: IProps): React.ReactElement {
|
|||||||
Full
|
Full
|
||||||
</Link>
|
</Link>
|
||||||
</Typography>
|
</Typography>
|
||||||
<IconButton style={{ marginLeft: "auto" }} onClick={() => setOptionsOpen(true)}>
|
|
||||||
<>
|
|
||||||
<SettingsIcon />
|
|
||||||
options
|
|
||||||
</>
|
|
||||||
</IconButton>
|
|
||||||
</Box>
|
</Box>
|
||||||
<OptionsModal
|
<OptionsModal
|
||||||
open={optionsOpen}
|
open={optionsOpen}
|
||||||
@ -835,6 +851,20 @@ export function Root(props: IProps): React.ReactElement {
|
|||||||
Settings.MonacoVim = options.vim;
|
Settings.MonacoVim = options.vim;
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
<Modal open={ramInfoOpen} onClose={() => setRamInfoOpen(false)}>
|
||||||
|
<Table>
|
||||||
|
<TableBody>
|
||||||
|
{ramEntries.map(([n, r]) => (
|
||||||
|
<React.Fragment key={n + r}>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell sx={{ color: Settings.theme.primary }}>{n}</TableCell>
|
||||||
|
<TableCell align="right" sx={{ color: Settings.theme.primary }}>{r}</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
</React.Fragment>
|
||||||
|
))}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
|
Loading…
Reference in New Issue
Block a user