stub styling of side and main content

play-node-go/public/stylesheets/partials/_mixins.scss

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

play-node-go/public/stylesheets/partials/_variables.scss

@@ -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)"
+)

play-node-go/src/App.js

@@ -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';
@@ -47,41 +41,35 @@ function App() {
   return (
     <Router>
       
-      <div data-testid="App" className="App">
+      <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>
   );

play-node-go/src/components/Login/Login.js

@@ -1,15 +1,37 @@
 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>
   );
 }
- 
+
 export default Login;

play-node-go/src/components/MainWrapper/MainWrapper.js

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

play-node-go/src/components/MainWrapper/MainWrapper.scss

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

play-node-go/src/components/Sidebar/Sidebar.js

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

play-node-go/src/components/Signup/Signup.js

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

play-node-go/src/index.scss

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

play-node-go/src/pages/Game/GameSidebar.js

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

play-node-go/src/pages/Home/Home.js

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

play-node-go/src/pages/Home/HomeSidebar.js

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