From: Carl Worth <cworth@cworth.org>
Date: Sat, 6 Jun 2020 03:17:46 +0000 (-0700)
Subject: Display all players, not just a single component
X-Git-Url: https://git.cworth.org/git?p=lmno.games;a=commitdiff_plain;h=e92b0500735ed3f70c218cb38ad421483a497d18

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 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"