Added exportation functions for initial state values. There is an error that...

Added exportation functions for initial state values. There is an error that needs to be fixed, but once it is, Checkpoint 5 completed.

simon-says/src/features/patternGen/buttonLayout.css

 .title{
     font-size: 1.5em;
-    width: 100%;
+    width: 50%;
     left: 10em;
     right: 10em;
 }
+.score{
+    font-size: 1.5em;
+    width: 50%
+}
 .redbutton{
     background-color: #f44336;
     border: none;
     width: 50%;
     height: 20em;
 }
+.redlit{
+    background-color: #f44336;
+    border: #ffffff;
+    width: 50%;
+    height: 20em;
+}
 .bluebutton{
     background-color: #008CBA;
     border: none;
     width: 50%;
     height: 20em;
 }
+.bluelit{
+    background-color: #008CBA;
+    border: #ffffff;
+    width: 50%;
+    height: 20em;
+}
 .yellowbutton{
     background-color: #ffff00;
     border: none;
     width: 50%;
     height: 20em;
 }
+.yellowlit{
+    background-color: #ffff00;
+    border: #ffffff;
+    width: 50%;
+    height: 20em;
+}
 .greenbutton{
     background-color: #4CAF50;
     border: none;
     width: 50%;
     height: 20em;
 }
-#wrapper{
-    width: 100%;
-    background-color:#ffffff;
-    margin-left: auto;
-    margin-right: auto;
-    margin-top:10px;
-    margin-bottom:10px;
-    padding:10px;
-    line-height:150%;
-    clear:both; 
+.greenlit{
+    background-color: #4CAF50;
+    border: #ffffff;
+    width: 50%;
+    height: 20em;
 }

simon-says/src/features/patternGen/patternGeneration.js

 import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import classNames from 'classnames';
 import styles from './buttonLayout.css';
 
+import {
+  selectBorderState,
+  selectPatternList,
+  selectScore,
+} from './patternSlice';
+
+
 export function Pattern() {
+  const borderState = useSelector(selectBorderState);
+  const score = useSelector(selectScore);
+  const patternList = useSelector(selectPatternList);
+  const redclasses = classNames({
+    [styles.redbutton]: borderState === 0,
+    [styles.redlit]: borderState === 1,
+  })
+  const blueclasses = classNames({
+    [styles.bluebutton]: borderState === 0,
+    [styles.bluelit]: borderState ===1,
+  })
+  const yellowclasses = classNames({
+    [styles.yellowbutton]: borderState === 0,
+    [styles.yellowlit]: borderState ===1,
+  })
+  const greenclasses = classNames({
+    [styles.greenbutton]: borderState === 0,
+    [styles.greenlit]: borderState ===1,
+  })
   return (
     <main>
       <div>
         <blockquote class = 'title'>
           Simon Says
         </blockquote>
-        <blockquote>
+        <blockquote class = 'score'>
           Score: 0
         </blockquote>
-        <button class = "redbutton">
+        <button className = {redclasses}>
         </button>
         <button class = "bluebutton">
         </button>

simon-says/src/features/patternGen/patternSlice.js

@@ -14,3 +14,15 @@ export default patternSlice;
 
 export const {
 } = patternSlice.actions;
+
+export function selectBorderState(state) {
+  return state.pattern.borderState;
+}
+
+export function selectPatternList(state) {
+  return state.pattern.patternList;
+}
+
+export function selectScore(state) {
+  return state.pattern.score;
+}
\ No newline at end of file