diff --git a/src/Bladeburner/ui/Console.tsx b/src/Bladeburner/ui/Console.tsx index d52cb0099..162858505 100644 --- a/src/Bladeburner/ui/Console.tsx +++ b/src/Bladeburner/ui/Console.tsx @@ -23,7 +23,7 @@ const useStyles = makeStyles((theme: Theme) => width: "100%", }, input: { - backgroundColor: "#000", + backgroundColor: theme.colors.backgroundsecondary, }, nopadding: { padding: theme.spacing(0), @@ -56,6 +56,7 @@ export function Console(props: IProps): React.ReactElement { const classes = useStyles(); const [command, setCommand] = useState(""); const setRerender = useState(false)[1]; + const consoleInput = useRef(null); function handleCommandChange(event: React.ChangeEvent): void { setCommand(event.target.value); @@ -131,15 +132,21 @@ export function Console(props: IProps): React.ReactElement { } } + function handleClick(): void { + if (!consoleInput.current) return + consoleInput.current.focus(); + } + return ( - + + }} + onClick={handleClick}> @@ -149,6 +156,7 @@ export function Console(props: IProps): React.ReactElement { autoFocus tabIndex={1} type="text" + inputRef={consoleInput} value={command} onChange={handleCommandChange} onKeyDown={handleKeyDown} @@ -171,7 +179,7 @@ interface ILogProps { entries: string[]; } -function Logs({entries}: ILogProps): React.ReactElement { +function Logs({ entries }: ILogProps): React.ReactElement { const scrollHook = useRef(null); // TODO: Text gets shifted up as new entries appear, if the user scrolled up it should attempt to keep the text focused @@ -182,7 +190,7 @@ function Logs({entries}: ILogProps): React.ReactElement { useEffect(() => { scrollToBottom(); - }, [entries]); + }, [entries.length]); return (