Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-12-19 12:45:45 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve ScriptEditor responsiveness

Browse Source
This commit is contained in:
Snarling 2022-08-16 02:32:25 -04:00
parent 07538d6509
commit fd3ff76976
3 changed files with 18 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/ScriptEditor/ui/ScriptEditorRoot.tsx
View File

@ -142,25 +142,6 @@ export function Root(props: IProps): React.ReactElement {
if (currentScript === undefined) currentScript = null; if (currentScript === undefined) currentScript = null;
} }
const [dimensions, setDimensions] = useState({
height: window.innerHeight,
width: window.innerWidth,
});
useEffect(() => {
const debouncedHandleResize = debounce(function handleResize() {
setDimensions({
height: window.innerHeight,
width: window.innerWidth,
});
}, 250);
window.addEventListener("resize", debouncedHandleResize);
return () => {
window.removeEventListener("resize", debouncedHandleResize);
};
}, []);
useEffect(() => { useEffect(() => {
if (currentScript !== null) { if (currentScript !== null) {
updateRAM(currentScript.code); updateRAM(currentScript.code);
@ -815,7 +796,6 @@ export function Root(props: IProps): React.ReactElement {
// 5px padding for top of editor // 5px padding for top of editor
// 44px bottom tool bar + 16px margin // 44px bottom tool bar + 16px margin
// + vim bar 34px // + vim bar 34px
const editorHeight = dimensions.height - (130 + (options.vim ? 34 : 0));
const tabsMaxWidth = 1640; const tabsMaxWidth = 1640;
const tabMargin = 5; const tabMargin = 5;
const tabMaxWidth = filteredOpenScripts.length ? tabsMaxWidth / filteredOpenScripts.length - tabMargin : 0; const tabMaxWidth = filteredOpenScripts.length ? tabsMaxWidth / filteredOpenScripts.length - tabMargin : 0;
@ -951,7 +931,7 @@ export function Root(props: IProps): React.ReactElement {
beforeMount={beforeMount} beforeMount={beforeMount}
onMount={onMount} onMount={onMount}
loading={<Typography>Loading script editor!</Typography>} loading={<Typography>Loading script editor!</Typography>}
height={`${editorHeight}px`} height={`calc(100vh - ${130 + (options.vim ? 34 : 0)}px)`}
defaultLanguage="javascript" defaultLanguage="javascript"
defaultValue={""} defaultValue={""}
onChange={updateCode} onChange={updateCode}

2
src/ui/GameRoot.tsx
View File

@ -104,10 +104,10 @@ const useStyles = makeStyles((theme: Theme) =>
"scrollbar-width": "none" /* for Firefox */, "scrollbar-width": "none" /* for Firefox */,
margin: theme.spacing(0), margin: theme.spacing(0),
flexGrow: 1, flexGrow: 1,
display: "block",
padding: "8px", padding: "8px",
minHeight: "100vh", minHeight: "100vh",
boxSizing: "border-box", boxSizing: "border-box",
width: "1px",
}, },
}), }),
); );

49
src/ui/LoadingScreen.tsx
View File

@ -2,10 +2,6 @@ import React, { useState, useEffect } from "react";
import CircularProgress from "@mui/material/CircularProgress"; import CircularProgress from "@mui/material/CircularProgress";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import Grid from "@mui/material/Grid"; import Grid from "@mui/material/Grid";
import Box from "@mui/material/Box";
import { Theme } from "@mui/material/styles";
import makeStyles from "@mui/styles/makeStyles";
import createStyles from "@mui/styles/createStyles";
import { Terminal } from "../Terminal"; import { Terminal } from "../Terminal";
import { load } from "../db"; import { load } from "../db";
@ -18,16 +14,7 @@ import { ActivateRecoveryMode } from "./React/RecoveryRoot";
import { hash } from "../hash/hash"; import { hash } from "../hash/hash";
import { pushGameReady } from "../Electron"; import { pushGameReady } from "../Electron";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
backgroundColor: theme.colors.backgroundprimary,
},
}),
);
export function LoadingScreen(): React.ReactElement { export function LoadingScreen(): React.ReactElement {
const classes = useStyles();
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
const [loaded, setLoaded] = useState(false); const [loaded, setLoaded] = useState(false);
@ -69,27 +56,23 @@ export function LoadingScreen(): React.ReactElement {
doLoad(); doLoad();
}, []); }, []);
return ( return loaded ? (
<Box className={classes.root}> <GameRoot terminal={Terminal} engine={Engine} player={Player} />
{loaded ? ( ) : (
<GameRoot terminal={Terminal} engine={Engine} player={Player} /> <Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
) : ( <Grid item>
<Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}> <CircularProgress size={150} color="primary" />
<Grid item> </Grid>
<CircularProgress size={150} color="primary" /> <Grid item>
</Grid> <Typography variant="h3">Loading Bitburner {version}</Typography>
<Grid item> </Grid>
<Typography variant="h3">Loading Bitburner {version}</Typography> {show && (
</Grid> <Grid item>
{show && ( <Typography>
<Grid item> If the game fails to load, consider <a href="?noScripts">killing all scripts</a>
<Typography> </Typography>
If the game fails to load, consider <a href="?noScripts">killing all scripts</a>
</Typography>
</Grid>
)}
</Grid> </Grid>
)} )}
</Box> </Grid>
); );
} }