Merge pull request #21 from dazorni/show-previous-turn

Show the previous turn to the user

app/component/game-cell.js

@@ -19,6 +19,10 @@ class GameCell extends React.Component {
         playerClass = '-ptwo';
       }
 
+      if (this.props.isLastTurn) {
+        playerClass = playerClass + ' game-cell-last-turn';
+      }
+
       className = className + ' game-cell-marked game-cell-marked' + playerClass;
     }
 
@@ -31,6 +35,7 @@ class GameCell extends React.Component {
 }
 
 GameCell.propTypes = {
+  isLastTurn: React.PropTypes.bool.isRequired,
   position: React.PropTypes.any.isRequired,
   onTurn: React.PropTypes.func.isRequired
 }

app/component/game-field.js

@@ -50,6 +50,7 @@ class GameField extends React.Component {
         field={this.props.field}
         onTurn={this.props.onTurn}
         marked={cell.marked}
+        isLastTurn={cell.isLastTurn}
         isStartingPlayer={cell.isStartingPlayer} />
     });
   }

app/component/game.js

@@ -35,7 +35,7 @@ class Game extends React.Component {
 			const cells = [];
 
 	    for (let inc = 0; inc <= 8; inc++) {
-	        cells.push({position: this._getPosition(field, inc), marked: false, isStartingPlayer: false});
+	        cells.push({position: this._getPosition(field, inc), marked: false, isStartingPlayer: false, isLastTurn: false});
 	    }
 
 			fields.push({ position: field, won: false, player: null, cells: cells, next: false})
@@ -200,11 +200,20 @@ class Game extends React.Component {
 		const fields = this.state.fields;
 
 		fields.map(field => {
+			field.cells.map(cell => {
+				cell.isLastTurn = false;
+
+				return cell;
+			});
+
 			if (field.position == turn.Field) {
 				field.cells.map(cell => {
+					cell.isLastTurn = false;
+
 					if (cell.position == turn.Position) {
-						cell.marked = true
-						cell.isStartingPlayer = this.state.startingPlayer == username
+						cell.marked = true;
+						cell.isStartingPlayer = this.state.startingPlayer == username;
+						cell.isLastTurn = true;
 					}
 
 					return cell

app/style/elements/_game.scss

@@ -137,5 +137,10 @@
 				}
 			}
 		}
+
+		&.game-cell-last-turn {
+			z-index: 1;
+			transform: scale(1.1, 1.1);
+		}
 	}
 }

package.json

@@ -16,7 +16,7 @@
     "build:css:watch": "./node_modules/.bin/onchange app/style/**/* -- npm run build:css",
     "build:js": "./node_modules/.bin/webpack -d",
     "build:js:watch": "./node_modules/.bin/webpack -d --watch",
-    "build:js:prod": "./node_modules/.bin/webpack -p",
+    "build:js:prod": "./node_modules/.bin/webpack --progress -p",
     "build:fonts": "mkdir build/public/fonts && cp -R node_modules/font-awesome/fonts/* build/public/fonts",
     "build:views": "cp app/views/* build/public",
     "build:views:watch": "./node_modules/.bin/onchange app/views/**/* -- npm run build:views",

webpack.config.js

@@ -15,21 +15,16 @@ var config = {
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NoErrorsPlugin(),
-	new webpack.EnvironmentPlugin(["NODE_ENV"]),
+	  new webpack.EnvironmentPlugin(["NODE_ENV"]),
   ],
   module : {
     loaders : [
       {
         test : /.+.js$/,
         include : APP_DIR,
         loader : 'babel'
-      },
-      {
-        test: /bootstrap\/js\//,
-        loader: 'imports?jQuery=jquery'
-	  }
-	],
-
+      }
+	  ],
     preLoaders: [
       {
         test: /\.js?$/,