SpeedType

Una app para calentar las manos y medir qué tan rápido puedes tipear :)

Qué se logra

• Practicar y mejorar la velocidad de tipeo.
• Obtener métricas como palabras por minuto (WPM) y precisión.
• Competir en un leaderboard local.

Descripción de la aplicación

SpeedType es una aplicación interactiva que permite a los usuarios medir su velocidad de tipeo y precisión. Los usuarios deben escribir un cantidad de palabras personalizables generadas aleatoriamente dentro de un límite de tiempo, también personalizable. Durante el tiempo de juego, el usuario puede ver estadísticas en vivo sobre su desempeño.

Al finalizar, se muestran estadísticas como palabras por minuto (WPM), errores cometidos y precisión. Se le pide al usuario un nombre de 4 caracteres y los mejores resultados se guardan en un leaderboard local.

Estructura del proyecto

Archivos principales

• index.html: Archivo HTML principal que carga la aplicación React.
• src/main.tsx: Punto de entrada de la aplicación React.
• src/App.tsx: Componente principal que organiza la lógica y los componentes de la aplicación.

Componentes

• src/components/GeneratedWords.tsx: Muestra las palabras generadas que el usuario debe tipear.
• src/components/UserTypings.tsx: Muestra lo que el usuario ha tipeado, resaltando errores y aciertos.
• src/components/Results.tsx: Muestra los resultados finales al terminar el juego.
• src/components/RestartButton.tsx: Botón para reiniciar el juego.
• src/components/Leaderboard.tsx: Muestra el leaderboard con los mejores resultados.
• src/components/Caret.tsx: Representa el cursor animado que sigue al usuario mientras tipea.
• src/components/GameSettings.tsx: Permite ajustar la cantidad de palabras a generar y el tiempo límite para jugar.
• src/components/UsernameModal.tsx: Permite ingresar el username del user para entrar al leaderboard o saltarlo

Hooks personalizados

• src/hooks/useEngine.ts: Maneja la lógica principal del juego, como el estado, el tiempo restante y las estadísticas.
• src/hooks/useCountdown.ts: Proporciona un temporizador de cuenta regresiva.
• src/hooks/useTypings.ts: Maneja la entrada del teclado y el texto tipeado por el usuario.
• src/hooks/useWords.ts: Genera y actualiza las palabras que el usuario debe tipear.

Utilidades

• src/utils/helpers.ts: Contiene funciones auxiliares como cálculo de precisión, conteo de errores y formateo de porcentajes.

Configuración

• vite.config.ts: Configuración de Vite para el proyecto.
• tsconfig.json y tsconfig.app.json: Configuración de TypeScript.
• eslint.config.js: Configuración de ESLint para mantener la calidad del código.

Referencias y uso de IA

El código base lo saqué de fast type

También me apoyé de Claude Sonnet para estructurar mi código