soroban-abacus-flashcards

Commit Graph

Author	SHA1	Message	Date
Thomas Hallock	bda5bc6c0e	fix: prevent database imports from being bundled into client code 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>	2025-10-10 11:40:46 -05:00
Thomas Hallock	ff42bcf653	feat: implement CSS-based hidden inactive beads with smooth opacity transitions - Add CSS opacity system for hidden inactive beads accessibility - Remove DOM exclusion logic - render all beads, use CSS for visibility - Implement three-state opacity system: * Default: inactive beads opacity 0 (hidden) * Abacus hover: inactive beads opacity 0.5 (semi-transparent) * Individual bead hover: opacity 1 (fully visible) - Add smooth 0.2s ease-in-out transitions for all opacity changes - Create comprehensive test story with side-by-side comparison - Maintain full click/gesture functionality for revealed beads - Clean CSS-only implementation with no JavaScript hover management 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-09-18 10:42:48 -05:00

Author

SHA1

Message

Date

Thomas Hallock

bda5bc6c0e

fix: prevent database imports from being bundled into client code

**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>

2025-10-10 11:40:46 -05:00

Thomas Hallock

ff42bcf653

feat: implement CSS-based hidden inactive beads with smooth opacity transitions

- Add CSS opacity system for hidden inactive beads accessibility
- Remove DOM exclusion logic - render all beads, use CSS for visibility
- Implement three-state opacity system:
  * Default: inactive beads opacity 0 (hidden)
  * Abacus hover: inactive beads opacity 0.5 (semi-transparent)
  * Individual bead hover: opacity 1 (fully visible)
- Add smooth 0.2s ease-in-out transitions for all opacity changes
- Create comprehensive test story with side-by-side comparison
- Maintain full click/gesture functionality for revealed beads
- Clean CSS-only implementation with no JavaScript hover management

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

2025-09-18 10:42:48 -05:00

2 Commits