From dbba80fec63187611b3abe3d7e781aa44c4fcecf Mon Sep 17 00:00:00 2001
From: astumpff2 <astumpff2@huskers.unl.edu>
Date: Sun, 30 Aug 2020 16:47:21 -0500
Subject: [PATCH] Hardcoded maze, added a color change to the correct button
 when choosen and reset maze button functions

---
 minimal-app/src/app/store.js                  |  2 +
 .../features/invisibleMaze/invisibleMaze.js   | 66 +++++++++++++++---
 .../invisibleMaze/invisibleMaze.module.css    | 12 ++--
 .../invisibleMaze/invisibleMazeSlice.js       | 68 +++++++++++++++++++
 4 files changed, 132 insertions(+), 16 deletions(-)
 create mode 100644 minimal-app/src/features/invisibleMaze/invisibleMazeSlice.js

diff --git a/minimal-app/src/app/store.js b/minimal-app/src/app/store.js
index c9650e0..6c67223 100644
--- a/minimal-app/src/app/store.js
+++ b/minimal-app/src/app/store.js
@@ -1,8 +1,10 @@
 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,
   },
 });
diff --git a/minimal-app/src/features/invisibleMaze/invisibleMaze.js b/minimal-app/src/features/invisibleMaze/invisibleMaze.js
index 87f7514..bb875f7 100644
--- a/minimal-app/src/features/invisibleMaze/invisibleMaze.js
+++ b/minimal-app/src/features/invisibleMaze/invisibleMaze.js
@@ -1,11 +1,63 @@
 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>
   );
diff --git a/minimal-app/src/features/invisibleMaze/invisibleMaze.module.css b/minimal-app/src/features/invisibleMaze/invisibleMaze.module.css
index e55ae8e..a1b4495 100644
--- a/minimal-app/src/features/invisibleMaze/invisibleMaze.module.css
+++ b/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;
 }
diff --git a/minimal-app/src/features/invisibleMaze/invisibleMazeSlice.js b/minimal-app/src/features/invisibleMaze/invisibleMazeSlice.js
new file mode 100644
index 0000000..0db84f9
--- /dev/null
+++ b/minimal-app/src/features/invisibleMaze/invisibleMazeSlice.js
@@ -0,0 +1,68 @@
+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
-- 
GitLab