fix clock; play sounds on move and check; table of moves changes

io.js

@@ -81,12 +81,8 @@ io.sockets.on('connection', function (socket) {
     });
   });
 
-  socket.on('timer-white', function (data) {
-    runTimer('white', data.token, socket);
-  });
-
-  socket.on('timer-black', function (data) {
-    runTimer('black', data.token, socket);
+  socket.on('clock-run', function (data) {
+    runClock(data.color, data.token, socket);
   });
 
   socket.on('new-move', function (data) {
@@ -182,16 +178,14 @@ io.sockets.on('connection', function (socket) {
   });
 });
 
-function runTimer(color, token, socket) {
+function runClock(color, token, socket) {
   var player, time_left, game = games[token];
 
   if (!game) return;
 
   for (var i in game.players) {
     player = game.players[i];
-
     if (player.socket === socket && player.color === color) {
-
       clearInterval(games[token].interval);
       games[token].players[i].time += games[token].players[i].inc;
 

src/css/_base.scss

@@ -106,6 +106,10 @@ p {
   font-size: 1rem;
 }
 
+strong {
+  font-weight: 600;
+}
+
 h1 {
   font-family: 'Cherry Swash';
   font-weight: 400;

src/css/_chessboard.scss

@@ -5,7 +5,7 @@
   margin: 0 auto;
 }
 
-table#moves {
+#moves {
   overflow-x: hidden;
   overflow-y: auto;
   width: 270px;
@@ -16,37 +16,42 @@ table#moves {
   border-radius: 2px;
   border-bottom: 4px solid $grey;
   display: block;
-  float: left;
-}
+  float: left; 
+
+  thead {
+    font-family: 'Cherry Swash';
+    width: 270px;
+    height: 3em;
+    line-height: 3em;
+    font-size: 1.225rem;
+    color: $dark-purple;
+    float: left;
+    text-align: center;
 
-#moves thead {
-  font-family: 'Cherry Swash';
-  width: 270px;
-  height: 3em;
-  line-height: 3em;
-  font-size: 1.225rem;
-  color: $dark-purple;
-  float: left;
-  text-align: center;
-}
+    th, tr {
+      width: 100%;
+      text-align: center;
+      float: left;
+    }
+  }
 
-#moves thead th, #moves thead tr {
-  width: 100%;
-  text-align: center;
-  float: left;
-}
+  tbody tr {
+    width: 270px;
+    float: left;
+  }
 
-#moves tbody tr {
-  width: 270px;
-  float: left;
-}
+  tbody tr td {
+    width: 85px;
+    text-align: left;
+    line-height: 20px;
+    margin: 0 10px;
+    float: left;
 
-#moves tbody tr td {
-  width: 105px;
-  text-align: left;
-  line-height: 20px;
-  margin: 0 15px;
-  float: left;
+    &:first-child {
+      width: 40px;
+      margin-right: 0;
+    }
+  }
 }
 
 #board-wrapper {
@@ -98,7 +103,7 @@ table#moves {
   background: $grey;
 }
 
-span.feedback {
+.feedback {
   color: #424242;
   line-height: 28px;
   text-indent: 28px;
@@ -106,21 +111,16 @@ span.feedback {
   display: block;
   clear: left;
   float: left;
-}
-
-.feedback-status {
-  font-weight: bold;
-}
 
-span.whitefeedback {
-  background: url('../img/whiteking.png') 0% 50% no-repeat;
-}
-
-span.blackfeedback {
-  background: url('../img/blackking.png') 0% 50% no-repeat;
+  &.white {
+    background: url('../img/whiteking.png') 0% 50% no-repeat;
+  }
+  &.black {
+    background: url('../img/whiteking.png') 0% 50% no-repeat;
+  }
 }
 
-span.promotion {
+.promotion {
   line-height: 28px;
   text-indent: 28px;
   margin-top: 1em;

src/css/main.scss

@@ -17,17 +17,22 @@
     max-width: 900px;
     padding: 1em 10px;
   }
-  table#moves {
+  #moves {
     margin-left: 0;
     float: right;
     height: 516px;
   }
-  table#moves, #moves thead, #moves tbody tr {
+  #moves, #moves thead, #moves tbody tr {
     width: 200px;
   }
   #moves tbody tr td {
-    width: 90px;
+    width: 70px;
     margin: 0 5px;
+
+    &:first-child {
+      width: 30px;
+      margin-right: 5px;
+    }
   }
 }
 
@@ -82,7 +87,7 @@
     float: right;
     clear: none;
   }
-  table#moves {
+  #moves {
     margin-left: 0;
     margin-top: 0.5em;
     height: 258px;

src/js/components/Chessboard.js

@@ -33,12 +33,17 @@ const Chessboard = React.createClass({
     };
   },
   componentDidMount() {
+    const {io, token} = this.props;
     GameStore.on('change', this._onGameChange);
     GameStore.on('new-move', this._onNewMove);
 
-    this.props.io.on('move', data => {
-      console.log(data);
+    io.on('move', data => {
       GameActions.makeMove(data.from, data.to, data.capture, false);
+      this.props.maybePlaySound();
+
+      if (!data.gameOver) {
+        this._runClock();
+      }
     });
   },
   componentWillUnmount() {
@@ -67,12 +72,12 @@ const Chessboard = React.createClass({
       </table>
     );
   },
-  _onGameChange() {
+  _onGameChange(cb) {
     const state = GameStore.getChessboardState();
     this.setState({
       fen: state.fen,
       lastMove: state.lastMove
-    });
+    }, cb);
   },
   _setMoveFrom(square) {
     this.setState({
@@ -84,13 +89,17 @@ const Chessboard = React.createClass({
 
     io.emit('new-move', {
       token: token,
-      move: omit(move, 'turn')
+      move: move
     });
 
-    if (move.gameOver) return;
+    setTimeout(this.props.maybePlaySound, 0);
+  },
+  _runClock() {
+    const {io, token, color} = this.props;
 
-    io.emit(move.turn === 'b' ? 'timer-black' : 'timer-white', {
-      token: token
+    io.emit('clock-run', {
+      token: token,
+      color: color
     });
   }
 });

src/js/components/ChessboardInterface.js

@@ -23,11 +23,11 @@ const ChessboardInterface = React.createClass({
     return GameStore.getState();
   },
   render() {
-    const {promotion, turn, gameOver} = this.state;
+    const {promotion, turn, gameOver, check} = this.state;
     const cxFeedback = cx({
       feedback: true,
-      whitefeedback: turn === 'w',
-      blackfeedback: turn === 'b'
+      white: turn === 'w',
+      black: turn === 'b'
     });
     const goType = gameOver.get('type');
     const loser = gameOver.get('winner') === 'White' ? 'Black' : 'White';
@@ -38,6 +38,9 @@ const ChessboardInterface = React.createClass({
         <audio preload="auto" ref="moveSnd">
           <source src="/snd/move.mp3" />
         </audio>
+        <audio preload="auto" ref="checkSnd">
+          <source src="/snd/check.mp3" />
+        </audio>
 
         <div id="board-wrapper">
           <CapturedPieces />
@@ -65,11 +68,12 @@ const ChessboardInterface = React.createClass({
 
         <span className={cxFeedback}>
           {!gameOver.get('status') ? 
-            <span className="feedback-move">
+            <span>
               {`${turn === 'w' ? 'White' : 'Black'} to move.`}
+              {check ? <strong> Check.</strong> : null}
             </span> :
 
-            <span className="feedback-status">
+            <strong>
               {goType === 'checkmate' ?
                 `Checkmate. ${gameOver.get('winner')} wins!`
               :goType === 'timeout' ?
@@ -85,7 +89,7 @@ const ChessboardInterface = React.createClass({
               :goType === 'insufficientMaterial' ?
                 'Draw (Insufficient Material)'
               :null}
-            </span>
+            </strong>
           }
         </span>
       </div>
@@ -99,7 +103,7 @@ const ChessboardInterface = React.createClass({
   },
   _maybePlaySound() {
     if (this.props.soundsEnabled) {
-      this.refs.moveSnd.getDOMNode().play();
+      this.refs[this.state.check ? 'checkSnd' : 'moveSnd'].getDOMNode().play();
     }
   }
 });

src/js/components/GameInterface.js

@@ -52,8 +52,9 @@ const GameInterface = React.createClass({
 
     io.on('joined', data => {
       if (data.color === 'white') {
-        io.emit('timer-white', {
-          token: params[0]
+        io.emit('clock-run', {
+          token: params[0],
+          color: 'white'
         });
       } else {
         this.setState({color: 'black'});
@@ -92,8 +93,9 @@ const GameInterface = React.createClass({
         modal: this.state.modal.set('open', false)
       }, () => {
         if (this.state.color === 'white') {
-          io.emit('timer-white', {
-            token: this.props.params[0]
+          io.emit('clock-run', {
+            token: this.props.params[0],
+            clock: 'white'
           });
         }
       });

src/js/components/TableOfMoves.js

@@ -24,10 +24,12 @@ const TableOfMoves = React.createClass({
         <tbody>
           {this.state.moves.map((row, i) => (
             <tr key={i}>
+              <td>
+                <strong>{`${i + 1}.`}</strong>
+              </td>
               {row.map((move, j) => (
                 <td key={j}>
-                  <strong>{i + 1}</strong>
-                  <span>{`. ${move}`}</span>
+                  <span>{move}</span>
                 </td>
               )).toArray()}
             </tr>

src/js/stores/ChatStore.js

@@ -10,7 +10,7 @@ const CHANGE_EVENT = 'change';
 var _messages = List();
 var _isChatHidden = false;
 
-var ChatStore = Object.assign({}, EventEmitter.prototype, {
+const ChatStore = Object.assign({}, EventEmitter.prototype, {
   getState() {
     return {
       messages: _messages,
@@ -20,7 +20,7 @@ var ChatStore = Object.assign({}, EventEmitter.prototype, {
 });
 
 AppDispatcher.register(payload => {
-  var action = payload.action;
+  let action = payload.action;
 
   switch (action.actionType) {
 

src/js/stores/GameStore.js

@@ -3,6 +3,7 @@
 const AppDispatcher = require('../dispatcher/AppDispatcher');
 const EventEmitter = require('eventemitter2').EventEmitter2; 
 const GameConstants = require('../constants/GameConstants');
+const ChessPieces = require('../constants/ChessPieces');
 const Chess = require('chess.js').Chess;
 const Immutable = require('immutable');
 const {List, Map, OrderedMap, Set} = Immutable;
@@ -25,7 +26,8 @@ const GameStore = Object.assign({}, EventEmitter.prototype, {
     return {
       gameOver: _gameOver,
       promotion: _promotion,
-      turn: _turn
+      turn: _turn,
+      check: _check
     };
   },
   getCapturedPieces() {
@@ -52,7 +54,7 @@ function setInitialState() {
     ['w', List()],
     ['b', List()]
   ]);
-  _moves = List([List()]);
+  _moves = List();
   _promotion = 'q';
   _turn = 'w';
   _check = false;
@@ -75,12 +77,13 @@ function makeMove(from, to, capture, emitMove) {
   _turn = _chess.turn();
   _check = _chess.in_check();
   _lastMove = _lastMove.set('from', from).set('to', to);
-  _moves = _moves.last().size === 2 ?
+  _moves = _moves.isEmpty() || _moves.last().size === 2 ?
     _moves.push(List([move.san])) :
     _moves.update(_moves.size - 1, list => list.push(move.san));
 
   if (capture || move.flags === 'e') {
-    const capturedPiece = capture || _turn === 'w' ? 'P' : 'p';
+    const capturedPiece = capture ||
+      (_turn === 'w' ? '\u2659' : '\u265f'); // en passant
 
     _capturedPieces = _capturedPieces
       .update(_turn, list => list.push(capturedPiece));
@@ -104,8 +107,7 @@ function makeMove(from, to, capture, emitMove) {
       from: from,
       to: to,
       capture: capture,
-      gameOver: _chess.game_over(),
-      turn: _turn
+      gameOver: _chess.game_over()
     });
   }