From f010d5d9ee8c46287065723b4686162c06c64474 Mon Sep 17 00:00:00 2001
From: sorrelbri <sorrel.bri.june@gmail.com>
Date: Sat, 6 Jun 2020 16:22:14 -0700
Subject: [PATCH] add highlight for current turn to PlayerArea bowl

---
 .../GameUI/PlayerArea/PlayerArea.js           | 28 +++++++++----------
 .../GameUI/PlayerArea/PlayerArea.scss         |  1 +
 packages/play-node-go/src/pages/Game/Game.js  |  2 ++
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/packages/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.js b/packages/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.js
index 3e677f9..c8778f4 100644
--- a/packages/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.js
+++ b/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 { user } = props
-  const user = {
-    stones: "black",
-    username: "Name",
-    captures: 0,
-  };
+const PlayerArea = ({ playerMeta, turn }) => {
+  const { stones, player, rank, captures } = playerMeta;
+  const isTurn =
+    (stones === "black" && turn === 1) || (stones === "white" && turn === -1);
 
   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>
diff --git a/packages/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.scss b/packages/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.scss
index 04362e1..a5bc92d 100644
--- a/packages/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.scss
+++ b/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 {
diff --git a/packages/play-node-go/src/pages/Game/Game.js b/packages/play-node-go/src/pages/Game/Game.js
index 518bc3d..7072105 100644
--- a/packages/play-node-go/src/pages/Game/Game.js
+++ b/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>