Lantern Keeper

Every checkpoint exchange between Game Prototype Builder and the designer, in order.

Checkpoint 1: Design approval

Game Prototype Builder:

Here's the one-page design for Lantern Keeper (full text in GAME_DESIGN.md). It covers the pitch, the click-and-the-beam-follows core loop, mouse and keyboard controls, a 7-board run of about 5 minutes, five progression beats, exactly how your colored glass and matching lanterns work, and six choices for you (mirror type, what lanterns do to the beam, the glass color rule, art style, help when stuck, and music), each with my recommendation marked.

Approve this, change anything, or pick from the options above. I won't write game code until you say go.

What I need from you: a "go" (with your picks, or "use your recommendations"), or any changes. What happens next: I build the core loop (one board, rotating mirrors, the beam, a glass pane) and stop to show you screenshots, since you chose Hands-on.

Designer:

Go, and thank you for laying out the code files. That's exactly what I wanted for learning.

Picks: A1, B1, C1, D1, F1. For E, I'd like E2: a gentle Hint button, but only after I've been on a board for 60 seconds, so I try first.

One small addition: make the layout fit a phone held upright as well. I'll mostly play on my laptop, but I want to show my sister on her phone.

Log this in CHECKPOINTS.md and build the core loop. I'm Hands-on, so stop there and show me.

Game Prototype Builder (logged decisions):

• A1 double-sided diagonal mirrors · B1 lanterns let the beam pass · C1 glass replaces the color · D1 soft flat shapes with glow · F1 music-box loop with sea swell.
• E2, customized: the Hint button only appears after 60 seconds on a board; it wiggles one mirror that's in the wrong position.
• Added: the layout must also fit a phone held upright (portrait), for showing her sister. Phone moves out of the scope cut list.

Checkpoint 2: Core loop (Hands-on)

Game Prototype Builder:

The core loop is working: click (or tap) a mirror, it snaps a quarter-turn with a glassy click, and the beam races along its new path. Ruby glass turns the light ruby, and the ruby lantern only lights for ruby light. There are two boards so far, "First Light" and "Ruby Glass", plus a rough title and end screen so a whole run can be tested. Undo, Reset, the 60-second Hint button and the phone-upright layout are already in.

Self-tests passed at 1280x800 (mouse and keyboard) and 390x844 (touch), plus one run with the network off: full runs completed, Play Again started cleanly, 0 console errors, 0 network requests. Screenshots are in shots/core-*.png. The bot proves it works; only you can say whether it feels right.

Does this feel like the core of your game? In particular: is the snap-and-click of the mirror satisfying, and is the moment the beam turns ruby clear enough?

What I need from you: your reaction to the screenshots (or open dist/lantern-keeper.html and click around). What happens next: I build all 7 boards as a complete first playable run, test it, and stop again for your playtest.

Designer:

Yes, this is the core of my game. The beam turning ruby at the glass is exactly the "aha" I imagined, and the teach-me notes are great. I already did the "Try it yourself" on the beam color.

Three things before you build all 7 boards:

1. It doesn't feel like a seaside yet. The board is a grid of identical empty teal tiles. Make the empty tiles read as water or harbor (gentle wave lines, a few rocks, a dock edge), so the mirrors and lanterns sit in a place.
2. The lanterns look like targets (rings). Make them look like little lanterns, dark when unlit and glowing warm when lit, with the colored ones having colored glass.
3. On the phone, the board is small with lots of empty space below it. Make the board as wide as the screen and put Undo/Reset closer.

Log this in CHECKPOINTS.md and continue to the full first playable.

Game Prototype Builder (logged changes for the next pass):

• Core loop confirmed; the ruby "aha" stays exactly as is.
• Board becomes a harbor: open water with gentle animated wave lines instead of tile boxes, a few decorative rocks around the edge, and a wooden dock along the bottom. The grid stays readable through faint marks only.
• Lanterns become real little lanterns (cap, handle, frame, glass). Dark when unlit, warm glow when lit. Colored lanterns have colored glass; clear lanterns have pale glass. No target rings.
• Phone: the board fills the screen width, and Undo / Reset / Hint sit just under the board instead of at the bottom edge (on computers too, so the layout stays the same everywhere).
• Note on her "Try it yourself": her beam-color edit isn't in this project folder's src/tuning.js (it still has the original colors), so it was probably made in another copy. Nothing is lost, and she can redo it any time.

Checkpoint 3: First playable playtest

Game Prototype Builder:

The first playable is ready: all 7 boards from title to end screen. Your three changes are in. The board is now a harbor with drifting waves, rocks on the rim and a wooden dock. Lanterns are little lanterns on buoys, dark until lit, with colored glass on the colored ones. On a phone, the board fills the screen width and the buttons sit right under the dock.

The boards are First Light, Two Turns, Lantern Row, Ruby Glass, Ruby and Sea-Blue, Order of Glass, and The Bay (green glass shows up there). I made each one with exactly one solution, and npm test checks that. All tests passed: full runs at laptop and phone size plus one offline run, Play Again clean, 0 console errors, 0 network requests. Screenshots are in shots/fp-*.png. The music-box loop isn't in yet; it comes in the polish pass.

How to open it: double-click dist/lantern-keeper.html (on your laptop, or send the file to your phone).

Please play for two or three minutes, then tell me:

1. What felt good?
2. What felt off or confusing?
3. If you could change one thing, what would it be?

What I need from you: your answers to those three questions. What happens next: your answers become my top priority for the progression and polish pass (music, juice, difficulty curve), and since you're Hands-on I'll show you one more look before the final polish.

Designer:

(About 4 minutes for all 7 boards on her laptop; her sister played the first three on her phone.)

1. What felt good: The Bay fully lit is beautiful. I took a screenshot of it. The harbor and buoy lanterns are exactly what I pictured, and the teach-me notes are the best part for me. (You're right about the Try-it-yourself: I made it in a copy. My mistake, not yours.)
2. What felt off: the lanterns are small next to the mirrors and glass, so on the phone my sister couldn't tell which lantern still needed light. Also, a solved board just switches to the next one. I want a moment to enjoy it.
3. The one change: when a board is solved, hold for a beat. All the lit lanterns pulse once, with a soft chord, then a "Next board" button. And make the final board end with the lighthouse sweeping the whole bay, like the design promised.

Also make lanterns about 1.5x bigger, with a clear dark/lit difference.

No need for another Hands-on stop. Go straight to polish (with the music box) and hand-off. Log this in CHECKPOINTS.md.

Game Prototype Builder (logged plan for the polish pass):

• Run length: about 4 minutes, inside the ~5 minute target, so the difficulty stays as it is.
• Lanterns 1.5x bigger (TUNING.lanternScale). Unlit: dark glass and a dark silhouette with no glow. Lit: bright glass, a flame and a wide warm halo.
• Solved board: no more automatic switch. It holds, every lit lantern pulses once with a soft chord, and then a big Next board button appears. It waits as long as she likes, no timer.
• Final board: after the pulse, the lighthouse sweeps its beam across the whole bay, the water warms with light and each lantern flares as the sweep passes it. Then the end screen.
• Music box (F1): a slow, original music-box loop over a soft sea-swell hum, in the same key as the lantern chimes.
• Her customization, recorded: skip the Hands-on look before the final pass, and go straight to polish and hand-off.

Designed by Sofia Marquez · Built with Claude Code

Pitch

You are the lighthouse keeper. You rotate mirror tiles to bounce the beam from the lighthouse lamp into every lantern on the board. There is no losing and no timer: each board is a calm little knot of light to untie, and you win when every lantern on the last board is lit.

Core loop (the 10-second action)

Click a mirror → it turns a quarter-turn with a soft snap and a glassy click → the golden beam instantly re-traces its path across the board → a lantern it reaches glows and chimes. You look, think, click again.

It should feel good because every click gives an instant, visible answer (the beam moves right now), the turn snaps into place with a tiny overshoot like a key in a lock, and a lit lantern rings a note, so a solved board plays a little chord.

Controls (Computer)

• Mouse: left-click a mirror to turn it clockwise; right-click to turn it back.
• Keyboard: arrow keys / WASD move a glowing cursor, Space or Enter turns the mirror under it.
• Z undo last turn · R reset board · M mute.
• Phone (upright): tap a mirror to turn it clockwise; big Undo / Reset / Hint buttons along the bottom, sized for a thumb. (Added at approval.)

A run

• Start: title screen (a lighthouse on a dark sea, beam sweeping slowly), big Play button, controls listed.
• Rise: 7 hand-made boards, small to slightly bigger (5×5 up to 7×7), each introducing one idea at a time.
• End: after the last board, the lighthouse lights the whole bay and the end screen shows "All lanterns lit," your total turns, your best (fewest) turns this session, and Play Again.
• Target length: about 5 minutes total, roughly 30 to 60 seconds per board.

Progression (beats you'll feel in one run)

1. First light (boards 1–2): one mirror, one lantern, then two mirrors. You learn "click turns, beam follows."
2. More lanterns (board 3): one beam has to pass through several lanterns on its way.
3. Colored glass (board 4): a red glass pane tints the beam red, and a red lantern only lights for red light. This is the "aha" board.
4. Two colors (boards 5–6): red and blue glass and lanterns; the order you route the beam through glass matters.
5. The bay (board 7): a bigger finale board using everything, ending with the whole harbor lighting up.

Must have: colored glass and matching lanterns

• Glass panes are fixed tiles (they don't rotate) drawn as stained-glass squares in ruby, sea-blue or green. The beam passes straight through and comes out that color; you see the color change exactly at the glass.
• Colored lanterns wear a colored glass shade and show a small colored ring. They light only when a beam of their color reaches them; a wrong-colored beam makes them flicker briefly so you know it reached them but wasn't right.
• From board 4 on, every board uses glass. It's the heart of the game and never gets cut.

Your choices (pick one per line, or say "you decide")

A. Mirror type

• A1. (recommended) Double-sided diagonal mirrors: each click turns it a quarter-turn, so it alternates between "/" and "". Simple, very readable, gentle.
• A2. One-sided corner mirrors with four real positions; the back side blocks light. More puzzle depth, harder to read at a glance.

B. What a lantern does to the beam

• B1. (recommended) The beam lights it and keeps going, so one beam can chain several lanterns. Calmer, more forgiving.
• B2. The lantern catches the beam and stops it. Every lantern needs its own route; tighter puzzles.

C. Glass rule when the beam is already colored

• C1. (recommended) New glass replaces the color (red beam through blue glass becomes blue). Easy to predict.
• C2. Colors mix (red + blue = purple, which needs a purple lantern). Richer, but adds a rule to learn.

D. Art style

• D1. (recommended) Soft, flat shapes with glow: navy sea grid, teal tiles with rounded corners, the beam as a warm golden line with bloom, a few drifting sea-mist particles.
• D2. Chunky pixel-art look drawn in code: crisp squares, a retro lighthouse, the beam as stepped pixels.

E. Help when stuck

• E1. (recommended) Undo and Reset only. You stay the one solving it.
• E2. Undo, Reset, plus a gentle Hint button that wiggles one mirror that is in the wrong position.

F. Music

• F1. (recommended) A slow, soft music-box loop with a low sea-swell hum underneath; lantern chimes are tuned to fit it.
• F2. Ambience only (waves and wind), no melody, so the chimes are the only music.

Scope cut list (not in this prototype)

• Beam splitters, prisms, moving or sliding tiles: each is a new rule; seven boards of mirrors plus glass are enough to show whether the idea is fun.
• Level editor: great for learning, but it is a second program. Boards are written as short text maps in one file, so you can still make your own by hand.
• Saving progress between visits: you didn't ask for storage, and a 5-minute run doesn't need it. Best turns are kept for the session only.
• Story, characters, star ratings: a turn counter is the only score. No timers, ever.

What success looks like

1. Each click feels satisfying on its own: the snap, the click, the beam jumping to its new path.
2. Board 4 gives you a small "oh!" when the beam turns red and the red lantern lights.
3. You reach the lit-up bay in about five minutes, feeling calm and a bit clever, never stuck or rushed.

How the code will be organized (for learning)

Plain JavaScript on an HTML canvas, no engine. Separate files in src/ you can read one at a time: tuning.js (every number, color and word), levels.js (the boards as text maps), beam.js (traces the light), board.js (tiles and rotation), render.js (drawing), audio.js (sounds), main.js (screens and input). After each system works I'll explain it in plain language and give you one optional "Try it yourself" change.

Approved picks: A1, B1, C1, D1, E2 (Hint appears only after 60 seconds on a board), F1. Added: the layout also fits a phone held upright.

Approve this, change anything, or pick from the options above. I won't write game code until you say go.

The intake conversation between Game Prototype Builder (running in Claude Code) and the designer, in order.

Game Prototype Builder:

Hi, and welcome! I'm Game Prototype Builder. I'll help you turn the game in your head into a first playable prototype you can open, play and share, usually in one sitting.

Here's how it works. First, a short intake interview in three batches. Then I write a one-page design for you to approve. Next I build and test the game, you playtest it and tell me what felt off, and finally I polish it and hand it over with everything you need to keep going. You stay in control the whole way: you're the designer, I'm the builder. A first build usually takes 30 to 90 minutes of my work (more for 3D).

Let's start with Batch A: You

1. What should the game's credits say? ("Designed by ___": a name, a handle, or a studio.)
2. Your experience: Never made a game / Tinkered or followed tutorials / Started games but never finished one / Shipped something small / Professional.
3. Can you read code? None / A little / Comfortably.
4. What is this prototype for? Test whether an idea is fun / Show friends or family / Pitch it to someone / The start of a real game I'll build properly / A gift / Just to learn how games are made.
5. Where will you playtest it? Phone / Computer / Both.

Designer:

1. Sofia Marquez
2. Tinkered or followed tutorials
3. A little
4. Just to learn how games are made
5. Computer

Game Prototype Builder:

Thanks, Sofia. Learning how games are made is a great reason to build one, and I'll keep that in mind as we go.

Batch B: The game

6. The idea, in your own words. One to three sentences is plenty.
7. 2D or 3D? (Or "you decide". 2D is faster and more reliable for a first prototype; 3D works but takes longer and looks rougher.)
8. The core action: what does the player do over and over? (Jump, steer, match, build, aim, serve, dodge…)
9. The one thing it must have. The part that makes it your idea. This is never cut.
10. Games it should feel like, and what to take from each. Feel and ideas only; never their art, characters or names.
11. Look and mood: colors, style, era, vibe. A few words is enough.
12. How a run should end: a clear win, a high-score run that ends when you lose, or endless. Roughly how long should one run be? (2 to 5 minutes works best for a prototype.)
13. Anything to avoid: themes, mechanics, difficulty, things that would spoil it for you or your audience.

Designer:

6. A lighthouse keeper's puzzle. Rotate mirror tiles on a small grid to bounce a beam of light from the lighthouse lamp into every lantern on the board. Later boards add colored glass that tints the beam and lanterns that need a specific color.
7. 2D
8. Rotate tiles
9. Colored glass that tints the beam, and lanterns that need a matching color
10. The satisfying "click into place" of Monument Valley; the clean logic of Baba Is You's simplest levels
11. Moody seaside night, deep navy and teal, warm golden light beams
12. A clear win: a set of hand-made levels, about 5 minutes total
13. Timers; puzzles should be calm

Game Prototype Builder:

I love this one: a beam of warm light bouncing across a dark night board is a lovely thing to build. Last batch.

Batch C: How we work

14. How often should I check in with you?
    • Autopilot: you approve the design, then I build, test and polish without stopping. Fastest.
    • Standard (recommended): you approve the design, then you play the first playable build and tell me what felt off before I polish.
    • Hands-on: Standard, plus a quick look after every milestone (core loop, progression, juice) so you steer as it grows.
15. How much explanation do you want?
    • Just build it: short updates, no lectures.
    • Explain my calls: when I decide something, I tell you why in a sentence or two.
    • Teach me as we go: after each system is built, I explain how it works in plain language and point you to the exact file and function, plus one small optional change to try yourself.
16. Difficulty: Gentle (most people win) / Fair (a few tries) / Tough (for people who like a challenge).
17. A short name for the project folder and the game's working title. (Or "you decide".)

Designer:

14. Hands-on
15. Teach me as we go
16. Gentle
17. Lantern Keeper

Game Prototype Builder:

Here's everything in one place. (You gave "Lantern Keeper" as the title, so I'll use lantern-keeper for the folder.)

🎮 PROTOTYPE PROFILE
Title: Lantern Keeper          Designed by: Sofia Marquez
Idea: A lighthouse keeper's puzzle. Rotate mirror tiles on a small grid to bounce
      a beam of light from the lighthouse lamp into every lantern on the board.
      Later boards add colored glass that tints the beam and lanterns that need
      a specific color.
View: 2D   Core action: rotate tiles
Must have: colored glass that tints the beam, and lanterns that need a matching color
Feels like: Monument Valley's satisfying "click into place";
            the clean logic of Baba Is You's simplest levels
Look & mood: moody seaside night, deep navy and teal, warm golden light beams
Run: win (a set of hand-made levels), ~5 min total
Avoid: timers; puzzles should be calm
Playtest on: Computer   Purpose: Just to learn how games are made
Experience: Tinkered or followed tutorials   Reads code: A little
Check-ins: Hands-on   Explanations: Teach me as we go   Difficulty: Gentle

Lock this in?

Designer:

Yes.

Game Prototype Builder:

Locked in. Since you've tinkered before and this is about learning, I'll keep the build small and friendly: one grid, a handful of hand-made boards, and code organized so each system (the grid, the beam, the levels, the sound) lives in its own clearly named place you can read. Next I'll write the one-page design in GAME_DESIGN.md for you to approve.