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 Box from "@mui/material/Box";
import { ITerminal, Output, Link } from "../ITerminal";
import { IEngine } from "../../IEngine";
import { IPlayer } from "../../PersonObjects/IPlayer";
import { TerminalInput } from "./TerminalInput";
interface IActionTimerProps {
terminal: ITerminal;
}
function ActionTimer({ terminal }: IActionTimerProps): React.ReactElement {
return (
{terminal.getProgressText()}
);
}
const useStyles = makeStyles((theme: Theme) =>
createStyles({
nopadding: {
padding: theme.spacing(0),
},
preformatted: {
whiteSpace: "pre-wrap",
margin: theme.spacing(0),
},
list: {
padding: theme.spacing(0),
height: "100%",
},
}),
);
interface IProps {
terminal: ITerminal;
engine: IEngine;
player: IPlayer;
}
export function TerminalRoot({ terminal, engine, player }: IProps): React.ReactElement {
const scrollHook = useRef(null);
const setRerender = useState(false)[1];
function rerender(): void {
setRerender((old) => !old);
}
useEffect(() => {
const id = setInterval(() => {
if (terminal.pollChanges()) rerender();
}, 100);
return () => clearInterval(id);
}, []);
function doScroll(): void {
const hook = scrollHook.current;
if (hook !== null) {
setTimeout(() => hook.scrollIntoView(true), 50);
}
}
doScroll();
useEffect(() => {
setTimeout(doScroll, 50);
}, []);
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 && (
{" "}
)}
>
);
}