patch styling of game room drop shadows, refactor GameButton for open games
This commit is contained in:
parent
a69b48d238
commit
8a60d82832
2 changed files with 48 additions and 17 deletions
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue