diff --git a/simon-says/src/features/patternGen/buttonLayout.css b/simon-says/src/features/patternGen/buttonLayout.css index f0697b9d3eddf3d608f54d29893de59c32eedf9e..4f82a949694f0301a750e03ecbdede6925af3b65 100644 --- a/simon-says/src/features/patternGen/buttonLayout.css +++ b/simon-says/src/features/patternGen/buttonLayout.css @@ -1,41 +1,58 @@ .title{ font-size: 1.5em; - width: 100%; + width: 50%; left: 10em; right: 10em; } +.score{ + font-size: 1.5em; + width: 50% +} .redbutton{ background-color: #f44336; border: none; width: 50%; height: 20em; } +.redlit{ + background-color: #f44336; + border: #ffffff; + width: 50%; + height: 20em; +} .bluebutton{ background-color: #008CBA; border: none; width: 50%; height: 20em; } +.bluelit{ + background-color: #008CBA; + border: #ffffff; + width: 50%; + height: 20em; +} .yellowbutton{ background-color: #ffff00; border: none; width: 50%; height: 20em; } +.yellowlit{ + background-color: #ffff00; + border: #ffffff; + width: 50%; + height: 20em; +} .greenbutton{ background-color: #4CAF50; border: none; width: 50%; height: 20em; } -#wrapper{ - width: 100%; - background-color:#ffffff; - margin-left: auto; - margin-right: auto; - margin-top:10px; - margin-bottom:10px; - padding:10px; - line-height:150%; - clear:both; -} \ No newline at end of file +.greenlit{ + background-color: #4CAF50; + border: #ffffff; + width: 50%; + height: 20em; +} diff --git a/simon-says/src/features/patternGen/patternGeneration.js b/simon-says/src/features/patternGen/patternGeneration.js index cf4768274f8a80ac20341a61710e46b5d0586eed..25197337c8c90935b1239c8728027a4721b3ab7e 100644 --- a/simon-says/src/features/patternGen/patternGeneration.js +++ b/simon-says/src/features/patternGen/patternGeneration.js @@ -1,17 +1,47 @@ import React from 'react'; +import { useSelector, useDispatch } from 'react-redux'; +import PropTypes from 'prop-types'; + +import classNames from 'classnames'; import styles from './buttonLayout.css'; +import { + selectBorderState, + selectPatternList, + selectScore, +} from './patternSlice'; + + export function Pattern() { + const borderState = useSelector(selectBorderState); + const score = useSelector(selectScore); + const patternList = useSelector(selectPatternList); + const redclasses = classNames({ + [styles.redbutton]: borderState === 0, + [styles.redlit]: borderState === 1, + }) + const blueclasses = classNames({ + [styles.bluebutton]: borderState === 0, + [styles.bluelit]: borderState ===1, + }) + const yellowclasses = classNames({ + [styles.yellowbutton]: borderState === 0, + [styles.yellowlit]: borderState ===1, + }) + const greenclasses = classNames({ + [styles.greenbutton]: borderState === 0, + [styles.greenlit]: borderState ===1, + }) return ( <main> <div> <blockquote class = 'title'> Simon Says </blockquote> - <blockquote> + <blockquote class = 'score'> Score: 0 </blockquote> - <button class = "redbutton"> + <button className = {redclasses}> </button> <button class = "bluebutton"> </button> diff --git a/simon-says/src/features/patternGen/patternSlice.js b/simon-says/src/features/patternGen/patternSlice.js index c9caa6ada0461545ca434f2fea6e8473cb10df0d..d8b3e300b1517de36f7d2a9d53d8376ec6273e21 100644 --- a/simon-says/src/features/patternGen/patternSlice.js +++ b/simon-says/src/features/patternGen/patternSlice.js @@ -13,4 +13,16 @@ const patternSlice = createSlice({ export default patternSlice; export const { -} = patternSlice.actions; \ No newline at end of file +} = patternSlice.actions; + +export function selectBorderState(state) { + return state.pattern.borderState; +} + +export function selectPatternList(state) { + return state.pattern.patternList; +} + +export function selectScore(state) { + return state.pattern.score; +} \ No newline at end of file