diff --git a/simon-says/debug.log b/simon-says/debug.log
index 22f99d59edbc04dd8f3074cd2deaa21873d0b0d0..4b248a12166ac7de06ebb85d279b1fd4001287a4 100644
--- a/simon-says/debug.log
+++ b/simon-says/debug.log
@@ -211,3 +211,25 @@
[0902/193529.539:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0902/193529.539:ERROR:crash_report_database_win.cc(469)] failed to stat report
[0902/193529.539:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0903/165534.606:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0903/165534.612:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0903/165534.612:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0903/165534.612:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0903/165534.612:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0903/165534.613:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0903/165534.613:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0903/165534.613:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0903/165534.613:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0903/165534.613:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0903/165534.613:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0903/165534.613:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0903/165534.613:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0903/165534.613:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0903/165534.613:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0903/165534.613:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0903/165534.613:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0903/165534.613:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0903/165534.613:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0903/165534.614:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0903/165534.614:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0903/165534.614:ERROR:crash_report_database_win.cc(469)] failed to stat report
diff --git a/simon-says/src/features/patternGen/buttonLayout.css b/simon-says/src/features/patternGen/buttonLayout.css
index 6036fb919e91d4a3c234b999c40e81c36eb01caa..ae4958fc44f2f3638262998bdad94e84b0eb9785 100644
--- a/simon-says/src/features/patternGen/buttonLayout.css
+++ b/simon-says/src/features/patternGen/buttonLayout.css
@@ -4,60 +4,35 @@
left: 10em;
right: 10em;
}
-.score{
- font-size: 1.5em;
- width: 50%
-}
.redbutton{
background-color: #f44336;
border: none;
width: 50%;
height: 15em;
-}
-.redlit{
- background-color: #f44336;
- border: #ffffff;
- width: 50%;
- height: 15em;
+ padding: 0;
+ margin: 0;
}
.bluebutton{
background-color: #008CBA;
border: none;
width: 50%;
height: 15em;
-}
-.bluelit{
- background-color: #008CBA;
- border: #ffffff;
- width: 50%;
- height: 15em;
+ padding: 0;
+ margin: 0;
}
.yellowbutton{
background-color: #ffff00;
border: none;
width: 50%;
height: 15em;
-}
-.yellowlit{
- background-color: #ffff00;
- border: #ffffff;
- width: 50%;
- height: 15em;
+ padding: 0;
+ margin: 0;
}
.greenbutton{
background-color: #4CAF50;
border: none;
width: 50%;
height: 15em;
+ padding: 0;
+ margin: 0;
}
-.greenlit{
- background-color: #4CAF50;
- border: #ffffff;
- width: 50%;
- height: 15em;
-}
-.start{
- background-color: #0fc0fc;
- width: 100%;
- font-size:3em;
-}
\ No newline at end of file
diff --git a/simon-says/src/features/patternGen/patternGeneration.js b/simon-says/src/features/patternGen/patternGeneration.js
index cca7b4cb6ae9098377310fa893d6c03762c378e6..6c33ac4f819c7f93be01cd19b7e47254191d85ef 100644
--- a/simon-says/src/features/patternGen/patternGeneration.js
+++ b/simon-says/src/features/patternGen/patternGeneration.js
@@ -6,51 +6,61 @@ import classNames from 'classnames';
import styles from './buttonLayout.css';
import {
- selectBorderState,
- selectPatternList,
- selectScore,
+ selectColorOne,
+ selectColorTwo,
+ selectColorThree,
+ selectColorFour,
+ showColorOne,
+ showColorTwo,
+ showColorThree,
+ showColorFour,
+ hideColorOne,
} from './patternSlice';
export function Pattern() {
- const borderState = useSelector(selectBorderState);
- const score = useSelector(selectScore);
- const patternList = useSelector(selectPatternList);
- const redclasses = classNames({
- ['redbutton']: !borderState,
- ['redlit']: borderState,
- });
- const blueclasses = classNames({
- ['bluebutton']: !borderState,
- ['bluelit']: borderState,
- });
- const yellowclasses = classNames({
- ['yellowbutton']: !borderState,
- ['yellowlit']: borderState,
- });
- const greenclasses = classNames({
- ['greenbutton']: !borderState,
- ['greenlit']: borderState,
- });
+ const colorOne = useSelector(selectColorOne);
+ const colorTwo = useSelector(selectColorTwo);
+ const colorThree = useSelector(selectColorThree);
+ const colorFour = useSelector(selectColorFour);
+ const dispatch = useDispatch();
+
+ const onRedClick = () => {
+ dispatch(showColorOne());
+ }
+
+ const onRedLeave = () => {
+ dispatch(hideColorOne());
+ }
+
+ const onBlueClick = () => {
+ dispatch(showColorTwo());
+ }
+
+ const onYellowClick = () => {
+ dispatch(showColorThree());
+ }
+
+ const onGreenClick = () => {
+ dispatch(showColorFour());
+ }
return (
<main>
<div>
- <blockquote class = 'title'>
- Simon Says
- </blockquote>
- <blockquote title = 'score' class = 'score'>
- Score: {score}
+ <blockquote className={'title'}>
+ Color Learner
</blockquote>
- <button title = 'red' class = {redclasses}>
- </button>
- <button class = {blueclasses}>
+ <button title='red' class={'redbutton'} onPointerEnter={onRedClick} onPointerLeave={onRedLeave}>
+ {colorOne}
</button>
- <button class = {yellowclasses}>
+ <button title='blue' class={'bluebutton'} onClick={onBlueClick}>
+ {colorTwo}
</button>
- <button class = {greenclasses}>
+ <button title='yellow' class={'yellowbutton'} onClick={onYellowClick}>
+ {colorThree}
</button>
- <button class = 'start'>
- Start
+ <button title='green' class={'greenbutton'} onClick={onGreenClick}>
+ {colorFour}
</button>
</div>
</main>
diff --git a/simon-says/src/features/patternGen/patternSlice.js b/simon-says/src/features/patternGen/patternSlice.js
index e11db47df1e5bcf8034b7df3ed051dbfa8a60cd7..62c164b5aa6f2806da61b2358965f0b2d409e046 100644
--- a/simon-says/src/features/patternGen/patternSlice.js
+++ b/simon-says/src/features/patternGen/patternSlice.js
@@ -3,26 +3,53 @@ import { createSlice } from '@reduxjs/toolkit';
const patternSlice = createSlice({
name: 'pattern',
initialState: {
- borderState: false,
- patternList: [],
- score: 0,
+ colorOne: '',
+ colorTwo: '',
+ colorThree: '',
+ colorFour: '',
+
},
reducers: {
+ showColorOne: (pattern, action) => {
+ pattern.colorOne = 'red';
+ },
+ showColorTwo: (pattern, action) => {
+ pattern.colorTwo = 'blue';
+ },
+ showColorThree: (pattern, action) => {
+ pattern.colorThree = 'yellow';
+ },
+ showColorFour: (pattern, action) => {
+ pattern.colorFour = 'green';
+ },
+ hideColorOne: (pattern, action) => {
+ pattern.colorOne = '';
+ },
},
});
export default patternSlice;
export const {
+ showColorOne,
+ showColorTwo,
+ showColorThree,
+ showColorFour,
+ hideColorOne,
} = patternSlice.actions;
-export function selectBorderState(state) {
- return state.pattern.borderState;
+
+export function selectColorOne(state){
+ return state.pattern.colorOne;
+}
+
+export function selectColorTwo(state){
+ return state.pattern.colorTwo;
}
-export function selectPatternList(state) {
- return state.pattern.patternList;
+export function selectColorThree(state){
+ return state.pattern.colorThree;
}
-export function selectScore(state) {
- return state.pattern.score;
+export function selectColorFour(state){
+ return state.pattern.colorFour;
}
\ No newline at end of file