From ed41aaead067af6b8a21da3391ed860149d3c067 Mon Sep 17 00:00:00 2001
From: Lang <langlasz@gmail.com>
Date: Wed, 12 Oct 2016 22:18:10 +0200
Subject: [PATCH] refactor grid control and grid field

---
 .../js/mine-seeker/grid/grid-control.js       | 38 ++++++++-----------
 .../public/js/mine-seeker/grid/grid-field.js  | 34 +++++++++++++----
 2 files changed, 42 insertions(+), 30 deletions(-)

diff --git a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-control.js b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-control.js
index 4b99f57..448dd10 100644
--- a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-control.js
+++ b/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>
         );
diff --git a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-field.js b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-field.js
index 2a20c35..5bbfa4a 100644
--- a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-field.js
+++ b/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()}