refactor all jsx to BEM

2020-01-28 17:03:17 -08:00 · 2020-01-28 17:03:17 -08:00 · b45abe5559
commit b45abe5559
parent d7c0477c88
18 changed files with 279 additions and 65 deletions
--- a/play-node-go/src/App.js
+++ b/play-node-go/src/App.js
@ -73,8 +73,7 @@ function App() {
          </Route>

        </Switch>
-        <h1>React Boilerplate</h1>
-        <p>{state.connect.type ? '✓' : ' ⃠'}</p>
+        <p className="App__socket-flag">{state.connect.type ? '✓' : ' ⃠'}</p>
      </div>
    </Router>
  );
--- a/play-node-go/src/components/Button/Game/Game.js
+++ b/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">
-          <span className="Game__playerData__name">{game.playerBlack}</span>
-          <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--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 className="Game__playerData">
-          <span className="Game__playerData__name">{game.playerBlack}</span>
-          <span className="Game__playerData__rank">{game.playerBlackRank}</span>
        </div>
        
-        <div className="Game__playerData">
-          <span className="Game__playerData__name">{game.playerWhite}</span>
-          <span className="Game__playerData__rank">{game.playerWhiteRank}</span>
+        <div className="GameButton__table">
+          <div className="GameButton__table__meta">
+            <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="GameButton__seat GameButton__seat--white">
+
+        </div>
+
      </>
    )
  }
--- a/play-node-go/src/components/Button/Game/Game.scss
+++ b/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;
 }
--- a/play-node-go/src/components/Display/Development/Development.js
+++ b/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>
  </>);
 }

--- a/play-node-go/src/components/Display/Message/Message.js
+++ b/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>
--- a/play-node-go/src/components/Error/ActionError/ActionError.js
+++ b/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>
    );
--- a/play-node-go/src/components/Error/FormError/FormError.js
+++ b/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>
    );
--- a/play-node-go/src/components/Form/Login/Login.js
+++ b/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>
--- a/play-node-go/src/components/Form/Signup/Signup.js
+++ b/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"
-          id="username-input"
-          type="text"
-          onChange={e => setUsername(e.target.value)}
+          className="form__input form__input--username"
          default="username"
-        />
-
-        <label htmlFor="email-input">Email:</label>
-        <input 
-          name="email"
-          id="email-input"
+          id="username-input"
+          name="username"
+          onChange={e => setUsername(e.target.value)}
          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 
+          className="form__label form__label--password"
+          htmlFor="password-input"
+        >Password:</label>
        <input
-          name="password"
-          id="password-input"
-          type="password"
-          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>
--- a/play-node-go/src/pages/Account/AccountSidebar.js
+++ b/play-node-go/src/pages/Account/AccountSidebar.js
@ -2,8 +2,8 @@ import React from 'react';

 const AccountSidebar = () => {
  return (  
-    <>
-    </>
+    <nav>
+    </nav>
  );
 }

--- a/play-node-go/src/pages/Game/Game.js
+++ b/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>
  );
 }
--- a/play-node-go/src/pages/Home/Home.js
+++ b/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>
+    <div className="Home" data-testid="Home">
+      {renderRooms()}
    </div>
  );
 }
--- a/play-node-go/src/pages/Home/Home.scss
+++ b/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;
--- a/play-node-go/src/pages/Home/HomeSidebar.js
+++ b/play-node-go/src/pages/Home/HomeSidebar.js
@ -16,15 +16,34 @@ const HomeSidebar = (props) => {
  </>

  const ifNoUser = <>
-    <p onClick={()=>{setShowForm('login')}}>Login</p>
-    {showForm === 'login' ? <Login dispatch={props.dispatch} state={props.state}/> : <></>}
-    <p onClick={()=>{setShowForm('signup')}}>Signup</p>
-    {showForm === 'signup' ? <Signup dispatch={props.dispatch} state={props.state}/> : <></>}
+    <p 
+      className="auth-label" 
+      onClick={()=>{setShowForm('login')}}
+    >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>
  );
 }
--- a/play-node-go/src/pages/Layout/NavBar/NavBar.js
+++ b/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>
  );
--- a/play-node-go/src/pages/News/NewsSidebar.js
+++ b/play-node-go/src/pages/News/NewsSidebar.js
@ -2,8 +2,8 @@ import React from 'react';

 const NewsSidebar = () => {
  return (  
-    <>
-    </>
+    <nav>
+    </nav>
  );
 }

--- a/play-node-go/src/pages/Room/Room.js
+++ b/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>
--- a/play-node-go/src/pages/Room/RoomSidebar.js
+++ b/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>
  );
 }