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>
  );
}