Learn Code by Breaking Ciphers in This Solstice-Themed Puzzle Game

In a browser-based puzzle game blending code and cryptography, players step into the shoes of cryptanalysts from Bletchley Park in 1941. The twist? You don’t guess or click—you write real JavaScript to decrypt intercepted transmissions, one cipher at a time, as the solstice countdown advances toward June 21. The game, Solstice Cipher, turns algorithmic thinking into gameplay by embedding a fully functional Monaco Editor—the same engine behind VS Code—directly into the browser interface.

From Darkness to Light: The Core Gameplay Loop

Players begin each level by reading an intercepted ciphertext and implementing a decrypt(text) function in the live editor. Once the code is written, pressing Run decrypt() executes it in-browser and compares the output to the expected plaintext. When the cipher is solved correctly, a daylight bar inches forward, symbolizing progress toward the longest day of the year. The game features five distinct levels, each tied to a phase of the solstice day, with puzzles that scale in complexity from simple Caesar shifts to Vigenère ciphers with keyword-based encryption.

The five levels are structured as follows:

• Pre-dawn: A Caesar shift, decrypting “HELLO WORLD”
• Sunrise: An Atbash mirror cipher, decrypting “THE COOL”
• Morning: A ROT13 substitution, decrypting “PRIDE HUMAN”
• Midday: A Vigenère cipher using the keyword PRIDE, decrypting “BE YOU”
• Longest Day: A Caesar shift combined with word reversal, decrypting “THE LIGHT SHINES”

As players unlock each level, the visual representation of the sky brightens, reinforcing the narrative arc that spans from the darkest hours toward the illumination of the solstice. The game’s setting at Bletchley Park and its thematic focus on Alan Turing and codebreaking provide historical authenticity and depth to the puzzles.

Hands-On Debugging with AI-Powered Hints

One of the standout features is the optional integration of Google’s Gemini 3.5 Flash model, which provides real-time, context-aware hints. When enabled via an API key, the game can stream debugging suggestions that reference specific lines of code, helping players identify errors without revealing the solution outright. The AI analyzes the player’s code locally first, detecting common issues such as untouched starter templates or logical errors in encryption logic. Based on this analysis, it determines whether to guide the player toward debugging, explain the error, or assist with understanding the cipher mechanics.

The Suggest fix feature takes this a step further by generating code patches. When triggered, the AI returns a fenced code block with suggested changes. These patches are automatically validated by running them against the encrypted input, and the first working correction is applied directly within the Monaco editor. If the AI fails to produce a valid patch, the game falls back to a local diff engine that compares the player’s code line-by-line with the solution, ensuring the game remains fully playable even without an internet connection.

Behind the Scenes: Building a Code Editor as Gameplay

The game’s core mechanic relies on turning a professional-grade code editor into the primary user interface. By leveraging the @monaco-editor/react package, developers recreated a VS Code-like experience in the browser, complete with syntax highlighting, line numbers, and theming. To ensure smooth performance, the editor uses an uncontrolled pattern with defaultValue and refs, allowing keystrokes to register without triggering unnecessary React re-renders.

The visual design adopts an industrial brutalist CRT aesthetic, featuring phosphor green strings, hazard red keywords, and a dark background reminiscent of vintage computer terminals. When the AI identifies an issue, the problematic lines are highlighted in red within a diff view, offering a clear visual cue for debugging. Players can accept or dismiss suggestions, with changes applied seamlessly through Monaco’s executeEdits API.

Safe and Secure Code Execution

Security is paramount when executing user-written code in the browser. The game runs player code safely by wrapping the decrypt(text) function in a controlled new Function() constructor. The implementation enforces strict constraints: only the decrypt function is exposed, and the code must return a string. The encrypted input is normalized (converted to uppercase and trimmed) before comparison, ensuring consistent validation. No network requests are made during execution, and the entire game operates as a static site, making it accessible and lightweight.

// Simplified execution logic from src/utils/runUserCode.ts
const fn = new Function(`
  ${code}
  if (typeof decrypt !== 'function') {
    throw new Error('Define a decrypt(text) function');
  }
  return decrypt(${JSON.stringify(encrypted)});
`);

Open Source and Ready to Play

Solstice Cipher is open source and available on GitHub, allowing developers to explore the codebase, contribute improvements, or even fork the project for their own variations. The game was built using modern web technologies including React 19, TypeScript, and Vite, enabling fast development cycles and easy deployment. Optional AI features depend on a Google AI Studio API key, but the game remains fully functional without it, thanks to robust local analysis and fallback mechanisms.

To try the game locally, clone the repository and run:

cd solstice-cipher
npm install
npm run dev

Then open ` in your browser. Whether you're a coding enthusiast, a cryptography buff, or simply curious about combining algorithmic thinking with interactive storytelling, Solstice Cipher offers a fresh and engaging way to sharpen your JavaScript skills while celebrating the spirit of innovation from Bletchley Park.

As the solstice approaches, the game stands as a creative bridge between education and entertainment, proving that the best way to learn code might just be by breaking—and fixing—real ciphers.