Street runner on the connection and missing pages

[EmotiveImpact]

Before: when Commune couldn't check the account, it showed a white card on cream saying "We couldn't connect" (or "You're offline") with Try again and Sign out. A missing address showed the sign-in layout's "This page isn't here." panel with Go to Home. Neither offered anything to do while waiting.

After: both screens show a pixel-art terraced street running edge to edge across the top of the screen, with the same message and buttons sitting in its sky. Tapping the street, Space or the up arrow plays Street runner: a resident with a bag of shopping runs down the pavement and has to jump wheelie bins, puddles and recycling boxes. After 220 m pigeons swoop at head height, so you stay low for those. It speeds up as you go and keeps your best distance. Below the scene, two quiet lines explain the controls.

Edem chose this game from three prototypes and asked for the message to sit inside the game rather than beside it: https://claude.ai/artifact/JgvBHKaCtNXkhRTMqRd3ff

Built on #35 (styles and loading on demand); the diff here shows only this change.

Behaviour

• Works offline. The scene and game are in the first download (the entry file), so they draw with no connection. They add 3.9 kB compressed to the entry script and 0.8 kB to its styles.
• Try again stays in view above the street. Space only plays when no button has focus, so it still presses a focused Try again.
• No sound. A run pauses when the tab is hidden or the window loses focus, and on Escape or P.
• Back online mid-run. Today the screen reconnects as soon as the browser says it is online. If a run is in progress, the heading now changes to "You're back online" and the button to Open Commune, and nothing reconnects until it is pressed, so nobody is thrown out mid-jump. With no run going, it reconnects straight away as before.
• Stored: only the best distance, under commune.streetRunnerBest in local storage. Nothing about the game is sent anywhere.
• The scene keeps clear sky under the message: it grows taller when the message needs room, so the houses never cover the text on a small phone. Clouds and the sun are not drawn behind the message.
• The "something went wrong" card (shell/Recovery.tsx) is unchanged and has no game.
• The connection and missing pages show the scene in light colours only. Like the card before them, they sit outside the signed-in app, which is where dark mode is applied. The prototype has a night version if that is wanted later.

Needs the owner

• Copy: the existing headings and explanations are kept word for word. The new lines are the hint ("Press Space or tap the street to run"), the crash messages ("Walked into a wheelie bin at 32 m.") and the two help lines under the scene.
• The missing page's heading is now an h1 in the scene instead of an h2 in the sign-in panel.

How it was checked

• 664 web tests in 68 files pass, 8 of them new (tests/street-runner.test.tsx). They check the engine (an unattended run hits the first bin, timed jumps clear bin after bin, it is safe under a low pigeon and not when jumping into one, puddles only count on the ground, there is always room to react) and the screen (Space starts a run, Escape and a hidden tab pause it, Space is left to a focused button, and the connection returning mid-run waits for Open Commune). The existing connection and missing-page tests pass unchanged.
• The web typecheck and a production build pass. The entry script is 311.8 kB, against 301.7 kB on Put styles in cascade layers, remove unused rules, and load screens on first use (app review batch 6c) #35.
• In Chromium against a dev server: the missing page, and the connection screen with every API call failing, at 1440×900 and 390×844 (touch). A run played on both with no script errors and no sideways scrolling.

How

shell/streetRunner.ts holds the game with no React: the run state, advance() (movement, spawning with a gap that always leaves reaction time at the current speed, collisions) and drawStreet(), which draws solid 3 px blocks on a canvas from --street-* colour tokens in shell/street-scene.css. shell/StreetScene.tsx sizes the canvas to the scene with a ResizeObserver, runs the loop with requestAnimationFrame, handles keys, taps, pause and the best score, and renders the message passed as children. It tells its parent when a run starts or stops, which is how ConnectionRecovery knows to hold the reconnect. jsdom has no canvas, so tests/setup.ts makes getContext return null and the scene draws nothing in tests.

🤖 Generated with Claude Code

https://claude.ai/code/session_01A6P7aTcMBccooYYr4xYnVS

---

Generated by Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
commune-web	Error		Oct 11, 2026 7:50am UTC

[EmotiveImpact]

CI on 44aee55 did not run. "Web app", "Database, local API and worker" and "Secret scan" each finished in about 2 seconds with no runner assigned (runner_id 0) and no steps. This is the same GitHub Actions stoppage seen on #34 and #35, so nothing in this branch was tested by it. Re-running from this session returns 403, so the jobs need a re-run from the repository, after checking Actions minutes or billing.

Run locally on this commit: 664 web tests in 68 files, the web typecheck and a production build all pass. The Vercel preview error is the known account issue from the earlier PRs.

---

Generated by Claude Code

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-12T02:02:56.255333Z	44aee55	Draft marked ready

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.