Weddle (or Just Another Wordle Clone)
Remember when Wordle basically took over the Internet? The simple web game became a constant topic of conversation with everyone from my 20- and 30-something friends to my septuagenarian family and acquaintances. And never has there been a more civil time on the web than the unspoken commitment to the social contract: never spoil the Wordle word! The craze reached such heights that Vice President Kamala Harris was asked about her Wordle habits and her starting word strategy.
So it was in the midst of that environment that I found myself with a weekend alone and nothing to do. It was just a few weeks before my wedding, but my fiancée was at her bachelorette weekend. I contemplated binge watching something new, but then I had an idea. Wordle had already spawned a thousand knockoffs, so why not a bespoke one for our wedding website? It could just be something silly to occupy my time, or if it turned out cool, it could be something for my wedding guests to play with when they needed a break from the dance floor.
Wordle, it turns out, is very simple, but I wanted to make a few modifications:
- While the player could still type in any word with the right number of letters, all the puzzles (answers) would come from a custom curated list of wedding-related words.
- To make things a bit more interesting, I wanted to include puzzles with a varying number of letters, anywhere from 4–7.
- Instead of one puzzle a day, users could play as much as they wanted and a random puzzle would appear each time.
In the space of a couple hours, I had a working prototype that did (almost) everything I wanted. The whole thing is built in HTML and pure JavaScript (no JQuery, blessedly). The static HTML consists of just the keyboard, a div container for the letter board, and whatever menu / button elements I needed on the page:
The JavaScript selects a random word from the puzzle word list, loads and formats the game board (dynamically based on the number of letters in the word), takes the on-screen keyboard inputs, and validates the entries. For speed/optimization reasons, I didn’t want to load every possible 4 through 7 letter word every time the page loads, so I housed the dictionaries (one for each number of letters) in separate text files and just read them in once we know how many letters the puzzle needs.
The biggest challenge, and the part that probably took the longest to get perfect, was perhaps the most iconic (pun intended) Wordle feature: sharing your emoji grid after you finish playing. Compiling the emoji grid during gameplay and then utilizing the Share API was a fun challenge that ultimately gave the project a professional feel.
The prototype was a big hit with my fiancée and our wedding party, and so we added it to our wedding website and told our guests about it.
You can see the final code for Weddle on my GitHub page, or you can check out the actual Weddle app on my wedding website. Enjoy!