7 Coder Words: Lessons from Building 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 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. To me it's totally sensible and convenient to open a website and immediately start playing - no app store installation, no sign-up, no ceremony of any sort. I believe more games should be like this.

Because I wanted people to be able to play the game even offline, I went on to implement a Progressive Web App (PWA). The whole game 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 devices. You can also add it to your home screen for a native app-like experience. There aren't any library dependencies of any sort used within the game.

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. This way I was able to make 7 CODER WORDS as similar to 7 Little Words as possible. 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 wasn't a flawless process and I expected that. 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. I liked that. 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 "sort of - but not entirely". 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 Claude write several Python scripts that helped generate json models, keep an index and prepare the puzzle structure. 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 most of the words myself from my general compsci knowledge I gathered over the years.

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 Claude 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 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.

Conclusion

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.

Tapping on the puzzle number shows its unique 4-character code. One can navigate to any puzzle by entering this code in the Go to puzzle settings option. There is also another way to do that hidden in the game title, but more on that on the game's Mastodon page later on.

Thanks for reading. ❤️