\r\n 
\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default SideBar;\r\n","import React, { useState } from \"react\";\r\n\r\nimport cards from \"../../cards\";\r\nimport ImgCardBack from \"../../assets/card-back.png\";\r\nimport SideBar from \"../../components/SideBar\";\r\nimport \"./style.css\";\r\n\r\nfunction Main() {\r\n const [card, setCard] = useState([...cards]);\r\n const [count, setCount] = useState(0);\r\n\r\n const handleTurned = (cardId) => {\r\n setCount(count + 1);\r\n\r\n card.forEach((element) => {\r\n if (element.id === cardId) {\r\n element.turned = true;\r\n }\r\n });\r\n\r\n setTimeout(verifyCards, 1000);\r\n };\r\n\r\n const verifyCards = () => {\r\n const otherCards = card.filter((card) => {\r\n return card.turned;\r\n });\r\n\r\n if (otherCards.length !== 2) {\r\n return;\r\n }\r\n\r\n let localCard = [...card];\r\n\r\n if (otherCards[0].slug !== otherCards[1].slug) {\r\n localCard.forEach((element) => {\r\n element.turned = false;\r\n });\r\n } else {\r\n localCard = localCard.filter((element) => {\r\n return element.turned === false;\r\n });\r\n }\r\n\r\n setCard(localCard);\r\n console.log(localCard);\r\n };\r\n\r\n const resetCards = () => {\r\n let localCard = [...cards];\r\n\r\n localCard.forEach((element) => {\r\n element.turned = false;\r\n });\r\n\r\n localCard.sort(() => {\r\n return Math.random() - 0.5;\r\n });\r\n\r\n setCard(localCard);\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n );\r\n}\r\n\r\nexport default Main;\r\n","import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport './index.css';\r\nimport Main from './pages/Main';\r\n\r\nReactDOM.render(\r\n \r\n {card.map((card) => {\r\n return (\r\n handleTurned(card.id)}\r\n key={card.id}\r\n style={{\r\n backgroundImage: `url(${\r\n card.turned ? card.image : ImgCardBack\r\n })`,\r\n }}\r\n >
\r\n );\r\n })}\r\n \n \n \n
\n );\n}\n\nexport default SideBar;\n","import React, { useState } from \"react\";\n\nimport cards from \"../../cards\";\nimport ImgCardBack from \"../../assets/card-back.png\";\nimport SideBar from \"../../components/SideBar\";\nimport \"./style.css\";\n\nfunction Main() {\n const [card, setCard] = useState([...cards]);\n const [count, setCount] = useState(0);\n\n const handleTurned = (cardId) => {\n setCount(count + 1);\n\n card.forEach((element) => {\n if (element.id === cardId) {\n element.turned = true;\n }\n });\n\n setTimeout(verifyCards, 1000);\n };\n\n const verifyCards = () => {\n const otherCards = card.filter((card) => {\n return card.turned;\n });\n\n if (otherCards.length !== 2) {\n return;\n }\n\n let localCard = [...card];\n\n if (otherCards[0].slug !== otherCards[1].slug) {\n localCard.forEach((element) => {\n element.turned = false;\n });\n } else {\n localCard = localCard.filter((element) => {\n return element.turned === false;\n });\n }\n\n setCard(localCard);\n console.log(localCard);\n };\n\n const resetCards = () => {\n let localCard = [...cards];\n\n localCard.forEach((element) => {\n element.turned = false;\n });\n\n localCard.sort(() => {\n return Math.random() - 0.5;\n });\n\n setCard(localCard);\n };\n\n return (\n \n
\n \n );\n}\n\nexport default Main;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport Main from './pages/Main';\n\nReactDOM.render(\n \n {card.map((card) => {\n return (\n handleTurned(card.id)}\n key={card.id}\n style={{\n backgroundImage: `url(${\n card.turned ? card.image : ImgCardBack\n })`,\n }}\n >
\n );\n })}\n