created basic game w/ table and animations

src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-control.js

@@ -11,7 +11,11 @@ class GridControl extends React.Component {
 
         this.state = {
             grid: grid.state.grid,
-            updated: []
+            updated: [],
+            lastClicked: {
+                red: null,
+                blue: null
+            }
         };
     }
 
@@ -28,12 +32,13 @@ class GridControl extends React.Component {
             var currentField = this.refs[this.refString(row, col)];
 
             currentField.setState({
+                currentImage: this.state.grid[row][col],
                 currentObj: this.state.grid[row][col],
                 active: true
             });
 
             /**
-             * ez azért kell, mert amíg nem fut le a showAppropriateFields(), addig nem updatelődik a GridField.state
+             * TODO ez azért kell, mert amíg nem fut le a showAppropriateFields(), addig nem updatelődik a GridField.state
              */
             if (
                 this.state.grid[row][col] !== 0 &&
@@ -99,17 +104,56 @@ class GridControl extends React.Component {
     /**
      * Player control method
      * @param currentObject
+     * @param x
+     * @param y
      */
-    handlePlayers(currentObject) {
+    handleGridField(currentObject, x, y) {
         var userControl = this.refs.userControl,
+            gridFieldControl = this.refs[this.refString(x, y)],
             activePlayer = userControl.state.activePlayer ? 'blue' : 'red';
 
-        if (currentObject === 'm') {
-            userControl.refs[activePlayer].setState({
-                mines: userControl.refs[activePlayer].state.mines + 1
+        /** update last cliked grid field */
+        if (this.state.lastClicked[activePlayer] !== null) {
+            this.refs[this.refString(this.state.lastClicked[activePlayer][0], this.state.lastClicked[activePlayer][1])].setState({
+                lastClickedRed: false,
+                lastClickedBlue: false
+            });
+        }
+
+        if (!gridFieldControl.state.active) {
+            this.state.lastClicked[activePlayer] = [x, y];
+
+            /** If you found mine */
+            if (currentObject === 'm') {
+                userControl.setState({
+                    mines: userControl.state.mines - 1
+                });
+
+                userControl.refs[activePlayer].setState({
+                    mines: userControl.refs[activePlayer].state.mines + 1
+                });
+
+                this.state.lastClicked[activePlayer] = [x, y];
+
+                gridFieldControl.setState({
+                    currentImage: gridFieldControl.state.icons.root + gridFieldControl.state.icons.flag[activePlayer]
+                });
+            } else {
+                userControl.state.activePlayer = userControl.state.activePlayer ? 0 : 1;
+
+                /** It is a number */
+                if (!isNaN(currentObject)) {
+                    gridFieldControl.setState({
+                        currentImage: currentObject
+                    });
+                }
+            }
+
+            /** set-up last clicked */
+            gridFieldControl.setState({
+                lastClickedRed: activePlayer === 'red',
+                lastClickedBlue: activePlayer === 'blue'
             });
-        } else {
-            userControl.state.activePlayer = userControl.state.activePlayer ? 0 : 1;
         }
     }
 
@@ -120,7 +164,7 @@ class GridControl extends React.Component {
     onClick(coords) {
         var currentField = this.refs[this.refString(coords[0], coords[1])];
         this.showAppropriateFields(currentField, coords[0], coords[1]);
-        this.handlePlayers(this.state.grid[coords[0]][coords[1]]);
+        this.handleGridField(this.state.grid[coords[0]][coords[1]], coords[0], coords[1]);
     }
 
     renderGrid() {
@@ -131,7 +175,6 @@ class GridControl extends React.Component {
                 grid.push(
                     <GridField row={i}
                                col={k}
-                               obj={this.state.grid[i][k]}
                                ref={this.refString(i, k)}
                                key={i + k * Math.random() * 0.5}
                                onClick={this.onClick.bind(this, [i, k])}