Incorporate SASS, add UI state shape files

frontend/package.json

@@ -22,7 +22,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "watch:sass": "node-sass src/sass/main.scss src/App.css -w",
+    "startr": "npm-run-all — parallel start watch:sass"
   },
   "eslintConfig": {
     "extends": [
@@ -42,5 +44,12 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://localhost:5000"
+  "proxy": "http://localhost:5000",
+  "devDependencies": {
+    "autoprefixer": "^9.8.6",
+    "concat": "^1.0.3",
+    "node-sass": "^5.0.0",
+    "npm-run-all": "^4.1.5",
+    "postcss-cli": "^8.3.1"
+  }
 }

frontend/src/actions/socket_actions.js

@@ -0,0 +1,12 @@
+// export const SET_WAITING_STATUS = 'SET_WAITING_STATUS';
+// export const SET_CALCULATING_SCORE = 'SET_CALCULATING_SCORE';
+
+// export const setWaitingStatus = status => ({
+//     type: SET_WAITING_STATUS,
+//     status
+// });
+
+// export const setCalculatingScore = status => ({
+//     type: SET_CALCULATING_SCORE,
+//     status
+// })

frontend/src/components/app.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { AuthRoute } from '../util/route_util';
 import { Switch, Route } from 'react-router-dom';
 import NavBarContainer from './nav/navbar_container';
+// import './style.scss';
 
 import MainPage from './main/main_page';
 import LoginFormContainer from './session/login_form_container';

frontend/src/components/board/board.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import '../../stylesheets/board.css'
-import '../../stylesheets/reset.css';
+import '../../stylesheets/board.scss'
+import '../../stylesheets/reset.scss';
 
 class Board extends React.Component {
     constructor(props) {

frontend/src/components/main/main_page.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import '../../stylesheets/main.css';
-import '../../stylesheets/reset.css';
+import '../../stylesheets/main.scss';
+import '../../stylesheets/reset.scss';
 
 class MainPage extends React.Component {
 

frontend/src/components/nav/navbar.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Link, withRouter } from 'react-router-dom'
-import '../../stylesheets/navbar.css'
+import '../../stylesheets/navbar.scss'
 
 class NavBar extends React.Component {
     constructor(props) {

frontend/src/components/session/login_form.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { withRouter } from 'react-router-dom';
-import '../../stylesheets/session_form.css';
+import '../../stylesheets/session_form.scss';
 
 class LoginForm extends React.Component {
     constructor(props) {

frontend/src/components/session/signup_form.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { withRouter } from 'react-router-dom';
-import '../../stylesheets/session_form.css';
+import '../../stylesheets/session_form.scss';
 
 class SignupForm extends React.Component {
     constructor(props) {

frontend/src/reducers/root_reducer.js

@@ -1,10 +1,12 @@
 import { combineReducers } from 'redux';
 import session from './session_reducer';
 import errors from './errors_reducer';
+// import ui from './ui_reducer';
 
 const RootReducer = combineReducers({
     session,
     errors,
+    // ui,
 });
 
 export default RootReducer;

frontend/src/reducers/sockets_reducer.js

@@ -0,0 +1,28 @@
+// import {SET_WAITING_STATUS, 
+//         SET_CALCULATING_SCORE} from '../actions/socket_actions';
+
+// const initialSocketState = {
+//     waiting: true,
+//     calcScore = false,
+// }
+
+// const socketsReducer = (defaultState = initialSocketState, action) => {
+//     Object.freeze(defaultState)
+//     let nextState = Object.assign({}, defaultState)
+//     switch (action.type) {
+//         case SET_WAITING_STATUS:
+//             nextState[waiting] ? 
+//                 nextState[waiting] = false : 
+//                 nextState[waiting] = true
+//             return nextState
+//         case SET_CALCULATING_SCORE:
+//             nextState[calcScore] ?
+//                 nextState[calcScore] = false :
+//                 nextState[calcScore] = true
+//             return nextState
+//         default:
+//             return state;
+//     }
+// }
+
+// export default socketsReducer;

frontend/src/reducers/ui_reducer.js

@@ -0,0 +1,6 @@
+// import { combineReducers } from 'redux';
+// import sockets from './sockets_reducer';
+
+// export default combineReducers({
+//     sockets
+// });