Unofficial Realtime WPM Counter for 10FF

A self-contained script for “injecting” additional functionalities on 10FF. It’s all about improved typing experience.

Results might not be in perfect sync since we’re calculating the scores client-side while the final result, server-side; but it’s usually only a few CPMs off, thus should still be reliable in giving you a quick heads-up on your potential achievement during the test.

💠 Features

• Realtime WPM counter (for sure).
• Beer-filling-up progress bar.
  Note: Click on the countdown timer to turn it on/off and type on, undistracted!

🔧 Configurations (optional)

Head over to src folder and open up the config.json file, make your desired changes and reproduce the target script by running npm start.

Default options:

{
  "wpmCounter": {
    "styles": {
      "color": "#de1531",
      "fontSize": "1.3em",
      "fontFamily": "Roboto, monospace"
    }
  },
  "progressBar": {
    "fillColor": "rgba(210, 150, 122, 0.2)"
  }
}

The styles options are essentially the common CSS properties which let you further customize the counters look.

❓ How to use

Bookmarklet (recommended for regular use)

To create one, do the following:

1. Run npm start (non-programming users can ignore this step), then
2. Locate the output file (called “10ff-realtime-counters.min.js“) inside the dist folder.
3. Copy the whole script text to clipboard.
4. Fire up your favorite browser of choice (e.g. Chrome) and hit Ctrl+Shift+B or Command+Shift+B on Mac to display the bookmark bar (if you haven’t already).

5. Add a new bookmark, name it and in the URL field, paste the script you copied earlier prefixed with javascript: protocol, like so:

    javascript:(paste_the_copied_script_here)

6. At this point, go to the 10FF site, click on this bookmark and enjoy! :)

Console Inject (the simplest, for one-off use)

Bring up the browser console window on 10FF website by pressing F12 for Windows or Cmd+Option+J for Mac, select the “Console” tab, paste the script into the text field, hit Enter, and voila!

Chrome Extension

Coming soon!

📜 License

MIT