Tighten up the display of the PlayerInfo block

[lmno.games] / tictactoe / tictactoe.jsx

diff --git a/tictactoe/tictactoe.jsx b/tictactoe/tictactoe.jsx
index 46cee2a7f42e9f4bc3a7809e7d93b3855eb383ed..579526b7dcb401e0310027da092f47c8fead5691 100644 (file)
--- a/tictactoe/tictactoe.jsx
+++ b/tictactoe/tictactoe.jsx
@@ -84,14 +84,14 @@ function GameInfo(props) {
 }
 
 function PlayerInfo(props) {
 }
 
 function PlayerInfo(props) {

-  if (! props.id)
+  if (! props.player.id)

     return null;
 
   return (
     <div className="player-info">
       <h2>Player</h2>
     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>
   );
 }
     </div>
   );
 }


@@ -303,14 +303,12 @@ class Game extends React.Component {
       />,
       <PlayerInfo
         key="player-info"
       />,
       <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"
                 onClick={() => this.join_team('X')}>Join Team X</button>
       />,
       <div key="game" className="game">
         <button className="inline"
                 onClick={() => this.join_team('X')}>Join Team X</button>

-        &nbsp;
+        {" "}

         <button className="inline"
                 onClick={() => this.join_team('O')}>Join Team O</button>
         <div>{status}</div>
         <button className="inline"
                 onClick={() => this.join_team('O')}>Join Team O</button>
         <div>{status}</div>