tictactoe: De-activate board when it's not the player's turn

There's no reason to allow the user to select a square and send the
move to the server when the client can already know that the server is
just going to reject the move because it's not our turn anyway.

diff --git a/tictactoe/tictactoe.jsx b/tictactoe/tictactoe.jsx
index 326a5dd4740b0d465a94ab39296e5c5192feed79..3c7de0b014ca5481b5b64a46882032d29096b0ce 100644 (file)
--- a/tictactoe/tictactoe.jsx
+++ b/tictactoe/tictactoe.jsx
@@ -121,7 +121,7 @@ class Board extends React.Component {
     return (
       <Square
         value={value}
     return (
       <Square
         value={value}

-        active={! this.props.game_over && ! value}
+        active={this.props.active && ! value}

         onClick={() => this.props.onClick(i)}
       />
     );
         onClick={() => this.props.onClick(i)}
       />
     );


@@ -257,12 +257,20 @@ class Game extends React.Component {
     const history = state.history;
     const current = history[state.step_number];
     const winner = calculate_winner(current.squares);
     const history = state.history;
     const current = history[state.step_number];
     const winner = calculate_winner(current.squares);

+    var board_active;

 
     let status;
     if (winner) {
       status = "Winner: " + winner;
 
     let status;
     if (winner) {
       status = "Winner: " + winner;

+      board_active = false;

     } else {
     } else {

-      status = "Next player: " + (Team.properties[state.next_to_play].name);
+      if (state.player_info.team === Team.properties[state.next_to_play].name) {
+        status = "Your turn. Make a move.";
+        board_active = true;
+      } else {
+        status = "Waiting for your opponent to move.";
+        board_active = false;
+      }

     }
 
     return [
     }
 
     return [


@@ -286,7 +294,7 @@ class Game extends React.Component {
         <div>{status}</div>
         <div className="game-board">
           <Board
         <div>{status}</div>
         <div className="game-board">
           <Board

-            game_over={winner}
+            active={board_active}

             squares={current.squares}
             onClick={i => this.handle_click(i)}
           />
             squares={current.squares}
             onClick={i => this.handle_click(i)}
           />