diff --git a/package.json b/package.json
index 05068a5..e633892 100644
--- a/package.json
+++ b/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"
},
diff --git a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/app.js b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/app.js
index c19360b..750ca12 100644
--- a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/app.js
+++ b/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);
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 b85611e..f3b332d 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
@@ -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++) {
diff --git a/src/Mine/SeekerBundle/Resources/views/Game/play.html.twig b/src/Mine/SeekerBundle/Resources/views/Game/play.html.twig
index 1794139..83e5342 100644
--- a/src/Mine/SeekerBundle/Resources/views/Game/play.html.twig
+++ b/src/Mine/SeekerBundle/Resources/views/Game/play.html.twig
@@ -18,5 +18,6 @@
{{ parent() }}
{{ ws_client() }}
+
{% endblock %}