refactor all jsx to BEM
This commit is contained in:
parent
e1515db88c
commit
c853cb2ad8
18 changed files with 279 additions and 65 deletions
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -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>
|
||||
</>);
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -2,8 +2,8 @@ import React from 'react';
|
|||
|
||||
const AccountSidebar = () => {
|
||||
return (
|
||||
<>
|
||||
</>
|
||||
<nav>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
div.Page div.Home {
|
||||
div.Home {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: flex-start;
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -2,8 +2,8 @@ import React from 'react';
|
|||
|
||||
const NewsSidebar = () => {
|
||||
return (
|
||||
<>
|
||||
</>
|
||||
<nav>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -5,11 +5,11 @@ import RoomArchiveButton from '../../components/Button/RoomArchive/RoomArchive';
|
|||
|
||||
const RoomSidebar = () => {
|
||||
return (
|
||||
<>
|
||||
<nav>
|
||||
<FindGameForm />
|
||||
<NewGameButton />
|
||||
<RoomArchiveButton />
|
||||
</>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue