Work in progress, game logic

.meteor/packages

@@ -20,3 +20,5 @@ shell-server@0.2.3            # Server-side component of the `meteor shell` comm
 autopublish@1.0.7             # Publish all data to the clients (for prototyping)
 insecure@1.0.7                # Allow all DB writes from clients (for prototyping)
 meyerweb-reset
+fourseven:scss
+maxharris9:classnames

.meteor/versions

@@ -24,6 +24,7 @@ ecmascript-runtime@0.3.15
 ejson@1.0.13
 es5-shim@4.6.15
 fastclick@1.0.13
+fourseven:scss@4.5.0
 geojson-utils@1.0.10
 hot-code-push@1.0.4
 html-tools@1.0.11
@@ -35,6 +36,7 @@ jquery@1.11.10
 launch-screen@1.1.1
 livedata@1.0.18
 logging@1.1.17
+maxharris9:classnames@0.0.1
 meteor@1.6.1
 meteor-base@1.0.4
 meyerweb-reset@1.0.7

imports/ui/Actions.jsx

@@ -0,0 +1,23 @@
+import React, { Component, 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>
+		);
+	}
+}
+
+Actions.propTypes = {
+	actions: PropTypes.arrayOf(PropTypes.shape({
+		label: PropTypes.string.isRequired,
+		action: PropTypes.func
+	})).isRequired
+};

imports/ui/App.css

@@ -1,40 +0,0 @@
-#app-container {
-    display: flex;
-    min-height: 100vh;
-    flex-direction: column;
-    background: #343b59; /* Old browsers */
-    background: -moz-linear-gradient(top, #343b59 0%, #3f487f 100%); /* FF3.6-15 */
-    background: -webkit-linear-gradient(top, #343b59 0%,#3f487f 100%); /* Chrome10-25,Safari5.1-6 */
-    background: linear-gradient(to bottom, #343b59 0%,#3f487f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#343b59', endColorstr='#3f487f',GradientType=0 ); /* IE6-9 */
-}
-
-#app-container #content {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-}
-
-header {
-    height: 64px;
-    background: #23273c;
-    color: white;
-    line-height: 64px;
-    padding-left: 10px;
-}
-
-.test {
-    min-width: 50%;
-    width: 500px;
-    margin: 30px 15px;
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-}
-
-footer {
-    background: #23273c;
-    text-align: center;
-    color: white;
-    padding: 10px;
-}

imports/ui/App.jsx

@@ -1,16 +1,19 @@
 import React, { Component } from 'react';
-import './App.css';
+import './styles/App';
+import Board from './Board';
 
 export default class App extends Component {
 	render() {
 		return (
 			<div id="app-container">
-				<header>ESPTrainer</header>
+				<header>-</header>
 				<main id="content">
-					<div className="test">
-						test
-						{/*<Board></Board>*/}
+					{/*<div className="left" />*/}
+					<div className="center">
+						<Board />
+						{/*<Actions></Actions>*/}
 					</div>
+					{/*<div className="right" />*/}
 				</main>
 				<footer>Copyright © 2017 Coldiary</footer>
 			</div>

imports/ui/Board.jsx

@@ -0,0 +1,70 @@
+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)

imports/ui/Image.jsx

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

imports/ui/Square.jsx

@@ -0,0 +1,18 @@
+import React, { Component, 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} />
+		);
+	}
+}
+
+Square.propTypes = {
+	color: PropTypes.string.isRequired,
+	click: PropTypes.func,
+	highlighted: PropTypes.bool
+};

imports/ui/Trials.jsx

@@ -0,0 +1,20 @@
+import React, { Component, 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>
+		);
+	}
+}
+
+Trials.defaultProps = {
+	count: 0
+};
+
+Trials.propTypes = {
+	count: PropTypes.number
+};

imports/ui/styles/Actions.scss

@@ -0,0 +1,25 @@
+@import "shadow";
+
+.actions {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  width: 300px;
+  margin-top: 20px;
+
+  button {
+    background: white;
+    border: 1px solid black;
+    @include shadow();
+    margin: 10px;
+    padding: 10px 20px;
+    text-transform: uppercase;
+    width: 100px;
+
+    &:active { box-shadow: none; }
+    &:focus  { outline: none; }
+    &:hover  { cursor: pointer; }
+
+  }
+
+}

imports/ui/styles/App.scss

@@ -0,0 +1,58 @@
+@import 'gradient';
+
+#app-container {
+    display: flex;
+    min-height: 100vh;
+    flex-direction: column;
+    @include linear-gradient(#343b59);
+}
+
+main {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+}
+
+header {
+    height: 64px;
+    background: #23273c;
+    color: white;
+    line-height: 64px;
+    padding-left: 10px;
+}
+
+.left, .right {
+    flex: 0 0 12em;
+    margin: 30px;
+}
+
+.center {
+    margin: 30px;
+    padding: 20px;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    background-color: rgba(0,0,0,0.1);
+}
+
+@media(min-width: 768px) {
+    .left, .right {
+        margin: 30px;
+    }
+
+    main {
+        flex-direction: row;
+    }
+
+    .center {
+        margin: 30px;
+    }
+}
+
+footer {
+    background: #23273c;
+    text-align: center;
+    color: white;
+    padding: 10px;
+}

imports/ui/styles/Board.scss

@@ -0,0 +1,17 @@
+.board {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .squares {
+        display: flex;
+        flex-direction: column;
+
+        .row {
+            display: flex;
+            justify-content: center;
+        }
+    }
+
+}
+

imports/ui/styles/Square.scss

@@ -0,0 +1,39 @@
+@import "gradient";
+@import "shadow";
+
+$square-blue: blue;
+$square-green: green;
+$square-red: red;
+$square-yellow: darken(yellow, 20);
+
+.square {
+    $size: 100px;
+
+    border-radius: 5px;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    height: $size;
+    margin: 10px;
+    width: $size;
+
+    @include shadow();
+
+    &:hover  { cursor: pointer; }
+    &:active { box-shadow: none; }
+    &:focus  { outline: none; }
+
+    @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); }
+    }
+
+    &.blue { @include square-color($square-blue, 'bottom', false); }
+    &.green { @include square-color($square-green, 'bottom', true); }
+    &.red { @include square-color($square-red, 'top', false); }
+    &.yellow { @include square-color($square-yellow, 'top', true); }
+
+}
+
+
+
+

imports/ui/styles/Trials.scss

@@ -0,0 +1,23 @@
+.trials {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+
+    & > div {
+        align-items: center;
+        background: rgba(0,0,0,0.3);
+        border-radius: 5px;
+        color: white;
+        display: flex;
+        padding: 10px 20px;
+    }
+
+    & span.text {
+        font-size: 0.8em;
+        letter-spacing: 0.1em;
+        margin-left: 10px;
+        text-transform: uppercase;
+    }
+}
+
+

imports/ui/styles/_gradient.scss

@@ -0,0 +1,43 @@
+@mixin gradient($one, $two, $direction) {
+  $deg: if($direction == 'top', 45deg, -45deg);
+  $word: if($direction == 'top', bottom, top);
+  $opposite: if($direction == 'top', top, bottom);
+  background: $one;
+  background: -moz-linear-gradient($deg, $one 0%, $two 100%);
+  background: -webkit-gradient(left $word, right $opposite, color-stop(0%, $one), color-stop(100%, $two));
+  background: -webkit-linear-gradient($deg, $one 0%, $two 100%);
+  background: -o-linear-gradient($deg, $one 0%, $two 100%);
+  background: -ms-linear-gradient($deg, $one 0%, $two 100%);
+  background: linear-gradient($deg, $one 0%, $two 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(
+                  startColorstr='#{ie_hex_str($one)}',
+                  endColorstr='#{ie_hex_str($two)}',
+                  GradientType=1
+  );
+}
+
+@mixin linear-gradient($color) {
+  $lighten: lighten($color, 10);
+  background: $color;
+  background: -moz-linear-gradient(top, $color 0%, $lighten 100%);
+  background: -webkit-linear-gradient(top, $color 0%, $lighten 100%);
+  background: linear-gradient(to bottom, $color 0%, $lighten 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(
+                  startColorstr='#{ie_hex_str($color)}',
+                  endColorstr='#{ie_hex_str($lighten)}',
+                  GradientType=0
+  );
+}
+
+
+@mixin radial-gradient($color) {
+  $lighten: lighten($color, 35);
+  background: $lighten;
+  background: -moz-radial-gradient(center, ellipse cover, $lighten 0%, $color 100%);
+  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, $lighten), color-stop(100%, $color));
+  background: -webkit-radial-gradient(center, ellipse cover, $lighten 0%, $color 100%);
+  background: -o-radial-gradient(center, ellipse cover, $lighten 0%, $color 100%);
+  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 );
+}

imports/ui/styles/_shadow.scss

@@ -0,0 +1,3 @@
+@mixin shadow() {
+  box-shadow: 0 2px 5px 1px rgba(0,0,0,0.5);
+}

package.json

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