Svalboard Typing Practice

/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; interface WordEntry { word: string; timePerChar: number; } interface KeyStats { [key: string]: { count: number; totalTime: number }; } const KEY_CATEGORIES = { letters: "1234567890", symbols: "[`',;.]\\/[]", shiftSymbols: `{~"<:}>}|?`, numbers: "1234567890-=", shiftNumbers: "!@#$%^&*()_+", }; const EXERCISE_TYPES = [ { name: "letters", keys: KEY_CATEGORIES.letters }, { name: "lettersplus", keys: KEY_CATEGORIES.letters + KEY_CATEGORIES.letters.toUpperCase() + KEY_CATEGORIES.symbols + KEY_CATEGORIES.shiftSymbols, }, { name: "everything", keys: KEY_CATEGORIES.letters + KEY_CATEGORIES.letters.toUpperCase() + KEY_CATEGORIES.symbols + KEY_CATEGORIES.shiftSymbols + KEY_CATEGORIES.numbers + KEY_CATEGORIES.shiftNumbers, }, ]; const TAB_UNICODE = "⇥"; // Unicode character for tab function formatTime(seconds: number): string { const hrs = Math.floor(seconds / 3600); const mins = Math.floor((seconds % 3600) / 60); const secs = Math.floor(seconds % 60); return `${hrs}h ${mins}m ${secs}s`; } function App() { const [currentWords, setCurrentWords] = useState(""); const [userInput, setUserInput] = useState(""); const [loading, setLoading] = useState(true); const [startTime, setStartTime] = useState(null); const [currentTime, setCurrentTime] = useState(0); const [pastWords, setPastWords] = useState([]); const [error, setError] = useState(null); const [isTimerRunning, setIsTimerRunning] = useState(false); const [currentExercise, setCurrentExercise] = useState(EXERCISE_TYPES[2]); const [usedWords, setUsedWords] = useState>(new Set()); const [keyStats, setKeyStats] = useState({}); const [totalKeypresses, setTotalKeypresses] = useState(0); const [totalTypingTime, setTotalTypingTime] = useState(0); const inputRef = useRef(null); const timerRef = useRef(null); const lastKeyPressTime = useRef(0); useEffect(() => { const storedKeyStats = localStorage.getItem("svaltownKeyStats"); const storedTotalTypingTime = localStorage.getItem("svaltownTotalTypingTime"); const storedTotalKeypresses = localStorage.getItem("svaltownTotalKeypresses"); if (storedKeyStats) setKeyStats(JSON.parse(storedKeyStats)); if (storedTotalTypingTime) setTotalTypingTime(parseFloat(storedTotalTypingTime)); if (storedTotalKeypresses) setTotalKeypresses(parseInt(storedTotalKeypresses)); fetchNewWords(); return () => { if (timerRef.current) clearInterval(timerRef.current); }; }, [currentExercise]); useEffect(() => { if (inputRef.current) { inputRef.current.focus(); } }, [currentWords]); const fetchNewWords = async () => { setLoading(true); setError(null); try { const response = await fetch( `/generate-words?keys=${currentExercise.keys}&used=${ Array.from(usedWords).join(",") }&exercise=${currentExercise.name}`, ); const data = await response.json(); if (data.error) { throw new Error(data.error); } setCurrentWords(data.words.replace(/\t/g, TAB_UNICODE)); setUsedWords(prev => new Set([...prev, ...data.words.split(/[ \t]/)])); resetTimer(); } catch (error) { setError("Failed to generate words. Please try again."); setCurrentWords(""); } setLoading(false); }; const startTimer = () => { if (timerRef.current) clearInterval(timerRef.current); setIsTimerRunning(true); setStartTime(Date.now()); timerRef.current = setInterval(() => { setCurrentTime(prevTime => prevTime + 0.1); }, 100); }; const stopTimer = () => { if (timerRef.current) clearInterval(timerRef.current); setIsTimerRunning(false); }; const resetTimer = () => { stopTimer(); setCurrentTime(0); setStartTime(null); setIsTimerRunning(false); }; const handleInput = (e: React.ChangeEvent) => { const input = e.target.value; const now = Date.now(); if (!isTimerRunning && input.length === 1) { startTimer(); lastKeyPressTime.current = now; } else if (input.length > 1) { const newChar = input[input.length - 1]; const timeTaken = (now - lastKeyPressTime.current) / 1000; setKeyStats(prevStats => { const updatedStats = { ...prevStats }; if (!updatedStats[newChar]) { updatedStats[newChar] = { count: 0, totalTime: 0 }; } updatedStats[newChar].count += 1; updatedStats[newChar].totalTime += timeTaken; localStorage.setItem("svaltownKeyStats", JSON.stringify(updatedStats)); return updatedStats; }); setTotalKeypresses(prev => { const newTotal = prev + 1; localStorage.setItem("svaltownTotalKeypresses", newTotal.toString()); return newTotal; }); lastKeyPressTime.current = now; } setUserInput(input); if (input === currentWords) { stopTimer(); const timeTaken = currentTime; setTotalTypingTime(prev => { const newTotal = prev + timeTaken; localStorage.setItem("svaltownTotalTypingTime", newTotal.toString()); return newTotal; }); const timePerChar = timeTaken / currentWords.length; setPastWords(prevWords => [{ word: currentWords, timePerChar }, ...prevWords]); setUserInput(""); fetchNewWords(); } }; const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Tab") { e.preventDefault(); const cursorPosition = e.currentTarget.selectionStart || 0; const newValue = userInput.slice(0, cursorPosition) + TAB_UNICODE + userInput.slice(cursorPosition); setUserInput(newValue); setTimeout(() => { if (inputRef.current) { inputRef.current.selectionStart = inputRef.current.selectionEnd = cursorPosition + 1; } }, 0); } }; const handleExerciseChange = (exercise) => { setCurrentExercise(exercise); setPastWords([]); setUsedWords(new Set()); resetTimer(); fetchNewWords(); }; const averageTimePerChar = pastWords.length > 0 ? pastWords.reduce((sum, entry) => sum + entry.timePerChar, 0) / pastWords.length : 0; const highlightCurrentChar = () => { const nextChar = currentWords[userInput.length]; const beforeCurrent = currentWords.slice(0, userInput.length); const afterCurrent = currentWords.slice(userInput.length + 1); const incorrectChars = userInput.split("").map((char, idx) => ( {char} )); return ( {incorrectChars} {nextChar} {afterCurrent} ); }; const renderGraph = () => { const maxTime = Math.max(...pastWords.map(entry => entry.timePerChar), 0.5); const barWidth = 2; const gap = 1; return (

{pastWords.slice(0, 50).map((entry, index) => (

))}

); }; const renderKeyStats = () => { const sortedKeys = Object.entries(keyStats).sort((a, b) => (b[1].totalTime / b[1].count) - (a[1].totalTime / a[1].count) ); return (

{sortedKeys.map(([key, stats]) => { const avgTime = stats.totalTime / stats.count; return (

{key === " " ? "Space" : key === "\t" ? "Tab" : key}

{avgTime.toFixed(3)}s

{stats.count}x

); })}

); }; return (

Current Exercise: {currentExercise.name}

{loading ?

: error ?

{error}

: highlightCurrentChar()}

Time: {currentTime.toFixed(1)} seconds

Average time per character: {averageTimePerChar.toFixed(3)} seconds

Total keypresses: {totalKeypresses}

Total time spent typing: {formatTime(totalTypingTime)}

{entry.word} ({entry.timePerChar.toFixed(3)} s/char)

{renderGraph()}

{EXERCISE_TYPES.map((exercise, index) => ( ))}

{renderKeyStats()}

View source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const url = new URL(request.url); if (url.pathname === "/generate-words") { const keys = url.searchParams.get("keys") || KEY_CATEGORIES.letters; const usedWords = new Set(url.searchParams.get("used")?.split(",") || []); const exercise = url.searchParams.get("exercise"); const words = await import("https://esm.sh/an-array-of-english-words@2.0.0"); const filteredWords = words.default.filter(word => word.length >= 3 && word.length <= 8 && word.split("").every(char => keys.includes(char)) && !usedWords.has(word) ); if (filteredWords.length < 2) { return new Response(JSON.stringify({ error: "Not enough words available for the selected keys" }), { status: 404, headers: { "Content-Type": "application/json" }, }); } let word1 = filteredWords[Math.floor(Math.random() * filteredWords.length)]; let word2 = filteredWords[Math.floor(Math.random() * filteredWords.length)]; while (word2 === word1) { word2 = filteredWords[Math.floor(Math.random() * filteredWords.length)]; } if (exercise !== "letters") { const symbolSet = (exercise === "everything") ? KEY_CATEGORIES.symbols + KEY_CATEGORIES.shiftSymbols + KEY_CATEGORIES.numbers + KEY_CATEGORIES.shiftNumbers : KEY_CATEGORIES.symbols + KEY_CATEGORIES.shiftSymbols; const addSymbol = (word: string) => { const symbol = symbolSet[Math.floor(Math.random() * symbolSet.length)]; return Math.random() < 0.8 ? word : (Math.random() < 0.5 ? symbol + word : word + symbol); }; word1 = addSymbol(word1); word2 = addSymbol(word2); } word1 = Math.random() < 0.5 ? word1.charAt(0).toUpperCase() + word1.slice(1) : word1; word2 = Math.random() < 0.5 ? word2.charAt(0).toUpperCase() + word2.slice(1) : word2; const separator = Math.random() < 0.8 ? " " : "\t"; const finalWords = `${word1}${separator}${word2}`; return new Response(JSON.stringify({ words: finalWords }), { headers: { "Content-Type": "application/json" }, }); } else if (url.pathname === "/" || url.pathname === "") { return new Response( ` Svalboard Typing Practice

`, { headers: { "content-type": "text/html", }, }, ); } else { return new Response("Not Found", { status: 404 }); } } const css = ` body { margin: 0; background-color: #f0f0f0; font-family: Arial, sans-serif; } input { margin: 10px 0; } `;