add sounds w/ howler

package.json

@@ -10,6 +10,7 @@
     "babel-loader": "^6.2.5",
     "babel-preset-es2015": "^6.14.0",
     "babel-preset-react": "^6.11.1",
+    "howler": "^2.0.1",
     "react": "^15.3.2",
     "react-dom": "^15.3.2"
   },

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

@@ -68,10 +68,6 @@ class MineSeeker extends React.Component {
                         if (this.refs.gridControl.state.webPlayer === null) {
                             if (this.state.gameInherited) {
                                 this.refs.gridControl.state.webPlayer = 'blue';
-
-                                // this.refs.gridControl.refs.userControl.setState({activePlayer: this.refs.gridControl.refs.userControl.state.activePlayer ? 0 : 1});
-                                // this.refs.gridControl.refs.userControl.refs.red.setState({active: false});
-                                // this.refs.gridControl.refs.userControl.refs.blue.setState({active: true});
                             } else {
                                 this.refs.gridControl.state.webPlayer = 'red';
                             }
@@ -89,8 +85,6 @@ class MineSeeker extends React.Component {
                                     if (this.refs.gridControl.state.webPlayer !== payload.data.player) {
                                         console.warn('Opponent stepped: Auto-Step process');
                                         this.refs.gridControl.stepEvent(payload.data.coords);
-                                    } else {
-                                        // this.refs.gridControl.stepEvent(payload.data.coords);
                                     }
                                 } else {
                                     console.info("User has been subscribed to the channel!");
@@ -112,7 +106,7 @@ class MineSeeker extends React.Component {
     onClick(coords) {
         var activePlayer = this.refs.gridControl.refs.userControl.state.activePlayer ? 'blue' : 'red';
 
-        /** Player can step if it turns */
+        /** Player step and it is the current player */
         if (activePlayer === this.refs.gridControl.state.webPlayer) {
             this.refs.gridControl.stepEvent(coords);
 

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

@@ -6,6 +6,12 @@ class GridControl extends React.Component {
     constructor(props) {
         super(props);
 
+        var click = new Howl({src: ['/sound/click.mp3']}),
+            bomb = new Howl({src: ['/sound/bomb.mp3']}),
+            mine = new Howl({src: ['/sound/mine.mp3']}),
+            warning = new Howl({src: ['/sound/warning.mp3']}),
+            won = new Howl({src: ['/sound/won.mp3']});
+
         this.state = {
             env: props.env,
             webPlayer: null,
@@ -14,6 +20,13 @@ class GridControl extends React.Component {
             bombFieldCache: [],
             foundUserMineCache: 0,
             playBomb: false,
+            sound: {
+                click: click,
+                bomb: bomb,
+                mine: mine,
+                warning: warning,
+                won: won
+            },
             lastClicked: {
                 red: null,
                 blue: null
@@ -186,6 +199,8 @@ class GridControl extends React.Component {
 
             /** if you found mine */
             if (currentObject === 'm') {
+                this.state.sound.mine.play();
+
                 this.state.foundUserMineCache++;
 
                 if (!justOnFirstIteration) {
@@ -198,6 +213,8 @@ class GridControl extends React.Component {
                     currentImage: gridFieldControl.state.icons.root + gridFieldControl.state.icons.flag[activePlayer]
                 });
             } else {
+                this.state.sound.click.play();
+
                 if (!justOnFirstIteration) {
                     /** set __ACTIVE__ player in the UserControl !!!! */
                     userControl.setState({
@@ -251,6 +268,8 @@ class GridControl extends React.Component {
 
         /** Field selected w/ BOMB */
         if (this.refs.userControl.state.bombSelected) {
+            this.state.sound.bomb.play();
+
             var radius = this.getBombRadius(coords[0], coords[1]);
 
             for (var i = 0, j = radius.length; i < j; i++) {

src/Mine/SeekerBundle/Resources/views/Game/play.html.twig

@@ -18,5 +18,6 @@
     {{ parent() }}
     {{ ws_client() }}
 
+    <script type="text/javascript" src="{{ asset('node/howler/dist/howler.min.js') }}"></script>
     <script type="text/javascript" src="{{ asset('js/index.js') }}"></script>
 {% endblock %}