Guildle - A wordle clone to teach React⌗

TL;DR: Making games with HTML, CSS, and JavaScript is fun, here’s one I made!

I’m proud to announce that Guildle has reached a done state. Guildle is a Wordle clone written in React.js and Typescript to help teach others about how React works. I started this project in 2022 to coincide with the coding class I detailed in last week’s post. It took me until this year to finally finish it because, I was otherwise occupied with my other responsibilities. I finally managed to carve out some time, however, and I’m proud of the result. Here are some highlights from my developer experience.

Game art and animation is hard, but cloning a look and CSS make it easy⌗

I always thought game dev was prohibitively difficult because of the creative capacity necessary to generate art that you wanted to put in your game. That’s why it suddenly seemed doable when I decided to develop a clone of another game. I didn’t have to be good at making original art when I could just imitate the look and feel of something that already exists. This removed a lot of the creative hang-ups I typically have when I sit down and say, “I want to make a game”. The other part that’s typically intimidated me away from making a game is the difficulty inherent in graphical programming. Two dimensions is hard enough to keep straight, but when you add in a third dimension it gets real tricky. Luckily, I know CSS and was able to leverage a lot of the improvents to the language in order to build good looking and feeling animations. Finally, I did manage to put in some creative, graphics work that I felt was good enough to include in the final product. To build the favicon, I built Aseprite from source (the topic of a blog post for another day, for sure) and used it to make a custom favicon instead Vite’s default.

I ❤️ Vite so much more than Next.js⌗

I decided to eject Guildle from create-react-app (still the documentation’s recommendation in 2022) when I came back to it this year, but I had a hard time finding a right way to do it. At first, I wanted to follow the recommendation of the documentation, but then I quickly found that Next.js and Remix were not what I was after. First of all, Next.js seems to purposely confuse or omit to tell you what code will run on the server versus the client. That sort of obfuscation makes sense when you realize next is built by Vercel which sells a cloud hosting service for Next.js. I was definitely discouraged to find out that self-hosting was also not a first class citizen in Next.js since it was designed for the cloud from the beginning. Second, Next also has a bad habit of requiring JavaScript directives to do anything outside of the Full stack next way of doing things. This is a lot of magical, behind the scenes, and under-the-covers functionality to ultimately produce a handful of HTML, CSS, and JavaScript files. Finally, I knew I wanted to deploy the finished product to GitHub pages as a completely static site, and the full-stack-ness of both Next.js and Remix quickly turned me off. I knew I just need a JSX/TSX compiler and bundler so I looked into those and found Vite, which is an awesome tool and should at least receive a mention in the official documentation. Not all of us want to build a hyper-scalable full-stack React application, and having an option to build a SPA like in 2016 would be super nice to have. I knew I didn’t want to completely clone Wordle’s design which likely had a ton of backend infrastructure to support it.

Game logic, and when to differ from the original design⌗

Wordle is built by a huge team at the New York Times, and it had a good number of features that I had no intention of ever implementing. For example, I’m not selling newspaper subscriptions and the NYT is. I also had no intention of implementing a backend, and wanted the final product to exists solely on GitHub. So, there were quite a few opportunities to innovate, and I really like a few of the ways I managed to recreate the feel of Wordle without many of the resources. For example, I had a list of five-letter words I found on GitHub, but had no way to randomly select a word of the day. I decided to take the date and make it a hash of sorts to numerically pick the same index in the words array based on the day. I do need to go back and make sure I’m not going to pick all the same words next year, and I’m not sure if the date implementation is exactly the same across all browsers. My brother-in-law said he was unable to get a word for one of the days on Safari, and I have not tested extensively on Safari. Still, I’m proud of the solution that I came up with and I have already thought of ways to scale it across years if necessary.

Conclusion⌗

Guildle is 1.0.0 now, but I definitely would like to go back and add features to it in the future. I think stats could be a fun addition, and there’s some toggles and a whole other mode that are not implemented in Guidle. I know there’s a lot I need to learn about React and that the project stands to improve. For example, there’s a ton of opportunity for compenent-izing a lot of the static HTML elements I’m showing, hiding, and animating with CSS, currently. I also probably need to cleanup timeouts as they are likely to cause memory leaks or zombie component errors, but it’s really just a single page application so I don’t think it matters much, ATM. All in all, I had a great experience thanks to Vite and would definitely consider React for new projects going forward.