Wordle has been round for some time now however I heard about it solely final week. I examine it in our pals’ WhatsApp group. Then we began sharing our scores by an hour previous midnight on daily basis. It’s nice.
Whereas it’s such a enjoyable recreation to play, it additionally appeared such a easy piece of software program to implement. So why not give it a go? Yup, similar to that I made a decision to create my very own Wordle. Right here’s how.
- Whereas Wordle brings your complete listing of phrases with it when the web page is loaded (YES!), I’ve created an API to confirm the phrases towards. This API takes and verifies a phrase towards the phrase of the day (saved in a DB).
- Wordle has a listing of legit phrases and it permits you to enter a phrase solely from that listing. Quite the opposite, I question a Free Dictionary API and validate if an enter phrase is a legit English phrase.
- Whereas Wordle is an internet site, I’ve created a flutter app. I’ve examined solely on android but however I’ve no causes to imagine it received’t work on iOS :).
I used to be on the lookout for a cheap answer for a database as a result of all it must retailer is a key-value pair of dates (yyyyMMdd) and phrase. I selected Azure Cosmos DB for it. I created a Cosmos DB, created a container in it, and added just a few date, phrase pairs.
I wished a less expensive answer for my API as nicely and opted for serverless (Azure Features) as a result of:
- My API will not be useful resource intensive.
- It will be billed per request.
The Features API is now set to validate the enter phrases. Let me break this into 3 segments:
- Validate the enter phrase (not null, is of the identical size because the phrase of the day), extract the phrase of the day from DB & convert to uppercase each.
- Test if each phrases are identical (return prematurely), validate if it’s a legit English phrase & create response. I’m utilizing a coloration code for every letter; ‘g’ if letter place matched, ‘y’ if letter discovered however incorrect place, ‘b’ if letter not discovered.
The standing of every letter within the enter phrase is decided by the getLetterStatus perform.
Deployed API: https://wordle-api.azurewebsites.net/api/CheckWord?word=
Why flutter? Nicely, I wished to create my Wordle solely to create it in flutter.
The word_field part
This part creates an enter widget which accepts a 5 letter phrase in 5 containers (1 for every letter). That is much like creating an OTP discipline. A gist of a field for every letter under:
The house part
This part builds a scaffold and places collectively a web page to simply accept 6 makes an attempt for phrases.
I’m sustaining 5 state variables within the dwelling part:
_attempts: holds the variety of makes an attempt executed to this point.
_wordColors: holds a listing of 6 coloration codes (like ‘bggyb’; returned from the API). Every coloration code is handed on to the respective
word_fieldpart to fill the letter backgrounds accordingly.
_wordsEnabled: holds a listing of 6 bools to establish which
word_fieldis accepting enter. Different
gameover: holds a bool to retailer if the sport is over.
shareMessage: is constructed if the phrase of the day is efficiently guessed and the sport is over.
The _checkWord handler
This handler calls the
wordle-api, will get the colour code, and updates the parts accordingly.
The shareMessage builder
This piece takes care of making the share message if the sport is efficiently received.