7 Coder Words: I built a PWA Word Puzzle for Coders and Nerds

7 CODER W🙂RDS is a word puzzle game for people interested in computer science in general. You are...

7 CODER W🙂RDS is a word puzzle game for people interested in computer science in general. You are given 7 clues and you need to guess the word behind each clue by combining shuffled word tiles.

Inspiration

To this day I have the game 7 Little Words on my phone, the old version. I play it all the time and I thoroughly enjoy it. I thought it would be cool to build a remake which only encompasses words from the computer science and programming realms.

Target Platform

It's a web game and I find web games awesome. The game is best played on mobile devices but works just as well on a desktop browser. My goal was to no App store installation, no sign-up, no ceremony of any sort. Just open the url and play. I believe more apps and games should be like this.

Because it's a Progressive Web App (PWA), the game can be played offline. Everything loads when the user opens the web page and the service worker stores all resources required, as well as checks for updates on the server side. Updates work seamlessly both on iOS and Android. You can also add it to your home screen for a native app-like experience.

The Graphics

It's Canvas2D: No DOM, no CSS. Well, there's a little bit of that of course but for the most part it's strokes and lines. Screen resolution is also handled dynamically, which means coordinates are expressed as a fraction of the canvas size. The game is resolution-independent, so any display size should work.

The Agent and Me

I wrapped up a prototype with a test json model that stored the clues, answers and answer tiles. After finishing the proof of concept I decided to use Claude Code to finish the game. Despite a lot of "love it or hate it" opinions about AI lately, I think it turned out ok. I believe I did learn something alongside using it, especially in how Vite works, since I don't have a strong js tooling background.

In any case, using Claude Code wasn't a flawless process. While there weren't really big programming issues, many times it over-engineered things or placed them at the wrong location, field and variable naming was also off. I went back and forth editing stuff manually after it completed the tasks it was given. Now this begs the question - why would one still use agentic AI then? To me it was fun to use Claude Code as sort of a co-worker: I set the direction but we both edited the code it produced. It also handled tedious work faster than I would have, like calculating exact pixel positions for click handling, for instance.

The Puzzles

Are the game puzzles AI-generated? The answer is "not really". I wrote a couple of Claude skills to help me with extracting data and structuring it in order to produce a puzzle model file. However, it was very far from perfect. The resulting puzzles often contained words that were too long and either too simple or the clues were too inaccurate. Not to mention my Claude Pro-plan tokens were getting consumed very quickly. So I ended up having the agent write several Python scripts that helped generate json models, keep a puzzle index and adhere to the json model. This significantly helped lower the token usage. In the end I wrote a skill that would take text and words that I manually selected and generate a new puzzle from that based on a defined ruleset and the tools created earlier. When I had 50 puzzles, I went through each single puzzle, reviewed and edited it. I did use Claude to help with word ideas, but I actually contributed pretty much all of the words myself from my general compsci knowledge and experience.

Bundling

Because I was aiming for a static, load-one-time game, I decided to put everything in one big js file and call it a day. That includes the puzzles as well. At this point the whole game is a 45KB js file. To somewhat protect the puzzles from AI scraping (ironic, isn't it?), I used ROT cipher encoding. It'll probably do nothing, but it was fun to see it spew gibberish in the js file.

The few sounds used in the game are also contained in a single MPEG-4 sprite file. This was a bit tough to accomplish even for the LLM. The sound positions within the sprite just weren't right. In the end I first converted all sounds to WAVE format files and then used FFmpeg to concat them into an MPEG-4 sprite file.

Testing

I had the agent write tests that check if each puzzle has the correct number of tiles, that the clues are of the correct size and are indexed properly. This still wasn't enough, so I thought maybe the best thing to do was to have a test that plays the game throughout. To accomplish this I decided to go with Playwright. Again it didn't quite work with the first Claude Code implementation. Apparently it didn't understand or I didn't express myself clearly, that it needed to actually click through the buttons and play the whole thing through. After several corrections it finally worked. This test helped me find an issue with longer clues and answers where the text of the clue and the answer overlapped on screen.

Cheating

Of course people can easily cheat playing this game: Looking up the clues on the Internet or with an LLM is a no-brainer. However, that's not the point of the game. It's a test against yourself, not against others. A clue you can't crack can often be cracked through the tiles alone.

Final Words

Building this little PWA game was a lot of fun. I'm a big proponent of web apps and I believe most mobile apps can actually be web apps instead. It's a bit sad that Apple chose not to fully support PWAs and I hope they soon decide otherwise. If you'd like to try the game, go to 7coderwords.kenamick.com and let me know what you think at @7coderwords@mastodon.social.

{% youtube 0RsCyoJhYCw %}

Thanks for reading. ❤️