From 868ec74bb12cbae18d2bd666d67f9e82ba38ee96 Mon Sep 17 00:00:00 2001
From: Carl Worth <cworth@cworth.org>
Date: Fri, 5 Jun 2020 18:06:45 -0700
Subject: [PATCH] Tighten up the display of the PlayerInfo block

Drop the display of the ID value, because that's meaningless to a
user, and then also just put the team into parens after the player (or
omit those parens entirely if the player is not on a team).

And use a single prop for all of this information instead of a
separate prop for each property of the player_info object.
---
 tictactoe/tictactoe.jsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/tictactoe/tictactoe.jsx b/tictactoe/tictactoe.jsx
index 6a27a22..579526b 100644
--- a/tictactoe/tictactoe.jsx
+++ b/tictactoe/tictactoe.jsx
@@ -84,14 +84,14 @@ function GameInfo(props) {
 }
 
 function PlayerInfo(props) {
-  if (! props.id)
+  if (! props.player.id)
     return null;
 
   return (
     <div className="player-info">
       <h2>Player</h2>
-      {props.name}, ID: {props.id},
-      {props.team ? ` on team ${props.team}` : " not on a team"}
+      {props.player.name}
+      {props.player.team ? ` (${props.player.team})` : ""}
     </div>
   );
 }
@@ -303,9 +303,7 @@ class Game extends React.Component {
       />,
       <PlayerInfo
         key="player-info"
-        id={state.player_info.id}
-        name={state.player_info.name}
-        team={state.player_info.team}
+        player={state.player_info}
       />,
       <div key="game" className="game">
         <button className="inline"
-- 
2.43.0