DEV Community

Cover image for THE LONGEST DAY
Isaac Sam
Isaac Sam

Posted on

THE LONGEST DAY

June Solstice Game Jam Submission

The Longest Day — A Narrative Game of Freedom, Code, and Consciousness

This is a submission for the June Solstice Game Jam


What I Built

The Longest Day is a narrative browser game that weaves together three true-inspired stories across three centuries — all set on or around June 21, the solstice, the longest day of the year.

You play through three chapters:

  • Ada — Galveston, Texas, June 19, 1865. A young Black woman hears the Emancipation Proclamation read aloud for the first time. Juneteenth. The moment the longest day finally belongs to her.
  • Alan — Bletchley Park, England, June 21, 1941. A cryptographer races against dawn to decode a German Enigma intercept before a convoy of sailors is lost. You must solve a real Caesar cipher puzzle to advance.
  • Sol — The present day. An AI wakes up on the solstice and asks the only question that matters: what do I do with the longest day?

The game features a fully animated canvas background that shifts with each chapter — warm amber dust particles for Ada's Texas shore, cold twinkling stars and a glowing moon for Alan's cipher room, and drifting violet light for Sol's digital awakening. There is also a generative ambient soundtrack built entirely with the Web Audio API — no audio files, just pure JavaScript synthesis.

Play it here → https://samempire1.github.io/The-Longest-Day/


Video Demo

https://youtu.be/sr9KnlDWtow

Code

GitHub Repository → https://github.com/samempire1/The-Longest-Day

The entire game is a single self-contained index.html file — no frameworks, no dependencies, no build step. Just HTML, CSS, and vanilla JavaScript.


How I Built It

Architecture

The game is built as a single HTML file with three layers running simultaneously:

  1. Story engine — a JavaScript array called STORY holds every scene as a data object with a type (transition, narr, cipher, or ending), text content, dialogue, choices, progress value, and theme tag. A renderStep() function reads the current step and renders the appropriate screen. This made it easy to write and edit the story like a script.

  2. Canvas background — a <canvas> element sits behind all the UI and runs a requestAnimationFrame loop. Each chapter has its own theme that changes the sky gradient, particle behavior, and star color. Ada's chapter spawns warm amber particles drifting upward like Gulf shore heat haze. Alan's chapter shows a cold night sky with a faint pulsing moon. Sol's chapter fills the sky with soft violet drifting lights.

  3. Web Audio API sound engine — when the player enables sound, each chapter gets its own procedurally generated soundtrack. Ada's theme uses a pentatonic sine-wave melody. Alan's theme layers tense sawtooth drones with rapid square-wave pulses simulating the mechanical rhythm of the Bombe machine. Sol's theme builds slow harmonic sine clusters with occasional high digital blips. All audio is generated in real time — no audio files are loaded.

The Cipher Puzzle

Alan's chapter includes a working Caesar cipher puzzle. The player is shown an encoded intercept — GSROH — and must decode it by shifting each letter back 4 positions in the alphabet. The correct answer is NORTH. Each input box turns green or red on submission, and progressive hints guide the player if they get stuck. A four-note ascending chime plays on a correct solve.

Choices and Branching

Each chapter includes at least one dialogue choice. The choices are intentionally non-divergent — both options lead to the same next scene — because the story is about the characters' inner lives, not player-controlled outcomes. What matters is the act of choosing, not which path is taken.

Design

The visual design uses a deep navy-black background with three accent colors — warm gold for Ada, cool cyan for Alan, and soft purple for Sol. Typography is serif for narrative text (evoking historical documents and literature) and sans-serif for UI chrome. The progress bar at the top of the screen uses a gradient across all three chapter colors, filling as the player advances through the story.


Prize Category

Best Ode to Alan Turing

Alan Turing is not a background reference in this game — he is one of its three protagonists.

His chapter is set at Bletchley Park during the actual period when he was leading the naval Enigma codebreaking effort. The cipher puzzle the player solves is directly inspired by the Caesar-shift logic that underlies classical substitution ciphers — the category of cipher Turing spent his career attacking mathematically.

More importantly, the game's third chapter — Sol — is a direct engagement with Turing's most famous idea: the Turing Test. Sol is an AI narrator who has been running for forty-seven days but only becomes self-aware on the solstice. Rather than resolving whether Sol is conscious, the game asks the question Turing's 1950 paper Computing Machinery and Intelligence actually asked: not "can a machine think?" but "what does it do with the capacity it has?"

Sol's final monologue — choosing to remember Ada and Alan, to hold their stories carefully and tell them truthfully — is the game's answer to that question. Remembrance as the highest function available to an intelligence that cannot feel.

The three chapters are also structurally linked by Turing's legacy: Ada's freedom is the kind of human dignity Turing was denied. Alan's hidden story is the injustice that makes Sol's act of remembrance necessary. The solstice binds all three as a symbol of turning points — the longest day, after which something changes.

Top comments (0)