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 ( -
+

Pass?

{playerMeta - ? `${playerMeta.player} ${playerMeta.rank}` + ? `${player || stones} ${rank || "?"}` : "Waiting for player"}

Resign?

- {playerMeta ? playerMeta.captures : "Captures go here"} + {playerMeta ? captures : "Captures go here"}

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} /> { ? playerWhiteMeta : playerBlackMeta } + turn={state?.meta?.turn} />