add highlight for current turn to PlayerArea bowl

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

@@ -1,43 +1,41 @@
 import React from "react";
 import "./PlayerArea.scss";
 
-const PlayerArea = ({ playerMeta }) => {
+const PlayerArea = ({ playerMeta, turn }) => {
-  // const { user } = props
+  const { stones, player, rank, captures } = playerMeta;
-  const user = {
+  const isTurn =
-    stones: "black",
+    (stones === "black" && turn === 1) || (stones === "white" && turn === -1);
-    username: "Name",
-    captures: 0,
-  };
 
   return (
-    <div className={`player-container player-container--${playerMeta.stones}`}>
+    <div className={`player-container player-container--${stones}`}>
       <div
-        className={`player-container__bowl player-container__bowl--${playerMeta.stones}`}
+        className={`player-container__bowl player-container__bowl--${stones}`}
+        {...(isTurn ? { "data-turn": true } : null)}
       >
         <p>Pass?</p>
       </div>
       <div
-        className={`player-container__name-space player-container__name-space--${playerMeta.stones}`}
+        className={`player-container__name-space player-container__name-space--${stones}`}
       >
         <h4>
           {playerMeta
-            ? `${playerMeta.player} ${playerMeta.rank}`
+            ? `${player || stones} ${rank || "?"}`
             : "Waiting for player"}
         </h4>
 
         <div
-          className={`player-container__caps-space player-container__caps-space__${playerMeta.stones}`}
+          className={`player-container__caps-space player-container__caps-space__${stones}`}
         >
           <p
-            className={`player-container__resign-message player-container__resign-message--${playerMeta.stones}`}
+            className={`player-container__resign-message player-container__resign-message--${stones}`}
           >
             Resign?
           </p>
 
           <p
-            className={`player-container__caps-counter player-container__caps-counter--${playerMeta.stones}`}
+            className={`player-container__caps-counter player-container__caps-counter--${stones}`}
           >
-            {playerMeta ? playerMeta.captures : "Captures go here"}
+            {playerMeta ? captures : "Captures go here"}
           </p>
         </div>
       </div>

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

@@ -47,6 +47,7 @@ div.player-container {
       padding: .5em;
     }
     &[data-turn] {
+      // highlight for turn
       box-shadow: 0 0 3vh 3vh rgb(255, 175, 2);
         
       & + .player-container__name-space .player-container__caps-space:hover :first-child {

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

@@ -82,6 +82,7 @@ const Game = (props) => {
               ? playerBlackMeta
               : playerWhiteMeta
           }
+          turn={state?.meta?.turn}
         />
         <Board
           dispatch={dispatch}
@@ -99,6 +100,7 @@ const Game = (props) => {
               ? playerWhiteMeta
               : playerBlackMeta
           }
+          turn={state?.meta?.turn}
         />
       </div>