function MainComponent() { const [inputText, setInputText] = React.useState(""); const [isGameActive, setIsGameActive] = React.useState(false); const [timer, setTimer] = React.useState(60); const [score, setScore] = React.useState(0); const handleInputChange = (event)=>{ setInputText(event.target.value); }; const startGame = ()=>{ if (!isGameActive) { setIsGameActive(true); setTimer(60); setScore(0); const interval = setInterval(()=>{ setTimer((prevTimer)=>{ if (prevTimer === 1) { clearInterval(interval); setIsGameActive(false); alert(`Time's up! Your score is ${score}`); } return prevTimer - 1; }); }, 1000); } }; const calculateScore = ()=>{ setScore(inputText.length); }; React.useEffect(()=>{ if (isGameActive) { calculateScore(); } }, [ inputText ]); return /*#__PURE__*/ React.createElement("div", { className: "bg-[#121212] px-5 py-3 w-full h-screen flex flex-col items-center justify-center text-white", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-10", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Welcome to Speed Type!"), /*#__PURE__*/ React.createElement("p", { className: "text-xl mt-2", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "Challenge your typing skills and climb the leaderboard!")), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px] flex flex-col items-center", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "w-full px-4 py-2 rounded shadow-lg bg-[#252525] text-lg text-white outline-none", placeholder: "Type here to start...", name: "typingInput", onChange: handleInputChange, value: inputText, disabled: !isGameActive, __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: `mt-4 px-6 py-2 bg-[#0078D7] hover:bg-[#0056b3] rounded text-lg font-roboto shadow ${isGameActive ? "bg-gray-500 hover:bg-gray-500 cursor-not-allowed" : ""}`, onClick: startGame, disabled: isGameActive, __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, isGameActive ? "Game In Progress" : "Start Game")), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px] flex justify-between items-center mt-6", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trophy text-3xl mr-2", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "ｔｔ")), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 rounded bg-[#0078D7] hover:bg-[#0056b3] text-lg font-roboto shadow", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "View Rankings"))); }