Hardcoded maze, added a color change to the correct button when choosen and...

Hardcoded maze, added a color change to the correct button when choosen and reset maze button functions

minimal-app/src/app/store.js

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

minimal-app/src/features/invisibleMaze/invisibleMaze.js

 import React from 'react';
 import styles from './invisibleMaze.module.css';
+import { useSelector, useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import {
+  selectStepOne,
+  selectStepTwo,
+  selectStepThree,
+  selectButtonOne,
+  selectButtonTwo,
+  selectButtonThree,
+  setAllButtons,
+  setButtonOne,
+  setButtonTwo,
+  setButtonThree,
+} from './invisibleMazeSlice.js';
+
 export function InvisibleMaze() {
+  const stepOne = useSelector(selectStepOne);
+  const stepTwo = useSelector(selectStepTwo);
+  const stepThree = useSelector(selectStepThree);
+  const buttonOne = useSelector(selectButtonOne);
+  const buttonTwo = useSelector(selectButtonTwo);
+  const buttonThree = useSelector(selectButtonThree);
+  const dispatch = useDispatch();
+
+
+  const mazeStepOneCorrect = classNames({
+    [styles.panel] : buttonOne === 0,
+    [styles.correct] : buttonOne ===  stepOne,
+  });
+  const onClickPanelOne = () => dispatch(setButtonOne({
+    buttonOne : 1,
+  }));
+  const mazeStepTwoCorrect = classNames({
+    [styles.panel] : buttonTwo === 0,
+    [styles.correct] : buttonTwo ===  stepTwo,
+  });
+  const onClickPanelTwo = () => dispatch(setButtonTwo({
+    buttonTwo : 2,
+  }));
+  const mazeStepThreeCorrect = classNames({
+    [styles.panel] : buttonThree === 0,
+    [styles.correct] : buttonThree ===  stepThree,
+  });
+  const onClickPanelThree = () => dispatch(setButtonThree({
+    buttonThree : 3,
+  }));
+  const resetMaze = () => dispatch(setAllButtons({
+    buttonOne : 0,
+    buttonThree : 0,
+    buttonTwo : 0,
+  }));
   
   return (
     <main>
         <div className={styles.maze}>
-          <button className={styles.panel}>
+          <button className={mazeStepOneCorrect} onClick={onClickPanelOne}>
           </button>
           <button className={styles.panel}>
           </button>
@@ -15,7 +67,7 @@ export function InvisibleMaze() {
         <div className={styles.maze}>
           <button className={styles.panel}>
           </button>
-          <button className={styles.panel}>
+          <button className={mazeStepTwoCorrect} onClick={onClickPanelTwo}>
           </button>
           <button className={styles.panel}>
           </button>
@@ -25,19 +77,13 @@ export function InvisibleMaze() {
           </button>
           <button className={styles.panel}>
           </button>
-          <button className={styles.panel}>
+          <button className={mazeStepThreeCorrect}onClick={onClickPanelThree}>
           </button>
         </div>
         <div className={styles.controlPanel}>
-          <button className={styles.create}>
-          {"Create Maze"}
-          </button>
-          <button className={styles.reset}>
+          <button className={styles.reset} onClick={resetMaze}>
           {"Reset Maze"}
           </button>
-          <button className={styles.play}>
-          {"Play Maze"}
-          </button>
         </div>
     </main>
   );

minimal-app/src/features/invisibleMaze/invisibleMaze.module.css

@@ -2,18 +2,18 @@
   width: 50%;
   height: 5em;
 }
-.create {
+.correct {
   width: 50%;
   height: 5em;
-  font-weight: bold;
+  background-color: darkgreen;
 }
-.reset {
+.wrong {
   width: 50%;
   height: 5em;
-  font-weight: bold;
+  color: darkred;
 }
-.play {
-  width: 50%;
+.reset {
+  width: 100%;
   height: 5em;
   font-weight: bold;
 }

minimal-app/src/features/invisibleMaze/invisibleMazeSlice.js

+import { createSlice } from '@reduxjs/toolkit';
+
+const invisibleMazeSlice = createSlice({
+  name: 'invisibleMaze',
+  initialState: {
+    stepOne :1,
+    stepTwo :2,
+    stepThree :3,
+    buttonOne :0,
+    buttonTwo :0,
+    buttonThree : 0,
+  },
+  reducers: {
+    setButtonOne: (invisibleMaze, action) => {
+      const {
+        buttonOne,
+      } = action.payload;
+      invisibleMaze.buttonOne = buttonOne;
+    },
+    setButtonTwo: (invisibleMaze, action) => {
+      const {
+        buttonTwo,
+      } = action.payload;
+      invisibleMaze.buttonTwo = buttonTwo;
+    },
+      setButtonThree: (invisibleMaze, action) => {
+      const {
+        buttonThree,
+      } = action.payload;
+      invisibleMaze.buttonThree = buttonThree;
+    },
+    setAllButtons: (invisibleMaze, action) => {
+      const {
+        buttonThree,buttonOne,buttonTwo,
+      } = action.payload;
+      invisibleMaze.buttonThree = buttonThree;
+      invisibleMaze.buttonTwo = buttonTwo;
+      invisibleMaze.buttonOne = buttonOne;
+    },
+  },
+});
+export default invisibleMazeSlice;
+
+export const {
+  setButtonOne,
+  setButtonTwo,
+  setButtonThree,
+  setAllButtons,
+} = invisibleMazeSlice.actions;
+
+export function selectStepOne(state) {
+  return state.invisibleMaze.stepOne;
+}
+export function selectStepTwo(state) {
+  return state.invisibleMaze.stepTwo;
+}
+export function selectStepThree(state) {
+  return state.invisibleMaze.stepThree;
+}
+export function selectButtonOne(state) {
+  return state.invisibleMaze.buttonOne;
+}
+export function selectButtonTwo(state) {
+  return state.invisibleMaze.buttonTwo;
+}
+export function selectButtonThree(state) {
+  return state.invisibleMaze.buttonThree;
+}
\ No newline at end of file