TypeRacer Clone

A modern, sleek typing speed game built with Svelte 5. Test your typing speed and accuracy with randomly selected passages.

Features

• 🎯 Real-time typing feedback with error highlighting
• ⚡ Words Per Minute (WPM) calculation
• 📊 Accuracy tracking
• ⏱️ Precise timing with millisecond accuracy
• 🎨 Beautiful gradient UI with smooth animations
• 📱 Responsive design
• 🔄 Multiple text passages for variety

Local Development

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone this repository or navigate to the project directory:

   cd Typing-game
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm run dev
   

4. Open your browser and visit http://localhost:5173

Build for Production

npm run build

This creates an optimized production build in the dist folder.

Deploying to Netlify via GitHub

Step 1: Initialize Git Repository

# Initialize git repository (if not already done)
git init

# Add all files
git add .

# Commit your changes
git commit -m "Initial commit - TypeRacer clone"

Step 2: Create GitHub Repository

1. Go to GitHub and create a new repository
2. Don't initialize with README (we already have one)
3. Copy the repository URL

Step 3: Push to GitHub

# Add GitHub remote
git remote add origin <your-github-repo-url>

# Push to GitHub
git push -u origin main

If your default branch is master instead of main, use:

git push -u origin master

Step 4: Deploy on Netlify

Option A: Via Netlify Dashboard (Recommended)

1. Go to Netlify and sign in
2. Click "Add new site" → "Import an existing project"
3. Choose "GitHub" as your Git provider
4. Authorize Netlify to access your GitHub account
5. Select your TypeRacer repository
6. Configure build settings:
   • Build command: npm run build
   • Publish directory: dist
7. Click "Deploy site"

Netlify will automatically:

• Build your site
• Deploy it to a live URL
• Rebuild on every push to your repository

Option B: Via Netlify CLI

# Install Netlify CLI
npm install -g netlify-cli

# Login to Netlify
netlify login

# Initialize Netlify site
netlify init

# Deploy
netlify deploy --prod

Step 5: Custom Domain (Optional)

In your Netlify dashboard:

1. Go to Site settings → Domain management
2. Add your custom domain
3. Follow Netlify's instructions to configure DNS

Project Structure

Typing-game/
├── src/
│   ├── lib/
│   │   ├── passages.js          # Text passages for typing
│   │   ├── StartScreen.svelte   # Start screen component
│   │   ├── RaceScreen.svelte    # Main typing game component
│   │   └── ResultsScreen.svelte # Results display component
│   ├── App.svelte               # Main app component
│   └── main.js                  # Entry point
├── index.html                   # HTML template
├── package.json                 # Dependencies
├── vite.config.js              # Vite configuration
├── netlify.toml                # Netlify configuration
└── README.md                   # This file

How to Play

1. Click "Start Race" on the home screen
2. A random passage will appear
3. Start typing in the input box
4. The timer starts on your first keystroke
5. Characters turn green when correct, red when incorrect
6. Complete the passage to see your results
7. Click "Try Again" to race with a new passage

Customization

Adding More Passages

Edit src/lib/passages.js and add new strings to the passages array:

export const passages = [
  "Your new passage here...",
  // ... more passages
];

Changing Colors

The app uses CSS gradients defined in each component's <style> section. Look for linear-gradient to customize colors.

Technologies Used

• Svelte 5 - Modern reactive framework with runes
• Vite - Fast build tool and dev server
• CSS3 - Styling with gradients and animations

License

MIT

Contributing

Feel free to submit issues and pull requests!