function MainComponent() { const [currentSushi, setCurrentSushi] = React.useState(null); const [options, setOptions] = React.useState([]); const [score, setScore] = React.useState(0); const [timeLeft, setTimeLeft] = React.useState(60); const [gameOver, setGameOver] = React.useState(false); const [feedback, setFeedback] = React.useState(null); const sushiTypes = [ { name: 'Maguro', japanese: 'マグロ', image: 'https://ucarecdn.com/21a39aff-6da3-4541-ac73-4ade6bba54c6/-/format/auto/' }, { name: 'Yellowtail', japanese: 'ハマチ', image: 'https://ucarecdn.com/a1178889-5582-4c55-affa-49600ced554a/-/format/auto/' }, { name: 'Salmon', japanese: 'サーモン', image: 'https://ucarecdn.com/6e6c044e-aa22-4e39-a8f1-ffd54fd8ec04/-/format/auto/' }, { name: 'Sea Bream', japanese: 'タイ', image: 'https://ucarecdn.com/d1025650-6aec-4f70-b12d-67d1eaadb71d/-/format/auto/' }, { name: 'Ikura', japanese: 'イクラ', image: 'https://ucarecdn.com/780156c9-a986-46f3-9217-b585df6bd0cc/-/format/auto/' } ]; React.useEffect(()=>{ if (timeLeft > 0 && !gameOver) { const timer = setTimeout(()=>setTimeLeft(timeLeft - 1), 1000); return ()=>clearTimeout(timer); } else if (timeLeft === 0) { setGameOver(true); } }, [ timeLeft, gameOver ]); React.useEffect(()=>{ if (!gameOver) { nextQuestion(); } }, [ gameOver ]); const nextQuestion = ()=>{ const correctSushi = sushiTypes[Math.floor(Math.random() * sushiTypes.length)]; setCurrentSushi(correctSushi); let wrongOptions = sushiTypes.filter((sushi)=>sushi !== correctSushi); wrongOptions = wrongOptions.sort(()=>0.5 - Math.random()).slice(0, 2); const allOptions = [ correctSushi, ...wrongOptions ].sort(()=>0.5 - Math.random()); setOptions(allOptions); setFeedback(null); }; const checkAnswer = (selectedSushi)=>{ const isCorrect = selectedSushi.name === currentSushi.name; if (isCorrect) { setScore(score + 1); setFeedback({ correct: true, message: "Correct!" }); } else { setFeedback({ correct: false, message: `Incorrect. The correct answer is ${currentSushi.name}.` }); } setTimeout(()=>{ nextQuestion(); }, 2000); }; const restartGame = ()=>{ setScore(0); setTimeLeft(60); setGameOver(false); setFeedback(null); nextQuestion(); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex items-center justify-center font-sans", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-center mb-4", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Guess the Sushi Name"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Score: ", score), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, "Time left: ", timeLeft, "s")), currentSushi && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-6", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: currentSushi.image, alt: `Sushi image of ${currentSushi.name}`, className: "w-32 h-32 object-cover rounded-lg", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-bold text-center mb-4", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }, currentSushi.japanese), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, options.map((option, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: "w-full py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-200", onClick: ()=>checkAnswer(option), disabled: feedback !== null, __source: { fileName: "", lineNumber: 80, columnNumber: 19 }, __self: this }, option.name))), feedback && /*#__PURE__*/ React.createElement("div", { className: `mt-4 p-2 rounded ${feedback.correct ? 'bg-green-100' : 'bg-red-100'}`, __source: { fileName: "", lineNumber: 91, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: `flex items-center ${feedback.correct ? 'text-green-700' : 'text-red-700'}`, __source: { fileName: "", lineNumber: 92, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${feedback.correct ? 'fa-check-circle' : 'fa-times-circle'} mr-2`, __source: { fileName: "", lineNumber: 93, columnNumber: 21 }, __self: this }), feedback.message))))), gameOver && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 103, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }, "Game Over!"), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, "Final Score: ", score), /*#__PURE__*/ React.createElement("button", { className: "w-full py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-200", onClick: restartGame, __source: { fileName: "", lineNumber: 107, columnNumber: 13 }, __self: this }, "Play Again")))); }