diff --git a/css/menupages.scss b/css/menupages.scss index ffaa1d1b8..76aa11f6e 100644 --- a/css/menupages.scss +++ b/css/menupages.scss @@ -8,9 +8,6 @@ -ms-overflow-style: none; /* for Internet Explorer, Edge */ scrollbar-width: none; /* for Firefox */ flex-grow: 1; - overflow-y: scroll; - height: 100vh; - bottom: 0px; } #generic-react-container::-webkit-scrollbar { diff --git a/src/Terminal/Terminal.ts b/src/Terminal/Terminal.ts index 46fde205d..f69958474 100644 --- a/src/Terminal/Terminal.ts +++ b/src/Terminal/Terminal.ts @@ -77,7 +77,7 @@ export class Terminal implements ITerminal { commandHistory: string[] = []; commandHistoryIndex = 0; - outputHistory: (Output | Link)[] = [{ text: `Bitburner v${CONSTANTS.Version}`, color: "primary" }]; + outputHistory: (Output | Link)[] = [new Output(`Bitburner v${CONSTANTS.Version}`, "primary")]; // True if a Coding Contract prompt is opened contractOpen = false; @@ -489,6 +489,7 @@ export class Terminal implements ITerminal { } clear(): void { + // TODO: remove this once we figure out the height issue. this.outputHistory = [new Output(`Bitburner v${CONSTANTS.Version}`, "primary")]; this.hasChanges = true; } diff --git a/src/Terminal/ui/TerminalRoot.tsx b/src/Terminal/ui/TerminalRoot.tsx index eef122676..bb85fd71c 100644 --- a/src/Terminal/ui/TerminalRoot.tsx +++ b/src/Terminal/ui/TerminalRoot.tsx @@ -1,11 +1,11 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useRef } from "react"; import Typography from "@mui/material/Typography"; import List from "@mui/material/List"; import ListItem from "@mui/material/ListItem"; import { Link as MuiLink } from "@mui/material"; import { Theme } from "@mui/material/styles"; -import makeStyles from '@mui/styles/makeStyles'; -import createStyles from '@mui/styles/createStyles'; +import makeStyles from "@mui/styles/makeStyles"; +import createStyles from "@mui/styles/createStyles"; import Box from "@mui/material/Box"; import { ITerminal, Output, Link } from "../ITerminal"; import { IEngine } from "../../IEngine"; @@ -47,6 +47,7 @@ interface IProps { } export function TerminalRoot({ terminal, engine, player }: IProps): React.ReactElement { + const scrollHook = useRef(null); const setRerender = useState(false)[1]; function rerender(): void { setRerender((old) => !old); @@ -59,36 +60,46 @@ export function TerminalRoot({ terminal, engine, player }: IProps): React.ReactE return () => clearInterval(id); }, []); + const hook = scrollHook.current; + if (hook !== null) { + setTimeout(() => hook.scrollIntoView(true), 10); + } + const classes = useStyles(); return ( - - - {terminal.outputHistory.map((item, i) => { - if (item instanceof Output) - return ( - - - {item.text} - - - ); - if (item instanceof Link) - return ( - - terminal.connectToServer(player, item.hostname)} - > - > {item.hostname} - - - ); - })} - - {terminal.action !== null && } - - + <> + + + {terminal.outputHistory.map((item, i) => { + if (item instanceof Output) + return ( + + + {item.text} + + + ); + if (item instanceof Link) + return ( + + terminal.connectToServer(player, item.hostname)} + > + > {item.hostname} + + + ); + })} + + {terminal.action !== null && } +
+
+ + + + ); }