function MainComponent() { const [gameMode, setGameMode] = React.useState(null); const [difficulty, setDifficulty] = React.useState(null); const [inputText, setInputText] = React.useState(''); const [mistakes, setMistakes] = React.useState(0); const [accuracy, setAccuracy] = React.useState(100); const [gameStarted, setGameStarted] = React.useState(false); const [theme, setTheme] = React.useState('default'); const originalText = "The quick brown fox jumps over the lazy dog."; const handleInput = (e)=>{ const value = e.target.value; const inputLength = value.length; const correctLength = originalText.slice(0, inputLength) === value ? inputLength : mistakes + 1; setMistakes(correctLength !== inputLength ? mistakes + 1 : mistakes); setAccuracy(correctLength === 0 ? 100 : (originalText.slice(0, inputLength) === value ? inputLength - mistakes : 0) / inputLength * 100); setInputText(value); }; const handleGameStart = (mode, level)=>{ setGameMode(mode); setDifficulty(level); setGameStarted(true); setMistakes(0); setAccuracy(100); setInputText(''); }; return /*#__PURE__*/ React.createElement("div", { className: `flex flex-col items-center p-6 ${theme}`, __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full flex justify-between items-center p-4 bg-[#282c34] text-white", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Typing Game")), /*#__PURE__*/ React.createElement("main", { className: "flex flex-col items-center mt-6 w-full max-w-[800px]", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, !gameStarted && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-between mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleGameStart('timer', difficulty), className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }, "Timer Attack Mode"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleGameStart('survival', difficulty), className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "Survival Mode")), /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-between mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleGameStart(gameMode, 'beginner'), className: "bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 43, columnNumber: 15 }, __self: this }, "Beginner"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleGameStart(gameMode, 'intermediate'), className: "bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, "Intermediate"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleGameStart(gameMode, 'advanced'), className: "bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, "Advanced"))), gameStarted && /*#__PURE__*/ React.createElement("div", { className: "w-full bg-white rounded shadow-md p-6 mb-6", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-mono text-center text-xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "Type the text below:"), /*#__PURE__*/ React.createElement("p", { className: "font-mono text-center text-lg bg-gray-100 p-4 rounded", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, originalText), /*#__PURE__*/ React.createElement("input", { type: "text", name: "typingInput", className: "w-full mt-4 p-2 border border-gray-300 rounded text-lg font-mono", placeholder: "Start typing...", value: inputText, onChange: handleInput, __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-between mt-4", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#121212]", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "Mistakes: ", mistakes), /*#__PURE__*/ React.createElement("span", { className: "text-[#121212]", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, "Accuracy: ", accuracy.toFixed(2), "%"))), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-white rounded shadow-md p-6", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-center text-[#121212] mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Game Over"), /*#__PURE__*/ React.createElement("p", { className: "text-center text-lg text-[#121212]", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "Your Score: 1000"), /*#__PURE__*/ React.createElement("p", { className: "text-center text-lg text-[#121212]", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Rank: #1"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setGameStarted(false), className: "mt-4 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded w-full", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "Try Again"))), /*#__PURE__*/ React.createElement("footer", { className: "w-full flex justify-center p-4 bg-[#282c34] text-white mt-6", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, "Customize your theme:"), /*#__PURE__*/ React.createElement("select", { className: "ml-2 p-2 border border-gray-300 rounded", onChange: (e)=>setTheme(e.target.value), __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "default", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "Default"), /*#__PURE__*/ React.createElement("option", { value: "dark", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, "Dark"), /*#__PURE__*/ React.createElement("option", { value: "light", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "Light")))); }