Implemented grid with baisc cards

Author: azadorozhniy

src/app.js

@@ -4,6 +4,7 @@ var bodyParser = require('body-parser');
 var cookieParser = require('cookie-parser');
 var setupRoutes = require('./server/routes');
 var setupPassport = require('./server/auth/setup');
+var cors = require('cors');
 
 var app = express();
 
@@ -20,6 +21,7 @@ app.use(express.static(__dirname + '/public'));
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded());
 app.use(cookieParser());
+app.use(cors());
 
 setupPassport(app);
 setupRoutes(app);

src/public/js/actions/index.js

@@ -1,5 +1,7 @@
 var Reflux = require('reflux');
 
 module.exports = Reflux.createActions([
-	'fetchCards'
+	'fetchCards',
+	'cardsMatchedWin',
+	'cardsMatchFailed'
 ]);

src/public/js/app.jsx

@@ -16,3 +16,5 @@ var routes = (
 Router.run(routes, function runner (Handler, state) {
 	React.render(<Handler params={state.params}/>, document.body);
 });
+
+module.exports = {};

src/public/js/components/card.jsx

@@ -0,0 +1,60 @@
+var React = require('react');
+var Reflux = require('reflux');
+var cx = React.addons.classSet;
+
+
+module.exports = React.createClass({
+
+	getInitialState: function () {
+		return {
+			opened: false
+		};
+	},
+
+	onClickCaught: function () {
+		if (!this.state.opened) {
+			this.props.onCardClicked(this);
+		}
+	},
+
+	reveal: function () {
+		this.setState({
+			opened: true
+		});
+	},
+
+	fail: function () {
+		this.setState({
+			opened: true,
+			wrong: true
+		});
+		setTimeout((function () {
+			this.setState({
+				opened: false,
+				wrong: false
+			});
+		}).bind(this), 2000);
+	},
+
+	succeed: function () {
+		this.setState({flipped: true, correct: true});
+	},
+
+
+	render: function () {
+		var classes = cx({
+			'opened': this.state.opened,
+			'correct': this.state.correct,
+			'wrong': this.state.wrong
+		});
+
+		return (
+			<div className={'brick '+ (classes || '')} onClick={this.onClickCaught}>
+				<div className="front">?</div>
+				<div className="back">
+					<img src={this.props.url} className="img-thumbnail"/>
+				</div>
+			</div>
+		);
+	}
+});

src/public/js/screens/main/grid/card/card.jsx

@@ -0,0 +1 @@
+module.exports = require('./card.jsx');

src/public/js/screens/main/grid/card/index.js

@@ -0,0 +1,63 @@
+var React = require('react');
+var Reflux = require('reflux');
+var _ = require('lodash');
+
+var cardsStore = require('stores/cards/cards-store');
+var actions = require('actions');
+
+function handleFirstCard (card) {
+	this.setState({
+		prevCard: card,
+		status: 'hasOneChosenCard'
+	});
+	card.open();
+}
+
+function handleSecondCard (card) {
+	var prevCard = this.state.prevCard;
+	if (card === prevCard) {
+		prevCard.succeed();
+		actions.cardsMatchedWin()
+	} else {
+		actions.cardsMatchFailed()
+	}
+	this.setState({
+		prevCard: null,
+		status: 'noCardsSelected'
+	});
+}
+
+module.exports = React.createClass({
+
+	mixins: [
+		Reflux.connect(cardsStore, 'cards')
+	],
+
+	getInitialState: function getInitialState () {
+		return {prevCard: null, status: 'noCardsSelected'};
+	},
+
+	chooseCurrentActivity: function chooseCurrentActivity () {
+		var map = {};
+		map['noCardsSelected'] = handleFirstCard.bind(this);
+		map['hasOneChosenCard'] = handleSecondCard.bind(this);
+		return map;
+	},
+
+	onCardClicked: function (card) {
+		var fn = this.chooseCurrentActivity()[this.state.status] || _.noop();
+		fn(card);
+	}
+	,
+	render: function () {
+		var renderedCards = this.state.cards.map(function (card, index) {
+			return <Card card={card} key={index} onCardClicked={this.onCardClicked}/>;
+		}, this);
+
+		return (
+			<div>
+				{renderedCards}
+			</div>
+		);
+	}
+});

src/public/js/screens/main/grid/grid.jsx

@@ -0,0 +1 @@
+module.exports = require('./grid.jsx');

src/public/js/screens/main/grid/index.js

@@ -0,0 +1 @@
+module.exports = require("./main.jsx");

src/public/js/screens/main/index.js

@@ -1,17 +1,19 @@
 var React = require('react');
 var Reflux = require('reflux');
 
+var PlayGrid = require('./grid');
+var Stats = require('./stats');
 
 module.exports = React.createClass({
 	render: function () {
 		return (
 			<div className="container">
 				<div className="row">
-					<div className="small-8">
-						Hellos
+					<div className="col-lg-8 col-md-7 col-sm-6">
+						<PlayGrid/>
 					</div>
-					<div className="small-4">
-						World
+					<div className="col-lg-4 col-md-5 col-sm-6">
+						<Stats/>
 					</div>
 				</div>
 			</div>