bitburner-src/src/Infiltration/ui/Intro.tsx

import { IPlayer } from "../../PersonObjects/IPlayer";
import { IEngine } from "../../IEngine";
import React from 'react';
import { StdButton } from "../../ui/React/StdButton";
import Grid from '@material-ui/core/Grid';

interface IProps {
    Player: IPlayer;
    Engine: IEngine;
    Location: string;
    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}>
                <h1>Infiltrating {props.Location}</h1>
            </Grid>
            <Grid item xs={10}>
                <h2>Maximum level: {props.MaxLevel}</h2>
            </Grid>
            <Grid item xs={10}>
                
<pre>[{coloredArrow(props.Difficulty)}]</pre>
<pre> ^            ^            ^           ^</pre>
<pre> Trivial    Normal        Hard    Impossible</pre>
            </Grid>
            <Grid item xs={10}>
                <p>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.</p>
                <br />
                <p>The minigames you play are randomly selected. It might take you
                few tries to get used to them.</p>
                <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>
    </>)
}