bitburner-src/src/ui/React/CodingContractPopup.tsx

import React, { useState } from 'react';
import { KEY } from "../../../utils/helpers/keyCodes";

import { CodingContract, CodingContractType, CodingContractTypes } from "../../CodingContracts";
import { ClickableTag, CopyableText } from "./CopyableText";
import { PopupCloseButton } from "./PopupCloseButton";

type IProps = {
    c: CodingContract;
    popupId: string;
    onClose: () => void;
    onAttempt: (answer: string) => void;
}

export function CodingContractPopup(props: IProps): React.ReactElement {
    const [answer, setAnswer] = useState("");

    function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
        setAnswer(event.target.value);
    }

    function onKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {
        // React just won't cooperate on this one. 
        // "React.KeyboardEvent<HTMLInputElement>" seems like the right type but
        // whatever ...
        const value = (event.target as any).value;

        if (event.keyCode === KEY.ENTER && value !== "") {
            event.preventDefault();
            props.onAttempt(answer);
        } else if (event.keyCode === KEY.ESC) {
            event.preventDefault();
            props.onClose();
        }
    }

    const contractType: CodingContractType = CodingContractTypes[props.c.type];
    const description = [];
    for (const [i, value] of contractType.desc(props.c.data).split('\n').entries()) 
        description.push(<span key={i} dangerouslySetInnerHTML={{__html: value+'<br />'}}></span>);
    return (
        <div>
            <CopyableText value={props.c.type} tag={ClickableTag.Tag_h1} />
            <br/><br/>
            <p>You are attempting to solve a Coding Contract. You have {props.c.getMaxNumTries() - props.c.tries} tries remaining, after which the contract will self-destruct.</p>
            <br/>
            <p>{description}</p>
            <br/>
            <input
                className="text-input"
                style={{ width:"50%",marginTop:"8px" }}
                autoFocus={true}
                placeholder="Enter Solution here"
                value={answer}
                onChange={onChange}
                onKeyDown={onKeyDown} />
            <PopupCloseButton
                popup={props.popupId}
                onClose={() => props.onAttempt(answer)}
                text={"Solve"} />
            <PopupCloseButton
                popup={props.popupId}
                onClose={props.onClose}
                text={"Close"} />
        </div>
    )
}