Display all players, not just a single component

It's a little trickier to deal with an array (both on the setState
side and when using the map() function to generate React elements) but
it's not too bad.

Thanks for the help, Richard!

diff --git a/tictactoe/tictactoe.jsx b/tictactoe/tictactoe.jsx
index f0e9e88d6a83f6a9262cbb47a467f293a431b3a7..49c6005c38fe395c610502853f1ec69ab28d3438 100644 (file)
--- a/tictactoe/tictactoe.jsx
+++ b/tictactoe/tictactoe.jsx
@@ -100,9 +100,13 @@ function PlayerInfo(props) {
       <h2>Players</h2>
       {props.player.name}
       {props.player.team ? ` (${props.player.team})` : ""}
-      {", "}
-      {props.opponent.name}
-      {props.opponent.team ? ` (${props.opponent.team})` : ""}
+      {props.opponents.map(opponent => (
+        <span key={opponent.id}>
+          {", "}
+          {opponent.name}
+          {opponent.team ? ` (${opponent.team})` : ""}
+        </span>
+      ))}
     </div>
   );
 }
@@ -186,7 +190,7 @@ class Game extends React.Component {
     this.state = {
       game_info: {},
       player_info: {},
-      opponent_info: {},
+      opponent_info: [],
       history: [
         {
           squares: Array(9).fill(null)
@@ -210,8 +214,15 @@ class Game extends React.Component {
   }
 
   set_opponent_info(info) {
+    const new_opponents = [...this.state.opponent_info];
+    const idx = new_opponents.findIndex(o => o.id === info.id);
+    if (idx >= 0) {
+      new_opponents[idx] = info;
+    } else {
+      new_opponents.push(info);
+    }
     this.setState({
-      opponent_info: info
+      opponent_info: new_opponents
     });
   }
 
@@ -322,7 +333,7 @@ class Game extends React.Component {
       <PlayerInfo
         key="player-info"
         player={state.player_info}
-        opponent={state.opponent_info}
+        opponents={state.opponent_info}
       />,
       <div key="game" className="game">
         <button className="inline"