From: Carl Worth <cworth@cworth.org>
Date: Sat, 6 Jun 2020 01:06:45 +0000 (-0700)
Subject: Tighten up the display of the PlayerInfo block
X-Git-Url: https://git.cworth.org/git?p=lmno.games;a=commitdiff_plain;h=868ec74bb12cbae18d2bd666d67f9e82ba38ee96

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

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"