create first working communication

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

@@ -1,21 +1,24 @@
 import React from 'react';
 import Sound from 'react-sound';
-import Grid from './grid';
 import GridField from './grid-field';
 import UserControl from '../user/user-control';
 
 class GridControl extends React.Component {
-    constructor() {
-        super();
-
-        var grid = new Grid();
+    constructor(props) {
+        super(props);
 
         this.state = {
-            grid: grid.state.grid,
+            env: props.env,
+            log: props.log,
+            session: null,
+            channel: null,
+            webPlayer: null,
+            grid: null,
             updatedFieldCache: [],
             bombFieldCache: [],
             foundUserMineCache: 0,
             playBomb: false,
+            sound: null,
             lastClicked: {
                 red: null,
                 blue: null
@@ -191,6 +194,8 @@ class GridControl extends React.Component {
                 this.state.foundUserMineCache++;
 
                 if (!justOnFirstIteration) {
+                    this.playingSound('mine');
+
                     /** set last clicked field w/ color */
                     this.state.lastClicked[activePlayer] = [x, y];
                 }
@@ -201,7 +206,9 @@ class GridControl extends React.Component {
                 });
             } else {
                 if (!justOnFirstIteration) {
-                    /** set ACTIVE player */
+                    this.playingSound('click');
+
+                    /** set __ACTIVE__ player in the UserControl !!!! */
                     userControl.setState({
                         activePlayer: userControl.state.activePlayer ? 0 : 1
                     });
@@ -245,19 +252,20 @@ class GridControl extends React.Component {
         }
     }
 
-    /**
-     * Most important event!!
-     * @param coords
-     */
-    onClick(coords) {
+    stepEvent(coords, isOpponentStepped) {
         var activePlayer = this.refs.userControl.state.activePlayer ? 'blue' : 'red';
-        this.state.foundUserMineCache = 0;
 
+        this.state.foundUserMineCache = 0;
         this.state.playBomb = true;
 
-        console.log(
-            this.state.playBomb
-        );
+        /** Step automatically when not this user stepped */
+        if (!isOpponentStepped) {
+            this.state.session
+                .publish(this.state.channel, {
+                    'coords': coords,
+                    'player': activePlayer
+                });
+        }
 
         if (this.refs.userControl.state.bombSelected) {
             var radius = this.getBombRadius(coords[0], coords[1]);
@@ -296,7 +304,7 @@ class GridControl extends React.Component {
         }
 
         if (this.state.foundUserMineCache) {
-            /** remove ONE mine from global */
+            /** remove the found mines from global */
             this.refs.userControl.setState({
                 mines: this.refs.userControl.state.mines - this.state.foundUserMineCache,
                 foundMines: true
@@ -306,7 +314,7 @@ class GridControl extends React.Component {
                 this.refs.userControl.setState({foundMines: false})
             }.bind(this), 500);
 
-            /** add ONE mine to active Player */
+            /** add the found mines to the active Player */
             this.refs.userControl.refs[activePlayer].setState({
                 mines: this.refs.userControl.refs[activePlayer].state.mines + this.state.foundUserMineCache
             });
@@ -321,6 +329,19 @@ class GridControl extends React.Component {
         }
     }
 
+    /**
+     * Most important event!!
+     * Click only when the active player is the current client.
+     * @param coords
+     */
+    onClick(coords) {
+        var activePlayer = this.refs.userControl.state.activePlayer ? 'blue' : 'red';
+
+        if (activePlayer === this.state.webPlayer) {
+            this.stepEvent(coords, false);
+        }
+    }
+
     /**
      * On Hover when you want to drop BOMB
      * @param coords
@@ -335,34 +356,50 @@ class GridControl extends React.Component {
         }
     }
 
-    playingBomb() {
-        return this.state.playBomb
-            ? Sound.status.PLAYING
-            : Sound.status.STOPPED;
+    /**
+     * Play sound effets
+     * @param type
+     * @returns {*}
+     */
+    playingSound(type) {
+        this.state.log.i('Sound playing type: ' + type);
+
+        return type !== null
+            ? <Sound url={"sound/" + type + ".mp3"} playStatus={Sound.status.PLAYING}/>
+            : '';
     }
 
+    /** after rendering */
     componentDidMount() {
-        soundManager.setup({debugMode: false});
+        /** disable console of soundmanager */
+        soundManager.setup({
+            debugMode: this.state.env,
+            useConsole: this.state.env
+        });
     }
 
     renderGridFields() {
-        var grid = [];
+        /** If the app.js filled the this.state.grid var, START the grid render */
+        if (this.state.grid) {
+            var grid = [];
 
-        for (var i = 0, j = this.state.grid.length; i < j; i++) {
-            for (var k = 0, l = this.state.grid[i].length; k < l; k++) {
-                grid.push(
-                    <GridField row={i}
-                               col={k}
-                               ref={this.refString(i, k)}
-                               key={i + k * Math.random() * 0.5}
-                               handleHoverOn={this.onHoverWithBomb.bind(this, [i, k])}
-                               onClick={this.onClick.bind(this, [i, k])}
-                    />
-                );
+            for (var i = 0, j = this.state.grid.length; i < j; i++) {
+                for (var k = 0, l = this.state.grid[i].length; k < l; k++) {
+                    grid.push(
+                        <GridField row={i}
+                                   col={k}
+                                   ref={this.refString(i, k)}
+                                   key={i + k * Math.random() * 0.5}
+                                   handleHoverOn={this.onHoverWithBomb.bind(this, [i, k])}
+                                   onClick={this.onClick.bind(this, [i, k])}/>
+                    );
+                }
             }
+
+            return grid;
         }
 
-        return grid;
+        return "";
     }
 
     render() {
@@ -375,11 +412,7 @@ class GridControl extends React.Component {
                 <div className="grid">
                     {this.renderGridFields()}
                 </div>
-                <Sound url="sound/bomb.mp3" ref="bombSound" playStatus={this.playingBomb()}/>
-                {/*<Sound url="sound/click.mp3" playStatus={this.playStatus()}/>*/}
-                {/*<Sound url="sound/mine.mp3" playStatus={this.playStatus()}/>*/}
-                {/*<Sound url="sound/warning.mp3" playStatus={this.playStatus()}/>*/}
-                {/*<Sound url="sound/won.mp3" playStatus={this.playStatus()}/>*/}
+                {this.playingSound(this.state.sound)}
             </div>
         );
     }