Stakeout

Online escape rooms for multiple screens. A static site with no build step and no server, hosted on GitHub Pages.

• index.html: home page
• rooms/the-last-call.html: Case 01 sales page
• play.html: key check → pick a side → briefing → game
• legal.html: terms, privacy, refunds
• js/config.js: store settings (checkout link, product ID, support email)
• js/license.js: Lemon Squeezy license check
• js/game.js: game engine (clock, case board, hints, locks, save)
• js/rooms/last-call.js: Case 01 content and puzzles
• tools/hash.mjs: makes answer hashes for new puzzles

Design

Colors come from Figma's "Ink wash" palette (charcoal #1c1e21, cool gray #e6e6e1, ivory #f6f5f0). Following Visme's three-color rule, there's one bright accent, tape yellow #f2c230. It's always a fill behind charcoal text, never text on ivory. Every text pair passes WCAG AA.

Fonts are Bricolage Grotesque (variable) for headings, Inter (variable) for body text, Courier Prime for case documents, and Caveat for handwriting.

Following Lovable's 2026 trends, the site has one kinetic headline that plays once, small purposeful interactions, prefers-reduced-motion support, a skip link, keyboard-friendly locks and visible focus.

Turning on payments (Lemon Squeezy)

1. Create a store at lemonsqueezy.com. It's free to set up; they take 5% + 50¢ per sale and handle sales tax.
2. Add a product, The Last Call, priced at $10, as a single payment.
3. In the product, turn on License keys: activation limit 6, no expiry.
4. Under Confirmation, set the button link to https://<your-site>/play.html?room=last-call, and mention the key in the email text.
5. Copy the product's checkout link and product ID into js/config.js. Add a support email too.
6. Push. The buy buttons go live and the PREVIEW test key stops working.

Test with Lemon Squeezy's test mode first. Test-mode keys validate the same way.

Lobby, difficulty, video & voice

After the key, players land in the lobby (the "squad room", themed per case from room.lobby in the room file): who's here, name, side, difficulty and an invite. The host is whoever entered the lobby first (the earliest joinedAt among the players present); only the host sees the difficulty and timer controls, the others see what the host picked and press Ready up. The host's Start the case waits until everyone's ready (or "Start anyway") and starts everyone at once. Beginner = unlimited hints + an "Escape room 101" walkthrough; Normal = 3 hints per person; Expert = no hints and the timer can't be turned off.

Opening cutscene (room.cutscene in the room file): a character, a background scene and per-side lines that set up the story and point toward the first clue. It plays after the lobby and starts the clock when it ends; players can skip it, and replay it from the menu. Optional cutscene.drive plays first: a squad car driving down a street made of repeating SVG layers (parallax, scrolled by runDrive in game.js) with per-side captions typed over it; it brakes, then the title card and character follow. Notebook: a drawer on the right edge of the game screen (also the notebook button in the top bar), saved per device. Two tabs: Evidence fills itself: the first time a player finds something, its entry from room.evidence is filed with the key facts, the in-game time and a "Look again" link (room.revisit). Triggers: opening a scene item (its spot id), opening a lock (solved:<lock>), reading an HQ file (hq:<tab>) and phone calls (call:<last 4 digits>). Facts only restate what's on screen, so the notebook never solves a puzzle. It is a team board: every filed clue is sent to every player over the call mesh (ev messages in js/call.js, credited to whoever found it), and a player who joins or reloads mid-game asks for the full list (evreq). Filters: Whole team / Field / HQ / Mine. "Look again" only shows on clues from your own side (room.evidenceSide). My notes is free writing, with "Copy to my notes" on every clue.

Presence, video and voice live in js/call.js. Every device with the same key (plus a matching group code in preview mode, since everyone playtests with PREVIEW) joins one peer-to-peer mesh of up to 8. Camera and mic are off until turned on. Channels (Everyone / Field team / HQ team): you only send to, see and hear people in your channel. PeerJS's free public server only introduces devices; PeerJS loads from jsDelivr. Strict office/school networks may need a TURN relay in js/config.js (callIceServers).

How a case works

Each puzzle's lock is on one side's screen, and the information needed to open it is on the other side's screen. That means the two devices never have to sync. Progress is saved per device in localStorage.

Answers are stored as SHA-256 hashes: node tools/hash.mjs last-call <puzzleId> <answer>.

Limits to know: this is a client-side game, so someone determined could read the code (including the hint text) or skip the key check. That's an acceptable risk for a $10 game. Real protection would need a small server that hands out case content only after the key checks out, such as a Cloudflare Worker.

First person (3D)

Both teams play in first person. js/walk.js is a small engine on three.js (loaded on demand from jsDelivr, pinned 0.170.0): click to look (pointer lock), W A S D / arrows to walk, Shift to hurry, E or click to search what's under the crosshair; on phones a left-thumb stick + drag to look + a Search button. Worlds are plain data in js/rooms/last-call-3d.js (office, floor, alley, pier for Field; hq is the records room). A prop with spot opens that clue with the same ids as the room file; exit walks to another place. The opening drive is StakeoutWalk.drive(): a recycled 3D street seen from the driver's seat, which brakes beside the Blue Heron and turns to the side window for Brennan. If WebGL isn't available the old 2D scenes are used automatically.