mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-10-23 18:23:15 +02:00
64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
import React, { useState } from "react";
|
|
import { KEY } from "../../../utils/helpers/keyCodes";
|
|
|
|
import { CodingContract, CodingContractType, CodingContractTypes } from "../../CodingContracts";
|
|
import { ClickableTag, CopyableText } from "./CopyableText";
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
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}
|
|
/>
|
|
<button className={"std-button"} onClick={() => props.onAttempt(answer)}>
|
|
Solve
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|