function MainComponent() { const [text, setText] = useState(""); const [currentText, setCurrentText] = useState(""); const [isTyping, setIsTyping] = useState(false); const [startTime, setStartTime] = useState(null); const [wpm, setWpm] = useState(0); const [accuracy, setAccuracy] = useState(100); const [completed, setCompleted] = useState(false); const [results, setResults] = useState([]); const sampleTexts = [ "The quick brown fox jumps over the lazy dog", "To be or not to be, that is the question", "All that glitters is not gold" ]; useEffect(()=>{ const randomIndex = Math.floor(Math.random() * sampleTexts.length); setText(sampleTexts[randomIndex]); loadResults(); }, []); const loadResults = async ()=>{ const response = await fetch("/api/typing/list", { method: "POST" }); const data = await response.json(); setResults(data); }; const calculateWPM = ()=>{ if (!startTime) return 0; const timeElapsed = (Date.now() - startTime) / 1000 / 60; const words = currentText.trim().split(/\s+/).length; return Math.round(words / timeElapsed); }; const calculateAccuracy = ()=>{ let correct = 0; const textToCompare = text.substring(0, currentText.length); for(let i = 0; i < currentText.length; i++){ if (currentText[i] === textToCompare[i]) correct++; } return Math.round(correct / currentText.length * 100) || 100; }; const handleTyping = (e)=>{ const typed = e.target.value; setCurrentText(typed); if (!isTyping && typed.length === 1) { setIsTyping(true); setStartTime(Date.now()); } if (isTyping) { setWpm(calculateWPM()); setAccuracy(calculateAccuracy()); } if (typed === text) { setCompleted(true); setIsTyping(false); saveResult(); } }; const saveResult = async ()=>{ await fetch("/api/typing/create", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ words_per_minute: wpm, accuracy: accuracy, text_typed: text }) }); loadResults(); }; const resetTest = ()=>{ const randomIndex = Math.floor(Math.random() * sampleTexts.length); setText(sampleTexts[randomIndex]); setCurrentText(""); setIsTyping(false); setStartTime(null); setWpm(0); setAccuracy(100); setCompleted(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#3D1D1D] p-8 text-[#F5E6D3]", __source: { fileName: "", lineNumber: 86, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#4D2D2D] rounded-lg shadow-lg p-6 mb-6", __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center mb-8", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#B5E6D8]", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "⌨️ Typing Test")), /*#__PURE__*/ React.createElement("div", { className: "mb-6 p-4 bg-[#3D1D1D] rounded-lg border border-[#B5E6D8]/20 hover:border-[#B5E6D8]/40 transition-colors", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-mono", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }, text)), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-4 bg-[#3D1D1D] border border-[#B5E6D8]/20 rounded-lg font-mono text-[#F5E6D3] focus:border-[#B5E6D8]/40 focus:ring-1 focus:ring-[#B5E6D8]/40", value: currentText, onChange: handleTyping, disabled: completed, placeholder: "Start typing...", rows: 3, __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4 mb-6", __source: { fileName: "", lineNumber: 108, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#3D1D1D] p-4 rounded-lg border border-[#B5E6D8]/20", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#B5E6D8]", __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this }, "Speed"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 111, columnNumber: 15 }, __self: this }, wpm, " WPM")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#3D1D1D] p-4 rounded-lg border border-[#B5E6D8]/20", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#B5E6D8]", __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }, "Accuracy"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 115, columnNumber: 15 }, __self: this }, accuracy, "%"))), completed && /*#__PURE__*/ React.createElement("button", { onClick: resetTest, className: "w-full bg-[#B5E6D8] text-[#3D1D1D] py-2 px-4 rounded-lg hover:bg-[#B5E6D8]/90 transition-colors font-bold", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, "Try Again")), /*#__PURE__*/ React.createElement("div", { className: "bg-[#4D2D2D] rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 text-[#B5E6D8]", __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, "History"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, results.map((result)=>/*#__PURE__*/ React.createElement("div", { key: result.id, className: "border-b border-[#B5E6D8]/10 pb-4 hover:bg-[#3D1D1D]/50 rounded-lg p-4 transition-colors", __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 137, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 138, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm opacity-60", __source: { fileName: "", lineNumber: 139, columnNumber: 21 }, __self: this }, new Date(result.created_at).toLocaleString()), /*#__PURE__*/ React.createElement("p", { className: "mt-1", __source: { fileName: "", lineNumber: 142, columnNumber: 21 }, __self: this }, result.text_typed)), /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 144, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#B5E6D8] font-bold", __source: { fileName: "", lineNumber: 145, columnNumber: 21 }, __self: this }, result.words_per_minute, " WPM"), /*#__PURE__*/ React.createElement("p", { className: "text-[#F5E6D3]", __source: { fileName: "", lineNumber: 148, columnNumber: 21 }, __self: this }, result.accuracy, "% accuracy"))))))))); }