From e92b0500735ed3f70c218cb38ad421483a497d18 Mon Sep 17 00:00:00 2001
From: Carl Worth <cworth@cworth.org>
Date: Fri, 5 Jun 2020 20:17:46 -0700
Subject: [PATCH] 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!
---
 tictactoe/tictactoe.jsx | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/tictactoe/tictactoe.jsx b/tictactoe/tictactoe.jsx
index f0e9e88..49c6005 100644
--- 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"
-- 
2.43.0