function MainComponent() { const [inputText, setInputText] = React.useState(''); const [referenceText, setReferenceText] = React.useState('This is the sample text for typing accuracy.'); const [timer, setTimer] = React.useState(60); const [errors, setErrors] = React.useState(0); const [score, setScore] = React.useState(0); const [rankings, setRankings] = React.useState([]); const handleTextInputChange = (event)=>{ const newText = event.target.value; setInputText(newText); if (newText.length > inputText.length && referenceText[newText.length - 1] !== newText[newText.length - 1]) { setErrors(errors + 1); } }; const calculateScore = ()=>{ const accuracy = (inputText.length - errors) / inputText.length * 100; const timeBonus = Math.max(timer, 0); setScore(Math.round(accuracy + timeBonus)); }; const handleSubmit = ()=>{ calculateScore(); setRankings([ ...rankings, { name: "Player 1", score: score } ]); setInputText(''); setTimer(60); setErrors(0); }; React.useEffect(()=>{ const timerInterval = setInterval(()=>{ setTimer((prevTimer)=>{ if (prevTimer > 0) { return prevTimer - 1; } else { clearInterval(timerInterval); return 0; } }); }, 1000); return ()=>clearInterval(timerInterval); }, []); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-[#121212] bg-[#FFFFFF] p-4", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, "Typing Game"), /*#__PURE__*/ React.createElement("textarea", { className: "border border-gray-400 w-full h-[200px] p-2", onChange: handleTextInputChange, value: inputText, name: "inputText", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-sm mt-2", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, "Reference Text: ", referenceText), /*#__PURE__*/ React.createElement("div", { className: "my-4", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", onClick: handleSubmit, __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "Submit Score")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "Time: ", timer, "s"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "Errors: ", errors), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "Current Score: ", score)), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, "Rankings"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, rankings.map((ranking, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, ranking.name, " - ", ranking.score))))); }