function MainComponent() { const initialHealth = 100; const [playerHealth, setPlayerHealth] = React.useState(initialHealth); const [opponentHealth, setOpponentHealth] = React.useState(initialHealth); const questions = [ { word: "apple", options: [ "りんご", "バナナ", "ぶどう" ], answer: "りんご" }, { word: "cat", options: [ "犬", "猫", "鳥" ], answer: "猫" }, { word: "car", options: [ "電車", "車", "自転車" ], answer: "車" } ]; const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0); const [showAnswer, setShowAnswer] = React.useState(false); const [isCorrect, setIsCorrect] = React.useState(false); const currentQuestion = questions[currentQuestionIndex]; const handleOptionClick = (option)=>{ if (option === currentQuestion.answer) { setIsCorrect(true); setShowAnswer(true); setTimeout(()=>{ setShowAnswer(false); setIsCorrect(false); setOpponentHealth((health)=>Math.max(health - 10, 0)); if (currentQuestionIndex + 1 < questions.length) { setCurrentQuestionIndex((prevIndex)=>prevIndex + 1); } }, 1000); } else { setIsCorrect(false); setShowAnswer(true); setTimeout(()=>{ setShowAnswer(false); setPlayerHealth((health)=>Math.max(health - 10, 0)); }, 1000); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#e6f7f2] flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-crimson-text mb-2", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Fighting Game"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between w-[300px] mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto mb-1", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Player"), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-red-400 h-[24px] rounded-full overflow-hidden", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-red-600 h-full", style: { width: `${playerHealth}%` }, __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto mb-1", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Opponent"), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-red-400 h-[24px] rounded-full overflow-hidden", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-red-600 h-full", style: { width: `${opponentHealth}%` }, __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "w-[300px] p-4 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg mb-4 font-roboto", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, "Word: ", currentQuestion.word), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, currentQuestion.options.map((option, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: "w-full py-2 px-4 bg-[#b28573] text-white rounded-lg hover:bg-[#9b6d57] focus:outline-none", onClick: ()=>handleOptionClick(option), name: `option-${index}`, __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }, option))), showAnswer && /*#__PURE__*/ React.createElement("p", { className: `mt-4 text-lg font-roboto ${isCorrect ? "text-green-500" : "text-red-500"}`, __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, isCorrect ? "Correct!" : `Incorrect! Correct answer is: ${currentQuestion.answer}`))); }