oxaliq/node-go
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add highlight for current turn to PlayerArea bowl

Browse source
This commit is contained in:
sorrelbri 2020-06-06 16:22:14 -07:00
parent 6359089e91
commit f010d5d9ee
3 changed files with 16 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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>

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

@ -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 {

2
packages/play-node-go/src/pages/Game/Game.js
View file

@ -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>