WordLies

Summary

Browser game based on Wordle built in React. You can find a live version at wordlies.com.

I made this to teach myself React and CSS. It uses npm to serve the site, but the site itself is a fully front end project. The site uses cookies to save a user’s progress and has several different game modes. At wordlies.com, the ? button in the top right gives a description of how the game works; if you have never played Wordle, it might be worth trying that first.

Lessons

While working on this project, I had plenty of practice thinking about the data down, action up model in React, where state should reside, and which component should be responsible for handling each user action. I learned a lot of new CSS, including using media queries for dark mode, flexbox for layout, and dynamic viewport units for the mobile web. Understanding the latter was particularly important for a site designed as a mobile phone game. I also learned how to use cookies to store and retrieve user data with the react-cookies package.

In a day or so, I had a working version of the WordLies, which randomly generated a new game on each page load, using calls to JavaScripts built in Math.random() static method to generate pseudorandom numbers. One of the most fascinating challenges was adapting the code to give everyone the same game on the same day. I used David Bau’s seeded pseudorandom number generator seedrandom.js installed via npm and seeded it using a string based on the user agent’s local date but with a string format that is consistent worldwide. From there, it was trivial to create alternative game modes to accommodate daily challenges with fewer guesses allowed or the original unlimited game mode.

Beyond React and CSS, I also relearned how to use pm2 to daemonize a npm project so that it can be left to run on a server. Along with several of my other projects (including this site), wordlies.com is served from a vm on my own home server behind an apache2 reverse proxy that resides on another vm. It had been a while since I configured DNS A records, a reverse proxy, or a pm2 daemon, so this was a good refresher.

Reflection

I love how React takes care of building components up from simpler components, while allowing me to conceptually build down from the top of the DOM tree. With a little practice, it is entirely natural to pass handler methods down so that events may be passed up through the component tree. The model also fits very nicely with the object oriented programming notions of each component object owning appropriate methods while allowing child components to trigger those methods. Gorgeous. I’m converted to React!