fixed exportation error, finished conditioal styles. Checkpoint 5 completed.

simon-says/src/app/store.js

 import { configureStore } from '@reduxjs/toolkit';
 import counterSlice from '../features/counter/counterSlice.js';
+import patternSlice from '../features/patternGen/patternSlice.js';
 
 export const store = configureStore({
   reducer: {
     [counterSlice.name]: counterSlice.reducer,
+    [patternSlice.name]: patternSlice.reducer,
   },
 });

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

@@ -17,21 +17,21 @@ export function Pattern() {
   const score = useSelector(selectScore);
   const patternList = useSelector(selectPatternList);
   const redclasses = classNames({
-    [styles.redbutton]: borderState === 0,
-    [styles.redlit]: borderState === 1,
-  })
+    ['redbutton']: borderState === 0,
+    ['redlit']: borderState === 1,
+  });
   const blueclasses = classNames({
-    [styles.bluebutton]: borderState === 0,
-    [styles.bluelit]: borderState ===1,
-  })
+    ['bluebutton']: borderState === 0,
+    ['bluelit']: borderState ===1,
+  });
   const yellowclasses = classNames({
-    [styles.yellowbutton]: borderState === 0,
-    [styles.yellowlit]: borderState ===1,
-  })
+    ['yellowbutton']: borderState === 0,
+    ['yellowlit']: borderState ===1,
+  });
   const greenclasses = classNames({
-    [styles.greenbutton]: borderState === 0,
-    [styles.greenlit]: borderState ===1,
-  })
+    ['greenbutton']: borderState === 0,
+    ['greenlit']: borderState ===1,
+  });
   return (
     <main>
       <div>
@@ -39,15 +39,15 @@ export function Pattern() {
           Simon Says
         </blockquote>
         <blockquote class = 'score'>
-          Score: 0
+          Score: {score}
         </blockquote>
-        <button className = {redclasses}>
+        <button class = {redclasses}>
         </button>
-        <button class = "bluebutton">
+        <button class = {blueclasses}>
         </button>
-        <button class = 'yellowbutton'>
+        <button class = {yellowclasses}>
         </button>
-        <button class = 'greenbutton'>  
+        <button class = {greenclasses}>  
         </button>
       </div>
     </main>

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

@@ -3,7 +3,7 @@ import { createSlice } from '@reduxjs/toolkit';
 const patternSlice = createSlice({
   name: 'pattern',
   initialState: {
-    borderState: 0,
+    border: 0,
     patternList: [],
     score: 0,
   },
@@ -16,7 +16,7 @@ export const {
 } = patternSlice.actions;
 
 export function selectBorderState(state) {
-  return state.pattern.borderState;
+  return state.pattern.border;
 }
 
 export function selectPatternList(state) {