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 %}