function MainComponent() { const [currentLocalGov, setCurrentLocalGov] = React.useState('示例市'); const [userInput, setUserInput] = React.useState(''); const [correctReading, setCorrectReading] = React.useState('Shirei-shi'); const [message, setMessage] = React.useState(''); const [score, setScore] = React.useState(0); const handleChange = (event)=>{ setUserInput(event.target.value); }; const handleSubmit = ()=>{ if (userInput === correctReading) { setMessage('Correct!'); setScore(score + 100); nextQuestion(); } else { setMessage(`Incorrect! The correct reading was: ${correctReading}`); nextQuestion(); } }; const handleHint = ()=>{ setMessage(`Hint: ${correctReading.substring(0, 2)}...`); }; const nextQuestion = ()=>{ const localGovernments = [ { name: '例市', reading: 'Rei-shi' }, { name: '示郡', reading: 'Shi-gun' }, { name: '神市', reading: 'Kami-shi' } ]; const randomGov = localGovernments[Math.floor(Math.random() * localGovernments.length)]; setCurrentLocalGov(randomGov.name); setCorrectReading(randomGov.reading); setUserInput(''); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f5f5f5] p-4", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, "Japanese Local Government Typing Game"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md p-6 rounded-lg w-full max-w-[600px]", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "Type the reading of the local government name shown:"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#eeeeee] p-4 rounded my-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, currentLocalGov)), /*#__PURE__*/ React.createElement("input", { type: "text", name: "readingInput", className: "border border-[#cccccc] p-2 rounded w-full", placeholder: "Enter reading here", value: userInput, onChange: handleChange, __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", onClick: handleSubmit, __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "Submit"), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, message))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "Leaderboard"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "font-roboto", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Alice: 1200 points"), /*#__PURE__*/ React.createElement("li", { className: "font-roboto", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "Bob: 1100 points"), /*#__PURE__*/ React.createElement("li", { className: "font-roboto", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Carol: 950 points"))), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded", onClick: handleHint, __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, "Hint"))); }