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

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

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

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

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