$ show pcottle/learnGitBranching
LearnGitBranching is a client-side interactive web application that teaches Git branching through visualization and gamified levels. It simulates a full Git command set (commit, branch, merge, rebase, push, pull, etc.) in the browser, rendering commit trees as SVG graphics using Raphael.js. The application follows a Flux-like architecture with a dispatcher, stores (CommandLine, Level, Locale, GlobalState), and actions, all running entirely in the browser with no backend. Users progress through 36+ levels organized into sequences (intro, ramp-up, remote, advanced), each with a goal tree, solution command, hints, and multi-language dialogs. A sandbox mode allows free experimentation, and a level builder enables custom level creation. The app supports 20+ locales with dynamic import of translation strings, and includes a certificate of completion generated as SVG. The architecture is modular: a headless Git engine (src/js/git/headless.js) provides the core simulation logic, decoupled from the visualization layer (src/js/visuals/). Commands are defined as a config object with regex matchers and execute functions. Level definitions are self-contained JSON objects with goal trees, start trees, and localized content. The app uses Vite for bundling with a custom CommonJS lazy interop plugin to handle circular dependencies. Testing is done with Jasmine, covering the Git engine, command parsing, stores, and level validation. Key reusable components include the tree comparison algorithm (treeCompare.js) with multiple comparison modes, an event baton pattern for coordinated event handling, a standalone SVG certificate builder, and a composable command parsing waterfall. The internationalization system features locale detection, fallback chains, and dynamic imports. Despite some legacy patterns (Backbone views, jQuery UI), the codebase is well-structured and actively maintained, with CI/CD pipelines for GitHub Pages and Docker deployment.
The LLM identified 5 files worth highlighting for reuse:
Provides a generic tree comparison engine with multiple strategies: hash-agnostic, branch-only, origin-aware, and assert-based. Used to validate level completion by comparing the user's resulting commit tree against the goal tree. The dispatch() method selects the appropriate comparison mode based on level flags. This module is self-contained (no internal imports beyond utility functions) and could be extracted for any application needing to compare hierarchical graph structures with flexible matching rules.
Implements a 'steal/pass/release baton' pattern for managing event listener ownership across components. Allows one component to temporarily take control of an event (e.g., command processing) and later release it back. This pattern solves the common problem of modal or overlay workflows where event handling must be intercepted and restored. The module is small, dependency-free, and demonstrates a non-obvious coordination pattern that could be reused in any event-driven application.
Generates a completion certificate as an SVG string with no external dependencies. Includes functions for rasterizing the SVG to a canvas for download as PNG, and for copying to clipboard. The certificate layout, styling, and text are parameterized. This module is fully self-contained and could be reused in any application needing to generate and export simple SVG certificates or badges.
Provides a headless Git engine that simulates Git commands without any UI or visualization. Used by tests, demonstration views, and level validation. Includes a getMockFactory() method to create a mock visualization for testing without animations. The engine is decoupled from the visual layer and can be instantiated independently. This module is a clean abstraction of the core simulation logic and could be reused in any project needing a programmatic Git-like state machine.
Implements a composable command parsing pipeline with stages: shortcut expansion, instant command handling, and staged parse functions. Each stage is a function that can be added or removed. The module also exports a regex map for testing. This pattern allows flexible and testable command parsing, and the waterfall approach could be adapted for any application needing multi-stage input processing with pluggable stages.