Add two buttons to allow the player to choose a team to join

This demonstrates how a "Join Team" button could actually work.

Of course, the notion of teams and being able to switch from one to
the other is a bit much for tic tac toe, (but could actually be useful
for a case of two people playing on a single computer for example).

What we definitely want here is some implicit team membership. Such as
"Either play can make the first move" and then having that assign the
player that moves to Team X.

If we did that, then we could also simplify by having just a single
"Swith Teams" button instead of having one button for each team.

diff --git a/style.css b/style.css
index dfaa8e4f9fc32c58cc32a73904702cbb26057e70..5128982a44d5e52f1c9387b8b9a7d6a753e3c72d 100644 (file)
--- a/style.css
+++ b/style.css
@@ -256,6 +256,11 @@ button {
     width: 200px;
 }
 
     width: 200px;
 }
 

+button.inline {
+    font-size: 100%;
+    width: auto;
+}
+

 button:hover {
     transform: translateY(-1px);
     background-color: var(--accent-color-bright);
 button:hover {
     transform: translateY(-1px);
     background-color: var(--accent-color-bright);

diff --git a/tictactoe/tictactoe.jsx b/tictactoe/tictactoe.jsx
index 71690b91e2ecf7692790eeb5517080aa35ef5653..f1426ecff4f443c8837237fffd8caeef3f751153 100644 (file)
--- a/tictactoe/tictactoe.jsx
+++ b/tictactoe/tictactoe.jsx
@@ -241,6 +241,10 @@ class Game extends React.Component {
     }
   }
 
     }
   }
 

+  join_team(team) {
+    fetch_put_json("player", {team: team});
+  }
+

   render() {
     const history = this.state.history;
     const current = history[this.state.step_number];
   render() {
     const history = this.state.history;
     const current = history[this.state.step_number];


@@ -266,6 +270,11 @@ class Game extends React.Component {
         team={this.state.player_info.team}
       />,
       <div key="game" className="game">
         team={this.state.player_info.team}
       />,
       <div key="game" className="game">

+        <button className="inline"
+                onClick={() => this.join_team('X')}>Join Team X</button>
+        &nbsp;
+        <button className="inline"
+                onClick={() => this.join_team('O')}>Join Team O</button>

         <div>{status}</div>
         <div className="game-board">
           <Board
         <div>{status}</div>
         <div className="game-board">
           <Board