refactor all jsx to BEM

play-node-go/src/App.js

@@ -73,8 +73,7 @@ function App() {
           </Route>
 
         </Switch>
-        <h1>React Boilerplate</h1>
+        <p className="App__socket-flag">{state.connect.type ? '✓' : ' ⃠'}</p>
-        <p>{state.connect.type ? '✓' : ' ⃠'}</p>
       </div>
     </Router>
   );

play-node-go/src/components/Button/Game/Game.js

@@ -20,9 +20,9 @@ const GameButton = (props) => {
       <>
         <a onClick={() => requestJoinGame()} >Request to Join Game</a>
 
-        <div className="Game__playerData">
+        <div className="GameButton__player-data GameButton__player-data--black">
-          <span className="Game__playerData__name">{game.playerBlack}</span>
+          <span className="GameButton__player-data__name GameButton__player-data__name--black">{game.playerBlack}</span>
-          <span className="Game__playerData__rank">{game.playerBlackRank}</span>
+          <span className="GameButton__player-data__rank GameButton__player-data__rank--black">{game.playerBlackRank}</span>
         </div>
       </>
     )
@@ -33,17 +33,56 @@ const GameButton = (props) => {
       : user ? 'Rejoin Game' : 'Watch Game' 
     return (
       <>
-        <Link to={`/games/${game.id}`}>{gameLinkText}</Link>
+        <div className="GameButton__seat GameButton__seat--black">
+
+        </div>
         
-        <div className="Game__playerData">
+        <div className="GameButton__table">
-          <span className="Game__playerData__name">{game.playerBlack}</span>
+          <div className="GameButton__table__meta">
-          <span className="Game__playerData__rank">{game.playerBlackRank}</span>
+            <div 
+              className="GameButton__player-data GameButton__player-data--black"
+              >
+              <span 
+                className="GameButton__player-data__name GameButton__player-data__name--black"
+                >{game.playerBlack}</span>
+              <span 
+                className="GameButton__player-data__rank GameButton__player-data__rank"
+                >{game.playerBlackRank}</span>
+            </div>
+            
+            <Link 
+              className="GameButton__link"
+              to={`/games/${game.id}`}
+              >{gameLinkText}</Link>
+
+            <div 
+              className="GameButton__player-data GameButton__player-data--white"
+              >
+              <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>
+            </div>
+          </div>
+
+          <div className="GameButton__table__image">
+            <div className="table__player-area table__player-area--black">
+              <div className="table__player-bowl table__player-bowl--black"></div>
+            </div>
+            <div className="table__game-board">
+            </div>
+            <div className="table__player-area table__player-area--white">
+              <div className="table__player-bowl table__player-bowl--white"></div>
+            </div>
+          </div>
         </div>
 
-        <div className="Game__playerData">
+        <div className="GameButton__seat GameButton__seat--white">
-          <span className="Game__playerData__name">{game.playerWhite}</span>
+
-          <span className="Game__playerData__rank">{game.playerWhiteRank}</span>
         </div>
+
       </>
     )
   }

play-node-go/src/components/Button/Game/Game.scss

@@ -1,5 +1,113 @@
-div.Game__playerData {
+
+div.GameButton {
+  align-items: stretch;
+  background-color: #aa9933;
+  display: flex;
+  flex-flow: column nowrap;
+  height: 20vw;
+  justify-content: space-around;
+  margin: 1vw;
+  width: 20vw;
+}
+
+div.GameButton__seat {
+  background-color: red;
+  height: 10%;
+  margin: 0 auto;
+  width: 50%;
+  
+  &.GameButton__seat--black {
+    border: transparent;
+    border-radius: 5vw 5vw 0 0;
+  }
+  
+  &.GameButton__seat--white {
+    border: transparent;
+    border-radius: 0 0 5vw 5vw;
+  }
+  
+}
+
+div.GameButton__table {
+  background-color: blue;
+  height: 80%;
+  margin: 0;
   width: 100%;
+}
+
+div.GameButton__table__meta {
+  background-color: transparent;
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
+  justify-content: space-around;
+  width: 100%;
+  z-index: 2;
+}
+
+div.GameButton__table__meta * {
+  z-index: 2;
+}
+
+div.GameButton__table__image {
+  align-items: center;
+  background: radial-gradient(farthest-corner at 55% 40%, rgb(150, 200, 220) 0%, rgb(97, 166, 194) 65%, rgb(70,100,120) 100%);
+  border: 0.15vw solid rgb(150, 200, 220);
+  // ! change border sides
+  border-radius: 0.3vw; 
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
+  justify-content: space-between;
+  position: relative;
+  top: -100%;
+  width: 100%;
+  z-index: 1;
+  
+  div.table__game-board {
+    background: radial-gradient(farthest-corner at 55% 40%, rgb(244, 230, 120) 0%, rgb(234, 178, 78) 65%, rgb(200, 160, 90) 90%, rgb(200, 140, 90) 100%);
+    height: 60%;
+    width: 60%;
+  }
+}
+
+div.table__player-area {
+  height: 20%;
+  width: 60%;
+
+  div.table__player-bowl {
+    background: radial-gradient(farthest-corner at 48% 54%, rgb(30, 5, 0) 0%, rgb(30, 5, 0) 2%, rgb(30, 5, 0) 32%, rgb(0,0,0)35%, rgb(116,48,17) 48%, rgb(140, 60, 40) 52%, rgb(100, 40, 5) 55%, rgb(116, 48, 17) 58%, rgb(140,60,40) 65%, rgb(100, 40, 5) 80%, rgb(80, 20, 0) 90%);
+    border-radius: 50%;
+    height: 2.75vw;
+    width: 2.75vw;
+
+    &--white {
+      margin: auto 75% auto auto;
+    }
+    
+    &--black {
+      margin: auto auto auto 75%;
+    }
+
+  }
+}
+
+div.GameButton__player-data {
+  background-color: rgba(155,155,155,0.5);
   display: flex;
   justify-content: space-between;
+  margin: 0.5vw;
+  max-width: 100%;
+
+  &.GameButton__player-data--white {
+    margin: 0 5vw 0 0.5vw;
+  }
+
+  &.GameButton__player-data--black {
+    margin: 0 0.5vw 0 5vw;
+  }
+}
+
+.GameButton__link {
+  margin: 0 auto;
 }

play-node-go/src/components/Display/Development/Development.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 const Development = () => {
   return (<>
-    <p>This Feature is in Development :{')'}</p>
+    <p>This Feature is in Development :)</p>
   </>);
 }
 

play-node-go/src/components/Display/Message/Message.js

@@ -4,7 +4,10 @@ import './Message.scss';
 const Message = (props) => {
   const messageData = props.message;
   return (
-    <div className="Message" data-testid="Message">
+    <div 
+      className="Message" 
+      data-testid="Message"
+    >
       <p>{messageData.content}</p>
       <p>{messageData.username}</p>
       <p>{messageData.admin ? 'admin' : <></>}</p>

play-node-go/src/components/Error/ActionError/ActionError.js

@@ -4,7 +4,10 @@ import './ActionError.scss';
 const ActionError = (props) => {
   const errorMessage = props.error;
   return (
-    <span data-testid="ActionError" className="ActionError">
+    <span 
+      className="error error--action"
+      data-testid="ActionError" 
+    >
       {errorMessage}
     </span>
     );

play-node-go/src/components/Error/FormError/FormError.js

@@ -4,7 +4,10 @@ import './FormError.scss';
 const FormError = (props) => {
   const errorMessage = props.error;
   return (
-    <span data-testid="FormError" className="FormError">
+    <span 
+      className="error error--form"
+      data-testid="FormError" 
+    >
       {errorMessage}
     </span>
     );

play-node-go/src/components/Form/Login/Login.js

@@ -68,29 +68,42 @@ const Login = (props) => {
     <div className="Login" data-testid="Login">
       {formError(props.state.errors)}
       <form 
+        className="Login__form"
         data-testid="Login__form"
         onSubmit={e => handleSubmit(e)}
       >
 
-      <label htmlFor="username-input">Username:</label>
+      <label 
+        className="form__label form__label--username" 
+        htmlFor="username-input"
+      >Username:</label>
         <input 
           name="username"
           id="username-input"
+          className="form__input form__input--username"
           type="text"
           onChange={e => setUsername(e.target.value)}
           default="username"
           />
 
-        <label htmlFor="password-input">Password:</label>
+        <label 
+          className="form__label form__label--password"
+          htmlFor="password-input"
+        >Password:</label>
         <input 
           name="password"
           id="password-input"
+          className="form__input form__input--password"
           type="password"
           onChange={e => setPassword(e.target.value)}
           default=""
         />
 
-        <input type="submit" value="Login!" />
+        <input 
+          className="form__submit"
+          type="submit" 
+          value="Login!" 
+        />
 
       </form>
     </div>

play-node-go/src/components/Form/Signup/Signup.js

@@ -87,39 +87,56 @@ const Signup = (props) => {
     <div className="Signup" data-testid="Signup">
       {formError(props.state.errors)}
       <form 
+        className="Signup__form"
         data-testid="Signup__form"
         onSubmit={e => handleSubmit(e)}
       >
 
-        <label htmlFor="username-input">Username:</label>
+        <label 
+          className="form__label form__label--username"
+          htmlFor="username-input"
+        >Username:</label>
         <input 
-          name="username"
+          className="form__input form__input--username"
-          id="username-input"
-          type="text"
-          onChange={e => setUsername(e.target.value)}
           default="username"
-        />
+          id="username-input"
-
+          name="username"
-        <label htmlFor="email-input">Email:</label>
+          onChange={e => setUsername(e.target.value)}
-        <input 
-          name="email"
-          id="email-input"
           type="text"
-          onChange={e => setEmail(e.target.value)}
+        />
+
+        <label 
+          className="form__label form__label--email"
+          htmlFor="email-input"
+        >Email:</label>
+        <input 
+          className="form__input form__input--email"
           default="email"
+          id="email-input"
+          name="email"
+          onChange={e => setEmail(e.target.value)}
+          type="text"
         />
 
-        <label htmlFor="password-input">Password:</label>
+        <label 
-        <input 
+          className="form__label form__label--password"
-          name="password"
+          htmlFor="password-input"
-          id="password-input"
+        >Password:</label>
-          type="password"
+        <input
-          onChange={e => setPassword(e.target.value)}
+          className="form__input form__input--password" 
           default=""
-        />
+          id="password-input"
+          name="password"
+          onChange={e => setPassword(e.target.value)}
+          type="password"
+          />
 
-        <label htmlFor="confirmPassword-input">Confirm password:</label>
+        <label 
+          className="form__label form__label--password"
+          htmlFor="confirmPassword-input"
+          >Confirm password:</label>
         <input 
+          className="form__input form__input--password" 
           name="confirmPassword"
           id="confirmPassword-input"
           type="password"
@@ -127,7 +144,11 @@ const Signup = (props) => {
           default=""
         />
 
-        <input type="submit" value="Create Account!"/>
+        <input 
+          className="form__submit"
+          type="submit" 
+          value="Create Account!"
+        />
 
       </form>
     </div>

play-node-go/src/pages/Account/AccountSidebar.js

@@ -2,8 +2,8 @@ import React from 'react';
 
 const AccountSidebar = () => {
   return (  
-    <>
+    <nav>
-    </>
+    </nav>
   );
 }
 

play-node-go/src/pages/Game/Game.js

@@ -66,10 +66,18 @@ const Game = (props) => {
   // ! [end]
 
   return (  
-    <div className="Game" data-testid="Game">
+    <div 
+      className="Game" 
+      data-testid="Game"
+    >
       <p>Game</p>
-      <span className="Room__connection">{socket ? '✓' : ' ⃠'}</span>
+      
+      <span 
+        className="Game__socket-flag"
+      >{socket ? '✓' : ' ⃠'}</span>
+      
       <Development />
+    
     </div>
   );
 }

play-node-go/src/pages/Home/Home.js

@@ -18,7 +18,8 @@ const Home = props => {
         />
       ))
     }
-    return <p>Loading Component</p>
+    // TODO stub loader
+    return <p className="loading">Loading Component</p>
   }
 
   const fetchRoomsAPI = async () => {
@@ -38,11 +39,8 @@ const Home = props => {
   }, [])
 
   return (  
-    <div className="page">
+    <div className="Home" data-testid="Home">
-
+      {renderRooms()}
-      <div className="Home" data-testid="Home">
-        {renderRooms()}
-      </div>
     </div>
   );
 }

play-node-go/src/pages/Home/Home.scss

@@ -1,4 +1,4 @@
-div.Page div.Home {
+div.Home {
   display: flex;
   flex-flow: row wrap;
   align-items: flex-start;

play-node-go/src/pages/Home/HomeSidebar.js

@@ -16,15 +16,34 @@ const HomeSidebar = (props) => {
   </>
 
   const ifNoUser = <>
-    <p onClick={()=>{setShowForm('login')}}>Login</p>
+    <p 
-    {showForm === 'login' ? <Login dispatch={props.dispatch} state={props.state}/> : <></>}
+      className="auth-label" 
-    <p onClick={()=>{setShowForm('signup')}}>Signup</p>
+      onClick={()=>{setShowForm('login')}}
-    {showForm === 'signup' ? <Signup dispatch={props.dispatch} state={props.state}/> : <></>}
+    >Login</p>
+    {
+      showForm === 'login' 
+      ? <Login dispatch={props.dispatch} state={props.state}/> 
+      : <></>
+    }
+    
+    <p 
+      className="auth-label" 
+      onClick={()=>{setShowForm('signup')}}
+    >Signup</p>
+    {
+      showForm === 'signup' 
+      ? <Signup dispatch={props.dispatch} state={props.state}/> 
+      : <></>
+    }
   </>
 
   return (  
     <nav>
-      {props.state.user.username ? ifUser : ifNoUser}
+      {
+        props.state.user.username 
+        ? ifUser 
+        : ifNoUser
+      }
     </nav>
   );
 }

play-node-go/src/pages/Layout/NavBar/NavBar.js

@@ -12,15 +12,15 @@ const NavBar = (props) => {
       </Link>
 
       <Link to="/home" >
-        <div className="NavBar__home">Find a Game</div>
+        <div className="NavBar__menu-item NavBar__home">Find a Game</div>
       </Link>
       
       <Link to="/news">
-        <div className="NavBar__news">News</div>
+        <div className="NavBar__menu-item NavBar__news">News</div>
       </Link>
 
       <Link to="/account">
-        <div className="NavBar__acount">{props.user ? props.user.username : <></>}</div>
+        <div className="NavBar__menu-item NavBar__acount">{props.user ? props.user.username : <></>}</div>
       </Link>
     </div>
   );

play-node-go/src/pages/News/NewsSidebar.js

@@ -2,8 +2,8 @@ import React from 'react';
 
 const NewsSidebar = () => {
   return (  
-    <>
+    <nav>
-    </>
+    </nav>
   );
 }
 

play-node-go/src/pages/Room/Room.js

@@ -80,7 +80,7 @@ const Room = (props) => {
   return (  
     <div className="Room" data-testid="Room">
       <div className="Room__heading">
-        <h2>{state.currentRoom ? state.currentRoom.name : 'Loading'}</h2>
+        <h2 className="heading--two">{state.currentRoom ? state.currentRoom.name : 'Loading'}</h2>
         {/* <span className="Room__connection">{socket ? '✓' : ' ⃠'}</span> */}
         {state.errors.joinGame ? <ActionError error={state.errors.joinGame}/> : <></>}
       </div>

play-node-go/src/pages/Room/RoomSidebar.js

@@ -5,11 +5,11 @@ import RoomArchiveButton from '../../components/Button/RoomArchive/RoomArchive';
 
 const RoomSidebar = () => {
   return (  
-    <>
+    <nav>
       <FindGameForm />
       <NewGameButton />
       <RoomArchiveButton />
-    </>
+    </nav>
   );
 }