Building a Word Game: Let's Play Alpha

As a computer science teacher I love teaching algorithms without using code. One of my favorite ways to introduce divide and conquer algorithms is to start with the binary search algorithm. What I like to do is grab a dictionary from the library and challenge the students to how many guesses it will take to find what page number any word in the dictionary is on. A dictionary that may have hundreds of pages gets consolidated down to a small amount of page turns using that algorithm.

Since I like this way of teaching, I came across the site that hryanjones was hosting on Github Pages, Guess My Word. What if we recreated something popular like Wordle with this kind of algorithm? That’s where the idea for Let’s Play Alpha came from.

Let’s Get Into This

When I had the idea for this I tried to think of what would it need to pull it off. How much heavy lifting did I need frameworks to do for me? Since this is going to be a mainly client side game that didn’t need to do much fetching or server rendering, I knew I was going to use React. I thought I could have all the data for the game served on the client side since the word list I was going to use was going to be a dictionary and I didn’t want it to do a bunch of fetching once the game was first loaded.

So here is my stack for this game. I built it with Astro, because it’s easy for developers and it doesn’t have a lot of the bulk that some of the other React frameworks have. I could build my game in components with React added onto Astro. I used Tailwind for my styling and like I said, all the data is served up in my loading algorithms from javascript files.

Setting Up My Project

Once I got my project started with the usual starting point in Astro, I started to get my main component ready for the project. Astro files and components can be built with the .astro extension but since I was going to build a React component, I used typescript for that. On my landing page for the app, I imported the component and used the client directive to hydrate it correctly.

<Sample client:only=”react” />

Then, I could build a React component in my components folder and let it do its thing. Easy peezy!

How Does This Game Work?

Ok, so how exactly did I get everything to work as I wanted it to? First, I needed a list of words. I grabbed a list of words using a Scrabble API. I then consolidated it down to a smaller list because it was huge and the list included a ton of words that were just ridiculous. After shuffling the list I set up a dictionary where the key is the date and the word is the value. That way I could fetch the word for each day without having to worry about what time of the day it was.

Then, I decided to set up the number of guesses and rounds. The player of the game gets 5 guesses, similar to Wordle. After 5 guesses, they move to the next round where all their previous guesses get cleared out. When the user guesses a word, the words that they guess are stacked around the input field in a way that shows them the alphabetical order of the guesses. This is meant to help the player. They can use this to narrow down their guesses. To do this, I set up 2 arrays. When they guess a word, it will be placed in that array whether it's before or after the solution of the game that day.

Lastly, I decided to give the user a little more feedback. When I tried this out with friends it seemed a little too hard to get the word in 5 guesses. That’s when I used the green highlighting that Wordle does to show if a letter is correct. So this is like a ‘Guess My Word’ and ‘Wordle’ mashup.

Learning New Things

Alright, so what was the real purpose behind this? I love making new things like this, especially when they only take a few days to ship something. But, I really like to do this to learn something new. So, here’s a list of things I learned or maybe got better at.

1. Building with Astro.
   Prior to this I haven’t built something with Astro in a year or so. This gave me a great opportunity to dig into their documentation and build something from the ground up.

2. React.
   I have been using other frameworks to build with React. I skipped learning React and learned the frameworks. After going through this project, I understand React so much better. I’m not a professional React developer or anything like that. But, for someone who is a self-taught developer I feel much more comfortable inside of React code.

3. Fun stuff like animations and modals.
   I added modals that pop up for the user on the loading of the screen and when they solve a puzzle. I’ve done this before, but I had never done that with React before so it was fun to put those pieces together. Also, the confetti animation. Who doesn’t love a good confetti moment?

Wrapping It Up

I spent maybe 3 to 4 days on this before I shipped it for my first iteration. Again, this was all just in my free time. Then, I think I spent another week to get it to its final state. If I was working all day on it, this would have been around 1 to 2 days of building - this seems crazy to get something like this done by then.

You can see the site live at https://lets-play-alpha.netlify.app and the repo is available at https://github.com/ryanjames1729/word-of-the-day.

This article was originally posted on https://ryan-james.dev