From 7b54e4a8c6a461c186125b5e36d4d312ee9b41b2 Mon Sep 17 00:00:00 2001
From: Carl Worth <cworth@cworth.org>
Date: Fri, 5 Jun 2020 16:06:59 -0700
Subject: [PATCH 1/1] 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.
---
 tictactoe/tictactoe.jsx | 56 ++++++++++++++++++++++++++++-------------
 1 file changed, 39 insertions(+), 17 deletions(-)

diff --git a/tictactoe/tictactoe.jsx b/tictactoe/tictactoe.jsx
index 3c7de0b..46cee2a 100644
--- 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: [
@@ -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)
@@ -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 first_move = state.step_number === 0;
+    const my_team = state.player_info.team;
     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 [
@@ -296,7 +318,7 @@ class Game extends React.Component {
           <Board
             active={board_active}
             squares={current.squares}
-            onClick={i => this.handle_click(i)}
+            onClick={i => this.handle_click(i, first_move)}
           />
         </div>
       </div>
-- 
2.43.0