clickings

you can try clickings at rsazra.com/clickings

why

Sometimes I feel like typing. Just typing. My go to site for this is typings.gg. I like that it's simple, lightweight, open source, and has tons of themes available.

Sometimes I feel like clicking. Just clicking. The best I found for this was the human benchmark aim trainer test, but it is not open source, has no themes, gives a weird metric, and has no options for game length. It also doesn't feel quite as satisfying as I want it to. So instead, I often open up chess.com to do some puzzles or lichess.org to play some bullet. This has its own issues though: In the middle of a work day, a losing streak can really ruin my mood. A winning streak isn't much better, because I'll probably end up wasting a lot more time than I intended to. And this also requires that I think, which I am usually trying to avoid when I get in a mood for this.

I haven't looked very hard, but since I never came across a test that fit my needs, I decided to make one. And since typings is open source, I decided to fork it, and use it as inspiration.

making clickings

I made very few changes to the main HTML and CSS of typings. The Javascript obviously saw major changes, but code for setting options, changing themes, and managing cookies was left mostly untouched, and I used the game logic as inspiration for writing clickings. I didn't change much for the results calculation and also didn't really double check it, so hopefully it's correct.

Most of the changes are related to drawing to the screen. Embarrassingly, I had never heard of the HTML <canvas> tag until very recently. I thought it was really cool and wanted to try using it. This seemed like the perfect project for it, and I think it pretty much was, but there were some peculiarities I wasn't expecting.

The first issue was scaling. I'm surprised HTML canvases aren't automatically scaled for screen resolution, and doing so manually took a while to get completely right while maintaining accurate interactivity.
After that was the actual drawing: I didn't realize how primitive it was. I was surprised there's nothing akin to CSS transitions by default. I didn't need much though, and adding a list of some simple objects to do some fading out was enough.
The third and most annoying problem was with theming: since the colours for the canvas were being set in Javascript, I needed a way to pull theme colours from CSS. I had a few solutions to this, but none felt quite right until I thought to try using CSS variables. The name of getComputedStyles made me think just setting a variable would be passed over, but I'm happy to be wrong about that, and very content with the solution I arrived at. It did require some hex to RGB conversion and changes to the theme files, but a big fat regex and a little bit of manual verification was all it took to wrap things up.

If you'd like to know more, the project is public on GitHub and the code is fairly easy to read. Feel free to contact me with any questions or suggestions.

other notes

The sounds in the game were taken from chess.com. This probably isn't allowed but I'm happy with how they turned out so hopefully no one gets mad at me.
clickings technically works on mobile but doesn't look great. I'm not sure how I can effectively condense the UI for a vertical aspect ratio, but I might try to eventually.
clickings is not hosted at clickings.gg because it would cost about $90/yr and I don't expect anyone to care very much.
I am considering making a v2 with features like revealing the cursor's path at the end of the game, dragging targets to a destination, more stats, customizable targets, and a share button for saving your score. I experimented with these a bit in clickings but decided they weren't really true to the spirit of typings.gg. If you'd be interested in seeing this or have other ideas, please let me know!

Posted: 2024-03-16