complete

.meteor/packages

 fourseven:scss
 maxharris9:classnames
 momentjs:moment
+fortawesome:fontawesome

.meteor/versions

 ejson@1.0.13
 es5-shim@4.6.15
 fastclick@1.0.13
+fortawesome:fontawesome@4.7.0
 fourseven:scss@4.5.0
 geojson-utils@1.0.10
 hot-code-push@1.0.4

imports/ui/App.jsx

 import React, { Component } from 'react';
 import './styles/App';
 import Board from './Board';
+import Info from './Info';
 
 export default class App extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			infoVisible: false
+		};
+	}
+
+	toggleInfo() {
+		this.setState({ infoVisible: !this.state.infoVisible });
+	}
+
 	render() {
 		return (
 			<div id="app-container">
-				<header>ESPTrainer</header>
+				<header>
+					<h1>ESPTrainer</h1>
+					<div className="flex-space" />
+					<div><i className="info fa fa-lg fa-info-circle" onClick={this.toggleInfo.bind(this)}/></div>
+				</header>
 				<main id="content">
-					{/*<div className="left" />*/}
 					<div className="center">
-						<Board />
-						{/*<Actions></Actions>*/}
+						{ this.state.infoVisible ? <Info /> : <Board /> }
 					</div>
-					{/*<div className="right" />*/}
 				</main>
-				<footer>Copyright © 2017 Coldiary</footer>
+				<footer>
+					<div>Copyright © 2017 Coldiary</div>
+					<div className="credits">Based on Russell Targ's ESPTrainer on iOS</div>
+				</footer>
 			</div>
 		);
 	}

imports/ui/Board.jsx

 		this.actions = [
 			{ label: 'Reset', action: this.reset.bind(this), active: () => true },
 			{ label: 'Pass', action: this.pass.bind(this), active: () => !this.state.end },
-			{ label: 'AddScore', action: () => this.registerScore(Math.floor(Math.random() * 100) % 24), active: () => true }
 		];
 		this.choices = [0, 1, 2, 3].map(i => this.choice.bind(this, i));
 	}

imports/ui/BoardLayout.jsx

 
 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">

imports/ui/Info.jsx

+import React, { Component, PropTypes } from 'react';
+import './styles/Info';
+
+export default class Info extends Component {
+	render() {
+		return <div className="Info">
+			<em>This program is a clone of the Russell Targ's App on the iOS platform. All credits goes to him.</em>
+			<div>Extract from the app:</div>
+			<blockquote>
+				<div>The player is presented with four colored squares. For each trial, one has been selected at random by the ESP Trainer. Your task is to choose the correct square.</div>
+				<div>If you succeed, you will [...] see a large color picture. Otherwise, the system lights up the correct square, and you proceed with the next trial.</div>
+				<div>The score indicator at the top counts the number of correct choices. [...] After 24 trials you may begin a new game.</div>
+			</blockquote>
+			<div>You can find the app at the link below :</div>
+			<a href="https://itunes.apple.com/fr/app/esp-trainer/id336882103?mt=8" className="apple-link" />
+		</div>;
+	}
+}

imports/ui/Score.jsx

 
 const Score = ({ score }) =>
 	<div className="score">
+		<h3>Correct</h3>
 		<div className="scale">
 			{ [...Array(25).keys()].map(x => <div key={x} className="grade" />) }
 		</div>

imports/ui/ScoreChart.jsx

 import React, { Component, PropTypes} from 'react';
 import Chart from 'chart.js';
 
-Chart.defaults.global.legend.labels.fontColor = '#fff';
-const dateFormat = 'DD/MM/YYYY H:ss';
-const ScoreScales = {
-	yAxes: [{
-		ticks: {
-			fontColor: "#fff",
-			stepSize: 6,
-			max: 24,
-		}
-	}],
-	xAxes: [{
-		type: 'time',
-		time: {
-			fontColor: "#fff",
-			fontSize: 10,
-			parser: moment.unix,
-			tooltipFormat: dateFormat,
-			//unit: 'day'
-		},
-		ticks: {
-			fontColor: "#fff"
-		}
-	}]
-};
+
+
 
 
 export default class ScoreChart extends Component {
 	constructor(props) {
 		super(props);
+		Chart.defaults.global.legend.labels.fontColor = '#fff';
 		this.chart = null;
+		this.scoreScales = {
+			yAxes: [{
+				ticks: {
+					fontColor: "#fff",
+					stepSize: 6,
+					max: 24,
+				}
+			}],
+			xAxes: [{
+				ticks: {
+					fontColor: "#fff",
+					fontSize: 10,
+				}
+			}]
+		};
 	}
 
 	shouldComponentUpdate(nextProps) {
 	componentDidMount() {
 		let labels = Object.keys(this.props.data);
 		const data = labels.map(key => this.props.data[key]);
-		// labels = labels.map(d => moment.unix(d).format(dateFormat).split(' '));
+		labels = labels.map(ts => moment.unix(ts).format('DD/MM/YYYY H:ss'));
 		this.chart = new Chart(this.canvas, {
 			type: 'line',
 			data: {
 				datasets: [{
 					label: 'Progression',
 					data: data,
-					backgroundColor: 'rgba(255, 99, 132, 0.2)',
-					borderColor: 'rgba(255,99,132,1)',
+					backgroundColor: 'rgba(33, 150, 243, 0.2)',
+					borderColor: 'rgba(33, 150, 243, 1)',
 					borderWidth: 1
 				}]
 			},
-			options: { scales: ScoreScales }
+			options: { scales: this.scoreScales }
 		});
 	}
 
 	componentDidUpdate() {
 		let labels = Object.keys(this.props.data);
 		const data = labels.map(key => this.props.data[key]);
-		// labels = labels.map(d => moment.unix(d).format(dateFormat).split(' '));
+		labels = labels.map(ts => moment.unix(ts).format('DD/MM/YYYY H:ss'));
 		this.chart.data.labels = labels;
 		this.chart.data.datasets[0].data = data;
 		this.chart.update();
 	}
 
 	render() {
-		return <canvas ref={(node) => this.canvas = node} width={400}/>;
+		return <canvas ref={(node) => this.canvas = node} />;
 	}
 }
 

imports/ui/styles/Actions.scss

   display: flex;
   justify-content: center;
   flex-wrap: wrap;
-  margin-top: 20px;
+  margin: 20px 0;
 
   button {
     background: white;

imports/ui/styles/App.scss

     display: flex;
     flex-direction: row;
     justify-content: center;
-    align-items: stretch;
+    align-items: flex-start;
 }
 
 header {
+    display: flex;
+    flex-direction: row;
     height: 64px;
     background: #23273c;
     color: white;
     line-height: 64px;
-    padding-left: 10px;
+    padding: 0 10px;
+
+    h1 {
+        letter-spacing: 0.1em;
+        font-size: 1.5em;
+    }
+
+    .flex-space {
+        flex: 1;
+    }
+    
+    .info {
+        cursor: pointer;
+    }
 }
 
 .left, .right {
     text-align: center;
     color: white;
     padding: 10px;
+
+    .credits {
+        margin-top: 10px;
+        font-size: 0.8em;
+    }
 }

imports/ui/styles/Board.scss

     align-items: stretch;
     max-width: 800px;
 
+    .title {
+        color: #fff;
+        text-align: center;
+        margin-bottom: 30px;
+        letter-spacing: 0.1em;
+    }
+
     .squares {
         position: relative;
         display: flex;

imports/ui/styles/Info.scss

+@import "compat";
+
+.Info {
+  max-width: 440px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #fff;
+  padding: 20px 50px;
+  @include box-sizing(border-box);
+  text-align: center;
+
+  blockquote  {
+    border-left: 3px solid grey;
+    padding-left: 10px;
+    text-align: justify;
+    margin: 20px 0;
+
+    &:before {
+      content: '“';
+      float: left;
+      font-size: 2em;
+      margin-right: 20px;
+    }
+
+    &:after {
+      content: '”';
+      float: right;
+      font-size: 2em;
+      margin-top: -25px;
+    }
+
+  }
+
+  * {
+    margin-bottom: 10px;
+  }
+
+  .apple-link {
+    display: inline-block;
+    overflow: hidden;
+    margin-top: 20px;
+    background: url(//linkmaker.itunes.apple.com/assets/shared/badges/fr-fr/appstore-lrg.svg) no-repeat;
+    width: 135px;
+    height: 40px;
+    background-size: contain;
+    cursor: pointer;
+  }
+  
+}

imports/ui/styles/Score.scss

   flex-direction: column;
   margin-bottom: 50px;
 
+  h3 {
+    color: #fff;
+    margin-bottom: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+  }
+
   .current-score {
     background: #fff;
     height: 3px;
       @mixin grade-label($number) {
         content: quote(inspect($number));
         position: absolute;
-        top: -20px;
-        @if($number > 10) { left: -8px; }
-        @else { left: -4px; }
+        font-size: 0.7em;
+        top: -15px;
+        @if($number > 10) { left: -5px; }
+        @else { left: -2px; }
         color: white;
       }
 

imports/ui/styles/Square.scss

 @import "gradient";
 @import "shadow";
+@import "compat";
 
 $square-blue: blue;
 $square-green: green;
         @if($inverted) { @include gradient(lighten($color, 20), $color, $direction); }
         @else { @include gradient($color, lighten($color, 20), $direction); }
 
-        &.highlighted { @include radial-gradient($color); }
+        &.highlighted {
+            @include radial-gradient($color);
+            @include scale(1.1);
+        }
 
         &.disabled {
             $color: desaturate($color, 50);

imports/ui/styles/_compat.scss

+@mixin scale($amount) {
+  -webkit-transform: scale($amount);
+  -moz-transform: scale($amount);
+  -ms-transform: scale($amount);
+  -o-transform: scale($amount);
+  transform: scale($amount);
+}
+
+@mixin box-sizing($value) {
+  -webkit-box-sizing: $value;
+  -moz-box-sizing: $value;
+  box-sizing: $value;
+}