patternGeneration.js

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({
    ['redbutton']: borderState === 0,
    ['redlit']: borderState === 1,
  });
  const blueclasses = classNames({
    ['bluebutton']: borderState === 0,
    ['bluelit']: borderState ===1,
  });
  const yellowclasses = classNames({
    ['yellowbutton']: borderState === 0,
    ['yellowlit']: borderState ===1,
  });
  const greenclasses = classNames({
    ['greenbutton']: borderState === 0,
    ['greenlit']: borderState ===1,
  });
  return (
    <main>
      <div>
        <blockquote class = 'title'>
          Simon Says
        </blockquote>
        <blockquote class = 'score'>
          Score: {score}
        </blockquote>
        <button class = {redclasses}>
        </button>
        <button class = {blueclasses}>
        </button>
        <button class = {yellowclasses}>
        </button>
        <button class = {greenclasses}>  
        </button>
      </div>
    </main>
  );
}