**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>
- Changed CreateSessionOptions.activePlayers from number[] to string[]
- Updated socket-server.ts fallback from [1] to [data.userId]
- Added debug logging to validateFlipCard to diagnose turn validation issues
This ensures that when a session is created without explicit activePlayers,
it uses the actual UUID of the requesting player instead of the numeric value 1.
- Restore @soroban/core and @soroban/client dependencies in apps/web
- Correct workspace configuration to include all existing packages
- Disable problematic example-server.ts to fix TypeScript build
- Update Dockerfile to copy all required package.json files
🤖 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>
- 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>
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>
Position inactive heaven beads at the top edge (bead-size/2) to maximize
their separation from the reckoning bar within the constraint of the
heaven section space.
This provides the best possible visual balance between inactive heaven
and earth beads while keeping active bead positioning intact:
- Inactive heaven: 6pt from top, 14pt gap from reckoning bar
- Active heaven: 13pt from top, just above reckoning bar
- Active earth: just below reckoning bar
- Inactive earth: large gap from reckoning bar at bottom
Updated all example images to show the optimized positioning.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Position inactive heaven beads much closer to top edge (7pt from top)
to create maximum visual separation from reckoning bar (13pt gap vs
previous 6pt gap).
This provides much better visual balance with the large gap that
inactive earth beads have from the reckoning bar, while keeping
heaven beads clearly in the upper portion of the soroban.
Updated all example images to show the maximized positioning.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Increased inactive heaven bead gap from 3pt to 8pt for better visual
balance with earth beads. Now positioned at 14pt from top vs
reckoning bar at 20pt, giving 6pt clearance.
This provides more proportional spacing compared to earth beads
while keeping heaven beads clearly above the reckoning bar.
Updated all example images to reflect the improved positioning.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
The previous fix used a fixed 5pt gap for heaven beads while earth beads
used a calculated gap of (bead-size + bead-spacing) + 5pt = 21pt.
This fix:
- Adds inactive-bead-gap variable for consistency
- Makes inactive heaven beads use same gap calculation as earth beads
- Now both heaven and earth inactive beads have visually equal spacing
- Updated all example images to show the corrected equal spacing
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Fix heaven bead positioning issue where inactive heaven beads appeared
too close to the reckoning bar. Now inactive heaven beads use the same
5pt gap as inactive earth beads for visual consistency.
Changes:
- Inactive heaven beads: moved from 5pt+bead-size/2 to bead-size/2+5pt gap
- Active heaven beads: fine-tuned to heaven-earth-gap-bead-size/2-1pt
- Updated example images to reflect corrected positioning
🤖 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>
- 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>
Thomas Hallock