Design decisions in Wordle vs. my homegrown Spelling Bee

Unless you’ve been living under a rock for the past few months, you’ve heard of Wordle, the word game that started as a labor of love and was recently bought by the New York Times for several million dollars¹.

I’ve played it for a few weeks but it eventually grew stale — even on hard mode I can consistently puzzle out the word. I’ve played innumerable variations as well — generalizations like Hello Wordl, parodies like Letterle, difficulty upgrades like Dordle, alternate-genre translations like Worldle, proof-of-concept optimizations like Absurdle, reimaginings like Semantle and so, so many more. It’s as if every small-time hobby developer² came out with their own unique spin at the height of Wordle mania.

But that’s not what I want to talk about today. When building my own homegrown Spelling Bee game³ I made several design decisions that Wordle’s developer, Josh Wardle⁴, handled differently.

Wordlist

Wordle and Spelling Bee are simple enough to run entirely from files loaded into your browser — they’re fully client-side apps with no network interaction, in developer-speak. This means that the word of the day (the secret word in Wordle, the “core” pangram in Spelling Bee) has to be in a file somewhere. Additionally, both have a valid list of words of the day that is a strict subset of valid guesses — this prevents players from being forced to guess an obscure word, while still allowing them to do so if their vocabulary is big enough.

In Wordle, there is a variable that contains a shuffled list of 2,309 secret words. Every day, the script picks the next one in the list. This is boring! Worse, if you look at the source code, you can accidentally spoil the next few days’ worth of words. (Nitpicking because it’s unlikely you’d stumble across the day’s word in this giant list, but it’s bad on principle.) The guess list is significantly larger and stored in a separate variable.

Spelling Bee uses a deterministic shuffling algorithm to shuffle valid pangrams and pick one consistently for each day. Since I’ve precomputed and capitalized the possible pangrams, I don’t have to use a separate word list for valid solutions and valid guesses. This is more elegant, but due to the nature of the hashing algorithm, I can’t change the vocabulary list or I’ll risk changing the day’s word.

Popup notification

Spelling Bee uses a single popup element. Whenever a popup is triggered, its contents change to the relevant message, it becomes visible, and a countdown of exactly 1 second starts, after which the element becomes invisible. A known bug is that subsequent triggers start a new countdown but any existing countdowns are still running. When spamming messages this causes the popup to appear and then almost immediately disappear:

What is happening is:

• you click on Enter at 0:00.00, causing the popup to appear. The popup is scheduled to disappear 1 second later, at 0:01.00.
• you click on Enter again at 0:00.20. The popup is already visible, so this does nothing that you can see. But behind the scenes, another countdown is set and the popup is scheduled to disappear 1 second later, at 0:01:20.
• you wait for the popup to disappear, and it does so at 0:01.00.
• you click on Enter again at 0:01.10. The popup appears.
• at 0:01:20, the second countdown ends, and the popup disappears after only being visible for 0.1 seconds.

This is weird behavior, and there are better ways of implementing this popup. I’ll likely never get around to it though.

Wordle takes a different approach. Instead of a single popup element, every popup is a new element that is set to disappear after ~2 seconds. This means no flickering countdowns, but instead:

This is messy too!

On-screen keyboard feedback

On a device without a touchscreen, Wordle can be controlled by keyboard or by mouse (with the on-screen controls). Mouse inputs trigger the on-screen buttons, but keyboards do not:

My Spelling Bee shows feedback for buttons whether the keyboard or the mouse is used:

Interestingly, the New York Times Spelling Bee doesn’t show feedback for letters, but does for the Delete, Shuffle, and Enter controls when the keyboard is used:

There is an argument to be made for all three implementations:

• If you’re not directly interacting with buttons, they shouldn’t show any feedback (Wordle)
• The UI elements are input indicators that should be agnostic of the actual input method (my Spelling Bee)
• It makes sense to show feedback for actions (Delete, Shuffle, Enter) but not for inputs (the letters) — these should be treated differently (official Spelling Bee)

These differences are almost unnoticeable, but are intriguing nonetheless.