Teachers have this thing where they think it would be a good idea to use PowerPoint to make classroom games. I’ve seen a variety of these for sale from other teachers online for a small fee. Take for example a word matching game. The concept is simple—match the cards together. The interface is simple, too: just a bunch of cards on the screen, in a state of chaos, waiting for you to click, tap, or drag them back to order. In reality, trying to do that in a PowerPoint means a complex web of slide dependencies and animations. I cringe thinking of all the time I’d spend trying to get my own content into such a PowerPoint. I’d much rather spend that time beating my head against the wall trying to debug my poorly written browser-based version!

The motivation and first attempts

A few days ago, a colleague showed me one she’d purchased for her English class. I commented that with a few minutes of coding time (ahem, that’s time asking Claude), I could make a simple browser-based version that would allow her to upload a CSV word list and get right to using it in class—without all the tooth-pulling agony of PowerPoint. Here’s what it looks like.

I spent five minutes with Claude putting the first version of the game together. It worked. It didn’t have a lot of features, but it could match cards together and use custom word lists. I could have stopped there. Maybe I should have. But instead, I spent another six hours on the weekend to fix bugs, add features, and learn how to refactor code when it started to get too big to handle easily in one file. I’m still refactoring, but at least it works well enough for my colleague to use in class.

Trying functional programming

I’m really not that good at programming. I barely got this website put together. Such a simple game as this matching one took hours, and the best I can say is it’s only usable now. It has lots of bugs still. As the program got bigger, I quickly discovered that the mess of global variables I had was becoming difficult to manage. To solve this, I learned that I can put all those global variables into an object and then pass the object around as a sort of single source of truth for what goes on in the game. They call this state, it’s one of the ideas used in functional programming—each function makes one change to the state of the game, then returns a new state. This way, there’s a sort of paper trail for debugging if you need it, because you can just use console.log between all your function calls and see if the state changes in the way you’re expecting.

My new functional programming version worked, but eventually I ended up with so many functions that I ran into the same problem I had with global variables—they became hard to track and manage. I needed to give it more room to grow if I wanted to continue development.

Moving beyond a single file

I wanted to make this game usable for anybody who had the file, so they could just click on the file and it would open up in the browser, ready to play. But having multiple files meant I would have to use functions from one file in the other, and this is when things start breaking down if you’re opening the file that way. For security reasons, your browser won’t allow import or require in your scripts if the URL uses the file:// protocol. It has something to do with the cross-origin resource sharing (CORS) policy of most browsers. I needed to avoid that, but one file was getting too much to handle. If only there was a tool that would take my several files and bundle them all together into one script that I could include in my page… I believe those things are called bundlers.

There are several of these tools available. The most widely used one is called Webpack. It’s very flexible, and for the same reason, it’s also really complex. It sounded like a headache in the waiting, so I searched for alternatives. One that claimed to be zero-config was called Parcel, and I was looking for something easy to set up. Parcel delivered. I set up a PNPM project and followed Parcel’s instructions for getting started. The only configuration I had to do was to say where my main file was. I ran into a problem with Parcel rewriting the paths to my scripts in the output file because it assumed I would be running from a server, but parcel build --public-url=./ solved that problem.

Continuing development

I’m still working on this game. I’m in the process of refactoring the code by separating core game logic from UI updates. But it’s been good to learn a little bit about functional programming and to make something that was actually useful for someone. That feels good.

However, I still have some unanswered questions. One of them came up as I was adding a countdown feature to the game. To make a timer in JavaScript, you create an interval, which is a function that the browser calls at regular intervals of a length of your choosing. You can call it like this: setInterval(myTimerFunction, 1000). But this setup means that you’re no longer giving the function the game state and returning the new, modified state—it’s being modified directly in the interval loop. This goes against the organizing principle that the rest of the game is written in, but I don’t know how to reconcile these differences. Maybe the solution is some sort of event dispatcher. Or, maybe I can somehow attach an event listener to the value of a variable and update the UI when it changes, thereby at least separating the UI changes from the state changes. But at this point I’ve reached the limit of my coding ability. I don’t know what the solution is. And for the sake of what is really a trivial game, after all, I’m not sure it’s worth going to the trouble of solving this problem if it means adding lots of boilerplate code to solve it.

Meanwhile, I’ll just continue trying to make the code feel more manageable while trying to squash the rest of the bugs still hanging around. I'll be excited if I can find a “clean” solution to the interval problem, but I’ll save it for later. Instead, my time might be better served cleaning up the code I’ve got and making another game! I think that’s the direction I’ll go.