2021-09-20 00:04:12 +02:00
|
|
|
import React, { useState, useEffect } from "react";
|
|
|
|
import CircularProgress from "@mui/material/CircularProgress";
|
|
|
|
import Typography from "@mui/material/Typography";
|
|
|
|
import Grid from "@mui/material/Grid";
|
|
|
|
import Paper from "@mui/material/Paper";
|
|
|
|
import { Theme } from "@mui/material";
|
|
|
|
import makeStyles from "@mui/styles/makeStyles";
|
|
|
|
import createStyles from "@mui/styles/createStyles";
|
|
|
|
|
2021-09-20 00:22:52 +02:00
|
|
|
import { Terminal } from "../Terminal";
|
|
|
|
import { Engine } from "../engine";
|
|
|
|
import { Player } from "../Player";
|
|
|
|
import { GameRoot } from "./GameRoot";
|
|
|
|
|
2021-09-20 00:04:12 +02:00
|
|
|
import { CONSTANTS } from "../Constants";
|
|
|
|
|
2021-09-20 00:22:52 +02:00
|
|
|
import { load } from "../engine";
|
|
|
|
|
2021-09-20 00:04:12 +02:00
|
|
|
const useStyles = makeStyles((theme: Theme) =>
|
|
|
|
createStyles({
|
|
|
|
center: {
|
|
|
|
position: "fixed",
|
|
|
|
top: "50%",
|
|
|
|
left: "50%",
|
|
|
|
},
|
|
|
|
}),
|
|
|
|
);
|
|
|
|
|
|
|
|
export function LoadingScreen(): React.ReactElement {
|
|
|
|
const classes = useStyles();
|
|
|
|
const [show, setShow] = useState(false);
|
2021-09-20 00:22:52 +02:00
|
|
|
const [loaded, setLoaded] = useState(false);
|
2021-09-20 00:04:12 +02:00
|
|
|
|
2021-09-20 00:22:52 +02:00
|
|
|
console.log("renredering");
|
2021-09-20 00:04:12 +02:00
|
|
|
useEffect(() => {
|
|
|
|
const id = setTimeout(() => {
|
2021-09-20 00:22:52 +02:00
|
|
|
if (!loaded) setShow(true);
|
2021-09-20 00:04:12 +02:00
|
|
|
}, 2000);
|
|
|
|
return () => clearTimeout(id);
|
2021-09-20 00:22:52 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
load(() => {
|
|
|
|
setLoaded(true);
|
|
|
|
});
|
2021-09-20 00:04:12 +02:00
|
|
|
}, []);
|
2021-09-20 00:22:52 +02:00
|
|
|
|
|
|
|
if (loaded) {
|
|
|
|
return <GameRoot terminal={Terminal} engine={Engine} player={Player} />;
|
|
|
|
}
|
|
|
|
|
2021-09-20 00:04:12 +02:00
|
|
|
return (
|
|
|
|
<Grid container direction="column" justifyContent="center" alignItems="center" style={{ minHeight: "100vh" }}>
|
|
|
|
<Grid item>
|
|
|
|
<CircularProgress size={150} color="primary" />
|
|
|
|
</Grid>
|
|
|
|
<Grid item>
|
|
|
|
<Typography variant="h3">Loading Bitburner v{CONSTANTS.Version}</Typography>
|
|
|
|
</Grid>
|
|
|
|
{show && (
|
|
|
|
<Grid item>
|
|
|
|
<Typography>
|
|
|
|
If the game fails to load, consider <a href="?noScripts">killing all scripts</a>
|
|
|
|
</Typography>
|
|
|
|
</Grid>
|
|
|
|
)}
|
|
|
|
</Grid>
|
|
|
|
);
|
|
|
|
}
|