Add modal to editor with RAM details

This commit is contained in:
nickofolas 2022-01-17 16:32:45 -06:00
parent c1b777733f
commit c41cd68a8d

@ -34,7 +34,12 @@ 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 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 +114,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 +127,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;
@ -222,8 +230,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 +240,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("", []);
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;
} }
} }
@ -800,9 +815,23 @@ export function Root(props: IProps): React.ReactElement {
<Box display="flex" flexDirection="row" sx={{ m: 1 }} alignItems="center"> <Box display="flex" flexDirection="row" sx={{ m: 1 }} alignItems="center">
<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>
<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>
<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 }}>