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