felixfoertsch/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2026-04-27 03:25:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

part 1 of converting gang to react

Browse Source
This commit is contained in:
Olivier Gagnon
2021-06-14 15:42:38 -04:00
parent 67e5e413e4
commit 25f546c691
18 changed files with 1251 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ui/React/CodingContractPopup.tsx
+39 -34
View File
@@ -1,4 +1,4 @@
import * as React from "react";
import React, { useState } from 'react';
import { KEY } from "../../../utils/helpers/keyCodes";
import { CodingContract, CodingContractType, CodingContractTypes } from "../../CodingContracts";
@@ -16,19 +16,14 @@ 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);
export function CodingContractPopup(props: IProps): React.ReactElement {
const [answer, setAnswer] = useState("");
function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
setAnswer(event.target.value);
}
setAnswer(event: React.ChangeEvent<HTMLInputElement>): void {
this.setState({ answer: event.target.value });
}
onInputKeydown(event: React.KeyboardEvent<HTMLInputElement>): void {
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 ...
@@ -36,31 +31,41 @@ export class CodingContractPopup extends React.Component<IProps, IState>{
if (event.keyCode === KEY.ENTER && value !== "") {
event.preventDefault();
this.props.onAttempt(this.state.answer);
props.onAttempt(answer);
} else if (event.keyCode === KEY.ESC) {
event.preventDefault();
this.props.onClose();
props.onClose();
}
}
render(): React.ReactNode {
const contractType: CodingContractType = CodingContractTypes[this.props.c.type];
const description = [];
for (const [i, value] of contractType.desc(this.props.c.data).split('\n').entries())
description.push(<span key={i} dangerouslySetInnerHTML={{__html: value+'<br />'}}></span>);
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>
)
}
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>
)
}