Browse Source

update gulpfile; play sounds; add .jshintrc and chess pieces unicode map

romanmatiasko 3 years ago
parent
commit
9d7c81ac0f

+ 8 - 0
.jshintrc

@@ -0,0 +1,8 @@
+{
+  "esnext": true,
+  "newcap": false,
+  "validthis": true,
+  "node": true,
+  "browser": true,
+  "browserify": true
+}

+ 17 - 1
gulpfile.js

@@ -27,7 +27,9 @@ var imagemin = require('gulp-imagemin');
 var dependencies = [
   'react',
   'react/addons',
-  'immutable'
+  'immutable',
+  'flux',
+  'eventemitter2'
 ];
 
 var browserifyTask = function() {
@@ -131,6 +133,7 @@ var cssTask = function() {
 };
 
 var imageminTask = function() {
+  console.log('Optimizing images');
   gulp.src('./src/img/*')
     .pipe(imagemin({
       progressive: true,
@@ -145,8 +148,21 @@ var imageminTask = function() {
     }));
 };
 
+var copyTask = function() {
+  console.log('Copying sound files');
+  gulp.src('./src/snd/*')
+    .pipe(gulp.dest(IS_DEVELOPMENT ? './build/snd/' : './dist/snd/'))
+    .pipe(notify({
+      message: function() {
+        gutil.log(gutil.colors.green('SOUND FILES copied.'));
+      },
+      onLast: true
+    }));
+};
+
 gulp.task('default', function() {
   browserifyTask();
   cssTask();
   imageminTask();
+  copyTask();
 });

BIN
public/sounds/move.ogg


+ 7 - 11
src/js/components/Chat.js

@@ -23,19 +23,10 @@ const Chat = React.createClass({
     };
   },
   componentDidMount() {
-    const {io, soundsEnabled} = this.props;
-
-    io.on('receive-message', data => {
+    this.props.io.on('receive-message', data => {
       ChatActions.submitMessage(data.message, data.color + ' left');
-
-      if (!this.state.isChatHidden) {
-        this._scrollChat();
-      }
-      if (soundsEnabled) {
-        this.refs.msgSnd.getDOMNode().play();
-      }
+      this._maybePlaySound();
     });
-    
     ChatStore.on('change', this._onChatStoreChange);
   },
   componentWillUnmount() {
@@ -99,6 +90,11 @@ const Chat = React.createClass({
   _scrollChat() {
     const chatNode = this.refs.chat.getDOMNode();
     chatNode.scrollTop = chatNode.scrollHeight;
+  },
+  _maybePlaySound() {
+    if (this.props.soundsEnabled) {
+      this.refs.msgSnd.getDOMNode().play();
+    }
   }
 });
 

+ 2 - 1
src/js/components/Chessboard.js

@@ -8,7 +8,8 @@ const onGameChange = require('../mixins/onGameChange');
 const Chessboard = React.createClass({
   
   propTypes: {
-    io: React.PropTypes.object.isRequired
+    io: React.PropTypes.object.isRequired,
+    maybePlaySound: React.PropTypes.func.isRequired
   },
   mixins: [React.addons.PureRenderMixin, onGameChange],
 

+ 12 - 3
src/js/components/ChessboardInterface.js

@@ -26,17 +26,21 @@ const ChessboardInterface = React.createClass({
       whitefeedback: turn === 'w',
       blackfeedback: turn === 'b'
     });
-    console.log(turn);
-    console.log(cxFeedback);
     const goType = gameOver.get('type');
     const loser = gameOver.get('winner') === 'White' ? 'Black' : 'White';
 
     return (
       <div id="board-moves-wrapper" className="clearfix">
         
+        <audio preload="auto" ref="moveSnd">
+          <source src="/snd/move.mp3" />
+        </audio>
+
         <div id="board-wrapper">
           <CapturedPieces />
-          <Chessboard io={this.props.io} />
+          <Chessboard
+            io={this.props.io}
+            maybePlaySound={this._maybePlaySound} />
         </div>
 
         <TableOfMoves />
@@ -87,6 +91,11 @@ const ChessboardInterface = React.createClass({
   },
   _onPromotionChange(e) {
     GameActions.changePromotion(e.target.value);
+  },
+  _maybePlaySound() {
+    if (this.props.soundsEnabled) {
+      this.refs.moveSnd.getDOMNode().play();
+    }
   }
 });
 

+ 5 - 6
src/js/components/GameInterface.js

@@ -116,10 +116,6 @@ const GameInterface = React.createClass({
           openModal={this._openModal}
           gameOver={gameOver.get('status')} />
 
-        <audio preload="auto" ref="moveSnd">
-          <source src="/snd/move.mp3" />
-          <source src="/snd/move.ogg" />
-        </audio>
         <label id="sounds-label">
           <input type="checkbox"
                  checked={soundsEnabled}
@@ -133,7 +129,10 @@ const GameInterface = React.createClass({
           color={color}
           soundsEnabled={soundsEnabled} />
 
-        <ChessboardInterface io={io} />
+        <ChessboardInterface
+          io={io}
+          soundsEnabled={soundsEnabled} />
+
         <Modal data={this.state.modal} />
       </div>
     );
@@ -170,7 +169,7 @@ const GameInterface = React.createClass({
     });
     this._hideModal();
   },
-  _toggleSounds() {
+  _toggleSounds(e) {
     this.setState({
       soundsEnabled: !this.state.soundsEnabled
     });

+ 18 - 0
src/js/constants/ChessPieces.js

@@ -0,0 +1,18 @@
+module.exports = {
+  // white pieces
+  'K': '\u2654',
+  'Q': '\u2655',
+  'R': '\u2655',
+  'B': '\u2655',
+  'N': '\u2655',
+  'P': '\u2656',
+  // black pieces
+  'k': '\u265a',
+  'q': '\u265b',
+  'r': '\u265c',
+  'b': '\u265d',
+  'n': '\u265e',
+  'p': '\u265f',
+  // empty square
+  '-': ''
+};

public/sounds/message.mp3 → src/snd/message.mp3


public/sounds/move.mp3 → src/snd/move.mp3