hakatashi/flag-matcher.html

## flag-matcher.html
<!DOCTYPE html>
<html>
  <head>
    <title>CTF Flag Matcher</title>
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.js" charset="utf-8"></script>
    <script type="text/jsx" src="flag-matcher.jsx"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/darkly/bootstrap.min.css" rel="stylesheet">
    <style>
      h1 {
        text-align: center;
        font-size: 4em;
      }

      h2 {
        margin: 0 0 0.5em;
      }

      .name-area {
        width: 40%;
      }

      .problems {
        padding: 0;
      }

      .problem {
        padding: 1em;
        background: #555;
        border-radius: 5px;
        margin: 1em 0;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>CTF Flag Matcher</h1>
      <div id="container"></div>
    </div>
  </body>
</html>

## flag-matcher.jsx
class NameInput extends React.Component {
	constructor(props) {
		super(props);
		this.state = {name: ''};
	}

	onInput(event) {
		this.setState({name: event.target.value});
	}

	render() {
		return <div className="name-area form-group">
			Your Name: <input className="form-control" type="text" onInput={this.onInput.bind(this)}></input>
		</div>;
	}
}

class Problem extends React.Component {
	constructor(props) {
		super(props);
		this.state = {solvers: props.problem.solvers};
	}

	onClick(event) {
		const flag = ReactDOM.findDOMNode(this.refs.flag).value;

		if (this.props.problem.flag === flag) {
			alert('そうだよ');
			const name = this.props.getName();
			this.setState({solvers: this.state.solvers.concat([name])});
		} else {
			alert('ちがうよ');
		}
	}

	render() {
		return <li className="problem">
			<h2>{this.props.problem.title}</h2>
			<div className="form-group">
				<label className="control-label">Flag</label>
				<input className="form-control" type="password" ref="flag"></input>
			</div>
			<button className="btn btn-default submit-button" onClick={this.onClick.bind(this)}>Check</button>
			<h3>Solvers</h3>
			<ul>
				{this.state.solvers.map(solver => (
					<li key={solver}>{solver}</li>
				))}
			</ul>
		</li>;
	}
}

class Problems extends React.Component {
	render() {
		return <ul className="problems">
			{this.props.problems.map(problem => (
				<Problem key={problem.title} problem={problem} getName={this.props.getName}/>
			))}
		</ul>;
	}
}

class ProblemForm extends React.Component {
	onSubmit(event) {
		event.preventDefault();

		const title = event.target.title.value;
		const flag = event.target.flag.value;

		this.props.pushProblem({title, flag});
	}

	render() {
		return <form className="add-problem" onSubmit={this.onSubmit.bind(this)}>
			<div className="form-group">
				<label htmlFor="title">Title</label>
				<input type="text" className="form-control" id="title" name="title"/>
			</div>
			<div className="form-group">
				<label htmlFor="flag">Flag</label>
				<input type="text" className="form-control" id="flag" name="flag" placeholder="flag{xxxxx}"/>
			</div>
			<button type="submit" className="btn btn-primary">Add Problem</button>
		</form>;
	}
}

class Matcher extends React.Component {
	constructor(props) {
		super(props);
		this.state = {problems: [], name: 'noname'};
	}

	pushProblem(problem) {
		this.setState({problems: this.state.problems.concat([problem])});
	}

	getName() {
		return this.refs.nameInput.state.name;
	}

	render() {
		return <div className="matcher">
			<NameInput ref="nameInput"/>
			<Problems problems={this.state.problems} getName={this.getName.bind(this)}/>
			<ProblemForm pushProblem={this.pushProblem.bind(this)}/>
		</div>;
	}
}

const matcher = ReactDOM.render(<Matcher/>, document.getElementById('container'));

matcher.setState({problems: [{
	title: 'sanity check',
	flag: 'flag{hogehoge}',
	solvers: ['hakatashi', 'cookies'],
}, {
	title: 'yet another problem',
	flag: 'flag{fugafuga}',
	solvers: ['satos'],
}]});
	<!DOCTYPE html>
	<html>
	<head>
	<title>CTF Flag Matcher</title>
	<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
	<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
	<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
	<script src="https://code.jquery.com/jquery-3.1.1.js" charset="utf-8"></script>
	<script type="text/jsx" src="flag-matcher.jsx"></script>
	<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/darkly/bootstrap.min.css" rel="stylesheet">
	<style>
	h1 {
	text-align: center;
	font-size: 4em;
	}

	h2 {
	margin: 0 0 0.5em;
	}

	.name-area {
	width: 40%;
	}

	.problems {
	padding: 0;
	}

	.problem {
	padding: 1em;
	background: #555;
	border-radius: 5px;
	margin: 1em 0;
	list-style: none;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1>CTF Flag Matcher</h1>
	<div id="container"></div>
	</div>
	</body>
	</html>
	class NameInput extends React.Component {
	constructor(props) {
	super(props);
	this.state = {name: ''};
	}

	onInput(event) {
	this.setState({name: event.target.value});
	}

	render() {
	return <div className="name-area form-group">
	Your Name: <input className="form-control" type="text" onInput={this.onInput.bind(this)}></input>
	</div>;
	}
	}

	class Problem extends React.Component {
	constructor(props) {
	super(props);
	this.state = {solvers: props.problem.solvers};
	}

	onClick(event) {
	const flag = ReactDOM.findDOMNode(this.refs.flag).value;

	if (this.props.problem.flag === flag) {
	alert('そうだよ');
	const name = this.props.getName();
	this.setState({solvers: this.state.solvers.concat([name])});
	} else {
	alert('ちがうよ');
	}
	}

	render() {
	return <li className="problem">
	<h2>{this.props.problem.title}</h2>
	<div className="form-group">
	<label className="control-label">Flag</label>
	<input className="form-control" type="password" ref="flag"></input>
	</div>
	<button className="btn btn-default submit-button" onClick={this.onClick.bind(this)}>Check</button>
	<h3>Solvers</h3>
	<ul>
	{this.state.solvers.map(solver => (
	<li key={solver}>{solver}</li>
	))}
	</ul>
	</li>;
	}
	}

	class Problems extends React.Component {
	render() {
	return <ul className="problems">
	{this.props.problems.map(problem => (
	<Problem key={problem.title} problem={problem} getName={this.props.getName}/>
	))}
	</ul>;
	}
	}

	class ProblemForm extends React.Component {
	onSubmit(event) {
	event.preventDefault();

	const title = event.target.title.value;
	const flag = event.target.flag.value;

	this.props.pushProblem({title, flag});
	}

	render() {
	return <form className="add-problem" onSubmit={this.onSubmit.bind(this)}>
	<div className="form-group">
	<label htmlFor="title">Title</label>
	<input type="text" className="form-control" id="title" name="title"/>
	</div>
	<div className="form-group">
	<label htmlFor="flag">Flag</label>
	<input type="text" className="form-control" id="flag" name="flag" placeholder="flag{xxxxx}"/>
	</div>
	<button type="submit" className="btn btn-primary">Add Problem</button>
	</form>;
	}
	}

	class Matcher extends React.Component {
	constructor(props) {
	super(props);
	this.state = {problems: [], name: 'noname'};
	}

	pushProblem(problem) {
	this.setState({problems: this.state.problems.concat([problem])});
	}

	getName() {
	return this.refs.nameInput.state.name;
	}

	render() {
	return <div className="matcher">
	<NameInput ref="nameInput"/>
	<Problems problems={this.state.problems} getName={this.getName.bind(this)}/>
	<ProblemForm pushProblem={this.pushProblem.bind(this)}/>
	</div>;
	}
	}

	const matcher = ReactDOM.render(<Matcher/>, document.getElementById('container'));

	matcher.setState({problems: [{
	title: 'sanity check',
	flag: 'flag{hogehoge}',
	solvers: ['hakatashi', 'cookies'],
	}, {
	title: 'yet another problem',
	flag: 'flag{fugafuga}',
	solvers: ['satos'],
	}]});