refactor all jsx to BEM

This commit is contained in:
Sorrel Bri 2020-01-28 17:03:17 -08:00 committed by sorrelbri
parent e1515db88c
commit c853cb2ad8
18 changed files with 279 additions and 65 deletions

View file

@ -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>
);

View file

@ -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>
<div className="Game__playerData">
<span className="Game__playerData__name">{game.playerBlack}</span>
<span className="Game__playerData__rank">{game.playerBlackRank}</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="Game__playerData">
<span className="Game__playerData__name">{game.playerWhite}</span>
<span className="Game__playerData__rank">{game.playerWhiteRank}</span>
<div className="GameButton__seat GameButton__seat--white">
</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%;
}
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;
}

View file

@ -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>
</>);
}

View file

@ -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>

View file

@ -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>
);

View file

@ -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>
);

View file

@ -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>

View file

@ -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>
<input
name="password"
id="password-input"
type="password"
onChange={e => setPassword(e.target.value)}
<label
className="form__label form__label--password"
htmlFor="password-input"
>Password:</label>
<input
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>

View file

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

View file

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

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

View file

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

View file

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

View file

@ -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>
);

View file

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

View file

@ -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>

View file

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