Merge pull request #2684 from nickofolas/improvement/script-editor

Script Editor Improvements
This commit is contained in:
hydroflame 2022-01-18 17:49:07 -05:00 committed by GitHub
commit 7bebc86b11
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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={{