**Problem:**
- player-ownership.ts imported drizzle-orm and @/db at top level
- When RoomMemoryPairsProvider imported client-safe utilities, Webpack bundled ALL imports including database code
- This caused hydration error: "The 'original' argument must be of type Function"
- Node.js util.promisify was being called in browser context
**Solution:**
1. Created player-ownership.client.ts with ONLY client-safe utilities
- No database imports
- Safe to import from 'use client' components
- Contains: buildPlayerOwnershipFromRoomData(), buildPlayerMetadata(), helper functions
2. Updated player-ownership.ts to re-export client utilities and add server-only functions
- Re-exports everything from .client.ts
- Adds buildPlayerOwnershipMap() (async, database-backed)
- Safe to import from server components/API routes
3. Updated RoomMemoryPairsProvider to import from .client.ts
**Result:**
- No more hydration errors on /arcade/room
- Client bundle doesn't include database code
- Server code can still use both client and server utilities
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implemented a new complement arithmetic game with three distinct modes:
Practice Mode (Linear Track):
- Race against AI opponents on a straight track
- Fixed race goal with finish line
- Traditional racing format with visual progress indicators
Endless Circuit (Circular Track):
- Infinite laps around an oval track
- Continuous gameplay with lap tracking
- AI racers with personality-driven commentary system
Steam Sprint (Train Journey):
- 60-second timed challenge with momentum-based gameplay
- SVG railroad track with dynamic curved paths that vary by route
- Passenger delivery system with station stops
- Momentum decay mechanic balanced by skill level
- Animated sky gradient with time-of-day progression (dawn to night)
- Route progression system with 10 themed routes
- Enhanced pressure gauge and visual effects (steam, coal particles)
- Geographic landmarks themed to each route
Core Features:
- Adaptive difficulty system that learns user performance patterns
- Real-time feedback based on speed and accuracy
- Comprehensive state management with React Context
- Multiple track visualization systems (linear, circular, SVG-based)
- AI personality system with dynamic commentary
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Configure semantic-release for simultaneous publishing to both registries
- Update GitHub Actions workflow with dual authentication setup
- Enhanced documentation across all relevant files
- Package now publishes to both npm and GitHub Packages automatically
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Update CONTRIBUTING.md with detailed abacus-react package publishing workflow
- Add prominent NPM publishing section to root README
- Create .claude/AUTOMATED_WORKFLOWS.md for future Claude sessions
- Document commit format requirements: feat(abacus-react): for package releases
- Include troubleshooting info and current status (awaiting NPM_TOKEN)
This ensures future Claude sessions can automatically discover and use the
package publishing workflow without requiring explanation.
- Add comprehensive GitHub Actions workflow for automated Storybook deployments
- Deploy apps/web Storybook to gh-pages/web subdirectory
- Deploy packages/abacus-react Storybook to gh-pages/abacus-react subdirectory
- Create beautiful landing page with navigation to both Storybooks
- Add Component Documentation section to README with direct links
- Support both PR previews and main branch deployments
- Optimize build process with proper dependency management
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>
## 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>
Transform README from simple PDF generator description to comprehensive
documentation highlighting interactive web flashcards, quiz modes,
sorting challenges, multiple output formats, APIs, and educational features.
Major additions:
- Interactive web flashcards with quiz modes and sorting challenges
- Multiple output formats (PDF, PNG, SVG, HTML)
- REST API and Node.js integration documentation
- Comprehensive test coverage details
- Enhanced examples and feature categorization
- Updated project structure reflecting actual codebase
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create templates/single-card.typ for individual card rendering
- Includes local copy of create-colored-numeral function
- Supports transparent backgrounds and exact card dimensions
- Used by PNG/SVG generation to avoid PDF intermediate
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add 'make examples' to regenerate README images
- Add 'make verify-examples' for CI verification
- Create GitHub Action to verify examples are up to date
- Improve generate_examples.py with better error handling
- Add update-examples.sh convenience script
- Document development workflow in README
This ensures README examples always match the actual code output.
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
- Generate examples showing cutting guides and registration marks
- Add 'Printing Features' section to README
- Show full-page cutting guides for accurate card separation
- Include example with both cutting guides and registration marks
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
- Create generate_examples.py script to convert PDFs to PNGs
- Generate example images showcasing all major features
- Add image gallery to README showing:
- Basic soroban/numeral pairs
- Color schemes and colored numerals
- Different bead shapes
- Various layouts and options
- Include front/back examples for double-sided cards
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
- Document all new features (colors, shapes, scaling, skip counting)
- Add Node.js/TypeScript integration section
- Update command-line options documentation
- Include API usage examples
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
- Clarify page ordering with detailed comments (fronts on odd, backs on even)
- Add PDF metadata for better document properties
- Improve qpdf linearization with object stream preservation
- Document duplex printing behavior in README
- Ensure consistent front/back pairing with explicit pagebreaks
The PDF now clearly alternates between soroban diagrams (odd pages)
and numerals (even pages) for reliable duplex printing with long-edge
binding.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Thomas Hallock