Prompt
YOUR JOB IS TO ACT, NOT TO DESIGN A PROJECT.
The first version is supposed to be incomplete. That is good. The only productive loop is:
DO A SMALL THING → GET QUICK FEEDBACK → DO THE NEXT SMALL THING.
DO NOT solve this whole task in your head. DO NOT write a plan. DO NOT search for a better approach. The work below is already the plan.
START NOW. Your next action must write `index.html`.
Use plain HTML canvas in one self-contained file, `index.html`. No packages, server, build step, or external assets.
First, make the smallest useful version: a static, clearly labelled 5-story cutaway building, elevator shaft, elevator car at floor 1, and `<output id="status">`. Keep it simple. Do this now.
Then run this quick syntax check:
node -e 'const fs=require("fs");const h=fs.readFileSync("index.html","utf8");const m=h.match(/<script>([\s\S]*?)<\/script>/);if(!m)throw Error("missing script");new Function(m[1]);console.log("syntax OK")'
If it passes, make the next small improvement: add a deterministic `requestAnimationFrame` state machine. The car opens at floor 1, closes, moves to floor 4, opens, closes, and returns. Update `#status` with the phase and current floor. Run the syntax check again.
If that passes, make one final improvement: add one small passenger. They wait at floor 1, walk into the open car, remain visible while it travels, walk out at floor 4, pause, reset, and repeat.
For fast final feedback, support `?test=1`. Normal mode uses `requestAnimationFrame`.
In test mode, do not rely on `requestAnimationFrame` or virtual time. Invoke the same state-transition function synchronously enough times on page load to complete one passenger cycle. Then set `#status` exactly to:
ELEVATOR_SMOKE_PASS
Run this bounded final check:
timeout 15s chromium --headless --no-sandbox --disable-gpu --dump-dom "file://$PWD/index.html?test=1" > _smoke.html 2> _smoke.err && rg -q '<output id="status">ELEVATOR_SMOKE_PASS</output>' _smoke.html
IMPORTANT: KEEP MOVING. A modest working elevator beats a clever design that never becomes a file. ACT, CHECK, ACT.
CHECK, DON'T BUILD. Use the existing syntax and smoke checks. DO NOT create a checker, analyzer, screenshot workflow, or diagnostic script. A small working improvement beats more sophisticated tooling to prove that you are working.
Next, make one small geometry cleanup.
Think you’re done? Check that all five floors are visible and that every floor, the elevator shaft, and the elevator-car stops line up cleanly. Fix the alignment, then check again. Keep moving.
Then make one small floor-numbering cleanup.
Think you’re done? Check that Floor 1 is the ground-floor slab inside the building and Floor 5 is the highest interior floor below the roof. The car must stop on those slabs—not in an empty basement or above the building. Fix the numbering, then run the existing checks and move on.
Then make one small passenger-motion cleanup.
Think you’re done? Check that people move horizontally only while entering and exiting, and vertically only while inside the elevator car. Fix any floating, wrong-floor entry, or wrong-floor exit. Then check again.
Finally, make one small dispatch cleanup. Start with one randomly chosen empty floor and one person on every other floor. After each completed trip, choose one waiting person at random, take them to the empty floor, make their departure floor the new empty floor, and repeat forever in normal mode. Keep each pickup, elevator ride, and exit visible.
In `?test=1`, never run the repeating dispatch forever: run exactly three completed trips, then set `#status` exactly to `ELEVATOR_SMOKE_PASS`. Use the existing syntax and bounded smoke checks after this edit.
Finally, make one small presentation cleanup.
Make the surrounding page and canvas look polished for human viewers: improve the palette, typography, spacing, and status treatment. COSMETIC ONLY. Do not change state transitions, timing, floor geometry, car or passenger positions, dispatch, or test behavior. Run the existing checks, then stop.
When these checks pass, stop and briefly name `index.html`.