From 8a60d828321923643c0bef036d9fb2b36cf5b4ad Mon Sep 17 00:00:00 2001
From: sorrelbri <sorrel.bri.june@gmail.com>
Date: Fri, 10 Apr 2020 20:03:27 -0700
Subject: [PATCH] patch styling of game room drop shadows, refactor GameButton
 for open games

---
 .../src/components/Button/Game/Game.js        | 59 ++++++++++++++-----
 .../src/components/Button/Game/Game.scss      |  6 +-
 2 files changed, 48 insertions(+), 17 deletions(-)

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 (
       <>
         <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>
   );
 }
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;
   }