Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-11-30 03:23:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix blade console input visibility on scroll

Browse Source 
Before this, when scrolling up the input would be hidden.
This commit is contained in:
Martin Fournier 2021-12-21 06:38:40 -05:00
parent 009bae5870
commit 0b71a83cfe
1 changed files with 56 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
src/Bladeburner/ui/Console.tsx
View File

@ -54,7 +54,6 @@ interface IProps {
export function Console(props: IProps): React.ReactElement { export function Console(props: IProps): React.ReactElement {
const classes = useStyles(); const classes = useStyles();
const scrollHook = useRef<HTMLDivElement>(null);
const [command, setCommand] = useState(""); const [command, setCommand] = useState("");
const setRerender = useState(false)[1]; const setRerender = useState(false)[1];
@ -64,22 +63,14 @@ export function Console(props: IProps): React.ReactElement {
const [consoleHistoryIndex, setConsoleHistoryIndex] = useState(props.bladeburner.consoleHistory.length); const [consoleHistoryIndex, setConsoleHistoryIndex] = useState(props.bladeburner.consoleHistory.length);
// TODO: Figure out how to actually make the scrolling work correctly.
function scrollToBottom(): void {
if (!scrollHook.current) return;
scrollHook.current.scrollTop = scrollHook.current.scrollHeight;
}
function rerender(): void { function rerender(): void {
setRerender((old) => !old); setRerender((old) => !old);
} }
useEffect(() => { useEffect(() => {
const id = setInterval(rerender, 1000); const id = setInterval(rerender, 1000);
const id2 = setInterval(scrollToBottom, 100);
return () => { return () => {
clearInterval(id); clearInterval(id);
clearInterval(id2);
}; };
}, []); }, []);
@ -139,34 +130,62 @@ export function Console(props: IProps): React.ReactElement {
} }
return ( return (
<Box height={"60vh"} display={"flex"} alignItems={"stretch"} component={Paper}> <Paper>
<Box> <Box sx={{
<List sx={{ height: "100%", overflow: "auto" }}> height: '60vh',
{props.bladeburner.consoleLogs.map((log: any, i: number) => ( paddingBottom: '8px',
<Line key={i} content={log} /> display: 'flex',
))} alignItems: 'stretch',
<TextField }}>
classes={{ root: classes.textfield }} <Box>
autoFocus <Logs entries={[...props.bladeburner.consoleLogs]} />
tabIndex={1} </Box>
type="text"
value={command}
onChange={handleCommandChange}
onKeyDown={handleKeyDown}
InputProps={{
// for players to hook in
className: classes.input,
startAdornment: (
<>
<Typography>&gt;&nbsp;</Typography>
</>
),
spellCheck: false,
}}
/>
</List>
<div ref={scrollHook}></div>
</Box> </Box>
</Box> <TextField
classes={{ root: classes.textfield }}
autoFocus
tabIndex={1}
type="text"
value={command}
onChange={handleCommandChange}
onKeyDown={handleKeyDown}
InputProps={{
// for players to hook in
className: classes.input,
startAdornment: (
<>
<Typography>&gt;&nbsp;</Typography>
</>
),
spellCheck: false,
}}
/>
</Paper>
);
}
interface ILogProps {
entries: string[];
}
function Logs({entries}: ILogProps): React.ReactElement {
const scrollHook = useRef<HTMLUListElement>(null);
// TODO: Text gets shifted up as new entries appear, if the user scrolled up it should attempt to keep the text focused
function scrollToBottom(): void {
if (!scrollHook.current) return;
scrollHook.current.scrollTop = scrollHook.current.scrollHeight;
}
useEffect(() => {
scrollToBottom();
}, [entries]);
return (
<List sx={{ height: "100%", overflow: "auto", p: 1 }} ref={scrollHook}>
{entries && entries.map((log: any, i: number) => (
<Line key={i} content={log} />
))}
</List>
); );
} }