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({
    [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 class = 'score'>
          Score: 0
        </blockquote>
        <button className = {redclasses}>
        </button>
        <button class = "bluebutton">
        </button>
        <button class = 'yellowbutton'>
        </button>
        <button class = 'greenbutton'>  
        </button>
      </div>
    </main>
  );
}