- Create development setup script for one-command installation
- Add parallel development server startup script
- Include comprehensive development documentation
- Set up type checking, building, and dependency management
- Provide troubleshooting guide and architecture overview
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Set up Next.js 14 with App Router and TypeScript
- Implement Panda CSS for styling instead of Tailwind
- Create comprehensive configuration form using TanStack Forms and Radix UI
- Add live preview, generation progress, and download components
- Design responsive, accessible interface for flashcard generation
- Integrate with existing TypeScript bindings for Python calls
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Ignore node_modules, build outputs, and cache directories
- Exclude IDE, OS, and temporary files
- Keep local Claude settings private
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Configure pnpm workspace for apps/* and packages/*
- Add Turborepo for build optimization and caching
- Set up TypeScript, ESLint, and Prettier at monorepo level
- Include development scripts and package management
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Multiple approaches tried but element not appearing:
- Fixed positioning with viewport coordinates
- Modal-relative positioning with getBoundingClientRect
- Simple train-attached element in journey container
All attempts failed to create visible math bubble above moving train.
Element creation logged but not visible in DOM inspector.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Change position from absolute to fixed for better viewport positioning
- Increase z-index to 9999 to ensure visibility above all elements
- Enhance styling with brighter border color and larger font
- Adjust transform to -120% for better positioning above train
- Add debug logging to track creation and positioning
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove problematic complement display position changes that broke layout
- Replace display switching with simple floating math bubble approach
- Add scaleX(-1) transform to train emoji for correct direction on macOS
- Add endless mode detection to remaining endRace() calls to prevent race results modal
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Calculate train rotation based on path direction using look-ahead technique
- Use getPointAtLength() to get current point and next point on SVG path
- Compute angle with Math.atan2() for precise direction calculation
- Apply smooth transform rotation with proper center origin
- Add optimized CSS transitions for smooth rotation (0.2s ease-out)
- Train emoji now realistically tilts left/right following curves
- Eliminates static horizontal orientation for immersive experience
The train now behaves like a real locomotive, smoothly rotating to follow
the track direction through curves and straightaways!
🚂 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add mode detection in checkStationArrivals() to differentiate steam journey vs regular race
- Skip endRace() call when in endless steam journey mode (detected by .route-path element)
- Let handleRouteCompletion() properly handle 100% position in endless mode
- Preserve normal race ending behavior for regular race modes
- Fixes issue where gold/silver/bronze modal would appear instead of route progression
Now steam train journey properly transitions between routes endlessly while maintaining
normal race completion behavior for other game modes.
🚂 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Detect route completion when train reaches 100% position
- Show celebration overlay with progress stats and achievements
- Generate new themed routes automatically after completion
- Cycle through 10 different route themes (Mountain Valley, Coastal Railway, etc.)
- Update route progress indicator in header
- Play celebration sounds (whistles, fanfare) for milestones
- Reset train position seamlessly for continuous journey
- Track total distance, routes completed, and correct answers
- Create endless learning experience to keep kids engaged
Perfect for maintaining motivation and creating "just one more route" engagement!
🚂 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fix handleDisplaySwitching() targeting wrong element (.complement-display container vs .challenge-prompt text)
- Use opacity instead of display:none to fade challenge text without hiding entire game
- Prevents cyclical disappearing/reappearing of all game content
- Maintains floating display functionality while preserving core game structure
Fixes commit 045dc9f bug where entire track/content would vanish and never return.
🚂 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Persistent reminder to reference rebuild checklist
- Prevents future loss of context and features
- Ensures systematic approach to train-related tasks
🚂 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Track all features that were lost during git reset mishap
- Systematic approach to ensure no features are forgotten
- Progress tracking for rebuild process
🚂 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Restore dynamically generated curved train tracks with proper railroad construction (ties and dual rails)
- Restore floating math display speech bubble that follows the train along the track
- Restore enhanced pressure system with dramatic coal spilling effects for wrong answers (momentum drops to zero)
- Enhanced coal shoveling animations with particle effects for correct answers
- Add CSS animations for coal spilling, pressure alarm, and floating display
🚂 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replace artificial timer bar with natural pressure decay system
for steam train journey mode while preserving timer for other modes.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Updated local settings to support improved development workflow
and testing capabilities.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Added dramatic visual effects to make coal shoveling more obvious:
- Enhanced shoveling animation with bigger movements and brightness
- Flying coal particles from worker to locomotive
- Steam puffs rising from train chimney on correct answers
- Glowing momentum bar with flash effect
- Context-specific feedback: "Coal shoveled! +X% momentum!"
Creates clear cause-and-effect visual connection between correct answers
and train speed increases for better player understanding.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Regenerate flashcards_en.html with latest implementations:
- Fox tunnel digging system for Lightning Sprint
- 90s arcade sound effects integration
- Realistic digging animations and depth effects
- Particle system enhancements
- Fixed Lightning Sprint time-attack mode
Generated from web_generator.py with range 0-20.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add test files for actively used systems:
- Particle effects test suite with interactive demos
- Polished matching game with orthogonal controls testing
- Visual demonstrations of all particle types and animations
- Matching game combinations validation
These test files help validate current production features.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replace confusing track metaphor with fox tunnel digging visualization:
- Fox characters (🦊🦝🐺) dig deeper tunnels with each correct answer
- Realistic digging animations with squash/stretch and rotation effects
- Depth perspective system - tunnels darken and foxes glow as they go deeper
- Treasure discovery system with depth-based rewards (15-40% chance)
- Screen shake effects for very deep digging (20+ answers)
- Fixed height layout prevents scrolling issues
- AI foxes dig automatically with competitive speeds
Lightning Sprint is now a proper time-attack mode without distance confusion.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Remove 24 obsolete test_*.html files that were created during feature development:
- Matching game iterations (6 files)
- UI development tests (4 files)
- PDF/print tests (3 files)
- Feature development tests (4 files)
- Racing evolution tests (3 files)
- Input/scoring fixes (4 files)
These served their purpose during development but are no longer needed.
Kept 4 relevant test files for current features.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Fix endurance test race completion logic to properly end at 20 correct answers
- Fix medal scoring to reflect actual race position instead of just accuracy
- Fix goal display: shows "20" for practice, "60s" for sprint, "∞" for survival
- Reduce AI commentary cooldown from 4-10s to 2-6s for more interactive races
- Improve sprint/survival medal logic to rank based on final positions vs AI
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add smart timeout logic to prevent accidental auto-acceptance of prefixes
- Detect when input number is prefix of other quiz numbers (e.g., 1 vs 18)
- Apply 500ms delay only for actual conflicts, preserve instant magic otherwise
- Add robust timeout management with proper cleanup on quiz end/reset
- Initialize prefixAcceptanceTimeout in constructor for memory safety
- Add isPrefix() helper function for clean conflict detection
- Prevent race conditions by clearing existing timeouts before setting new ones
- Maintain seamless UX while eliminating user confusion from prefix conflicts
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create beautiful welcome section with hero design and feature overview
- Add interactive feature cards linking to main app sections
- Implement 4-step quick start guide for user orientation
- Include dynamic stats preview showing app capabilities
- Update navigation to include Welcome as first/default tab
- Add responsive design with glass morphism styling effects
- Implement JavaScript event handling for welcome section navigation
- Fix template formatting to support dynamic number count display
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Transform introduction into complete visual learning experience:
- Redesign entire interface with beautiful gradient theme and glass morphism
- Add 4-step interactive tutorial using real SVG generation system
- Generate 10 tutorial examples (0,1,3,5,7,9,23,67,158,456) automatically
- Create step-by-step visual progression from basic structure to complex numbers
- Implement beautiful tutorial cards with gradient headers and numbered steps
- Add interactive practice element with reveal functionality
- Include responsive grid layouts for tutorial examples
- Apply stunning modern design with smooth animations and hover effects
- Integrate tutorial SVGs seamlessly with existing generation pipeline
- Transform boring text into engaging visual learning experience
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Transform overwhelming single-page layout into discrete experience:
- Add sticky navigation bar with section buttons
- Create 4 organized sections: Introduction, Configuration, Challenges, Flashcards
- Implement smooth section transitions with fade animations
- Add comprehensive introduction explaining soroban learning
- Separate configuration details into dedicated section
- Group all interactive challenges in focused area
- Isolate flashcard practice in dedicated section
- Include scroll-to-top navigation for better UX
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replace web print support with professional PDF printing workflow:
- Generate companion PDF automatically with each web flashcard page
- Intercept print attempts (Ctrl+P/Cmd+P, browser print menu)
- Show informative modal explaining PDF advantages
- Open high-quality PDF in new tab for printing
- Include cut marks, registration marks, and proper card layout
- Remove misleading web print CSS and documentation claims
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Document single and two-player matching game modes
- Explain medal system, grid sizes, and scoring mechanics
- Detail technical features like responsive design and accessibility
- Add interactive games section showcasing all three challenge modes
- Update web features list with complete matching game capabilities
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace checkmark overlay with subtle corner indicator for matched cards
- Fix two-player mode button responsiveness after new game starts
- Add timer delay for first move in two-player timed games
- Improve player badge positioning to avoid overflow clipping
- Add comprehensive visual feedback and state management
- Create test files for verifying all improvements
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Move overflow:hidden from .match-card to .match-card-back only
- Remove border-radius from card back elements to prevent nested corners
- Maintain clean card appearance while preserving player badge visibility
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
## Hero Section Transformation
- Create eye-catching header with emojis and engaging tagline
- Add large colorful soroban SVG (987,654,321) as main hero image
- Write compelling copy focusing on visual beauty and learning effectiveness
- Transform from dry description to exciting, benefit-focused introduction
## Visual Gallery Addition
- Generate 3 spectacular hero SVGs using different color palettes:
* Nature palette (1,234,567) - earth tones for focused learning
* Colorblind-friendly (987,654,321) - universal accessibility
* Mnemonic colors (555,666,777) - memory-optimized hues
- Create organized gallery showcasing the visual diversity
- Add poetic descriptions emphasizing precision and thoughtful design
## Content Strategy
- Lead with emotional impact: "Master the Ancient Art of Mental Math"
- Use powerful action words: "addictive", "ninja", "adventure"
- Highlight unique value propositions with fire emoji callouts
- Balance ancient wisdom with modern technology appeal
- Make learning sound exciting rather than educational
## GitHub Appeal
- Designed to grab attention in repository listings
- Colorful visuals create immediate positive impression
- Professional yet approachable tone appeals to educators and learners
- Clear value proposition for different user types
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
## Input Interface Improvements
- Remove field borders and cursor for natural typing experience
- Hide input field completely off-screen, display numbers in clean text area
- Add click-to-focus on display area to maintain keyboard interaction
- Use monospace font with letter spacing for clear number display
## Memory Card Sizing Improvements
- Make cards viewport-aware using min(85vw, 700px) and min(50vh, 400px)
- Add responsive breakpoints for small screens to prevent scrolling
- Ensure entire game fits in viewport without requiring scroll
- Scale SVG content to fill available card space
## Penalty Scoring System
- Track incorrect guesses and apply 5-point penalty per wrong guess
- Display score breakdown showing base score, penalties, and final score
- Update results display to clearly show wrong guesses with point deduction
- Encourage careful thinking rather than random guessing
## User Experience
- Numbers appear naturally as user types without form-like interface
- Large but viewport-constrained cards for optimal memorization
- Fair scoring that rewards accuracy and penalizes careless guessing
- Responsive design works across all screen sizes
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove obsolete individual PNG files that were replaced by SVG examples
- Remove unused card_000 SVG files that aren't referenced in README
- Force regenerate all examples to ensure they reflect latest positioning improvements
- Examples now use authentic adjacent bead spacing and improved heaven bead positioning
- All examples generated with latest template improvements for realistic abacus appearance
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Run `make examples` to update all README visual examples
- Updates SVG images for basic numbers, bead shapes, and color schemes
- Updates PNG images for layout and cutting guide examples
- Ensures documentation examples reflect latest visual improvements
- Includes examples generated with fixed color-palette parameter
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add 5 preset color palettes: default, colorblind, mnemonic, grayscale, nature
- Colorblind palette uses scientifically proven deuteranopia/protanopia/tritanopia safe colors
- Mnemonic palette includes memory aids (Blue=Basic/Beginning, Orange=Ten commandments, etc.)
- All palettes work with place-value and alternating color schemes
- Add --color-palette CLI argument with validation
- Support both PDF and web/SVG generation formats
- Maintain backward compatibility with existing color schemes
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add clean left arrow (←) to "Click to move back" labels for visual clarity
- Auto-select cards when moved back from sorting positions for immediate re-placement
- Highlight available positions when card is auto-selected after move-back
- Update status messages to indicate auto-selection behavior
This creates a smoother workflow where users can click misplaced cards and immediately place them in the correct position without manual re-selection.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Increase abacus visibility by generating smaller SVG canvas (1.5in x 1.5in) so abacus takes up more of the viewBox
- Center abacus in sorting slots by removing white background and using full slot space
- Hide slot numbers when filled to prevent visual interference
- Add elegant hover-only "Click to move back" overlay with backdrop blur
- Remove unnecessary margins and z-index usage for cleaner CSS
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit perfects the visual authenticity of the soroban abacus by implementing
proper spacing between beads that matches how a real abacus behaves.
Key improvements:
1. Adjacent Bead Spacing System:
- Adjacent beads of same type (active-to-active, inactive-to-inactive): 0.5pt spacing (nearly touching)
- Transition gaps (active-to-inactive): 8pt spacing (clear visual separation)
- Bar-to-bead gaps: 1pt (active) or 8pt (inactive) as appropriate
2. Physical Abacus Authenticity:
- Active beads cluster together near the reckoning bar
- Inactive beads cluster together away from active beads
- Clear visual distinction between active and inactive states
- Matches the tactile grouping behavior of real soroban beads
3. Enhanced Visual Impact:
- Numbers like 2,3,4: Active earth beads touch each other
- Numbers like 6,7,8,9: Both active and inactive groups clearly defined
- Number 0: All inactive beads form cohesive groups
- Number 5: Clean separation between active heaven and inactive earth
Technical Implementation:
- New adjacent-spacing parameter (0.5pt) for same-type bead pairs
- Updated positioning calculations throughout earth bead logic
- Maintained rod bounds calculation compatibility
- Preserved all existing gap logic for different-type transitions
The result is a much more authentic and visually appealing representation that
accurately reflects how beads behave on a physical soroban abacus.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit enhances the visual quality of the soroban abacus cards with two key improvements:
1. Dynamic Rod Bounds:
- Rod (gray column indicator) now dynamically calculates its bounds based on actual bead positions
- No longer extends past outermost beads, creating a cleaner, more professional appearance
- Accounts for hide-inactive option to only span visible beads
- Handles edge cases like zero with hidden beads (rod spans just reckoning bar area)
2. Improved Inactive Bead Spacing:
- Increased inactive bead separation from 5pt to 8pt for better visual distinction
- Active beads maintain original 1pt spacing (close to reckoning bar)
- Creates clearer visual separation between active and inactive states
Technical Changes:
- Complete rewrite of rod positioning logic with dynamic bounds calculation
- Pre-calculates all bead positions before drawing rod
- Rod spans from outermost heaven bead to outermost earth bead
- Maintains physical abacus logic while improving aesthetics
Visual Impact:
- Cleaner, more professional appearance
- Better distinction between active/inactive beads
- Rod perfectly fits within bead boundaries for each column
- Consistent across all formats (PDF, SVG, web)
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit includes two major improvements:
1. Physical Abacus Logic for Bead Positioning:
- Rewrote bead positioning to accurately model physical soroban behavior
- Active beads positioned close to reckoning bar in sequence
- Inactive beads positioned after active beads + gap, or after bar + gap if no active beads
- Consistent 5pt gaps maintain proper visual separation
- Fixes PDF/SVG positioning inconsistencies
2. Individual Digit Coloring for Place-Value Scheme:
- Fixed regression where numerals showed single color instead of per-digit colors
- Added get_colored_numeral_html() for proper multi-color numeral rendering
- Place-value scheme now colors each digit by its place value (ones=blue, tens=magenta, etc.)
- Other schemes (heaven-earth, alternating) use single color spans
- Maintains backwards compatibility with existing tests
Technical Changes:
- templates/flashcards.typ: Complete rewrite of bead positioning logic
- src/web_generator.py: New HTML generation for colored numerals
- tests/test_web_generation.py: Updated tests for new coloring behavior
- tests/references/: Updated visual regression baseline
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
fixup! fix: expand heaven-earth-gap to 30pt to accommodate equal 19pt gaps for both heaven and earth inactive beads
Adjust active earth bead positioning from 2pt to 1pt gap to match
active heaven beads distance from reckoning bar, ensuring consistent
active bead positioning for both heaven and earth beads.
Also updates visual regression reference image to reflect the
improved active bead positioning consistency.
All example images (PNG and SVG formats) have been regenerated to show
the improved heaven bead positioning where inactive heaven beads maintain
the same 19px gap from the reckoning bar as inactive earth beads.
This ensures all documentation examples are consistent with the positioning
fix implemented in commit a048e11 and maintains visual consistency across
all example formats.
Updated images:
- PNG examples: cutting-guides, cutting-registration, grid-6, grid-12, skip-5s
- SVG examples: basic-7, basic-123, circle-25, diamond-25, heaven-earth-78,
minimal-42, place-value-456, square-25
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
This updates the reference image used by visual regression tests to reflect
the corrected heaven bead positioning that ensures equal 19px gaps between
inactive beads and the reckoning bar for both heaven and earth beads.
The previous positioning fix (commit a048e11) corrected the visual layout
and this commit ensures the test suite maintains the improved positioning
as the baseline for future regression detection.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
