stub styling of side and main content

This commit is contained in:
Sorrel Bri 2020-01-16 15:21:23 -08:00
parent bf7e6a3425
commit 3bbc272743
12 changed files with 221 additions and 65 deletions

View file

@ -0,0 +1,11 @@
@mixin fullspan {
height: 100%;
width: 100%;
}
@mixin flexAround($direction) {
display: flex;
flex-direction: $direction;
align-items: center;
justify-content: space-around;
}

View file

@ -0,0 +1,17 @@
$dev-colors: (
"a": #34dc90,
"b": #9034dc,
"c": #dc9034,
"d": #dc34dc,
"e": #34dcdc,
"f": #dcdc34
);
/* Responsive Design */
$break-points: (
"500": "only screen and (min-width: 500px)",
"570": "only screen and (min-width: 570px)",
"590": "only screen and (min-width: 590px)",
"700": "only screen and (min-width: 700px)",
"900": "only screen and (min-width: 900px)"
)

View file

@ -6,13 +6,7 @@ import { Switch, Route, BrowserRouter as Router } from 'react-router-dom';
import socketIOClient from 'socket.io-client';
import Sidebar from './components/Sidebar/Sidebar';
import Account from './pages/Account/Account';
import Game from './pages/Game/Game';
import Home from './pages/Home/Home';
import News from './pages/News/News';
import Room from './pages/Room/Room';
import MainWrapper from './components/MainWrapper/MainWrapper';
import { stateReducer } from './reducers/stateReducer';
import { initState } from './reducers/init/stateReducer.init';
@ -48,40 +42,34 @@ function App() {
<Router>
<div data-testid="App" className="App">
<Switch>
<Route path="/account">
<MainWrapper page="account" state={state} dispatch={dispatch}/>
</Route>
<Route path="/rooms">
<MainWrapper page="room" state={state} dispatch={dispatch}/>
</Route>
<Route path="/games">
<MainWrapper page="game" state={state} dispatch={dispatch}/>
</Route>
<Route path="/news">
<MainWrapper page="news" state={state} dispatch={dispatch}/>
</Route>
<Route path="/">
{/* Add ternary for login */}
<MainWrapper page="home" state={state} dispatch={dispatch}/>
</Route>
</Switch>
<h1>React Boilerplate</h1>
{fetchData ? <p>{fetchData}</p> : <></>}
{socketData ? <p>{socketData}</p> : <></>}
{error ? error.map(err => <p>{err}</p>): <></>}
<Switch>
<Route path="/account">
<Sidebar page="account" state={state} dispatch={dispatch}/>
<Account state={state} dispatch={dispatch}/>
</Route>
<Route path="/rooms">
<Sidebar page="rooms"/>
<Room state={state} dispatch={dispatch}/>
</Route>
<Route path="/games">
<Sidebar page="games"/>
<Game state={state} dispatch={dispatch}/>
</Route>
<Route path="/news">
<Sidebar page="news"/>
<News state={state} dispatch={dispatch}/>
</Route>
<Route path="/">
<Sidebar page="home" state={state} dispatch={dispatch}/>
{/* Add ternary for login */}
<Home state={state} dispatch={dispatch}/>
</Route>
</Switch>
</div>
</Router>
);

View file

@ -1,13 +1,35 @@
import React, { useState } from 'react';
import './Login.scss';
const Login = () => {
const Login = (props) => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
return (
<div className="Login" data-testid="Login">
<form data-testid="Login__form">
<label htmlFor="username-input">Username:</label>
<input
name="username"
id="username-input"
type="text"
onChange={e => setUsername(e.target.value)}
default="username"
/>
<label htmlFor="password-input">Password:</label>
<input
name="password"
id="password-input"
type="text"
onChange={e => setPassword(e.target.value)}
default=""
/>
<input type="submit" value="Login!" />
</form>
</div>
);
}

View file

@ -0,0 +1,49 @@
import React, { useState } from 'react';
import './MainWrapper.scss';
import Sidebar from '../Sidebar/Sidebar';
import Account from '../../pages/Account/Account';
import Game from '../../pages/Game/Game';
import Home from '../../pages/Home/Home';
import News from '../../pages/News/News';
import Room from '../../pages/Room/Room';
const MainWrapper = (props) => {
const setWrapperWithSidebarAndPage = props => {
if (props.page === 'game') return selectPage(props)
return (
<div className="main-wrapper" data-testid="main-wrapper">
<Sidebar page={props.page} state={props.state} dispatch={props.dispatch}/>
<main>
{selectPage(props)}
</main>
</div>
)
}
const selectPage = props =>{
switch (props.page) {
case 'account':
return <Account state={props.state} dispatch={props.dispatch}/>
case 'game':
return <Game state={props.state} dispatch={props.dispatch}/>
case 'home':
return <Home state={props.state} dispatch={props.dispatch}/>
case 'news':
return <News state={props.state} dispatch={props.dispatch}/>
case 'room':
return <Room state={props.state} dispatch={props.dispatch}/>
default:
return <></>
}
}
return (
<>
{ setWrapperWithSidebarAndPage(props) }
</>
);
}
export default MainWrapper;

View file

@ -0,0 +1,38 @@
@import '../../../public/stylesheets/partials/mixins';
div.main-wrapper {
display: flex;
justify-content: flex-start;
@include fullspan;
aside {
display: flex;
flex-direction: column;
flex-grow: 1;
a {
display: block;
}
}
main {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 4;
}
}
div.Game {
display: flex;
justify-content: space-between;
@include fullspan;
aside {
@include flexAround(column);
flex-grow: 1;
}
div.game-area {
@include flexAround(column);
flex-grow: 2;
}
}

View file

@ -2,7 +2,6 @@ import React, { useState } from 'react';
import './Sidebar.scss';
import AccountSidebar from '../../pages/Account/AccountSidebar';
import GameSidebar from '../../pages/Game/GameSidebar';
import HomeSidebar from '../../pages/Home/HomeSidebar';
import NewsSidebar from '../../pages/News/NewsSidebar';
import RoomSidebar from '../../pages/Room/RoomSidebar';
@ -12,15 +11,13 @@ const Sidebar = (props) => {
const displayComponent = props =>{
switch (props.page) {
case 'account':
return <AccountSidebar state={props.state}/>
case 'game':
return <GameSidebar state={props.state}/>
return <AccountSidebar state={props.state} dispatch={props.dispatch}/>
case 'home':
return <HomeSidebar state={props.state}/>
return <HomeSidebar state={props.state} dispatch={props.dispatch}/>
case 'news':
return <NewsSidebar state={props.state}/>
return <NewsSidebar state={props.state} dispatch={props.dispatch}/>
case 'room':
return <RoomSidebar state={props.state}/>
return <RoomSidebar state={props.state} dispatch={props.dispatch}/>
default:
return <></>
}

View file

@ -1,7 +1,7 @@
import React, { useState } from 'react';
import './Signup.scss';
const Signup = () => {
const Signup = (props) => {
const [ username, setUsername ] = useState('');
const [ password, setPassword ] = useState('');
const [ confirmPassword, setConfirmPassword ] = useState('');
@ -28,7 +28,7 @@ const Signup = () => {
default=""
/>
<label htmlFor="confirmPassword-input">confirmPassword:</label>
<label htmlFor="confirmPassword-input">Confirm password:</label>
<input
name="confirmPassword"
id="confirmPassword-input"
@ -37,6 +37,8 @@ const Signup = () => {
default=""
/>
<input type="submit" value="Create Account!"/>
</form>
</div>
);

View file

@ -1,7 +1,46 @@
* {
box-sizing: border-box;
@import '../public/stylesheets/partials/_variables';
@import '../public/stylesheets/partials/_mixins';
html * {
margin: 0;
@media #{map-get($break-points, "500")} {
font-size: 14px;
}
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
height: 100vh;
width: 100vw;
div#root {
@include fullspan;
}
div.App {
@include fullspan;
// ! dev settings
background-color: map-get($dev-colors, "f");
}
// ! dev settings
aside {
background-color: map-get($dev-colors, "e");
}
main {
background-color: map-get($dev-colors, "d");
}
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}

View file

@ -1,10 +0,0 @@
import React from 'react';
const GameSidebar = () => {
return (
<>
</>
);
}
export default GameSidebar;

View file

@ -3,8 +3,11 @@ import './Home.scss';
const Home = () => {
return (
<div className="Home" data-testid="Home">
<p>Home</p>
<div className="page">
<div className="Home" data-testid="Home">
<p>Home</p>
</div>
</div>
);
}

View file

@ -10,10 +10,10 @@ const HomeSidebar = (props) => {
<nav>
{props.state.user ? <></> : <>
<p onClick={()=>{setShowForm('login')}}>Login</p>
{showForm === 'login' ? <Login /> : <></>}
<p onClick={()=>{setShowForm('signup')}}>Signup</p>
{showForm === 'signup' ? <Signup /> : <></>}
</>}
{showForm === 'signup' ? <Signup /> : <></>}
{showForm === 'login' ? <Login /> : <></>}
</nav>
);
}