CPS Counter

A modern, fast, and accurate clicks per second counter

Features

• Real-time CPS tracking for left click, right click, and scroll
• Maximum scores saved locally in your browser (localStorage)
• Share your best scores as a beautiful image (Canvas API)
• Fully responsive for all devices
• No external tracking or analytics
• Fast and lightweight

Tech Stack

• Astro - Static site generator with zero JavaScript by default
• TypeScript - Type-safe scripting
• Modern CSS with CSS Variables for theming
• localStorage for persistent score data
• Native Canvas API for image generation

Project Structure

src/
├── components/
│   ├── CPSCounter.astro         # Main CPS tracking logic
│   ├── CounterCard.astro        # Reusable counter display
│   ├── ScrollCard.astro         # Scroll tracking display
│   ├── ActionButtons.astro      # Share and reset buttons
│   └── Footer.astro             # GitHub link with tooltip
├── layouts/
│   └── Layout.astro             # Base HTML layout with global styles
└── pages/
    └── index.astro              # Main entry page
public/
├── logo.svg                     # App logo
├── github_logo.svg              # GitHub icon for footer
├── favicon.ico                  # Browser favicon
└── site.webmanifest             # PWA manifest

Getting Started

git clone https://github.com/henrique-coder/web-cps-counter.git
cd web-cps-counter
npm install
npm run dev

Build

npm run build    # Generate static files in dist/
npm run preview  # Preview production build locally

How It Works

1. CPS Calculation: Uses a 1-second sliding window to track clicks via performance.now() timestamps
2. Score Persistence: Max scores are stored in localStorage with key cps-counter-max-scores
3. Image Sharing: Canvas API draws a custom image with scores, copied to clipboard or downloaded
4. Interactive Exclusion: Buttons and links are excluded from click counting via isInteractiveElement() check

Contributing

Contributions are welcome! Feel free to open an issue or submit a pull request.

License

MIT License. See LICENSE file for details.