/** @jsxImportSource https://esm.sh/react */ import React from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import { useState, useEffect, useCallback, useRef } from "https://esm.sh/react"; function App() { const [gameState, setGameState] = useState('initial'); const [currentText, setCurrentText] = useState(''); const [inputValue, setInputValue] = useState(''); const [startTime, setStartTime] = useState(null); const [wpm, setWpm] = useState(0); const [leaderboard, setLeaderboard] = useState([]); const [playerName, setPlayerName] = useState(''); const [progressPercentage, setProgressPercentage] = useState(0); const [skillLevel, setSkillLevel] = useState(''); const [hasError, setHasError] = useState(false); useEffect(() => { fetchLeaderboard(); const savedName = localStorage.getItem('lastUsername'); if (savedName) setPlayerName(savedName); }, []); const fetchLeaderboard = async () => { const response = await fetch('/leaderboard'); const data = await response.json(); setLeaderboard(data.map(entry => ({ ...entry, timestamp: new Date(entry.timestamp * 1000) }))); }; function getRandomSentence() { const sentences = [ "The quick brown fox jumps over the lazy dog nearby.", "A journey of a thousand miles begins with one step.", "All that glitters is not gold in this world.", "Actions speak louder than words in many situations today.", "Where there is a will there is always a way.", "Knowledge is power and ignorance can be very costly.", "Practice makes perfect so never give up on yourself.", "Every cloud has a silver lining look for it.", "Two wrongs do not make a right remember that.", "When in Rome do as the Romans do always.", "The early bird catches the worm every single morning.", "Honesty is the best policy in all relationships.", "Laughter is the best medicine for many ailments.", "Time heals all wounds if you let it pass.", "A penny saved is a penny earned remember always.", "Don't judge a book by its cover ever.", "The grass is always greener on the other side.", "An apple a day keeps the doctor away.", "A picture is worth a thousand words indeed.", "Rome wasn't built in a day have patience.", "Better late than never but be on time.", "A watched pot never boils so stop watching.", "Absence makes the heart grow fonder remember that.", "Beauty is in the eye of the beholder always.", "Curiosity killed the cat but satisfaction brought it back.", "Don't put all your eggs in one basket diversify.", "Easy come easy go be careful with money.", "Fortune favors the bold so take chances sometimes.", "Haste makes waste so take your time always.", "If it ain't broke don't fix it unnecessarily.", "The pen is mightier than the sword use words.", "A friend in need is a friend indeed cherish.", "When the going gets tough the tough get going.", "You can't judge a book by its cover look deeper.", "Birds of a feather flock together naturally so.", "Every dog has its day wait for yours patiently.", "It's never too late to learn something new daily.", "The early bird catches the worm wake up early.", "A rolling stone gathers no moss keep moving forward.", "Don't count your chickens before they hatch wait.", "A picture paints a thousand words use visuals.", "When in Rome do as the Romans do adapt.", "The squeaky wheel gets the grease speak up.", "Actions speak louder than words show don't tell.", "Don't put off until tomorrow what you can do today.", "Two heads are better than one collaborate often.", "The proof of the pudding is in the eating try.", "Where there's smoke there's fire investigate thoroughly.", "The best things in life are free enjoy them.", "Practice makes perfect keep working at it consistently." ]; return sentences[Math.floor(Math.random() * sentences.length)]; } const startTest = useCallback(() => { setGameState('playing'); setCurrentText(getRandomSentence()); setInputValue(''); setStartTime(new Date().getTime()); setWpm(0); setProgressPercentage(0); setSkillLevel(''); setHasError(false); }, [gameState]); useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.key === 'Enter' && gameState === "initial") { startTest(); e.preventDefault(); } if (e.key === "Enter" && e.altKey) { setGameState('initial') e.preventDefault(); } }; window.addEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown); }, [gameState, startTest]); const handleInput = (e) => { const currentInput = e.target.value; setInputValue(currentInput); const isCorrect = currentText.startsWith(currentInput); setHasError(!isCorrect); const progress = Math.min((currentInput.length / currentText.length) * 100, 100); setProgressPercentage(progress); if (currentInput === currentText) { endTest(); } else { if (isCorrect) { const currentWpm = calculateWpm(currentInput); updateWpm(currentWpm); updateSkillLevel(currentWpm); } } }; const calculateWpm = (input) => { const currentTime = new Date().getTime(); const timeElapsed = (currentTime - startTime) / 60000; const charCount = input.length; if (charCount === 0 || timeElapsed < 0.00001) { return 0; } const avgWordLength = 5; return Math.round((charCount / avgWordLength) / timeElapsed); }; const updateSkillLevel = (currentWpm) => { if (currentWpm < 30) { setSkillLevel('Beginner'); } else if (currentWpm < 50) { setSkillLevel('Intermediate'); } else if (currentWpm < 70) { setSkillLevel('Advanced'); } else { setSkillLevel('Expert'); } }; const updateWpm = (newWpm) => { setWpm(newWpm); }; const endTest = () => { setGameState('finished'); updateWpm(calculateWpm(currentText)); updateSkillLevel(wpm); }; const submitScore = async (e) => { e.preventDefault(); if (playerName.trim() === '') { alert('Please enter your name'); return; } const response = await fetch('/submit-score', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ name: playerName, wpm }), }); if (response.ok) { localStorage.setItem('lastUsername', playerName); fetchLeaderboard(); setGameState('initial'); } else { alert('Failed to submit score. Please try again.'); } }; const renderLeaderboard = () => (

Leaderboard

{entry.name}: {entry.wpm} WPM ({entry.timestamp.toLocaleString()})

); return (

Typing Challenge

{gameState === 'initial' && (

Press Enter to Start

{renderLeaderboard()}

)} {gameState === 'playing' && (

{currentText}

{skillLevel && (

Current Skill Level: {skillLevel}

)} {hasError && (

There's an error in your typing. Please correct it to continue.

)}

Current Speed: {wpm} WPM

Press Alt+Enter to restart the game

)} {gameState === 'finished' && (

Test Completed!

Your speed: {wpm} WPM

{skillLevel && (

Your Skill Level: {skillLevel}

)} {renderLeaderboard()}

)}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const SCHEMA_VERSION = 2 const KEY = new URL(import.meta.url).pathname.split("/").at(-1); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_leaderboard_${SCHEMA_VERSION} ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, wpm INTEGER NOT NULL, timestamp INTEGER NOT NULL ) `); const url = new URL(request.url); if (url.pathname === '/leaderboard') { const leaderboard = await sqlite.execute(` SELECT name, wpm, timestamp FROM ${KEY}_leaderboard_${SCHEMA_VERSION} ORDER BY wpm DESC, timestamp DESC LIMIT 10 `); return new Response(JSON.stringify(leaderboard.rows), { headers: { 'Content-Type': 'application/json' } }); } if (url.pathname === '/submit-score' && request.method === 'POST') { const { name, wpm } = await request.json(); const timestamp = Math.floor(Date.now() / 1000); await sqlite.execute(` INSERT INTO ${KEY}_leaderboard_${SCHEMA_VERSION} (name, wpm, timestamp) VALUES (?, ?, ?) `, [name, wpm, timestamp]); return new Response(JSON.stringify({ success: true }), { headers: { 'Content-Type': 'application/json' } }); } return new Response(` Typing Challenge

`, { headers: { 'Content-Type': 'text/html' } }); } const css = ` @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap'); body, html { height: 100%; margin: 0; padding: 0; font-family: 'Roboto', sans-serif; display: flex; justify-content: center; align-items: center; background-color: #e6f3ff; color: #333333; } .container { width: 95%; max-width: 1000px; background-color: #f0f8ff; padding: 2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } h1, h2 { color: #333; margin-bottom: 1.5rem; font-weight: 300; text-shadow: none; text-align: center; } #text-display { font-size: 1.2rem; margin-bottom: 1rem; min-height: 4.5em; line-height: 1.5; background-color: #e1f1ff; color: #333; padding: 1rem; border-radius: 5px; text-align: left; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); } input[type="text"] { width: 100%; padding: 0.75rem; font-size: 1rem; margin-bottom: 1rem; background-color: #ffffff; color: #333333; border: 1px solid #b3d9ff; border-radius: 5px; font-family: 'Roboto', sans-serif; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); } #instructions { margin-bottom: 1rem; color: #4a90e2; font-weight: 500; font-size: 1.5rem; text-align: center; cursor: pointer; } .wpm-current { text-align: center; font-size: 24px; margin-top: 20px; font-weight: bold; color: #4a90e2; } .progress-bar { width: 100%; height: 20px; background-color: #e0e0e0; border-radius: 10px; margin-bottom: 1rem; overflow: hidden; } .progress { height: 100%; background-color: #4a90e2; transition: width 0.3s ease-in-out; } .skill-level { text-align: center; font-size: 18px; margin-top: 10px; margin-bottom: 10px; font-weight: 500; color: #4a90e2; } .error-message { text-align: center; font-size: 18px; margin-top: 10px; color: #d32f2f; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .skill-level, .wpm-current, .error-message { animation: fadeIn 0.5s ease-in-out; } #instructions:hover { color: #2a70c2; transition: color 0.3s ease; } .blink { animation: blink 1s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } button { background-color: #4a90e2; color: #ffffff; border: none; padding: 10px 20px; font-size: 1rem; border-radius: 5px; cursor: pointer; transition: background-color 0.3s; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); margin-top: 10px; } button:hover { background-color: #2a70c2; } .leaderboard { margin-top: 2rem; padding: 0.5rem; padding-left: 2rem; background-color: #e1f1ff; border-radius: 5px; } .leaderboard h2 { margin-top: 0; padding-top: 0.5rem; color: #333; } .leaderboard li { margin-bottom: 0.5rem; padding: 0.5rem; border-bottom: 1px solid #b3d9ff; } .timestamp { font-size: 0.8em; color: #666666; margin-left: 0.5rem; } form { display: flex; flex-direction: column; align-items: center; } .restart-instruction { font-size: 0.8em; color: #4a90e2; text-align: center; margin-top: 10px; } .source-link { text-align: center; margin-top: 20px; font-size: 0.8em; } .source-link a { color: #4a90e2; text-decoration: none; } @media (max-width: 768px) { .container { width: 100%; padding: 1rem; } #text-display { font-size: 1rem; } } `; export default server;

typetest

Versions

v0