bugfix grid field render #12

src/Mine/SeekerBundle/Resources/public/css/style.mineseeker.css

@@ -87,7 +87,7 @@ main {
     font-family: 'Open Sans', sans-serif;
     text-align: center;
     color: #354d6a;
-    width: 300px;
+    width: 500px;
     padding: 10px;
 
     -webkit-border-radius: 10px;

src/Mine/SeekerBundle/Resources/public/js/mine-seeker/app.js

@@ -30,8 +30,8 @@ class MineSeeker extends React.Component {
 
     /** game end control */
     makeGameEndIfItEnds(bluePoints, redPoints) {
-        var redWins = redPoints > 3,
-            blueWins = bluePoints > 3;
+        var redWins = redPoints > 2,
+            blueWins = bluePoints > 2;
 
         if (redWins || blueWins) {
             this.refs.gridControl.setState({
@@ -74,6 +74,7 @@ class MineSeeker extends React.Component {
                         this.state.session = session;
 
                         /** save session to GridControl */
+                        /** render grid fields - #12 */
                         this.refs.gridControl.setState({
                             grid: this.state.gameInherited ? JSON.parse(Base64.decode(gridServer)) : gridClient,
                             session: this.state.session,
@@ -82,7 +83,8 @@ class MineSeeker extends React.Component {
                             overlayTitle: "We are waiting for your opponent...",
                             overlaySubTitle: this.state.gameAssoc
                                 ? <a href={"/play/" + this.state.gameAssoc} target="_blank">Play w/ me!</a>
-                                : ''
+                                : '',
+                            renderGridFields: this.state.gameAssoc
                         });
 
                         /** setup the web player */
@@ -126,6 +128,8 @@ class MineSeeker extends React.Component {
                                             (typeof payload.user !== 'undefined' ? payload.user : 'user') + " has been subscribed to the channel!"
                                         );
 
+                                        var activePlayer = this.refs.gridControl.refs.userControl.state.activePlayer ? 'blue' : 'red';
+
                                         /** remove overlay when every user has been came */
                                         this.refs.gridControl.setState({ overlay: payload.userCnt < 2});
 

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

@@ -16,6 +16,8 @@ class GridControl extends React.Component {
             env: props.env,
             webPlayer: null,
             grid: null,
+            renderGridFields: false,
+            gridFields: [],
             updatedFieldCache: [],
             bombFieldCache: [],
             foundUserMineCache: 0,
@@ -382,13 +384,11 @@ class GridControl extends React.Component {
         return 'game-overlay' + ( this.state.overlay ? '' : ' hide' );
     }
 
-    render() {
-        var grid = [];
-
+    renderGridFields() {
         if (this.state.grid) {
             for (let i = 0, j = this.state.grid.length; i < j; i++) {
                 for (let k = 0, l = this.state.grid[i].length; k < l; k++) {
-                    grid.push(
+                    this.state.gridFields.push(
                         <GridField row={i}
                                    col={k}
                                    ref={this.refString(i, k)}
@@ -399,6 +399,12 @@ class GridControl extends React.Component {
                 }
             }
         }
+    }
+
+    render() {
+        /** Render the grid fields just one time in one party #12 */
+        this.state.renderGridFields && this.renderGridFields();
+        this.state.renderGridFields = false;
 
         return (
             <div className="game-wrapper">
@@ -411,7 +417,7 @@ class GridControl extends React.Component {
                 <UserControl ref="userControl"
                              bombClear={this.bombClear.bind(this)}/>
                 <div className="grid-container">
-                    <div className="grid"> {grid} </div>
+                    <div className="grid"> {this.state.gridFields} </div>
                 </div>
             </div>
         );