I Built an On-Device "Solstice Engine" Using TensorFlow.js to Break Ciphers

This is a submission for the June Solstice Game Jam Decoding with the Shifting Light ☀️🌙

What I Built

I wanted to build something that forces the player to look around their room, grab a flashlight, or turn on the light, and interact with the physical world!

Solstice Cipher is an atmospheric, browser-based puzzle game inspired by Alan Turing’s legendary code-breaking machines and the beautiful transitions of the June Solstice. The game challenges players to step into the shoes of a wartime cryptanalyst to intercept and decode three hidden binary messages celebrating June milestones.

Just like the solstice marks a shifting point between light and darkness, this machine’s cryptographic system alters its logic based on the actual, real-world light in your room. To fully break a cipher, you have to decipher cryptic riddles and physically shift your environment between Day Mode (shining a light at your webcam) and Night Mode (covering the lens) to calibrate both mechanical rotors!

Video Demo

Take a look at the "Solstice Engine" in action!

Code

The entire project is completely open-source, free, and lightweight (built using HTML, CSS, and client-side JavaScript). You can explore the repository or host your own version below:

• Repository: HopeBestWorld / solstice
• Live Game Link: Play Solstice Cipher Here!

How I Built It

Building this was an absolute joy and a fun logic puzzle in its own right! I wanted to ensure the game was 100% free to run, private for the player, and required zero backend servers or complicated API keys.

The Hardware Layer

Using basic web browser streams (navigator.mediaDevices.getUserMedia), the app securely requests access to a localized 320x240 video matrix.

The State Machine Bug & The Quantum Fix

Originally, I hit a fascinating architectural roadblock where the code was letting players slide by if they only solved one lighting phase. To make the game truly engaging, I restructured app.js to feature persistent memory flags (dayCalibrated and nightCalibrated). Now, the engine securely holds its state when you successfully align a rotor, politely guiding you to switch from flashlight to shadow to finish the job.

The Atmosphere

I used monospace fonts and an ultra-clean, retro-futuristic dark slate color palette (style.css) to create that clandestine, high-stakes "secret bunker" aesthetic.

Prize Category

👑 Best Ode to Alan Turing

This game is an ode to the father of modern computing. Instead of a standard clicker game, the mechanics intentionally simulate the interactive physical dial-tuning of the Enigma-decrypting Bombe machines. The puzzles themselves lean heavily on binary data arrays and computational logic definitions, and the initial level unlocks a direct tribute to Turing's profound impact as both a computer science pioneer and a June Pride icon.

🧠 Best Google AI Usage

To drive the core mechanic without adding any friction or registration steps for players, I utilized Google TensorFlow.js loaded straight from a CDN. Inside app.js, every frame from the user's webcam is treated as an active mathematical playground. The application converts frame pixels directly into data streams on the browser GPU using tf.browser.fromPixels. By using localized matrix mathematics with tf.mean(), it reads the average brightness value instantly. This turns a simple consumer webcam into a zero-latency, private, on-device environmental sensor! It shows off just how incredibly accessible, lightweight, and versatile Google's open-source AI ecosystem can be.

Thank you so much for hosting this jam! Getting to use history, AI, and creative web design to celebrate a beautiful month of milestones was an incredibly rewarding experience. Good luck to everyone participating!