From 697e237d0d4585b39e146e456672637749fd03a4 Mon Sep 17 00:00:00 2001
From: jherman5 <jherman5@huskers.unl.edu>
Date: Wed, 2 Sep 2020 13:58:27 -0500
Subject: [PATCH] Added exportation functions for initial state values. There
 is an error that needs to be fixed, but once it is, Checkpoint 5 completed.

---
 .../src/features/patternGen/buttonLayout.css  | 41 +++++++++++++------
 .../features/patternGen/patternGeneration.js  | 34 ++++++++++++++-
 .../src/features/patternGen/patternSlice.js   | 14 ++++++-
 3 files changed, 74 insertions(+), 15 deletions(-)

diff --git a/simon-says/src/features/patternGen/buttonLayout.css b/simon-says/src/features/patternGen/buttonLayout.css
index f0697b9..4f82a94 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 cf47682..2519733 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 c9caa6a..d8b3e30 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
-- 
GitLab