display player data in PlayerArea component

packages/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.js

@@ -1,45 +1,48 @@
-import React from 'react';
-import './PlayerArea.scss';
+import React from "react";
+import "./PlayerArea.scss";
 
-const PlayerArea = (props) => {
+const PlayerArea = ({ playerMeta }) => {
   // const { user } = props
   const user = {
-    stones: 'black',
-    username: 'Name',
-    captures: 0
-  }
+    stones: "black",
+    username: "Name",
+    captures: 0,
+  };
 
   return (
+    <div className={`player-container player-container--${playerMeta.stones}`}>
       <div
-      className={`player-container player-container--${user.stones}`}
-    >
-      <div 
-        className={`player-container__bowl player-container__bowl--${user.stones}`}
+        className={`player-container__bowl player-container__bowl--${playerMeta.stones}`}
       >
         <p>Pass?</p>
       </div>
       <div
-        className={`player-container__name-space player-container__name-space--${user.stones}`}
+        className={`player-container__name-space player-container__name-space--${playerMeta.stones}`}
       >
-        <h4>{user ? user.username : 'Waiting for player' }</h4>
+        <h4>
+          {playerMeta
+            ? `${playerMeta.player} ${playerMeta.rank}`
+            : "Waiting for player"}
+        </h4>
 
         <div
-          className={`player-container__caps-space player-container__caps-space__${user.stones}`}
+          className={`player-container__caps-space player-container__caps-space__${playerMeta.stones}`}
         >
           <p
-            className={`player-container__resign-message player-container__resign-message--${user.stones}`}
-          >Resign?</p>
+            className={`player-container__resign-message player-container__resign-message--${playerMeta.stones}`}
+          >
+            Resign?
+          </p>
 
           <p
-            className={`player-container__caps-counter player-container__caps-counter--${user.stones}`}
-          >{user ? user.captures : 'Captures go here'}</p>
-
+            className={`player-container__caps-counter player-container__caps-counter--${playerMeta.stones}`}
+          >
+            {playerMeta ? playerMeta.captures : "Captures go here"}
+          </p>
         </div>
-
       </div>
-
     </div>
   );
-}
+};
 
 export default PlayerArea;

packages/play-node-go/src/pages/Game/Game.js

@@ -1,62 +1,88 @@
-import React, { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import gamesServices from '../../services/api/gamesServices';
-import './Game.scss';
-import Logo from '../../components/Display/Logo/Logo';
-import Board from '../../components/GameUI/Board/Board';
-import PlayerArea from '../../components/GameUI/PlayerArea/PlayerArea';
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import gamesServices from "../../services/api/gamesServices";
+import "./Game.scss";
+import Logo from "../../components/Display/Logo/Logo";
+import Board from "../../components/GameUI/Board/Board";
+import PlayerArea from "../../components/GameUI/PlayerArea/PlayerArea";
 
 const Game = (props) => {
   const { state, dispatch } = props;
   const gameId = parseInt(useParams().id) || 0;
-
+  const [playerBlackMeta, setPlayerBlackMeta] = useState({});
+  const [playerWhiteMeta, setPlayerWhiteMeta] = useState({});
 
   useEffect(() => {
     const fetchGameAPI = async () => {
       const response = await gamesServices.getGameService(gameId);
       if (response) {
         const action = {
-          type: 'GAMES',
-          message: 'SET_ACTIVE',
-          body: response
-        }
+          type: "GAMES",
+          message: "SET_ACTIVE",
+          body: response,
+        };
         return dispatch(action);
       }
-    }
+    };
     fetchGameAPI();
-  }, [ gameId, dispatch ])
-
+  }, [gameId, dispatch]);
 
   useEffect(() => {
     const roomSocketConnect = () => {
       const game = state.active.game;
       const user = state.user;
       const action = {
-        type: 'SOCKET',
-        message: 'CONNECT_GAME',
-        body: { game, user, dispatch }
-      }
+        type: "SOCKET",
+        message: "CONNECT_GAME",
+        body: { game, user, dispatch },
+      };
       return dispatch(action);
-    }
+    };
     roomSocketConnect();
-  }, [ state.active.game, dispatch, state.user ] )
+  }, [state.active.game, dispatch, state.user]);
+
+  useEffect(() => {
+    if (!state.meta) return;
+    const {
+      playerBlack,
+      playerBlackRank,
+      playerWhite,
+      playerWhiteRank,
+    } = state.active.game;
+    const { bCaptures, wCaptures } = state.meta.playerState;
+    setPlayerBlackMeta({
+      player: playerBlack,
+      rank: playerBlackRank,
+      captures: bCaptures,
+      stones: "black",
+    });
+    setPlayerWhiteMeta({
+      player: playerWhite,
+      rank: playerWhiteRank,
+      captures: wCaptures,
+      stones: "white",
+    });
+  }, [state?.meta?.playerState, state.active?.game]);
 
   return (
-    <div 
-      className="Game" 
-      data-testid="Game"
-    >
+    <div className="Game" data-testid="Game">
       <div className="Game__meta-container">
-        <span 
-          className="Game__socket-flag"
-        >{state.socket ? '✓' : ' ⃠'}</span>
+        <span className="Game__socket-flag">{state.socket ? "✓" : " ⃠"}</span>
         <Logo />
         <p>Timer</p>
         <p>? Game Tree</p>
       </div>
 
       <div className="Game__board-container">
-        <PlayerArea />
+        <PlayerArea
+          playerMeta={
+            state.user &&
+            playerBlackMeta.playerBlack &&
+            state.user === playerBlackMeta.playerBlack
+              ? playerBlackMeta
+              : playerWhiteMeta
+          }
+        />
         <Board
           dispatch={dispatch}
           game={state.active.game}
@@ -65,7 +91,15 @@ const Game = (props) => {
           user={state.user}
           board={state.board}
         />
-        <PlayerArea />
+        <PlayerArea
+          playerMeta={
+            state.user &&
+            playerBlackMeta.playerWhite &&
+            state.user === playerWhiteMeta.playerWhite
+              ? playerWhiteMeta
+              : playerBlackMeta
+          }
+        />
       </div>
 
       <div className="Game__message-container">
@@ -74,6 +108,6 @@ const Game = (props) => {
       </div>
     </div>
   );
-}
+};
 
 export default Game;