refactor grid control and grid field

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

@@ -11,7 +11,7 @@ class GridControl extends React.Component {
 
         this.state = {
             grid: grid.state.grid,
-            updated: [],
+            updatedFieldCache: [],
             lastClicked: {
                 red: null,
                 blue: null
@@ -38,27 +38,21 @@ class GridControl extends React.Component {
             });
 
             /**
-             * TODO ez azért kell, mert amíg nem fut le a showAppropriateFields(), addig nem updatelődik a GridField.state
+             * It must be cached because the GridField.state not updated until
+             * all showAppropriateFields() method runned out!!
              */
-            if (
-                this.state.grid[row][col] !== 0 &&
-                this.state.updated.indexOf(this.refString(row, col)) < 0 && !currentField.state.active
-            ) {
-                this.state.updated.push(this.refString(row, col));
-            }
+            if (this.state.updatedFieldCache.indexOf(this.refString(row, col)) < 0 && !currentField.state.active) {
+                this.state.updatedFieldCache.push(this.refString(row, col));
 
-            if (
-                this.state.grid[row][col] === 0 &&
-                this.state.updated.indexOf(this.refString(row, col)) < 0 && !currentField.state.active
-            ) {
-                this.state.updated.push(this.refString(row, col));
-
-                return {
-                    row: row,
-                    col: col
-                };
+                if (this.state.grid[row][col] === 0) {
+                    return {
+                        row: row,
+                        col: col
+                    };
+                }
             }
         }
+
         return false;
     }
 
@@ -83,8 +77,8 @@ class GridControl extends React.Component {
             active: true
         });
 
-        if (this.state.updated.indexOf(this.refString(row, col)) < 0) {
-            this.state.updated.push(this.refString(row, col));
+        if (this.state.updatedFieldCache.indexOf(this.refString(row, col)) < 0) {
+            this.state.updatedFieldCache.push(this.refString(row, col));
         }
 
         if (this.state.grid[row][col] === 0) {
@@ -167,7 +161,7 @@ class GridControl extends React.Component {
         this.handleGridField(this.state.grid[coords[0]][coords[1]], coords[0], coords[1]);
     }
 
-    renderGrid() {
+    renderGridFields() {
         var grid = [];
 
         for (var i = 0, j = this.state.grid.length; i < j; i++) {
@@ -193,7 +187,7 @@ class GridControl extends React.Component {
                     <UserControl ref="userControl" blue="Olcsó János" red="Eszet Lenke"/>
                 </div>
                 <div className="grid">
-                    {this.renderGrid()}
+                    {this.renderGridFields()}
                 </div>
             </div>
         );

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

@@ -48,24 +48,42 @@ class GridField extends React.Component {
 
     currentImage() {
         return isNaN(this.state.currentImage)
-            ? <div className="flag-mine"><img src={this.state.currentImage}/><div className="flag-mine-base"></div></div>
+            ?
+            <div className="flag-mine">
+                <img src={this.state.currentImage}/>
+                <div className="flag-mine-base"></div>
+            </div>
             : this.state.currentImage ? <div className="flag-number">{this.state.currentImage}</div> : '';
     }
 
-    lastClickedRed() {
-        return 'field-red-last' + (this.state.lastClickedRed ? ' last-clicked' : '');
+    lastClickedClass() {
+        return 'field-'
+            + (this.state.lastClickedRed ? 'red' : '')
+            + (this.state.lastClickedBlue ? 'blue' : '') + '-last last-clicked';
     }
 
-    lastClickedBlue() {
-        return 'field-blue-last' + (this.state.lastClickedBlue ? ' last-clicked' : '');
+    lastClickedSrc() {
+        return this.state.lastClickedRed
+            ? "/bundles/mineseeker/images/bg-last-red-outbg.png"
+            : "/bundles/mineseeker/images/bg-last-blue-outbg.png";
+    }
+
+    currentLastClicked() {
+        return this.state.lastClickedRed || this.state.lastClickedBlue
+            ? <img className={this.lastClickedClass()}
+                   src={this.lastClickedSrc()}
+                   alt="blue last"/>
+            : '';
     }
 
     render() {
         return (
             <div className="field-wrapper">
-                <img className="field-target" src="/bundles/mineseeker/images/bg-target-outbg.png" alt="target" onClick={this.props.onClick}/>
-                <img className={this.lastClickedRed()} src="/bundles/mineseeker/images/bg-last-red-outbg.png" alt="red last"/>
-                <img className={this.lastClickedBlue()} src="/bundles/mineseeker/images/bg-last-blue-outbg.png" alt="blue last"/>
+                <img className="field-target"
+                     src="/bundles/mineseeker/images/bg-target-outbg.png"
+                     alt="target"
+                     onClick={this.props.onClick}/>
+                {this.currentLastClicked()}
                 <div className={this.classNameWhenActive()}>
                     <div className="field-corner">
                         {this.currentImage()}