2021-09-05 01:09:30 +02:00
|
|
|
import React from "react";
|
2021-06-13 17:05:40 +02:00
|
|
|
import { StdButton } from "../../ui/React/StdButton";
|
2021-09-17 01:23:03 +02:00
|
|
|
import Grid from "@mui/material/Grid";
|
2021-06-13 17:05:40 +02:00
|
|
|
|
|
|
|
interface IProps {
|
2021-09-05 01:09:30 +02:00
|
|
|
Location: string;
|
|
|
|
Difficulty: number;
|
|
|
|
MaxLevel: number;
|
|
|
|
start: () => void;
|
|
|
|
cancel: () => void;
|
2021-06-13 17:05:40 +02:00
|
|
|
}
|
|
|
|
|
2021-08-11 02:54:43 +02:00
|
|
|
function arrowPart(color: string, length: number): JSX.Element {
|
2021-09-05 01:09:30 +02:00
|
|
|
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>
|
|
|
|
);
|
2021-08-11 02:54:43 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
function coloredArrow(difficulty: number): JSX.Element {
|
2021-09-05 01:09:30 +02:00
|
|
|
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)}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
2021-08-11 02:54:43 +02:00
|
|
|
}
|
|
|
|
|
2021-06-13 17:05:40 +02:00
|
|
|
export function Intro(props: IProps): React.ReactElement {
|
2021-09-05 01:09:30 +02:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Grid container spacing={3}>
|
|
|
|
<Grid item xs={10}>
|
|
|
|
<h1>Infiltrating {props.Location}</h1>
|
2021-06-13 17:05:40 +02:00
|
|
|
</Grid>
|
2021-09-05 01:09:30 +02:00
|
|
|
<Grid item xs={10}>
|
|
|
|
<h2>Maximum level: {props.MaxLevel}</h2>
|
|
|
|
</Grid>
|
|
|
|
<Grid item xs={10}>
|
|
|
|
<pre>[{coloredArrow(props.Difficulty)}]</pre>
|
2021-09-05 07:17:30 +02:00
|
|
|
<pre>{` ^ ^ ^ ^`}</pre>
|
|
|
|
<pre>{` Trivial Normal Hard Impossible`}</pre>
|
2021-09-05 01:09:30 +02:00
|
|
|
</Grid>
|
|
|
|
<Grid item xs={10}>
|
|
|
|
<p>
|
2021-09-09 05:47:34 +02:00
|
|
|
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.
|
2021-09-05 01:09:30 +02:00
|
|
|
</p>
|
|
|
|
<br />
|
2021-09-09 05:47:34 +02:00
|
|
|
<p>The minigames you play are randomly selected. It might take you few tries to get used to them.</p>
|
2021-09-05 01:09:30 +02:00
|
|
|
<br />
|
|
|
|
<p>No game require use of the mouse.</p>
|
|
|
|
<br />
|
|
|
|
<p>Spacebar is the default action/confirm button.</p>
|
|
|
|
<br />
|
|
|
|
<p>Everything that uses arrow can also use WASD</p>
|
|
|
|
<br />
|
|
|
|
<p>Sometimes the rest of the keyboard is used.</p>
|
|
|
|
</Grid>
|
|
|
|
<Grid item xs={3}>
|
|
|
|
<StdButton onClick={props.start} text={"Start"} />
|
|
|
|
</Grid>
|
|
|
|
<Grid item xs={3}>
|
|
|
|
<StdButton onClick={props.cancel} text={"Cancel"} />
|
|
|
|
</Grid>
|
|
|
|
</Grid>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|