Allow either player to make the first move.

That is, by having the board be active even if we are not assigned to
a team yet. (Obviously, for this to work, this depends on the server
also permitting us to send a move before we've joined a team.)

When we send a first move this way we append an "assert_first_move"
property which tells the server to reject our move if someone else
beat us to it.

Finally, this commit rewords the message above the game to take into
account the team of the current player.

diff --git a/tictactoe/tictactoe.jsx b/tictactoe/tictactoe.jsx
index 3c7de0b014ca5481b5b64a46882032d29096b0ce..46cee2a7f42e9f4bc3a7809e7d93b3855eb383ed 100644 (file)
--- a/tictactoe/tictactoe.jsx
+++ b/tictactoe/tictactoe.jsx
@@ -197,10 +197,6 @@ class Game extends React.Component {
     });
   }
 
     });
   }
 

-  send_move(i) {
-    return fetch_post_json("move", { move: i });
-  }
-

   reset_board() {
     this.setState({
       history: [
   reset_board() {
     this.setState({
       history: [


@@ -237,8 +233,12 @@ class Game extends React.Component {
     });
   }
 
     });
   }
 

-  async handle_click(i) {
-    const response = await this.send_move(i);
+  async handle_click(i, first_move) {
+    let move = { move: i };
+    if (first_move) {
+      move.assert_first_move = true;
+    }
+    const response = await fetch_post_json("move", move);

     if (response.status == 200) {
       const result = await response.json();
       if (! result.legal)
     if (response.status == 200) {
       const result = await response.json();
       if (! result.legal)


@@ -257,20 +257,42 @@ 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);

+    const first_move = state.step_number === 0;
+    const my_team = state.player_info.team;

     var board_active;
 
     let status;
     var board_active;
 
     let status;

-    if (winner) {
-      status = "Winner: " + winner;
-      board_active = false;
-    } else {
-      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;
+    if (winner)
+    {
+      status = winner + " wins!";
+      if (state.player_info.team != "")
+      {
+        if (my_team === winner)
+          status += " Congratulations!";
+        else
+          status += " Better luck next time.";

       }
       }

+      board_active = false;
+    }
+    else if (first_move)
+    {
+      status = "Either player can make the first move.";
+      board_active = true;
+    }
+    else if (my_team === "")
+    {
+      status = "You're just watching the game.";
+      board_active = false;
+    }
+    else if (my_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 [


@@ -296,7 +318,7 @@ class Game extends React.Component {
           <Board
             active={board_active}
             squares={current.squares}
           <Board
             active={board_active}
             squares={current.squares}

-            onClick={i => this.handle_click(i)}
+            onClick={i => this.handle_click(i, first_move)}

           />
         </div>
       </div>
           />
         </div>
       </div>