A Classic Reborn: How I Remastered 40 Puzzle Games with AI

I've been a longtime fan of a puzzle website with 40 incredibly well-made intellectual games. Recently, I decided to give it a modern overhaul. I don't have much front-end development experience, so I used Cursor and Claude to assist me throughout the process.

I want to share why I decided to refactor this classic collection and how I efficiently accomplished this task with the help of AI, especially tools like Claude.

1. My Motivation: A Tribute to the Classics, An Embrace of the Modern

Many years ago, I first encountered Simon Tatham's Portable Puzzle Collection. It's a set of brilliantly conceived and logically rigorous games, all written in C, capable of running on various old devices. I was hooked, completely captivated by their clever design. I even took a look at his C source code, and it's beautifully written. The author also developed PuTTY, which is quite impressive.

However, as technology evolved, this classic collection faced some issues in the modern web environment:

• Outdated Tech Stack: The original implementation relied on Java Applets or required local compilation, making it difficult to run directly in modern browsers.
• Dated UI/UX: The interface felt like it was from the last century, lacking support for touch controls and responsive layouts.
• Unplayable on Mobile Web: It didn't support mobile, which is far from the modern "play in your browser" experience. It was always a problem when I wanted to open a link for a quick game during a break.

My idea was simple: preserve the core, brilliant C logic while giving it a modern "skin." I wanted to bring these games to a new generation of players, allowing them to enjoy the pure pleasure of puzzle-solving on their phones, tablets, and computers anytime, anywhere, with modern features like dark mode and multi-language support.

In the future, I'm also considering adding features like a solution history to make it even better.

2. The Challenge and The Adventure: An AI-Assisted Refactoring Journey

Refactoring over 40 games is a massive undertaking that would have taken months, if not longer, if done manually. Fortunately, I live in an era of explosive AI growth. I decided to use AI as my "programming co-pilot" and explore a new way of development.

My core strategy was:

1. Preserve the C Core: Compile the original C source code into WebAssembly (WASM) using Emscripten, allowing it to run in the browser with near-native performance. This ensures the puzzle generation and validation logic remains 100% faithful to the original.
2. Rewrite the Front-End: Build a brand-new user interface using a modern front-end framework (React/Next.js).
3. Deep AI Integration: Maximize AI efficiency for all the "glue" work and repetitive tasks.

So, how did Claude help me in this process? Throughout the refactoring, Claude played several key roles:

• WASM Glue Code Generator: Writing the JavaScript to interact with the WASM module is tedious, involving memory reads/writes and matching function signatures. I just gave Claude the C function header definitions, and it quickly generated the corresponding JS binding code, saving me tons of time I would have spent on documentation and manual coding.
• React Component Scaffolder: Each game needs a set of UI components (game grid, control buttons, settings panel, etc.). After I designed the basic structure for the first game, Claude could rapidly generate similarly structured React components for subsequent games based on their new logic and parameters. I only needed to make minor tweaks and debug.
• Translator and Content Filler: The project supports both Chinese and English. After I finished all the Chinese descriptions in zh.json, I handed the entire file to Claude, and it produced a high-quality translation for en.json. Similarly, AI helped generate and polish the gameplay instructions and rule descriptions for each game.
• Debugging and Refactoring Consultant: When I encountered a tricky bug or wanted to optimize a piece of code, talking to Claude was like having a code review with a senior colleague. It could quickly understand the context, suggest changes, and sometimes even spot edge cases I had missed.

Thanks to this human-AI collaboration, the entire refactoring cycle was significantly shortened, allowing me to focus more on the overall architecture and core features. Honestly, the vast majority of the code here was generated by AI; I just provided the prompts. I used the Cursor Agent for development, primarily with the Claude 3 Sonnet model. For some particularly tricky bugs, I turned to GPT-4o for analysis. I have to say, GPT-4o is still the most powerful programming model out there; its logical reasoning ability is truly impressive.

3. The Fruits of Labor: The Game Collection Overview

The result of this refactoring is the website you see now. It's not just a game platform, but a product of classic logic combined with modern technology. Below are all the games completed so far. Click the links to try them out:

Logical Deduction

• Flip — Flip groups of squares to light them all up
• Guess — Guess the hidden sequence of colors
• Light Up — Place bulbs to illuminate all squares
• Mines — The classic minesweeper game
• Magnets — Place magnets to satisfy the clues
• Range — Place black squares to limit visibility
• Singles — Black out duplicates to leave singles
• Tents — Place a tent next to each tree
• Undead — Place ghosts, vampires, and zombies

Path Connection

• Bridges — Connect all islands with bridges
• Loopy — Draw a single, non-intersecting loop
• Net — Rotate tiles to connect all endpoints
• Netslide — Slide rows/columns to connect the network
• Pearl — Draw a loop with corners on black pearls
• Signpost — Connect squares following arrow directions
• Slant — Fill the grid with slanting lines to form a maze
• Tracks — Lay a railway track to match the clues

Region Division

• Filling — Number regions to match their area
• Galaxies — Divide the grid into rotationally symmetric regions
• Palisade — Divide the grid into equal-sized regions
• Rect — Divide the grid into rectangles of given sizes
• Map — Color a map with four colors

Number Games

• Keen — A Latin square puzzle with arithmetic cages
• Solo — The classic Sudoku game
• Towers — A Latin square with visibility clues
• Unequal — A Latin square with inequality constraints

Pattern Filling

• Dominosa — Tile a rectangle with a full set of dominoes
• Flood — Flood the whole grid with the same color
• Mosaic — Fill the grid according to the black square counts
• Pattern — Fill in a grid from row and column clues
• Same Game — Clear the grid by removing large blocks
• Unruly — Fill a black-and-white grid with no three in a row

Movement Strategy

• Cube — Roll a cube to collect all the blue squares
• Fifteen — The classic 15-puzzle
• Inertia — Slide a ball to collect all the gems
• Pegs — Jump pegs over each other to remove them
• Sixteen — A circular sliding block puzzle
• Twiddle — Rotate 2x2 blocks of squares to sort the grid
• Untangle — Move points so that no lines cross

Special Puzzles

• Black Box — Deduce the positions of balls by firing laser beams

I bet many people will be hooked by these seemingly simple games, hahaha. Some of the puzzles are quite difficult... Honestly, I find myself thinking for a long time on each one.