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

patch styling of game room drop shadows, refactor GameButton for open games

Browse source
This commit is contained in:
sorrelbri 2020-04-10 20:03:27 -07:00
parent a69b48d238
commit 8a60d82832
2 changed files with 48 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
packages/play-node-go/src/components/Button/Game/Game.js
View file

@ -5,6 +5,26 @@ import './Game.scss';
const GameButton = (props) => {
const { game, dispatch, user } = props;
const setGameDisplayData = () => {
const gameData = {
playerBlack: game.playerBlack,
playerBlackRank: game.playerBlackRank,
gameId: game.id,
}
if (game.open) {
gameData.gameLinkText = 'Request to Join Game';
gameData.playerWhite = '';
gameData.playerWhiteRank = 'could be you!';
}
if (!game.open) {
gameData.playerWhite = game.playerWhite;
gameData.playerWhiteRank = game.playerWhiteRank;
gameData.gameLinkText = game.winType ? 'Study Game'
: user ? 'Rejoin Game' : 'Watch Game'
}
return gameData;
}
const requestJoinGame = () => {
console.log(`request to Join Game ${game.id}!`)
const requestAction = {
@ -28,9 +48,15 @@ const GameButton = (props) => {
)
}
const renderInProgressGame = () => {
const gameLinkText = game.winType ? 'Study Game'
: user ? 'Rejoin Game' : 'Watch Game'
const renderGame = () => {
const {
gameLinkText,
playerBlack,
playerBlackRank,
gameId,
playerWhite,
playerWhiteRank
} = setGameDisplayData();
return (
<>
<div className="GameButton__seat GameButton__seat--black">
@ -44,26 +70,29 @@ const GameButton = (props) => {
>
<span
className="GameButton__player-data__name GameButton__player-data__name--black"
>{game.playerBlack}</span>
>{playerBlack}</span>
<span
className="GameButton__player-data__rank GameButton__player-data__rank"
>{game.playerBlackRank}</span>
>{playerBlackRank}</span>
</div>
<Link
className="GameButton__link"
to={`/games/${game.id}`}
to={`/games/${gameId}`}
>{gameLinkText}</Link>
<div
className="GameButton__player-data GameButton__player-data--white"
<div
className={`GameButton__player-data GameButton__player-data--white ${
playerWhite ? '' : 'GameButton__player-data--invisible'
}`
}
>
<span
className="GameButton__player-data__name GameButton__player-data__name--white"
>{game.playerWhite}</span>
<span
className="GameButton__player-data__rank GameButton__player-data__rank--white"
>{game.playerWhiteRank}</span>
<span
className="GameButton__player-data__name GameButton__player-data__name--white"
>{playerWhite}</span>
<span
className="GameButton__player-data__rank GameButton__player-data__rank--white"
>{playerWhiteRank}</span>
</div>
</div>
@ -90,7 +119,7 @@ const GameButton = (props) => {
return (
<div className="GameButton" data-testid="GameButton">
{game.open ? renderOpenGame() : renderInProgressGame()}
{renderGame()}
</div>
);
}

6
packages/play-node-go/src/components/Button/Game/Game.scss
View file

@ -2,7 +2,6 @@
div.GameButton {
align-items: stretch;
box-shadow: -2vmin 4vmin 2vmin rgba(83, 53, 35, 0.81);
display: flex;
flex-flow: column nowrap;
height: 20vh;
@ -30,6 +29,7 @@ div.GameButton__seat {
}
div.GameButton__table {
box-shadow: -2vmin 4vmin 2vmin rgba(83, 53, 35, 0.81);
height: 80%;
margin: 0;
width: 100%;
@ -117,7 +117,9 @@ div.GameButton__player-data {
display: flex;
justify-content: space-around;
max-width: 100%;
&.GameButton__player-data--invisible {
visibility: hidden;
}
&.GameButton__player-data--white {
margin: 0 5vw 1vw 0.5vw;
}