ESPTrainer/imports/ui/BoardLayout.jsx

import React, { PropTypes } from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import Square from './Square';
import Trials from './Trials';
import Actions from './Actions';
import Image from './Image';
import Score from './Score';
import ScoreChart from './ScoreChart';
import './styles/Board';

const BoardLayout = ({ active, win, actions, trials, score, scores, image, choices, highlighted }) =>
	<div className="board">
		<div className="title">Tap the correct square to see a picture</div>
		<Score score={score} />
		<div className="squares">
			<div className="row">
				<Square color="green" click={choices[0]} highlighted={highlighted[0]} active={active} />
				<Square color="yellow" click={choices[1]} highlighted={highlighted[1]} active={active} />
			</div>
			<div className="row">
				<Square color="red" click={choices[2]} highlighted={highlighted[2]} active={active} />
				<Square color="blue" click={choices[3]} highlighted={highlighted[3]} active={active} />
			</div>
			<ReactCSSTransitionGroup transitionName="appear" transitionEnterTimeout={500} transitionLeaveTimeout={500} >
				{ win ? <Image src={image}/> : null }
			</ReactCSSTransitionGroup>
		</div>
		<Trials count={trials} />
		<Actions actions={actions} />
		<ScoreChart id="scoreChart" data={scores}/>
	</div>;

BoardLayout.propTypes = {
	active: PropTypes.bool,
	win: PropTypes.bool.isRequired,
	actions: Actions.propTypes.actions,
	trials: Trials.propTypes.count,
	score: Trials.propTypes.count,
	scores: Chart.propTypes.data,
	image: Image.propTypes.src,
	choices: PropTypes.arrayOf(PropTypes.func).isRequired,
	highlighted: PropTypes.arrayOf(PropTypes.bool).isRequired
};

export default BoardLayout;