TypeGlow Overhaul

[CyberSphinxxx]

v2.0.0: The "TypeGlow" Overhaul

This major release marks a complete rewrite of the project, migrating from vanilla HTML/JS to a modern, high-performance stack using SvelteKit, TypeScript, and Tailwind CSS.

The focus of this update is stability, type safety, and a complete UI/UX redesign to align with the "Neon/Cyberpunk" aesthetic.

Key Highlights

• Modern Framework: Migrated the entire codebase to SvelteKit. No more direct DOM manipulation; the UI is now fully reactive.
• Type Safety: Implemented TypeScript for the core game engine. WPM, accuracy, and scoring logic are now strictly typed to prevent runtime calculation errors.
• New Design System: Replaced vanilla CSS with Tailwind CSS.
  • Introduced the "Neon Focus" dark theme.
  • Added glow effects for active characters and high-contrast typography.
• Backend Integration: Fully integrated with Firebase & Firestore.
  • Google Auth: Users can now sign in to save their progress.
  • Live Leaderboard: Real-time fetching of top scores.

Technical Changes

Refactoring & Architecture

• Decoupled Logic: The typing logic has been extracted into a standalone TypingEngine class, separating game mechanics from the UI.
• Performance: State management now uses Svelte reactivity, significantly reducing re-renders compared to the previous vanilla implementation.
• Hosting: configured the project for seamless deployment on Vercel with optimized production builds.

UI/UX Improvements

• Immersive Mode: Removed the container "card" layout in favor of a full-screen, distraction-free typing interface.
• Visual Feedback: Added dynamic coloring (White/Red) and glow effects for immediate feedback on correct/incorrect keystrokes.
• Fonts: Standardized on JetBrains Mono for consistent character width and readability.

Dependency Updates

• Added svelte & @sveltejs/kit
• Added firebase
• Added tailwindcss, postcss, autoprefixer
• Added @sveltejs/adapter-vercel

---

How to Run Locally

1. Clone the repo.
2. Install dependencies: npm install
3. Add your Firebase keys to .env.
4. Run the dev server: npm run dev

---

This discussion was created from the release TypeGlow Overhaul.