Wordle has been round for some time now however I heard about it solely final week. I examine it in our mates’ WhatsApp group. Then we began sharing our scores by an hour previous midnight day-after-day. 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 the whole 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 a web site, I’ve created a flutter app. I’ve examined solely on android but however I’ve no causes to consider it gained’t work on iOS :).
I used to be in search of a cheap resolution 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 a number of date, phrase pairs.
I needed a less expensive resolution for my API as properly 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.
- Verify if each phrases are identical (return prematurely), validate if it’s a legit English phrase & create response. I’m utilizing a shade 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? Properly, I needed to create my Wordle solely to create it in flutter.
The word_field element
This element creates an enter widget which accepts a 5 letter phrase in 5 bins (1 for every letter). That is just like creating an OTP area. A gist of a field for every letter beneath:
The house element
This element 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 residence element:
_attempts: holds the variety of makes an attempt executed thus far.
_wordColors: holds a listing of 6 shade codes (like ‘bggyb’; returned from the API). Every shade code is handed on to the respective
word_fieldelement 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 elements accordingly.
The shareMessage builder
This piece takes care of making the share message if the sport is efficiently gained.