function MainComponent() { const [currentPhase, setCurrentPhase] = React.useState(1); const [userInput, setUserInput] = React.useState(""); const [generatedContent, setGeneratedContent] = React.useState([]); const [language, setLanguage] = React.useState("English"); const [progress, setProgress] = React.useState(0); const [errorIndexes, setErrorIndexes] = React.useState([]); const [typingSpeed, setTypingSpeed] = React.useState(0); const [startTime, setStartTime] = React.useState(0); const [wordCount, setWordCount] = React.useState(0); const [incorrectWords, setIncorrectWords] = React.useState([]); const generateContent = (phase)=>{ if (phase === 1) { const words = [ "example", "random", "keyboard", "practice", "language", "words", "typing", "test", "speed" ]; return words[Math.floor(Math.random() * words.length)]; } else { const errorLetters = incorrectWords.join("").split(""); const uniqueLetters = [ ...new Set(errorLetters) ]; const similarWords = [ "faster", "mistake", "repeat", "character", "letters", "accuracy" ]; return similarWords.find((word)=>uniqueLetters.some((letter)=>word.includes(letter))) || similarWords[0]; } }; const updateIncorrectWords = (input, target)=>{ let incorrect = []; input.split(' ').forEach((word, index)=>{ if (word !== target[index]) incorrect.push(word); }); setIncorrectWords(incorrect); }; const handleInputChange = (e)=>{ if (startTime === 0) { setStartTime(Date.now()); } setUserInput(e.target.value); const inputErrors = []; const generatedWords = generatedContent.split(' '); e.target.value.split(' ').forEach((word, index)=>{ if (word !== generatedWords[index]) { inputErrors.push(index); } }); setErrorIndexes(inputErrors); if (inputErrors.length === 0) { setWordCount(wordCount + 1); setCurrentPhase(currentPhase < 5 ? currentPhase + 1 : 1); updateIncorrectWords(e.target.value, generatedContent.split(' ')); setUserInput(""); setWordCount(0); setStartTime(0); } }; React.useEffect(()=>{ if (userInput.length > 0 && startTime > 0) { const elapsedTime = (Date.now() - startTime) / 60000; setTypingSpeed((wordCount / elapsedTime).toFixed(2)); } }, [ userInput ]); React.useEffect(()=>{ const newGeneratedContent = generateContent(currentPhase); setGeneratedContent(newGeneratedContent); }, [ currentPhase, language ]); React.useEffect(()=>{ setProgress(userInput.length / generatedContent.length * 100); }, [ userInput, generatedContent ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F0F2F5]", __source: { fileName: "", lineNumber: 73, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#333] mb-5", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, "Typing Test - Phase ", currentPhase), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-4 bg-white rounded shadow-md", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-xl mb-2", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, "Type the following:"), /*#__PURE__*/ React.createElement("p", { className: "mb-4 font-mono bg-gray-100 p-3 rounded", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, generatedContent), /*#__PURE__*/ React.createElement("textarea", { value: userInput, onChange: handleInputChange, className: "w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-[#007BFF] transition duration-200", rows: "5", name: "typingArea", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#555]", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "Your Progress:"), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-600 h-2.5 rounded-full", style: { width: `${progress}%` }, __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-[#333] mt-4", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, "Typing Speed: ", typingSpeed, " WPM")); }

Typing Test - Phase 1

Typing Test - Phase 1