refactor all jsx to BEM

This commit is contained in:
Sorrel Bri 2020-01-28 17:03:17 -08:00
parent d7c0477c88
commit b45abe5559
18 changed files with 279 additions and 65 deletions

View file

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

View file

@ -20,9 +20,9 @@ const GameButton = (props) => {
<> <>
<a onClick={() => requestJoinGame()} >Request to Join Game</a> <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> </div>
</> </>
) )
@ -33,17 +33,56 @@ const GameButton = (props) => {
: user ? 'Rejoin Game' : 'Watch Game' : user ? 'Rejoin Game' : 'Watch Game'
return ( 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>
<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> </div>
</> </>
) )
} }

View file

@ -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%; 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; display: flex;
justify-content: space-between; 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;
} }

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -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 () => { const fetchRoomsAPI = async () => {
@ -38,11 +39,8 @@ const Home = props => {
}, []) }, [])
return ( return (
<div className="page"> <div className="Home" data-testid="Home">
{renderRooms()}
<div className="Home" data-testid="Home">
{renderRooms()}
</div>
</div> </div>
); );
} }

View file

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

View file

@ -16,15 +16,34 @@ const HomeSidebar = (props) => {
</> </>
const ifNoUser = <> 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 ( return (
<nav> <nav>
{props.state.user.username ? ifUser : ifNoUser} {
props.state.user.username
? ifUser
: ifNoUser
}
</nav> </nav>
); );
} }

View file

@ -12,15 +12,15 @@ const NavBar = (props) => {
</Link> </Link>
<Link to="/home" > <Link to="/home" >
<div className="NavBar__home">Find a Game</div> <div className="NavBar__menu-item NavBar__home">Find a Game</div>
</Link> </Link>
<Link to="/news"> <Link to="/news">
<div className="NavBar__news">News</div> <div className="NavBar__menu-item NavBar__news">News</div>
</Link> </Link>
<Link to="/account"> <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> </Link>
</div> </div>
); );

View file

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

View file

@ -80,7 +80,7 @@ const Room = (props) => {
return ( return (
<div className="Room" data-testid="Room"> <div className="Room" data-testid="Room">
<div className="Room__heading"> <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> */} {/* <span className="Room__connection">{socket ? '✓' : ' ⃠'}</span> */}
{state.errors.joinGame ? <ActionError error={state.errors.joinGame}/> : <></>} {state.errors.joinGame ? <ActionError error={state.errors.joinGame}/> : <></>}
</div> </div>

View file

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