Wordle-Helper : How to Never Lose in Wordle Again

blog cover image

Wordle-Helper is a web-based app I created with a friend of mine that helps solve the famous Wordle game , here’s how we did it .

This blog post was our participation entry in a Hackathon that promoted the use of Netlify, I’m re-posting it here with some edits .
Let’s get started !

When the Idea clicked

The other day , after hearing a lot about the new game called Wordle I finally decided to give a try , didn’t take long to understand the principle , few tries , end of game (found the correct word for the record 😅) , OK I see why people love it .

However , my journey as a normal user didn’t last long ,as I found myself using Devtools to scroll through the page source and that’s where I found something interesting ..

According to the game’s rules only real words are allowed to be submitted, but the network tab showed no activity during submission , the check must be happening locally , in other words , the words list is somewhere in the source code 🧐.

Sure enough, after some digging found two arrays in the main JavaScript file that contained all possible words (1929 words in total).

Moreover , if only these words are allowed to be submitted ,then the correct one must be within the list , of course I can search through the list manually given the hints I know so far (e.g : starts with c ends with y) but wouldn’d be nice if there is a sophisticated search engine to do that , the idea was born .

I made a personal note about this , stopped the procrastination session I was having and moved on with my daily tasks .

Few days later , I suggested the idea to my friend Abbou a front-end developer. We decided to use React , it was an interesting opportunity for me to get out of my comfort-zone (python) .

The Code

Now to the juicy part , transforming the idea into working code ..

In addition to setting up the project , Abbou made sure things worked in a convenient and beautiful way . Meanwhile I worked on the search logic.

So how does it actually work

The search algorithm is composed of two steps:

  1. generate a 5 positions regex string where for each position :
    • if the user provided the letter (green) use it
    • else if letter is unknown : at least match against letters that are not in the word.
    • finally if neither is provided just match anything in that position.
  2. After getting the primary probable words list , further filter it so only words containing letters from the contains list (yellow) are left . This algorithm is simple but actually very capable of narrowing the probable words from hundreds to a couple using only few hints , if it didn’t click right away feel free to check the source code I’ve left comments there , you can also DM me on twitter , always glad to help.

Note: in source code the two steps are grouped within one if condition :

// mainRe : step one , containsRe : step two
allNames.forEach((item) => {
  if (mainRe.test(item) && containsRe.test(item)) {  // <-- Here
    arr.push(item);
  }
});

Getting user input

For this part I’ll let you with Abbou to explain what he did :

First , I tried capturing user input using event key or keycode but it lead to an inconsistent behavior in Android phones .

For the second try I wanted to get value from a hidden <input/> assigning it to each box which is a <label> and then displaying the value inside

<input id="box1" style="{{height:0,overflow:hidden;}}" />
<label htmlFor="box1">{value here}</label>

This approach had a buggy input and keyboard wasn’t triggering for some phones or taking a little delay to show.

It’s then when we asked ourselves: why not using an On-screen keyboard just like in Wordle ! Actually mimicing that was straightforward , you need a long string of characters for your preferred keyboard layout (just drag your finger through the keyboard to generate it) qwertyuiopasdfghjklzxcvbnm here you go I just did it 😄 tompiano.gif

After that you can do the capitalization with css text-transform: uppercase;.

All left is looping through the characters generating from each char a <div> element with an onClick event that mimic a keyboard click .

const keyboardRowOne = "qwertyuiop";
// ....

{
  keyboardRowOne.split("").map((keyItem) => (
    <div
      className="key"
      key={keyItem}
      onClick={() => {
        handleKeyboardClick(keyItem);
      }}
    >
      {keyItem}
    </div>
  ));
}

Let’s Deploy it !

As mentioned above , we are using Netlify as it was part of the Hackathon rules , feel free to use your preferred platform .

Many providers support deploy via drag and drop upload, but I recommend linking your code repository for a CI (Continuous Integration) support aka auto-triggered builds .

Conclusion

In the end whether you use Wordle winning streaks to boost your resume (wait what ? lol) or just to outsmart your family and friends , I hope this project will be helpful . Use it wisely and have fun !

See you in another exciting project !