fonctionnal, to add scale

imports/ui/Actions.jsx

@@ -1,23 +1,16 @@
-import React, { Component, PropTypes } from 'react';
+import React, { PropTypes } from 'react';
 import './styles/Actions';
 
-export default class Actions extends Component {
-	render() {
-		return (
-			<div className="actions">
-				{
-					this.props.actions.map(action => (
-						<button key={action.label} onClick={action.action}>{action.label}</button>
-					))
-				}
-			</div>
-		);
-	}
-}
+const Actions = ({ actions }) => <div className="actions">
+	{ actions.map(action => <button key={action.label} disabled={!action.active()} onClick={action.action}>{action.label}</button>) }
+</div>;
 
 Actions.propTypes = {
 	actions: PropTypes.arrayOf(PropTypes.shape({
-		label: PropTypes.string.isRequired,
-		action: PropTypes.func
+		label: PropTypes.string,
+		action: PropTypes.func,
+		active: PropTypes.func
 	})).isRequired
-};
+};
+
+export default Actions;

imports/ui/Board.jsx

@@ -1,24 +1,25 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } 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';
+import BoardLayout from './BoardLayout';
 
 class Board extends Component {
 	constructor(props) {
 		super(props);
 		this.state = {
+			end: false,
 			win: false,
 			trials: 0,
-			squares: [false, false, false, false],
-			image: ""
+			score: 0,
+			squares: [ false, false, false, false ],
+			image: "/images/img1.jpg"
 		};
 		this.actions = [
-			{ label: 'Reset', action: this.reset.bind(this) },
-			{ label: 'Pass', action: this.pass.bind(this) }
+			{ label: 'Reset', action: this.reset.bind(this), active: () => true },
+			{ label: 'Pass', action: this.pass.bind(this), active: () => !this.state.end }
 		];
+		this.choices = [];
+		[0, 1, 2, 3].map(i => this.choices.push(this.choice.bind(this, i)));
 	}
 
 	fail(corrected) {
@@ -29,42 +30,37 @@ class Board extends Component {
 	}
 
 	win() {
-		this.setState({ win: true });
-		this.props.setTimeout(() => this.setState({ win: false }), 1000);
+		this.setState({ win: true, score: this.state.score + 1 });
+		this.props.setTimeout(() => this.setState({ win: false }), 2000);
 	}
 
 	choice(answer) {
 		let corrected = Math.floor(Math.random() * 10) % 4;
-		this.setState({ trials: this.state.trials + 1 });
+		this.setState({
+			trials: this.state.trials + 1,
+			image: `images/img${this.state.trials + 1}.jpg`,
+			end: this.state.trials + 1 >= 24
+		});
 		if (answer === corrected)
 			this.win();
 		else
 			this.fail(corrected);
 	}
 
-	reset() {}
+	reset() {
+		this.setState({ trials: 0, image: 'images/img0.jpg', score: 0 });
+	}
 
-	pass() {}
+	pass() {
+		let corrected = Math.floor(Math.random() * 10) % 4;
+		this.fail(corrected);
+	}
 
 	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>
-		);
+		return <BoardLayout win={this.state.win} choices={this.choices} score={this.state.score}
+							highlighted={this.state.squares} actions={this.actions} active={!this.state.end}
+							trials={this.state.trials} image={this.state.image} />;
 	}
 }
 
-export default ReactTimeout(Board)
+export default ReactTimeout(Board);

imports/ui/BoardLayout.jsx

@@ -0,0 +1,41 @@
+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 './styles/Board';
+
+const BoardLayout = ({ active, win, actions, trials, score, image, choices, highlighted }) =>
+	<div className="board">
+		<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} />
+	</div>;
+
+BoardLayout.propTypes = {
+	active: PropTypes.bool,
+	win: PropTypes.bool.isRequired,
+	actions: Actions.propTypes.actions,
+	trials: Trials.propTypes.count,
+	score: Trials.propTypes.count,
+	image: Image.propTypes.src,
+	choices: PropTypes.arrayOf(PropTypes.func).isRequired,
+	highlighted: PropTypes.arrayOf(PropTypes.bool).isRequired
+};
+
+export default BoardLayout;

imports/ui/Image.jsx

@@ -1,16 +1,8 @@
-import React, { Component, PropTypes } from 'react';
+import React, { PropTypes } from 'react';
 import './styles/Image';
 
-export default class Image extends Component {
-	render() {
-		return (
-			<div className="image">
-				<img src={this.props.image} alt=""/>
-			</div>
-		);
-	}
-}
+const Image = ({ src }) => <img className="image" src={src} alt=""/>;
 
-Image.propTypes = {
-	src: PropTypes.string.isRequired
-};
+Image.propTypes = { src: PropTypes.string.isRequired };
+
+export default Image;

imports/ui/Score.jsx

@@ -0,0 +1,16 @@
+import React, { PropTypes } from 'react';
+import './styles/Score';
+
+const Score = ({ score }) =>
+	<div className="score">
+		<div className="scale">
+			{
+				[...Array(25).keys()].map(x => <div key={x} className="grade" style={{left: (x * 20) + 'px'}} />)
+			}
+		</div>
+		<div className="current-score" style={{ width: (score * 20) + 'px' }} />
+	</div>;
+
+Score.propTypes = { score: PropTypes.number.isRequired };
+
+export default Score;

imports/ui/Square.jsx

@@ -1,18 +1,15 @@
-import React, { Component, PropTypes } from 'react';
+import React, { PropTypes } from 'react';
 import './styles/Square';
 
-export default class Square extends Component {
-	render() {
-		const classes = classNames('square', this.props.color, { 'highlighted': this.props.highlighted });
-		return (
-				<button className={classes} style={this.style}
-						onClick={this.props.click} />
-		);
-	}
-}
+const Square = ({color, click, highlighted, active}) =>
+	<button className={classNames('square', color, { highlighted, disabled: !active })}
+			onClick={click} disabled={!active}/>;
 
 Square.propTypes = {
 	color: PropTypes.string.isRequired,
 	click: PropTypes.func,
-	highlighted: PropTypes.bool
-};
+	highlighted: PropTypes.bool,
+	active: PropTypes.bool
+};
+
+export default Square;

imports/ui/Trials.jsx

@@ -1,20 +1,12 @@
-import React, { Component, PropTypes } from 'react';
+import React, { PropTypes } from 'react';
 import './styles/Trials';
 
-export default class Trials extends Component {
-	render() {
-		return (
-			<div className="trials">
-				<div><span className="number">{this.props.count}</span> <span className="text">trials</span></div>
-			</div>
-		);
-	}
-}
+const Trials = ({ count }) =>
+	<div className="trials">
+		<div><span className="number">{count}</span> <span className="text">trials</span></div>
+	</div>;
 
-Trials.defaultProps = {
-	count: 0
-};
+Trials.defaultProps = { count: 0 };
+Trials.propTypes = { count: PropTypes.number };
 
-Trials.propTypes = {
-	count: PropTypes.number
-};
+export default Trials;

imports/ui/styles/Board.scss

@@ -4,6 +4,7 @@
     align-items: center;
 
     .squares {
+        position: relative;
         display: flex;
         flex-direction: column;
 

imports/ui/styles/Image.scss

@@ -0,0 +1,29 @@
+@import "shadow";
+
+.image {
+  position: absolute;
+  top: 9px;
+  left: 9px;
+  width: 224px;
+  border-radius: 5px;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  @include shadow();
+}
+
+.appear-enter {
+  opacity: 0.01;
+}
+
+.appear-enter.appear-enter-active {
+  opacity: 1;
+  transition: opacity 500ms ease-in;
+}
+
+.appear-leave {
+  opacity: 1;
+}
+
+.appear-leave.appear-leave-active {
+  opacity: 0.01;
+  transition: opacity 300ms ease-in;
+}

imports/ui/styles/Score.scss

@@ -0,0 +1,33 @@
+.score {
+  display: flex;
+  width: 480px;
+  flex-direction: column;
+  margin-bottom: 50px;
+
+  .scale {
+    flex: 1;
+    position: relative;
+    //width: 220px;
+    height: 3px;
+    background: red; /* For browsers that do not support gradients */
+    background: -webkit-linear-gradient(left, cyan, blue, green, yellow, orange, red, violet); /* For Safari 5.1 to 6.0 */
+    background: -o-linear-gradient(right, cyan, blue, green, yellow, orange, red, violet); /* For Opera 11.1 to 12.0 */
+    background: -moz-linear-gradient(right, cyan, blue, green, yellow, orange, red, violet); /* For Firefox 3.6 to 15 */
+    background: linear-gradient(to right, cyan, blue, green, yellow, orange, red, violet); /* Standard syntax (must be last) */
+
+    .grade {
+      height:5px;
+      position: absolute;
+      top: 0;
+    }
+
+  }
+
+  .current-score {
+    background: #fff;
+    height: 3px;
+    //width: 480px;
+    margin-top: 3px;
+  }
+
+}

imports/ui/styles/Square.scss

@@ -24,7 +24,14 @@ $square-yellow: darken(yellow, 20);
     @mixin square-color($color, $direction, $inverted) {
         @if($inverted) { @include gradient(lighten($color, 20), $color, $direction); }
         @else { @include gradient($color, lighten($color, 20), $direction); }
+
         &.highlighted { @include radial-gradient($color); }
+
+        &.disabled {
+            $color: desaturate($color, 50);
+            @if($inverted) { @include gradient(lighten($color, 20), $color, $direction); }
+            @else { @include gradient($color, lighten($color, 20), $direction); }
+        }
     }
 
     &.blue { @include square-color($square-blue, 'bottom', false); }

package.json

@@ -8,6 +8,7 @@
     "babel-runtime": "^6.20.0",
     "meteor-node-stubs": "~0.2.4",
     "react": "^15.4.2",
+    "react-addons-css-transition-group": "^15.4.2",
     "react-addons-update": "^15.4.2",
     "react-dom": "^15.4.2",
     "react-timeout": "^1.0.0"