/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useCallback } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const symbols = "!@#$%^&*()_+-=[]{}|;:,.<>?`~"; function App() { const [gameMode, setGameMode] = useState("words"); const [challenge, setChallenge] = useState(""); const [input, setInput] = useState(""); const [words, setWords] = useState([]); const [error, setError] = useState(null); const [darkMode, setDarkMode] = useState(() => { if (typeof localStorage !== 'undefined') { return localStorage.getItem('darkMode') === 'true'; } return false; }); const [imageData, setImageData] = useState(() => { if (typeof localStorage !== 'undefined') { return localStorage.getItem('imageData') || null; } return null; }); const fetchWords = useCallback(async () => { try { const response = await fetch("https://random-word-api.herokuapp.com/all"); if (!response.ok) { throw new Error("Failed to fetch words"); } const data = await response.json(); setWords(data.filter(word => word.length >= 3 && word.length <= 8)); } catch (err) { setError("Failed to load words. Please try again later."); } }, []); useEffect(() => { fetchWords(); }, [fetchWords]); const generateChallenge = useCallback(() => { if (gameMode === "words") { if (words.length > 0) { setChallenge(words[Math.floor(Math.random() * words.length)]); } } else if (gameMode === "numbers") { setChallenge(Math.floor(Math.random() * 1000).toString().padStart(3, '0')); } else { setChallenge(Array(5).fill().map(() => symbols[Math.floor(Math.random() * symbols.length)]).join('')); } }, [gameMode, words]); useEffect(() => { generateChallenge(); }, [gameMode, generateChallenge]); const handleInputChange = (e) => { setInput(e.target.value); if (e.target.value === challenge) { setInput(""); generateChallenge(); } }; const toggleGameMode = () => { setGameMode(prevMode => { if (prevMode === "words") return "numbers"; if (prevMode === "numbers") return "symbols"; return "words"; }); setInput(""); }; const toggleDarkMode = () => { setDarkMode(prevMode => { const newMode = !prevMode; if (typeof localStorage !== 'undefined') { localStorage.setItem('darkMode', newMode); } return newMode; }); }; const handleImageUpload = (e) => { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = () => { const dataUrl = reader.result; setImageData(dataUrl); if (typeof localStorage !== 'undefined') { localStorage.setItem('imageData', dataUrl); } }; reader.readAsDataURL(file); } }; const renderChallenge = () => { return challenge.split('').map((char, index) => ( {char} )); }; if (error) { return

{error}

; } return (

Typing Practice Game

Type: {renderChallenge()}

Choose an image

{imageData && (

)}

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Typing Practice Game

`, { headers: { "Content-Type": "text/html" }, }); } const css = ` body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f0f0f0; transition: background-color 0.3s ease; } .container { background-color: white; padding: 2rem; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); text-align: center; transition: background-color 0.3s ease, color 0.3s ease; max-width: 600px; width: 100%; } .container.dark-mode { background-color: #333; color: white; } h1 { margin-bottom: 1rem; } .game-mode { margin-bottom: 1rem; } .challenge { font-size: 1.5rem; margin-bottom: 1rem; letter-spacing: 2px; } input[type="text"] { font-size: 1rem; padding: 0.5rem; width: 100%; box-sizing: border-box; margin-bottom: 1rem; background-color: white; color: black; border: 1px solid #ccc; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .dark-mode input[type="text"] { background-color: #555; color: white; border-color: #777; } .source-link { margin-top: 1rem; font-size: 0.8rem; } .source-link a { color: #0066cc; transition: color 0.3s ease; } .dark-mode .source-link a { color: #4da6ff; } button { background-color: #4CAF50; border: none; color: white; padding: 0.5rem 1rem; text-align: center; text-decoration: none; display: inline-block; font-size: 1rem; margin: 0.5rem 0.5rem; cursor: pointer; border-radius: 4px; transition: background-color 0.3s ease; } button:hover { background-color: #45a049; } .error { color: red; font-weight: bold; } .dark-mode .error { color: #ff6666; } .image-upload { margin-top: 1rem; } .upload-label { display: inline-block; padding: 0.5rem 1rem; background-color: #4CAF50; color: white; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; } .upload-label:hover { background-color: #45a049; } input[type="file"] { display: none; } .image-container { margin-top: 1rem; max-width: 100%; } .uploaded-image { max-width: 100%; height: auto; border-radius: 4px; } `;

dantaloupe