2021-05-04 01:46:04 +02:00
|
|
|
import * as React 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;
|
|
|
|
}
|
|
|
|
|
|
|
|
type IState = {
|
|
|
|
answer: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
export class CodingContractPopup extends React.Component<IProps, IState>{
|
|
|
|
constructor(props: IProps) {
|
|
|
|
super(props);
|
|
|
|
this.state = { answer: ''};
|
|
|
|
this.setAnswer = this.setAnswer.bind(this);
|
|
|
|
this.onInputKeydown = this.onInputKeydown.bind(this);
|
|
|
|
}
|
|
|
|
|
2021-05-29 20:48:56 +02:00
|
|
|
setAnswer(event: React.ChangeEvent<HTMLInputElement>): void {
|
2021-05-04 01:46:04 +02:00
|
|
|
this.setState({ answer: event.target.value });
|
|
|
|
}
|
|
|
|
|
2021-05-29 20:48:56 +02:00
|
|
|
onInputKeydown(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();
|
2021-05-04 01:46:04 +02:00
|
|
|
this.props.onAttempt(this.state.answer);
|
2021-05-29 20:48:56 +02:00
|
|
|
} else if (event.keyCode === KEY.ESC) {
|
|
|
|
event.preventDefault();
|
2021-05-04 01:46:04 +02:00
|
|
|
this.props.onClose();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
render(): React.ReactNode {
|
|
|
|
const contractType: CodingContractType = CodingContractTypes[this.props.c.type];
|
2021-05-29 18:48:58 +02:00
|
|
|
const description = [];
|
2021-05-04 01:46:04 +02:00
|
|
|
for (const [i, value] of contractType.desc(this.props.c.data).split('\n').entries())
|
2021-05-06 01:06:08 +02:00
|
|
|
description.push(<span key={i} dangerouslySetInnerHTML={{__html: value+'<br />'}}></span>);
|
2021-05-04 01:46:04 +02:00
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<CopyableText value={this.props.c.type} tag={ClickableTag.Tag_h1} />
|
|
|
|
<br/><br/>
|
|
|
|
<p>You are attempting to solve a Coding Contract. You have {this.props.c.getMaxNumTries() - this.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={this.state.answer}
|
|
|
|
onChange={this.setAnswer} onKeyDown={this.onInputKeydown} />
|
|
|
|
<PopupCloseButton popup={this.props.popupId} onClose={() => this.props.onAttempt(this.state.answer)} text={"Solve"} />
|
|
|
|
<PopupCloseButton popup={this.props.popupId} onClose={this.props.onClose} text={"Close"} />
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|