diff --git a/packages/play-node-go/src/components/Button/Game/Game.js b/packages/play-node-go/src/components/Button/Game/Game.js index 2eb50a5..131500e 100644 --- a/packages/play-node-go/src/components/Button/Game/Game.js +++ b/packages/play-node-go/src/components/Button/Game/Game.js @@ -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 ( <>
@@ -44,26 +70,29 @@ const GameButton = (props) => { > {game.playerBlack} + >{playerBlack} {game.playerBlackRank} + >{playerBlackRank}
{gameLinkText} -
- {game.playerWhite} - {game.playerWhiteRank} + {playerWhite} + {playerWhiteRank}
@@ -90,7 +119,7 @@ const GameButton = (props) => { return (
- {game.open ? renderOpenGame() : renderInProgressGame()} + {renderGame()}
); } diff --git a/packages/play-node-go/src/components/Button/Game/Game.scss b/packages/play-node-go/src/components/Button/Game/Game.scss index 5478166..5fe29e8 100644 --- a/packages/play-node-go/src/components/Button/Game/Game.scss +++ b/packages/play-node-go/src/components/Button/Game/Game.scss @@ -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; }