From: Carl Worth <cworth@cworth.org>
Date: Fri, 5 Jun 2020 17:18:17 +0000 (-0700)
Subject: Add two buttons to allow the player to choose a team to join
X-Git-Url: https://git.cworth.org/git?p=lmno.games;a=commitdiff_plain;h=80b53fb35b2026f0100572fc744d659532efe3f0

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 dfaa8e4..5128982 100644
--- a/style.css
+++ b/style.css
@@ -256,6 +256,11 @@ button {
     width: 200px;
 }
 
+button.inline {
+    font-size: 100%;
+    width: auto;
+}
+
 button:hover {
     transform: translateY(-1px);
     background-color: var(--accent-color-bright);
diff --git a/tictactoe/tictactoe.jsx b/tictactoe/tictactoe.jsx
index 71690b9..f1426ec 100644
--- 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];
@@ -266,6 +270,11 @@ class Game extends React.Component {
         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