import pageData from "~/data/typing-speed-trainer.json"; import { toast } from "sonner"; export function TypingSpeedTracker() { const { data, updateData } = useData(pageData); const [currentText, setCurrentText] = React.useState(""); const [targetText, setTargetText] = React.useState("The quick brown fox jumps over the lazy dog. This pangram contains every letter of the alphabet and is perfect for typing practice. Pack my box with five dozen liquor jugs. How quickly daft jumping zebras vex. The five boxing wizards jump quickly. Sphinx of black quartz, judge my vow."); const [isTestReady, setIsTestReady] = React.useState(false); const [isTestActive, setIsTestActive] = React.useState(false); const [timeLeft, setTimeLeft] = React.useState(15); const [isFinished, setIsFinished] = React.useState(false); const [finalStats, setFinalStats] = React.useState({ wpm: 0, accuracy: 0, errors: 0, correctStrokes: 0 }); const [showChart, setShowChart] = React.useState(false); const [startTime, setStartTime] = React.useState(null); const TEST_DURATION = 15; // seconds const sessions = data.sessions || []; const bestWPM = data.bestWPM || 0; const averageAccuracy = data.averageAccuracy || 100; const textOptions = [ { name: "Classic Pangram", text: "The quick brown fox jumps over the lazy dog. This pangram contains every letter of the alphabet and is perfect for typing practice. Pack my box with five dozen liquor jugs. How quickly daft jumping zebras vex. The five boxing wizards jump quickly. Sphinx of black quartz, judge my vow." }, { name: "Common Words", text: "The most common words in English are often the foundation of typing speed. Words like the, and, that, have, for, not, with, you, this, but, his, from, they, she, her, been, than, its, who, did, get, may, him, old, see, now, way, could, people, my, than, first, water, been, call, who, oil, its, now, find, long, down, day, did, get, come, made, may, part." }, { name: "Programming Text", text: "function calculateSum(array) { let total = 0; for (let i = 0; i < array.length; i++) { total += array[i]; } return total; } const users = [{ name: 'John', age: 30 }, { name: 'Jane', age: 25 }]; const result = users.map(user => user.name).filter(name => name.length > 3);" }, { name: "Business Text", text: "Dear valued customer, we are pleased to inform you that your order has been processed successfully. Our team is committed to providing excellent service and ensuring customer satisfaction. Please review the attached invoice for detailed information regarding your purchase. If you have any questions or concerns, please do not hesitate to contact our support team." }, { name: "Literature Quote", text: "It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair." }, { name: "Random Mix", text: "Technology advances rapidly in our modern world. Scientists discover new planets every year while engineers build faster computers. Meanwhile, artists create beautiful paintings and musicians compose amazing songs. Students learn mathematics, history, and science in schools around the globe. Everyone should practice typing to improve their skills." } ]; const calculateStats = () => { let correctChars = 0; let errorCount = 0; for (let i = 0; i < currentText.length; i++) { if (i < targetText.length && currentText[i] === targetText[i]) { correctChars++; } else { errorCount++; } } const accuracy = currentText.length > 0 ? Math.round((correctChars / currentText.length) * 100) : 0; // Calculate WPM based on elapsed time - use correct characters only const timeElapsedSeconds = TEST_DURATION - timeLeft; const timeElapsedMinutes = timeElapsedSeconds / 60; const correctWordsTyped = correctChars / 5; // standard: 5 characters = 1 word, only count correct chars const wpm = timeElapsedMinutes > 0 ? Math.round(correctWordsTyped / timeElapsedMinutes) : 0; return { wpm, accuracy, errors: errorCount, correctStrokes: correctChars }; }; // Timer countdown effect - starts when test becomes active and runs independently React.useEffect(() => { let interval; if (isTestActive && !isFinished && timeLeft > 0) { interval = setInterval(() => { setTimeLeft((prev) => { if (prev <= 1) { // Time's up! Test will be finished in the next effect return 0; } return prev - 1; }); }, 1000); } return () => { if (interval) clearInterval(interval); }; }, [isTestActive, isFinished]); // Separate effect to handle test completion when timer reaches 0 React.useEffect(() => { if (isTestActive && timeLeft === 0 && !isFinished) { setIsTestActive(false); setIsFinished(true); // Calculate final stats using the full test duration let correctChars = 0; let errorCount = 0; for (let i = 0; i < currentText.length; i++) { if (i < targetText.length && currentText[i] === targetText[i]) { correctChars++; } else { errorCount++; } } const accuracy = currentText.length > 0 ? Math.round((correctChars / currentText.length) * 100) : 0; // Calculate WPM using full test duration const timeElapsedMinutes = TEST_DURATION / 60; const correctWordsTyped = correctChars / 5; const wpm = timeElapsedMinutes > 0 ? Math.round(correctWordsTyped / timeElapsedMinutes) : 0; const finalStats = { wpm, accuracy, errors: errorCount, correctStrokes: correctChars }; setFinalStats(finalStats); completeSession(finalStats); } }, [timeLeft, isTestActive, isFinished, currentText, targetText]); const handleTextChange = (e) => { if (isFinished) return; // Don't allow typing after time is up const value = e.target.value; // Start timer on first character ONLY if test is ready but not active if (isTestReady && !isTestActive && value.length === 1 && currentText.length === 0) { setIsTestActive(true); setStartTime(Date.now()); } setCurrentText(value); // Check if user has completed typing the entire target text if (value.length >= targetText.length) { finishTestEarly(); } }; const startTest = () => { setIsTestReady(true); setCurrentText(""); setIsFinished(false); setTimeLeft(TEST_DURATION); }; const completeSession = (stats) => { // Only save session if user actually typed something meaningful if (currentText.length === 0) { toast("Test completed with no typing recorded!"); return; } const newSession = { id: Date.now(), wpm: stats.wpm, accuracy: stats.accuracy, errors: stats.errors, correctStrokes: stats.correctStrokes, timestamp: new Date().toLocaleString(), totalCharacters: currentText.length }; const updatedSessions = [...sessions, newSession]; const newBestWPM = Math.max(bestWPM, stats.wpm); const newAverageAccuracy = Math.round( updatedSessions.reduce((sum, session) => sum + session.accuracy, 0) / updatedSessions.length ); updateData({ ...data, sessions: updatedSessions, bestWPM: newBestWPM, averageAccuracy: newAverageAccuracy, totalWords: (data.totalWords || 0) + Math.round(currentText.length / 5), totalErrors: (data.totalErrors || 0) + stats.errors }); toast("Test completed! WPM: " + stats.wpm + ", Accuracy: " + stats.accuracy + "% (" + currentText.length + " chars typed)"); }; const finishTestEarly = () => { if (!isTestActive || isFinished) return; setIsTestActive(false); setIsFinished(true); // Calculate stats based on actual time elapsed let correctChars = 0; let errorCount = 0; for (let i = 0; i < currentText.length; i++) { if (i < targetText.length && currentText[i] === targetText[i]) { correctChars++; } else { errorCount++; } } const accuracy = currentText.length > 0 ? Math.round((correctChars / currentText.length) * 100) : 0; // Calculate WPM using actual elapsed time const actualTimeElapsed = (TEST_DURATION - timeLeft); const timeElapsedMinutes = actualTimeElapsed / 60; const correctWordsTyped = correctChars / 5; const wpm = timeElapsedMinutes > 0 ? Math.round(correctWordsTyped / timeElapsedMinutes) : 0; const finalStats = { wpm, accuracy, errors: errorCount, correctStrokes: correctChars }; setFinalStats(finalStats); completeSession(finalStats); }; const resetSession = () => { setCurrentText(""); setIsTestReady(false); setIsTestActive(false); setTimeLeft(TEST_DURATION); setIsFinished(false); setFinalStats({ wpm: 0, accuracy: 0, errors: 0, correctStrokes: 0 }); setStartTime(null); }; const getCharacterStyle = (index) => { if (index >= currentText.length) { return "text-muted-foreground"; } if (currentText[index] === targetText[index]) { return "text-green-600 bg-green-100 dark:bg-green-900 dark:text-green-300"; } else { return "text-red-600 bg-red-100 dark:bg-red-900 dark:text-red-300"; } }; const chartData = sessions.slice(-10).map((session, index) => ({ session: "Session " + (index + 1), errors: session.errors, correct: session.correctStrokes, wpm: session.wpm })); const chartConfig = { errors: { label: "Errors", color: "oklch(0.398 0.07 227.392)" }, correct: { label: "Correct", color: "oklch(0.646 0.222 41.116)" } }; return (

{/* Timer and Stats Cards */}

{timeLeft}s

{isFinished ? "Finished!" : isTestActive ? "Time Left" : isTestReady ? "Start typing!" : "Ready"}

{isFinished ? finalStats.wpm : (isTestActive ? calculateStats().wpm : 0)}

WPM

{isFinished ? finalStats.accuracy : (isTestActive ? calculateStats().accuracy : 100)}%

Accuracy

{bestWPM}

Best WPM

{sessions.length}

Sessions

{/* Results Card - Show when finished */} {isFinished && ( Test Complete!

{finalStats.wpm}

WPM

{finalStats.accuracy}%

Accuracy

{finalStats.correctStrokes}

Correct Characters

{finalStats.errors}

Errors

)} {/* Typing Area */} {!isFinished && ( 15-Second Typing Test {!isTestReady ? "Click 'Start Test' to enable typing" : !isTestActive ? "Start typing the first character to begin timer" : `Test in progress! ${currentText.length} characters typed`} {/* Target Text Display */}

{targetText.split("").map((char, index) => ( {char} ))}

{/* Input Area */}

{/* Control Buttons */}
            <div className="flex gap-2">
              {!isTestReady && !isFinished && (
                <Button onClick={startTest} className="bg-green-600 hover:bg-green-700">
                  Start Test
                </Button>
              )}
              {isTestActive && !isFinished && currentText.length > 0 && (
                <Button onClick={finishTestEarly} className="bg-blue-600 hover:bg-blue-700">
                  Finish Test
                </Button>
              )}
              <Button onClick={resetSession} variant="outline" disabled={isTestActive && !isFinished}>
                Reset
              </Button>
              {sessions.length > 0 && (
                <Button
                  onClick={() => setShowChart(!showChart)}
                  variant="outline"
                  disabled={isTestActive}
                >
                  {showChart ? "Hide" : "Show"} Chart
                </Button>
              )}
            </div>

{/* Text Selection Buttons */}
            <div className="space-y-2">
              <div className="text-sm font-medium text-muted-foreground">Choose a different text:</div>
              <div className="flex flex-wrap gap-2">
                {textOptions.map((option, index) => (
                  <Button
                    key={index}
                    onClick={() => setTargetText(option.text)}
                    variant="outline"
                    size="sm"
                    disabled={isTestActive}
                    className={targetText === option.text ? "bg-primary text-primary-foreground" : ""}
                  >
                    {option.name}
                  </Button>
                ))}
              </div>
            </div>
          </CardContent>
        </Card>
      )}

{/* Live Performance Indicators - Show during typing */}
      {isTestActive && !isFinished && (
        <Card>
          <CardContent className="p-4">
            <div className="flex justify-between items-center">
              <div className="flex gap-6">
                <div className="text-green-600">
                  <span className="font-semibold">{calculateStats().correctStrokes}</span> correct
                </div>
                <div className="text-red-600">
                  <span className="font-semibold">{calculateStats().errors}</span> errors
                </div>
                <div className="text-blue-600">
                  <span className="font-semibold">{currentText.length}</span> total characters
                </div>
              </div>
              <div className="text-lg font-semibold">
                {calculateStats().wpm} WPM
              </div>
            </div>
          </CardContent>
        </Card>
      )}

{/* Chart */}
      {showChart && sessions.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>Performance Chart</CardTitle>
            <CardDescription>Errors vs Correct Keystrokes (Last 10 sessions)</CardDescription>
          </CardHeader>
          <CardContent>
            <ChartContainer config={chartConfig} className="min-h-[300px] w-full">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={chartData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="session" />
                  <YAxis />
                  <ChartTooltip content={<ChartTooltipContent />} />
                  <Bar dataKey="correct" fill="var(--color-correct)" />
                  <Bar dataKey="errors" fill="var(--color-errors)" />
                </BarChart>
              </ResponsiveContainer>
            </ChartContainer>
          </CardContent>
        </Card>
      )}

</div>
  );
}