a simple react puzzle

gistfile1.txt

import React, { useState, useEffect, useCallback } from "react";
import { useHistory } from "react-router-dom";
import { Typography, Button } from "@material-ui/core";
import { Link } from "react-router-dom";

import "./styles.css";

import B1 from "./img/1.png";
import B5 from "./img/5.png";
import B3 from "./img/3.png";
import B4 from "./img/4.png";

const Loose = () => {
  return (
    <div>
      <p>YOU LOOSE</p> <Link to="/">try again</Link>
    </div>
  );
};

const Win = () => {
  return (
    <div>
      <p>YOU Win</p> <Link to="/">try again</Link>
    </div>
  );
};

const App = () => {
  const history = useHistory();

  const [buttons, setButtons] = useState([
    { id: 1, label: "Q", isRight: false, clicked: false },
    { id: 2, label: "W", isRight: false, clicked: false },
    { id: 3, label: "E", isRight: false, clicked: false },
    { id: 4, label: "S", isRight: true, clicked: false },
    { id: 5, label: "T", isRight: true, clicked: false },
    { id: 6, label: "Y", isRight: false, clicked: false },
    { id: 7, label: "A", isRight: true, clicked: false },
    { id: 8, label: "C", isRight: true, clicked: false },
    { id: 9, label: "K", isRight: true, clicked: false },
    { id: 10, label: "P", isRight: false, clicked: false },
    { id: 11, label: "O", isRight: true, clicked: false },
    { id: 12, label: "S", isRight: true, clicked: false }
  ]);
  const [images, setImages] = useState([
    { src: B5, className: "anime5", alt: "B5" },
    { src: B4, className: "anime4", alt: "B4" },
    { src: B3, className: "anime3", alt: "B3" },
    { src: B1, className: "anime1", alt: "B1" }
  ]);
  const [sequenceIds, setSequenceIds] = useState([]);

  useEffect(() => {
    const correctSequence = [4, 5, 7, 8, 9];

    if (correctSequence.length === sequenceIds.length) {
      // if (sequenceIds.length >= 4 && buttons.filter((el) => el.clicked && !el.isRight).length >= 4)
      const rightAwnswers = correctSequence.filter(
        (item, itemIndex) => item === sequenceIds[itemIndex]
      );

      if (correctSequence.length === rightAwnswers.length) {
        history.push("/Win");
      } else {
        history.push("/Loose");
      }
    }
  }, [sequenceIds, history]);

  useEffect(() => {
    if (buttons.filter((el) => el.clicked && !el.isRight).length >= 4) {
      history.push("/Loose");
    }
  }, [buttons, history]);

  const buttonClickHandler = useCallback(
    (id, isRight) => {
      setSequenceIds((state) => [...state, id]);
      setButtons((state) =>
        state.map((item) =>
          item.id === id ? { ...item, clicked: !item.clicked } : item
        )
      );

      if (!isRight) {
        images.pop();
        setImages(images);
      }
    },
    [images]
  );

  return (
    <>
      <div align="center">
        {images.map((image, imageIndex) => (
          <img
            key={`image_${imageIndex}_${image.alt}`}
            src={image.src}
            className={image.className}
            alt={image.alt}
          />
        ))}
      </div>

      <div>
        {/* Answer buttons */}
        <Typography align="center">
          {buttons.map(
            (button) =>
              button.clicked && <Button key={button.id}>{button.label}</Button>
          )}
        </Typography>
        {/* Question buttons */}
        <Typography align="center">
          {buttons.map((button) => (
            <button
              className={`${button.clicked ? button.isRight : ""}`}
              disabled={button.clicked}
              key={button.id}
              onClick={() => buttonClickHandler(button.id, button.isRight)}
            >
              {button.label}
            </button>
          ))}
        </Typography>
      </div>
    </>
  );
};

export default App;