ESPTrainer/imports/ui/Board.jsx

import React, { Component, PropTypes } from 'react';
import update from 'react-addons-update';
import ReactTimeout from 'react-timeout';
import Square from './Square';
import Trials from './Trials';
import Actions from './Actions';
import './styles/Board';

class Board extends Component {
	constructor(props) {
		super(props);
		this.state = {
			win: false,
			trials: 0,
			squares: [false, false, false, false],
			image: ""
		};
		this.actions = [
			{ label: 'Reset', action: this.reset.bind(this) },
			{ label: 'Pass', action: this.pass.bind(this) }
		];
	}

	fail(corrected) {
		this.setState({ squares: update(this.state.squares, { [corrected]: { $set: true } }) });
		this.props.setTimeout(() => this.setState({
			squares: update(this.state.squares, { [corrected]: { $set: false } })
		}), 1000);
	}

	win() {
		this.setState({ win: true });
		this.props.setTimeout(() => this.setState({ win: false }), 1000);
	}

	choice(answer) {
		let corrected = Math.floor(Math.random() * 10) % 4;
		this.setState({ trials: this.state.trials + 1 });
		if (answer === corrected)
			this.win();
		else
			this.fail(corrected);
	}

	reset() {}

	pass() {}

	render() {
		return (
			<div className="board">
				<div className="squares">
					<div className="row">
						<Square color="green" click={this.choice.bind(this, 0)} highlighted={this.state.squares[0]} />
						<Square color="yellow" click={this.choice.bind(this, 1)} highlighted={this.state.squares[1]} />
					</div>
					<div className="row">
						<Square color="red" click={this.choice.bind(this, 2)} highlighted={this.state.squares[2]} />
						<Square color="blue" click={this.choice.bind(this, 3)} highlighted={this.state.squares[3]} />
					</div>
				</div>
				{ this.state.win ? <Image src={this.state.image}/> : null }
				<Trials count={this.state.trials} />
				<Actions actions={this.actions}/>
			</div>
		);
	}
}

export default ReactTimeout(Board)