mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-10-23 18:23:15 +02:00
116 lines
3.5 KiB
TypeScript
116 lines
3.5 KiB
TypeScript
import React from "react";
|
|
import { Location } from "../../Locations/Location";
|
|
import Grid from "@mui/material/Grid";
|
|
import Typography from "@mui/material/Typography";
|
|
import Button from "@mui/material/Button";
|
|
import { numeralWrapper } from "../../ui/numeralFormat";
|
|
|
|
interface IProps {
|
|
Location: Location;
|
|
Difficulty: number;
|
|
MaxLevel: number;
|
|
start: () => void;
|
|
cancel: () => void;
|
|
}
|
|
|
|
function arrowPart(color: string, length: number): JSX.Element {
|
|
let arrow = "";
|
|
if (length <= 0) length = 0;
|
|
else if (length > 13) length = 13;
|
|
else {
|
|
length--;
|
|
arrow = ">";
|
|
}
|
|
return (
|
|
<span style={{ color: color }}>
|
|
{"=".repeat(length)}
|
|
{arrow}
|
|
{" ".repeat(13 - arrow.length - length)}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function coloredArrow(difficulty: number): JSX.Element {
|
|
if (difficulty === 0) {
|
|
return (
|
|
<span style={{ color: "white" }}>
|
|
{">"}
|
|
{" ".repeat(38)}
|
|
</span>
|
|
);
|
|
} else {
|
|
return (
|
|
<>
|
|
{arrowPart("white", difficulty * 13)}
|
|
{arrowPart("orange", (difficulty - 1) * 13)}
|
|
{arrowPart("red", (difficulty - 2) * 13)}
|
|
</>
|
|
);
|
|
}
|
|
}
|
|
|
|
export function Intro(props: IProps): React.ReactElement {
|
|
return (
|
|
<>
|
|
<Grid container spacing={3}>
|
|
<Grid item xs={10}>
|
|
<Typography variant="h4">Infiltrating {props.Location.name}</Typography>
|
|
</Grid>
|
|
<Grid item xs={10}>
|
|
<Typography variant="h5" color="primary">
|
|
Maximum level: {props.MaxLevel}
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={10}>
|
|
<Typography variant="h5" color="primary">
|
|
Difficulty: {numeralWrapper.format(props.Difficulty * 33.3333, "0")} / 100
|
|
</Typography>
|
|
</Grid>
|
|
|
|
{props.Difficulty > 1.5 && (
|
|
<Grid item xs={10}>
|
|
<Typography variant="h5" color="primary">
|
|
Warning: This location is too heavily guarded for your current stats, try training or finding an easier
|
|
location.
|
|
</Typography>
|
|
</Grid>
|
|
)}
|
|
|
|
<Grid item xs={10}>
|
|
<Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>[{coloredArrow(props.Difficulty)}]</Typography>
|
|
<Typography
|
|
sx={{ lineHeight: "1em", whiteSpace: "pre" }}
|
|
>{` ^ ^ ^ ^`}</Typography>
|
|
<Typography
|
|
sx={{ lineHeight: "1em", whiteSpace: "pre" }}
|
|
>{` Trivial Normal Hard Impossible`}</Typography>
|
|
</Grid>
|
|
<Grid item xs={10}>
|
|
<Typography>
|
|
Infiltration is a series of short minigames that get progressively harder. You take damage for failing them.
|
|
Reaching the maximum level rewards you with intel you can trade for money or reputation.
|
|
</Typography>
|
|
<br />
|
|
<Typography>
|
|
The minigames you play are randomly selected. It might take you few tries to get used to them.
|
|
</Typography>
|
|
<br />
|
|
<Typography>No game require use of the mouse.</Typography>
|
|
<br />
|
|
<Typography>Spacebar is the default action/confirm button.</Typography>
|
|
<br />
|
|
<Typography>Everything that uses arrow can also use WASD</Typography>
|
|
<br />
|
|
<Typography>Sometimes the rest of the keyboard is used.</Typography>
|
|
</Grid>
|
|
<Grid item xs={3}>
|
|
<Button onClick={props.start}>Start</Button>
|
|
</Grid>
|
|
<Grid item xs={3}>
|
|
<Button onClick={props.cancel}>Cancel</Button>
|
|
</Grid>
|
|
</Grid>
|
|
</>
|
|
);
|
|
}
|