Building a Word Game: Let's Play Alpha
Published: 2024-04-04 15:04:44

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](https://hryanjones.com/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](https://astro.build), 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](https://tailwindcss.com) 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](https://lets-play-alpha.netlify.app) and the repo is available at [https://github.com/ryanjames1729/word-of-the-day](https://github.com/ryanjames1729/word-of-the-day). 

This article was originally posted on [https://ryan-james.dev](https://ryan-james.dev)