function MainComponent() { const [answers, setAnswers] = React.useState([ { text: 'Answer 1', points: 10, revealed: false }, { text: 'Answer 2', points: 20, revealed: false }, { text: 'Answer 3', points: 30, revealed: false }, { text: 'Answer 4', points: 40, revealed: false }, { text: 'Answer 5', points: 50, revealed: false }, { text: 'Answer 6', points: 60, revealed: false } ]); const [score, setScore] = React.useState(0); const [bonus, setBonus] = React.useState(0); const [isBonusRound, setIsBonusRound] = React.useState(false); const revealAnswer = (index)=>{ setAnswers((prevAnswers)=>{ const newAnswers = [ ...prevAnswers ]; const answer = newAnswers[index]; if (!answer.revealed) { answer.revealed = true; setScore((prevScore)=>{ const newScore = prevScore + answer.points; if (newScore >= 300 && !isBonusRound) { setIsBonusRound(true); } return newScore; }); } return newAnswers; }); }; const playBonusRound = ()=>{ setBonus((prevBonus)=>prevBonus + Math.floor(Math.random() * 201)); setIsBonusRound(false); }; const answerBoxes = answers.map((answer, index)=>{ const cardClasses = `w-full h-full absolute transition-transform duration-700 ease-in-out ${answer.revealed ? "transform rotate-y-180" : ""}`; const frontClasses = `bg-red-600 text-white p-4 font-roboto border-4 border-red-800 rounded-md flex items-center justify-center backface-hidden`; const backClasses = `bg-red-600 text-white p-4 font-roboto border-4 border-red-800 rounded-md flex items-center justify-center backface-hidden transform rotate-y-180`; return /*#__PURE__*/ React.createElement("div", { key: index, className: "w-[150px] h-[100px] sm:w-[200px] sm:h-[150px] md:w-[250px] md:h-[200px] lg:w-[300px] lg:h-[250px] perspective-1000 cursor-pointer m-2", onClick: ()=>revealAnswer(index), __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: cardClasses, __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: frontClasses, __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { role: "img", "aria-label": "mystery-box", className: "text-lg", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "❓")), /*#__PURE__*/ React.createElement("div", { className: backClasses, __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-md font-bold", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, answer.text), /*#__PURE__*/ React.createElement("span", { className: "text-sm block mt-2", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Points: ", answer.points)))); }); const bonusRoundButton = /*#__PURE__*/ React.createElement("button", { className: "bg-blue-600 text-white font-roboto py-2 px-4 rounded hover:bg-blue-700 transition-colors duration-300 mt-4", onClick: playBonusRound, __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, "Play Bonus Round"); return /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto my-6 p-6 bg-[#f1f3f6] rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center mb-4", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl text-[#050708] font-bold font-roboto", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "Family Feud Online"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#050708] font-light font-roboto italic", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, "Put your trivia skills to the test...")), /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-center", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl text-[#050708] font-roboto", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "Score: ", score), isBonusRound ? bonusRoundButton : null, /*#__PURE__*/ React.createElement("div", { className: "text-xl text-green-700 font-roboto mt-2", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "Bonus: ", bonus)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center items-center", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, answerBoxes)); }