Wordle-Helper : How to never lose in Wordle again

Wordle-Helper : How to never lose in Wordle again

I am sure you have heard about Wordle, a word guessing game where you have 6 tries to guess a 5 letters word. Well brace yourselves Hashnoders : Wordle-Helper is a web-based app that will help keep your wordle winning streaks ✨

This blog post is a participation entry in the #NetlifyHackathon , I'll talk about Wordle-Helper from idea to MVP and how #Netlify's all-in-one platform provided a fast , simple and easy shipping .

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 .. Pasted image 20220212190557.png

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 , Hashnode announced Netlify Hackathon , it was the right opportunity to push toward making Wordle-Helper a real thing, so I decided to participate .

Pasted image 20220212194845.png

The Code

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

Two brains are better than one

Since UI/UX is a crucial part of this project I wouldn't risk to do it myself , after all ,like all backend developers I have some interesting taste of colors .

So I teamed up with my friend @UIthinker where I worked on the search logic while he made sure things worked in a convenient and beautiful way .. and hell he did .

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 for you , or 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 UIthinker 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>

The problem with this approach is that there were some bugs with input values and keyboard wasn't triggered for some phones or taking a little delay to show.

Then 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 !

Deploying to Netlify was the easiest part , we've already been using GitHub for collaboration , all needed was pointing Netlify to the correct repository and let it do its magic ✨

Pasted image 20220226230633.png

Pasted image 20220226231152.png

Deploy previews

Another cool feature of Netlify was the generation of deploy previews triggered by pull requests to make sure everything is working as well as testing on multiple devices.

Pasted image 20220226232800.png

Not just that , the Netlify bot adds a friendly comment with necessary details all in-site: a collaboration boost 🚀.

Pasted image 20220226233654.png

Conclusion

Alright ! thanks for making it this far ! Hope you enjoyed reading this blog as much as I enjoyed writing it .

Special thanks to Hashnode for helping developers share big ideas and Netlify for providing a platform where these big ideas become true .

In the end , whether you use Wordle winnig 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 !