feat: Add an interactive web example gallery deployed to GitHub Pages#117
Merged
Conversation
erickzanardo
approved these changes
Jul 19, 2026
The old browser demos return as a single-page gallery on the WebAssembly backend: pyramid, domino tower, ball cage, circle stress, blob, bridge, and racer, rendered through a canvas DebugDraw with a dark palette. Every scene supports dragging bodies with a mouse joint, the racer drives with the arrow keys and a following camera, and scenes deep-link by URL hash. deploy-examples.yml builds the gallery with build_runner on pushes to main and publishes it to GitHub Pages (enable the GitHub Actions source under Settings > Pages once).
The tower now uses the classic construction from the old demo: vertical dominoes carrying horizontal planks level by level with braces at the edges and tapering density, 25 levels tall. It stands perfectly still until a heavy ball, launched two seconds in from a random side, height, and speed, knocks it down. Verified deterministically on the VM: the top of the tower keeps its height through the standing phase and falls from y=34 to y=6 after impact. Every scene also gains a Reset button in the header, which rebuilds the current scene (and re-rolls the domino ball trajectory).
The car fell asleep after landing and setting a wheel joint's motor speed does not wake sleeping bodies, so arrow keys appeared dead. The chassis and wheels now have sleep disabled. Verified on the VM: after three seconds of idling, two seconds of ArrowRight drives the car 14 meters.
Event listeners now register through a DomEvent enum instead of raw strings, making the event names typo-proof at the call sites.
Every DOM event name is the lowercase of its camelCase Dart name, so the constructor parameter goes away in favor of a name-based getter.
Deploying through the gh-pages branch works before the workflow reaches the default branch, and materializing build_runner's symlinked packages directory fixes the missing assets that broke both the artifact upload (tar: File removed before we read it) and the branch deploy.
Shapes are now drawn from Shape.geometry with their body transforms, the same pattern a game renderer such as flame_forge2d uses, with the camera rectangle as an overlapAabb culling query. Joints still come from the debug draw with shape drawing disabled. Shape colors travel through userData, so the inline shape definitions gained explicit colors.
The header shows the flaming anvil next to the title and the SVG doubles as the favicon, copied from design/only-logo.svg.
spydon
enabled auto-merge (squash)
July 20, 2026 19:20
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Stacked on #116 (which is stacked on #115).
What
The old browser examples return as a modern, single-page demo gallery running on the WebAssembly backend, with a GitHub Pages deployment.
Scenes (all draggable with the pointer via a mouse joint):
Presentation: dark theme, palette-tinted shapes through Box2D v3's per-shape custom colors, pill navigation with URL-hash deep links, hint bubble per scene, device-pixel-ratio aware canvas, fixed-timestep loop with an accumulator. Rendering goes through the public
DebugDrawinterface, so the gallery doubles as a demonstration of it.Deploy:
deploy-examples.ymlbuilds withbuild_runner --releaseand publishes to GitHub Pages on pushes to main. One-time repo setup: enable the GitHub Actions source under Settings > Pages.Testing
Built and verified locally in headless Chrome: all scenes render and simulate on the wasm backend (screenshots in the PR conversation),
melos run format-checkanddart analyze --fatal-infosgreen.