2021-09-13 00:03:07 +02:00
|
|
|
import React, { useState } from "react";
|
|
|
|
|
|
|
|
import { CinematicLine } from "./CinematicLine";
|
2021-09-27 23:09:48 +02:00
|
|
|
import Typography from "@mui/material/Typography";
|
|
|
|
import Button from "@mui/material/Button";
|
2021-09-13 00:03:07 +02:00
|
|
|
|
|
|
|
interface IProps {
|
|
|
|
lines: string[];
|
2021-09-18 01:43:08 +02:00
|
|
|
auto?: boolean;
|
2021-09-13 00:03:07 +02:00
|
|
|
onDone?: () => void;
|
|
|
|
}
|
|
|
|
|
|
|
|
export function CinematicText(props: IProps): React.ReactElement {
|
|
|
|
const [i, setI] = useState(0);
|
2021-09-18 01:43:08 +02:00
|
|
|
const [done, setDone] = useState(false);
|
2021-09-13 00:03:07 +02:00
|
|
|
|
|
|
|
function advance(): void {
|
|
|
|
const newI = i + 1;
|
|
|
|
setI(newI);
|
2021-09-18 01:43:08 +02:00
|
|
|
if (newI >= props.lines.length) {
|
|
|
|
if (props.onDone && props.auto) props.onDone();
|
|
|
|
setDone(true);
|
|
|
|
}
|
2021-09-13 00:03:07 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2021-10-01 19:08:37 +02:00
|
|
|
<>
|
2021-09-13 00:03:07 +02:00
|
|
|
{props.lines.slice(0, i).map((line, i) => (
|
2021-09-27 23:09:48 +02:00
|
|
|
<Typography key={i}>{line}</Typography>
|
2021-09-13 00:03:07 +02:00
|
|
|
))}
|
|
|
|
{props.lines.length > i && <CinematicLine key={i} text={props.lines[i]} onDone={advance} />}
|
2021-09-27 23:09:48 +02:00
|
|
|
{!props.auto && props.onDone && done && <Button onClick={props.onDone}>Continue ...</Button>}
|
2021-10-01 19:08:37 +02:00
|
|
|
</>
|
2021-09-13 00:03:07 +02:00
|
|
|
);
|
|
|
|
}
|