JMI 2: Mathlee - A childhood math game brought to an internet near you
The journey of bringing a game I played with my dad to practice math to life for all of us to try!
TL;DR: Try this game I made. It taught me math as a kid. Thanks Dad!
Here’s Mathlee!
It's overdue, but here we are with another “Just Make It” post! Let me provide a little context around why this one has taken so much longer than I planned. Over the past month or two, my writing has slowed, mostly because I haven't prioritized it as much I want to - I want to pick it back up. In the JMI series in particular, I've found myself going 1 of 2 ways with most ideas:
I start it and lose interest or realize it's a larger project and decide to scrap it
I start it and find it worthwhile and decide to shelve it as a longer term project
In short, the combination of perfectionism, ambition, and evolving interests are still very much alive. While I may not be sticking to a weekly cadence, I'm still going to aim for at least monthly on these.
And with that, let's get into the project!
The Idea
For this edition, I decided to build a web app based on a game I used to play with my dad all the time as a kid. We called it The License Plate Game™ because it involves simple math with the numbers on a license plate. The rules are simple:
Look at a nearby license plate and memorize the numbers on it
Using those numbers and simple arithmetic, try to count (in sequence) as high as you can
Once you reach the limit with that license plate, pick a new one and start over
My dad introduced me to this game when I was probably 6 or 7, and ever since I have played this in my head at least once every time I'm in a car for more than about 10 minutes. It's so beautifully simple, but it's a blast once you get into it.
I decided to see if I could make a Wordle-like version of this game that we could do once a day - so that's what I did!
Making It Happen
Develop the idea
The journey began after my dad sent me a beta NYTimes game (Digits) - “does this remind you of anything?” he asked. This is super similar to the license plate game (but with a Countdown twist). After a few days of playing it, I just wasn’t quite scratching the itch - so I decided to see if I can get a game going that's closer to what I would want.
I sat on the idea for a couple of days, not really doing anything with it until…
Prototype the basic app
I woke up early on Sunday a few weeks ago. Restless. Normally, I'd watch some mindless videos on YouTube, reading part of a book, or put on some series while I have a coffee and hang out. Over the past few weeks I had started and stopped a few programming ideas and in doing so tested out the flow of prototyping with ChatGPT as a coding co-pilot. In each previous attempt (literally 3 different ideas), ChatGPT had fallen short - probably because I was asking it to do too much with my lazy requirement definitions. I'm prototyping here, not trying to debug some well developed code. This time, though, I had a clear idea of what the requirements were and so I prompted ChatGPT to throw together a React app that would test the idea.
After a few tweaks, it worked! In about an hour I went from a groggy zombie having my first sip of coffee thinking to myself “it'd be cool to get that working” to literally playing the most basic version of the game in my web browser!There was much more to do - but what a great way to get that initial motivation out of the gate to see that the gameplay would be pretty much what I had in mind.
Setup the full stack
Here's a thing I learned: ChatGPT is not great at writing code that touches multiple systems. Part of the challenge with software architecture, as any engineer will tell you, is iterating on and finalizing a data structure. When I was prototyping the early stages, the data structure was still actively forming in my mind. ChatGPT could help me write a specific google cloud function with reasonable constraints, but I hadn't yet really mapped out the data structure I needed. As I tweaked the data design, I also had to adapt a lot of the existing code to make it all work.
I did use ChatGPT to help me get the base setup for a firebase project to handle some backend functions (generating numbers daily, updating scores) but I did go through and rewrite almost all of it. Most of the full stack work was honestly just a lot faster to do on my own without the help of ChatGPT making small errors, losing some context, or creating a false sense of security in the generated content.
So I landed on a simple firebase app at the core: hosting, anonymous authentication, cloud functions, and a firestore database. ChatGPT helped me get to the prototype and some specific function structure - but (unsurprisingly) I spent even more time on design, architecture, and debugging. Honestly, it was kind of nice to feel like for some parts of the work I could offload a few components to an AI assistant in some small way.
Scoring
This was a fun one. How do you actually score something that's setup in a way where there is no “known right answer”? I came up with the idea of trying to reach the highest number out of everyone globally. This way we effectively crowdsource the daily limit in each mode. Works well enough, I thought, and decided to go for it. (Some updates came later).
So here's the idea: we keep track of the maximum numbers reached in each mode across all users every day. Then we show how you're doing vs the max and track your current streak + how many times you've hit the max scores. To avoid the complications of all users writing an update to the same firebase document (I'm not trying to tackle that stuff in a fun side project) and to keep the monthly function call limits on firebase, I decided to have a scheduled worker go every minute and update the global max for each mode.
I put that in - and I added in a super simple stats view to show some of this. Before long I found myself spending some more time on that stats view and adding a graph to it just for fun.
Naming
It's amazing how often the simple act of coming up with a name gets in the way of putting something out there. But what's in a name? 🌹 For real though - I spent way too long thinking about this on other projects, so for this one I simplified it.
I went to ChatGPT, in the same chat that I explained all the rules and got the prototype code from… ”What's a good name for this app? Think along the lines of Wordle, sudoku, and other fun web games that people play” I wrote - admittedly not the best prompt for someone as well-versed in AI as me…
The results came back… and I was disappointed. Everyone out there being like “ChatGPT is SoOoO gOoD at helping you come up with new creative ideas!” - just check out this list:
…ok. After reading it again, I may have exaggerated - but that's how I felt at the time. Now, I'm kind of regretting not calling it ArithMatrix - that's pretty cool. Suffice it to say, I finally just landed on something that is objectively less cool than ArithMatrix, but still captures the idea. I followed the Wordle naming convention, which if you didn't know is a pun on the creator's name Josh Wardle.
Thus was born: Mathlee - sounds like Mathlete (nice) but is really just a simplification of “this is a math game made by Evan Lee.” Works for me!Share it. Then fix it.
Finally, I felt ready to get some feedback. Or at least I just couldn’t justify not sharing it with someone anymore. So, I sent it to my dad to see what he thought.
He was so supportive! Excited by the idea, enjoyed playing it, and had some great feedback. Some were great suggestions - 6 numbers is too many, it's too easy and you can count forever; how do you know how you faired against friends; etc. Some of it made a lot of sense, but not aligned with what I envisioned - for example: you should make multiple daily number combinations so people play more.
I definitely had this unreasonable expectation that he'd open it and all of a sudden would be playing this every day. Like anyone would just be like “OMG FINALLY! I’ve been waiting for this exact thing forever! You’ve completely changed my morning routine!” Not the case. I think even now he's only played it once… but those suggestions (and the act of just sharing it) made a huge difference.
Most of the changes I started to make - others I chose to leave out (there's enough out there competing for our attention all the time, I want this to be a quick fun win in your day, not something that's needy for your undivided attention). With that in mind, I realized fewer numbers is a good thing - if you can only count to 7 some days, so be it! I'd rather it be fast and easy rather than make you feel like you need to keep coming back to check if someone beat your score.
Side note: if you haven’t seen Bo Burnham’s “Welcome to the Internet” video it captures the whole attention economy concept in a great way. Yeah, I’m trying not to be in that game.Make it look cool (enough)
First of all - ChatGPT really screwed me on CSS. I had a few little bugs that I spent forever trying to fix (some say he’s still sitting at his computer tweaking hover states to this day). Frustrating as hell. If you or someone you love is suffering from a similar state of frustration, please reach out to W3 Schools for guidance and support.
For the UI and logo work, I turned to some online tools for help. I tried a bunch of color palette generators before just using the simple Material Palettes picker to give me some ideas off of a few base colors. I found a basic logo design from a generator from Adobe Express. It gave me a concept, but I didn’t like the way it actually looked in the images (plus they were low res and hard to make variations of). So I recreated and tweaked it in photoshop. Better? Meh - but definitely easier to work with.
The dreaded “monetization” question
I hate ads. The internet is too dependent on it and it's so frustrating and intrusive. I love that a lot of new sites and apps out there are trying to avoid that whole reading experience of just ads, ads, everywhere…Knowing full well that it will reduce the potential money to be made from this app that no one may ever use, I decided I'd not put ads on the page - but instead just put a somewhat hard to find “buy me a coffee” link for people who may want to donate at some point. (Hint: it’s in the “more info” page).
How do you know when you’re done?
I played it one day after feeling like it was “done” and found it incredibly frustrating to not know if an answer exists for a target. I'd go reasonably far and then hit a wall - come back an hour or two later and open it again to see if looking with fresh eyes would unblock something (sometimes it did), but there was never that feeling of satisfaction for having completed the puzzle.
So, lying in bed that night, I thought there must be a way to determine if its possible to reach a target number with a set of operations from an initial set of numbers. I googled and found papers and fell asleep sweetly knowing a solution to reach that feeling of success exists. When I awoke I decided to screw what I'd googled and just ask ChatGPT to write me a function to determine if an answer was viable - it (like me 🙂) landed on recursion and gave me a reasonable (looking) solution.
I dropped it in and added a confetti explosion to the UI to really hammer home the “YOU DID IT” feeling. And it worked!
Well… kind of… As I tested it out I kept getting weird examples of times when it thought it was done but an obvious answer jumped out to me. After a few days of procrastination, I picked it back up and did some debugging on my own. ChatGPT had missed a few obvious mistakes that I tweaked (e.g. it was only checking for hard mode) - and then a few less obvious mistakes. It didn't, for example, consider that division and subtraction give different answers depending on the order of numbers as opposed to addition and multiplication that don't (commutative property for those of us who still remember grammar school math terms).
After a few iterations of tweaks, it was finally working and I felt like I could publish.
Publish
This is where we are now. You're caught up. This is me publishing this little project. Who knows if anyone will every play it? Who knows if I'll keep working on it? I, for one, am still actively playing pretty much every day - and I hope a few people out there find some joy in it. If you do end up enjoying it, please let me know! And if you really enjoy it (and support the no ads idea) consider making a little donation.
Big Lessons
Start small and build momentum. Having that initial prototype really quickly changed how I felt about the entire project. Having a well defined idea of how I could test the gameplay and then using some cheats (like ChatGPT) to get that first version really set me in motion. Yeah I had to “draw the rest of the owl” at many steps, but for some reason it just didn't feel as daunting because the scope was small and defined, and I had some faith in the gameplay.
AI tools remain helpful in discrete problems. You still are the brains behind everything - at best AI tools can help with fairly wrote tasks, but especially with LLMs it's easy to think they're doing more thinking than they are. You're still the one thinking, testing, defining requirements, making sure it's all working together. Instead of asking it do do a bunch of things, be clear and specific with small requests. I write about this a lot, but sometimes we all need a reminder.
Feedback is key - even though it’s intimidating. Just putting it out there to my dad was probably the most important step of the process. It was so uncomfortable to share it at first, and I honestly sat on it for a bit too long. It was working for a few days before I just sent it over - this is so common for me. “It's not ready yet.” “Just this one more thing.” Fuck all that. Once I saw my dad giving some excited feedback, I was like “alright this could be cool.” It's so much easier to learn and adjust early than to hold on and make big changes to something that's too far developed.
Just get something out there. Along the same lines, there are always a million reasons to let a project sit in purgatory. Naming is one I got ahead of this time, but I still hit some roadblocks. I probably let this project go on for a week or so too long and just kept finding things to tweak. It's still not perfect, I'm still not sure, I honestly doubt anyone will actually play it more than once - but whatever! I had fun making it, and I'm having fun playing it!