added chart

.meteor/packages

@@ -22,3 +22,4 @@ insecure@1.0.7                # Allow all DB writes from clients (for prototypin
 meyerweb-reset
 fourseven:scss
 maxharris9:classnames
+momentjs:moment

.meteor/versions

@@ -47,6 +47,7 @@ mobile-experience@1.0.4
 mobile-status-bar@1.0.14
 modules@0.7.9
 modules-runtime@0.7.9
+momentjs:moment@2.10.6
 mongo@1.1.16
 mongo-id@1.0.6
 npm-mongo@2.2.24

imports/ui/App.jsx

@@ -6,7 +6,7 @@ export default class App extends Component {
 	render() {
 		return (
 			<div id="app-container">
-				<header>-</header>
+				<header>ESPTrainer</header>
 				<main id="content">
 					{/*<div className="left" />*/}
 					<div className="center">

imports/ui/Board.jsx

@@ -7,19 +7,18 @@ class Board extends Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			end: false,
-			win: false,
-			trials: 0,
-			score: 0,
+			end: false, win: false,
+			trials: 0, score: 0,
 			squares: [ false, false, false, false ],
-			image: "/images/img1.jpg"
+			image: "/images/img1.jpg",
+			scores: JSON.parse(localStorage.getItem('esp-scores') || "{}")
 		};
 		this.actions = [
 			{ label: 'Reset', action: this.reset.bind(this), active: () => true },
-			{ label: 'Pass', action: this.pass.bind(this), active: () => !this.state.end }
+			{ 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.choices.push(this.choice.bind(this, i)));
+		this.choices = [0, 1, 2, 3].map(i => this.choice.bind(this, i));
 	}
 
 	fail(corrected) {
@@ -34,12 +33,21 @@ class Board extends Component {
 		this.props.setTimeout(() => this.setState({ win: false }), 2000);
 	}
 
+	registerScore(score) {
+		this.setState({ scores: update(this.state.scores, {
+			$merge: { [moment().unix()]: score } })
+		}, () => localStorage.setItem('esp-scores', JSON.stringify(this.state.scores)));
+	}
+
 	choice(answer) {
 		let corrected = Math.floor(Math.random() * 10) % 4;
 		this.setState({
 			trials: this.state.trials + 1,
 			image: `images/img${this.state.trials + 1}.jpg`,
 			end: this.state.trials + 1 >= 24
+		}, () => {
+			if (this.state.trials >= 24)
+				this.registerScore(this.state.score);
 		});
 		if (answer === corrected)
 			this.win();
@@ -48,7 +56,7 @@ class Board extends Component {
 	}
 
 	reset() {
-		this.setState({ trials: 0, image: 'images/img0.jpg', score: 0 });
+		this.setState({ trials: 0, image: 'images/img0.jpg', score: 0, end: false });
 	}
 
 	pass() {
@@ -59,7 +67,7 @@ class Board extends Component {
 	render() {
 		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} />;
+							trials={this.state.trials} image={this.state.image} scores={this.state.scores}/>;
 	}
 }
 

imports/ui/BoardLayout.jsx

@@ -5,9 +5,10 @@ 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, image, choices, highlighted }) =>
+const BoardLayout = ({ active, win, actions, trials, score, scores, image, choices, highlighted }) =>
 	<div className="board">
 		<Score score={score} />
 		<div className="squares">
@@ -25,6 +26,7 @@ const BoardLayout = ({ active, win, actions, trials, score, image, choices, high
 		</div>
 		<Trials count={trials} />
 		<Actions actions={actions} />
+		<ScoreChart id="scoreChart" data={scores}/>
 	</div>;
 
 BoardLayout.propTypes = {
@@ -33,6 +35,7 @@ BoardLayout.propTypes = {
 	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

imports/ui/Score.jsx

@@ -4,11 +4,9 @@ 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'}} />)
-			}
+			{ [...Array(25).keys()].map(x => <div key={x} className="grade" />) }
 		</div>
-		<div className="current-score" style={{ width: (score * 20) + 'px' }} />
+		<div className="current-score" style={{ width: (score / 24) * 100 + '%' }} />
 	</div>;
 
 Score.propTypes = { score: PropTypes.number.isRequired };

imports/ui/ScoreChart.jsx

@@ -0,0 +1,77 @@
+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);
+		this.chart = null;
+	}
+
+	shouldComponentUpdate(nextProps) {
+		return this.props.data !== nextProps.data;
+	}
+
+	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(' '));
+		this.chart = new Chart(this.canvas, {
+			type: 'line',
+			data: {
+				labels: labels,
+				datasets: [{
+					label: 'Progression',
+					data: data,
+					backgroundColor: 'rgba(255, 99, 132, 0.2)',
+					borderColor: 'rgba(255,99,132,1)',
+					borderWidth: 1
+				}]
+			},
+			options: { scales: 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(' '));
+		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}/>;
+	}
+}
+
+Chart.propTypes = {
+	id: PropTypes.string.isRequired,
+	data: PropTypes.object.isRequired
+};

imports/ui/styles/Actions.scss

@@ -4,7 +4,6 @@
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
-  width: 300px;
   margin-top: 20px;
 
   button {

imports/ui/styles/App.scss

@@ -10,8 +10,9 @@
 main {
     flex: 1;
     display: flex;
+    flex-direction: row;
     justify-content: center;
-    flex-direction: column;
+    align-items: stretch;
 }
 
 header {
@@ -31,7 +32,8 @@ header {
     margin: 30px;
     padding: 20px;
     display: flex;
-    flex: 1;
+    min-width: 440px;
+    align-items: stretch;
     flex-direction: column;
     background-color: rgba(0,0,0,0.1);
 }
@@ -43,6 +45,8 @@ header {
 
     main {
         flex-direction: row;
+        justify-content: center;
+        align-items: flex-start;
     }
 
     .center {

imports/ui/styles/Board.scss

@@ -1,7 +1,8 @@
 .board {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: stretch;
+    max-width: 800px;
 
     .squares {
         position: relative;

imports/ui/styles/Image.scss

@@ -3,7 +3,7 @@
 .image {
   position: absolute;
   top: 9px;
-  left: 9px;
+  left: calc(50% - 112px);
   width: 224px;
   border-radius: 5px;
   border: 1px solid rgba(255, 255, 255, 0.5);

imports/ui/styles/Score.scss

@@ -1,33 +1,54 @@
+@import "gradient";
+
 .score {
   display: flex;
-  width: 480px;
   flex-direction: column;
   margin-bottom: 50px;
 
+  .current-score {
+    background: #fff;
+    height: 3px;
+    margin-top: 3px;
+  }
+
   .scale {
+    display: flex;
     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) */
+    justify-content: space-between;
+    margin-top: 1em;
+    position: relative;
+    @include rainbow-gradient();
 
     .grade {
-      height:5px;
-      position: absolute;
-      top: 0;
-    }
+      position: relative;
 
-  }
+      &:after {
+        background: white;
+        content: ' ';
+        display: block;
+        height: 5px;
+        position: absolute;
+        top: -1px;
+        width: 1px;
+      }
 
-  .current-score {
-    background: #fff;
-    height: 3px;
-    //width: 480px;
-    margin-top: 3px;
-  }
+      @mixin grade-label($number) {
+        content: quote(inspect($number));
+        position: absolute;
+        top: -20px;
+        @if($number > 10) { left: -8px; }
+        @else { left: -4px; }
+        color: white;
+      }
+
+      @mixin grade-labels($numbers...) {
+        @each $number in $numbers {
+          &:nth-child(#{$number + 1}):before { @include grade-label($number); }
+        }
+      }
 
+      @include grade-labels(0, 6, 12, 18, 24);
+    }
+  }
 }

imports/ui/styles/_gradient.scss

@@ -40,4 +40,12 @@
   background: -ms-radial-gradient(center, ellipse cover, $lighten 0%, $color 100%);
   background: radial-gradient(ellipse at center, $lighten 0%, $color 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{ie_hex_str($lighten)}', endColorstr='#{ie_hex_str($color)}', GradientType=1 );
+}
+
+@mixin rainbow-gradient() {
+  background: cyan; /* 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) */
 }

package.json

@@ -6,6 +6,7 @@
   },
   "dependencies": {
     "babel-runtime": "^6.20.0",
+    "chart.js": "^2.5.0",
     "meteor-node-stubs": "~0.2.4",
     "react": "^15.4.2",
     "react-addons-css-transition-group": "^15.4.2",