oxaliq/node-go
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

decoupled show Auth form logic from Home sidebar for use in other sidebars on Auth errors

Browse source
This commit is contained in:
Sorrel Bri 2020-02-04 19:21:31 -08:00
parent 8999b3ab3b
commit d0d4f2429c
16 changed files with 135 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
play-node-go/public/index.html
View file

@ -11,6 +11,7 @@
/> />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/reset.css"> <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/reset.css">
<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
<title>Node Go</title> <title>Node Go</title>
</head> </head>
<body> <body>

6
play-node-go/public/stylesheets/partials/_mixins.scss
View file

@ -9,3 +9,9 @@
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
} }
@mixin gameViewLabel {
color: rgb(255,240,230);
background-color: rgba(0,0,0,0.7);
padding: 0.25em;
}

6
play-node-go/public/stylesheets/partials/_variables.scss
View file

@ -18,6 +18,12 @@ $break-points: (
$colors: ( $colors: (
"error": #aa3333, "error": #aa3333,
"nav_bar": #6f3e68,
"nav_link": #dae1b7,
"sidebar": #3c013f,
"sidebar_link": #f2ce3d,
"main": #95acae,
"home": #444444
); );
$backgrounds: ( $backgrounds: (

10
play-node-go/src/components/Button/Game/Game.scss
View file

@ -1,3 +1,4 @@
@import '../../../../public/stylesheets/partials/mixins';
div.GameButton { div.GameButton {
align-items: stretch; align-items: stretch;
@ -112,7 +113,7 @@ div.table__player-area {
} }
div.GameButton__player-data { div.GameButton__player-data {
background-color: rgba(255,255,255,0.65); @include gameViewLabel;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
max-width: 100%; max-width: 100%;
@ -127,7 +128,10 @@ div.GameButton__player-data {
} }
.GameButton__link { .GameButton__link {
background-color: rgba(255, 255, 255, 0.95); @include gameViewLabel;
margin: 0 auto; margin: 0 auto;
padding: .5vw; text-decoration: none;
&:hover {
text-decoration: underline;
}
} }

35
play-node-go/src/components/Form/Auth/Auth.js Normal file
View file

@ -0,0 +1,35 @@
import React, { useState } from 'react';
import Login from '../Login/Login';
import Signup from '../Signup/Signup';
const Auth = (props) => {
const [ showForm, setShowForm ] = useState('login')
const { state, dispatch } = props;
return (
<>
<p
className="auth-label"
onClick={()=>{setShowForm('login')}}
>Login</p>
{
showForm === 'login'
? <Login dispatch={dispatch} state={state}/>
: <></>
}
<p
className="auth-label"
onClick={()=>{setShowForm('signup')}}
>Signup</p>
{
showForm === 'signup'
? <Signup dispatch={dispatch} state={state}/>
: <></>
}
</>
);
}
export default Auth;

5
play-node-go/src/components/GameUI/PlayerArea/PlayerArea.scss
View file

@ -1,4 +1,5 @@
@import '../../../../public/stylesheets/partials/variables'; @import '../../../../public/stylesheets/partials/variables';
@import '../../../../public/stylesheets/partials/mixins';
div.player-container { div.player-container {
display: flex; display: flex;
@ -92,10 +93,8 @@ div.player-container__name-space {
align-items: center; align-items: center;
h4 { h4 {
@include gameViewLabel;
font-size: 120%; font-size: 120%;
color: rgb(255,240,230);
background-color: rgba(0,0,0,0.7);
padding: 0.25em;
z-index: 1; z-index: 1;
} }
} }

13
play-node-go/src/index.scss
View file

@ -3,17 +3,17 @@
html * { html * {
margin: 0; margin: 0;
font-size: 14px;
@media #{map-get($break-points, "500")} { @media #{map-get($break-points, "500")} {
font-size: 14px; // font-size: 14px;
} }
} }
body { body {
margin: 0; margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", font-family: 'Oswald', sans-serif;
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", font-weight: 800;
sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
box-sizing: border-box; box-sizing: border-box;
@ -32,11 +32,12 @@ body {
// ! dev settings // ! dev settings
aside { aside {
background-color: map-get($dev-colors, "e"); background-color: map-get($colors, "sidebar");
} }
main { main {
background-color: map-get($dev-colors, "d"); background-color: map-get($colors, "main");
font-weight: 100;
} }
} }

6
play-node-go/src/pages/Home/Home.scss
View file

@ -1,6 +1,12 @@
@import '../../../public/stylesheets/partials/variables';
@import '../../../public/stylesheets/partials/mixins';
div.Home { div.Home {
@include fullspan;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
align-items: flex-start; align-items: flex-start;
justify-content: flex-start; justify-content: flex-start;
background-color: map-get($colors, "home");
overflow: scroll;
} }

29
play-node-go/src/pages/Home/HomeSidebar.js
View file

@ -1,13 +1,12 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import Signup from '../../components/Form/Signup/Signup'; import Auth from '../../components/Form/Auth/Auth';
import Login from '../../components/Form/Login/Login';
import NewRoomButton from '../../components/Button/NewRoom/NewRoom'; import NewRoomButton from '../../components/Button/NewRoom/NewRoom';
import FindRoomForm from '../../components/Form/FindRoom/FindRoom'; import FindRoomForm from '../../components/Form/FindRoom/FindRoom';
import LibraryButton from '../../components/Button/Library/Library'; import LibraryButton from '../../components/Button/Library/Library';
const HomeSidebar = (props) => { const HomeSidebar = (props) => {
const [ showForm, setShowForm ] = useState(''); const { state, dispatch } = props;
const ifUser = <> const ifUser = <>
<FindRoomForm /> <FindRoomForm />
@ -15,32 +14,12 @@ const HomeSidebar = (props) => {
<LibraryButton /> <LibraryButton />
</> </>
const ifNoUser = <> const ifNoUser = <Auth state={state} dispatch={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 ( return (
<nav> <nav>
{ {
props.state.user.username state.user.username
? ifUser ? ifUser
: ifNoUser : ifNoUser
} }

27
play-node-go/src/pages/Layout/MainWrapper/MainWrapper.js
View file

@ -10,34 +10,35 @@ import News from '../../News/News';
import Room from '../../Room/Room'; import Room from '../../Room/Room';
const MainWrapper = (props) => { const MainWrapper = (props) => {
const { state, page, dispatch } = props;
const setWrapperWithSidebarAndPage = props => { const setWrapperWithSidebarAndPage = () => {
if (props.page === 'game') return selectPage(props) if (page === 'game') return selectPage()
return ( return (
<div className="main-wrapper" data-testid="main-wrapper"> <div className="main-wrapper" data-testid="main-wrapper">
<NavBar user={props.state.user}/> <NavBar state={state}/>
<div className="content-wrapper"> <div className="content-wrapper">
<Sidebar page={props.page} state={props.state} dispatch={props.dispatch}/> <Sidebar page={page} state={state} dispatch={dispatch}/>
<main> <main>
{selectPage(props)} {selectPage()}
</main> </main>
</div> </div>
</div> </div>
) )
} }
const selectPage = props =>{ const selectPage = () =>{
switch (props.page) { switch (page) {
case 'account': case 'account':
return <Account state={props.state} dispatch={props.dispatch}/> return <Account state={state} dispatch={dispatch}/>
case 'game': case 'game':
return <Game state={props.state} dispatch={props.dispatch}/> return <Game state={state} dispatch={dispatch}/>
case 'home': case 'home':
return <Home state={props.state} dispatch={props.dispatch}/> return <Home state={state} dispatch={dispatch}/>
case 'news': case 'news':
return <News state={props.state} dispatch={props.dispatch}/> return <News state={state} dispatch={dispatch}/>
case 'room': case 'room':
return <Room state={props.state} dispatch={props.dispatch}/> return <Room state={state} dispatch={dispatch}/>
default: default:
return <></> return <></>
} }
@ -45,7 +46,7 @@ const MainWrapper = (props) => {
return ( return (
<> <>
{ setWrapperWithSidebarAndPage(props) } { setWrapperWithSidebarAndPage() }
</> </>
); );
} }

4
play-node-go/src/pages/Layout/NavBar/NavBar.js
View file

@ -12,11 +12,11 @@ const NavBar = (props) => {
</Link> </Link>
<Link to="/home" > <Link to="/home" >
<div className="NavBar__menu-item NavBar__home">Find a Game</div> <div className="NavBar__menu-item NavBar__home"><p>Find a Game</p></div>
</Link> </Link>
<Link to="/news"> <Link to="/news">
<div className="NavBar__menu-item NavBar__news">News</div> <div className="NavBar__menu-item NavBar__news"><p>News</p></div>
</Link> </Link>
<Link to="/account"> <Link to="/account">

17
play-node-go/src/pages/Layout/NavBar/NavBar.scss
View file

@ -1,5 +1,22 @@
@import '../../../../public/stylesheets/partials/_variables.scss';
div.NavBar { div.NavBar {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
justify-content: space-between; justify-content: space-between;
align-items: center;
background-color: map-get($colors, "nav_bar");
color: map-get($colors, "nav_link");
p {
font-size: 1.4em;
}
a {
text-decoration: none;
}
a{
color: inherit;
}
} }

16
play-node-go/src/pages/Layout/Sidebar/Sidebar.js
View file

@ -7,17 +7,17 @@ import NewsSidebar from '../../News/NewsSidebar';
import RoomSidebar from '../../Room/RoomSidebar'; import RoomSidebar from '../../Room/RoomSidebar';
const Sidebar = (props) => { const Sidebar = (props) => {
const {page, state, dispatch} = props
const displayComponent = props =>{ const displayComponent = () =>{
switch (props.page) { switch (page) {
case 'account': case 'account':
return <AccountSidebar state={props.state} dispatch={props.dispatch}/> return <AccountSidebar state={state} dispatch={dispatch}/>
case 'home': case 'home':
return <HomeSidebar state={props.state} dispatch={props.dispatch}/> return <HomeSidebar state={state} dispatch={dispatch}/>
case 'news': case 'news':
return <NewsSidebar state={props.state} dispatch={props.dispatch}/> return <NewsSidebar state={state} dispatch={dispatch}/>
case 'room': case 'room':
return <RoomSidebar state={props.state} dispatch={props.dispatch}/> return <RoomSidebar state={state} dispatch={dispatch}/>
default: default:
return <></> return <></>
} }
@ -25,7 +25,7 @@ const Sidebar = (props) => {
return ( return (
<aside className="Sidebar" data-testid="Sidebar"> <aside className="Sidebar" data-testid="Sidebar">
{displayComponent(props)} {displayComponent()}
</aside> </aside>
); );
} }

5
play-node-go/src/pages/Layout/Sidebar/Sidebar.scss
View file

@ -0,0 +1,5 @@
@import '../../../../public/stylesheets/partials/variables';
aside {
color: map-get($colors, "sidebar_link")
}

1
play-node-go/src/pages/Room/Room.js
View file

@ -14,7 +14,6 @@ import Loading from '../../components/Display/Loading/Loading';
const Room = (props) => { const Room = (props) => {
const { state, dispatch } = props; const { state, dispatch } = props;
const roomId = parseInt(useParams().id) || 0; const roomId = parseInt(useParams().id) || 0;
// const socket = socketIOClient(`${config.socketAddress}/${roomId}`);
const fetchRoomAPI = async () => { const fetchRoomAPI = async () => {
const response = await roomsServices.getRoomService(roomId); const response = await roomsServices.getRoomService(roomId);

16
play-node-go/src/pages/Room/RoomSidebar.js
View file

@ -1,11 +1,25 @@
import React from 'react'; import React from 'react';
import Auth from '../../components/Form/Auth/Auth';
import FindGameForm from '../../components/Form/FindGame/FindGame'; import FindGameForm from '../../components/Form/FindGame/FindGame';
import NewGameButton from '../../components/Button/NewGame/NewGame'; import NewGameButton from '../../components/Button/NewGame/NewGame';
import RoomArchiveButton from '../../components/Button/RoomArchive/RoomArchive'; import RoomArchiveButton from '../../components/Button/RoomArchive/RoomArchive';
const RoomSidebar = () => { const RoomSidebar = props => {
const {state, dispatch} = props;
const showAuth = () => {
if (state.errors.joinGame) {
return (
<Auth state={state} dispatch={dispatch} />
)
}
return <></>
}
return ( return (
<nav> <nav>
{showAuth()}
<FindGameForm /> <FindGameForm />
<NewGameButton /> <NewGameButton />
<RoomArchiveButton /> <RoomArchiveButton />