message: Keep track of number of players joined
diff: @@ -8,6 +8,7 @@ export interface IBoardState {
  squares: any[];
  iAmNext: boolean;
  winner: any;
  + nPlayers: number;
  }
  export interface IBoardProps {
  @@ -49,7 +50,11 @@ export class Board extends React.Component<IBoardProps, IBoardState> {
  render() {
  const winner = this.state.winner;
  + const nPlayers = this.state.nPlayers;
  let status;
  + if (nPlayers < 2) {
  + status = 'Waiting for other player to join...';
  + } else {
  if (winner) {
  status = (winner === 3) ? 'Match drawn!' : 'Winner: ' + this.getPlayerNameFromId(winner);
  } else {
  @@ -57,6 +62,7 @@ export class Board extends React.Component<IBoardProps, IBoardState> {
  const nextMoveStatus = this.state.iAmNext ? "Your move. Go Ahead!" : ("Next move: " + otherPlayerName);
  status = nextMoveStatus;
  }
  + }
  return (
  <div>
  @@ -102,18 +108,22 @@ export class Board extends React.Component<IBoardProps, IBoardState> {
  }
  const iAmNext = ((stateView.get("next") as number) === this.props.player.id) ? true : false;
  const winner = stateView.has("winner") ? stateView.get("winner") as number : null;
  + const playerCounter = stateView.get("counter") as api.map.Counter;
  + const nPlayers = playerCounter.value;
  if (initial) {
  this.state = {
  - squares: squares,
  - iAmNext: iAmNext,
  - winner: winner,
  + squares,
  + iAmNext,
  + winner,
  + nPlayers
  };
  } else {
  this.setState({
  - squares: squares,
  - iAmNext: iAmNext,
  - winner: winner,
  + squares,
  + iAmNext,
  + winner,
  + nPlayers
  });
  }
  if (!winner) {
  