Skip to content

Instantly share code, notes, and snippets.

@wibed
Created May 19, 2021 04:40
Show Gist options
  • Save wibed/deb77a76163acdcf90aea81836261096 to your computer and use it in GitHub Desktop.
Save wibed/deb77a76163acdcf90aea81836261096 to your computer and use it in GitHub Desktop.
a simple react puzzle
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment