diff --git a/simon-says/src/app/store.js b/simon-says/src/app/store.js index c9650e098d75f6d4239cd1e92a93fd5295d548c1..17f89a68a4f72a58664df82e701b055f4476a469 100644 --- a/simon-says/src/app/store.js +++ b/simon-says/src/app/store.js @@ -1,8 +1,10 @@ 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, }, }); diff --git a/simon-says/src/features/patternGen/patternGeneration.js b/simon-says/src/features/patternGen/patternGeneration.js index 25197337c8c90935b1239c8728027a4721b3ab7e..12b22cc2e4ea0369d865ddf1da844fb7a41848ba 100644 --- a/simon-says/src/features/patternGen/patternGeneration.js +++ b/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> diff --git a/simon-says/src/features/patternGen/patternSlice.js b/simon-says/src/features/patternGen/patternSlice.js index d8b3e300b1517de36f7d2a9d53d8376ec6273e21..08ea7f536d0e8bf97cc834e0126c78b17df62e51 100644 --- a/simon-says/src/features/patternGen/patternSlice.js +++ b/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) {