From 5489efdd6d46d541d10934d2acf7a76d5e883044 Mon Sep 17 00:00:00 2001
From: jherman5 <jherman5@huskers.unl.edu>
Date: Wed, 2 Sep 2020 14:19:51 -0500
Subject: [PATCH] fixed exportation error, finished conditioal styles.
Checkpoint 5 completed.
---
simon-says/src/app/store.js | 2 ++
.../features/patternGen/patternGeneration.js | 34 +++++++++----------
.../src/features/patternGen/patternSlice.js | 4 +--
3 files changed, 21 insertions(+), 19 deletions(-)
diff --git a/simon-says/src/app/store.js b/simon-says/src/app/store.js
index c9650e0..17f89a6 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 2519733..12b22cc 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 d8b3e30..08ea7f5 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) {
--
GitLab