Commit Graph

8 Commits

Author SHA1 Message Date
Thomas Hallock 1729418dc5 feat(know-your-world): full-screen layout with squish-through pointer lock escape
Implement full-screen, no-scrolling layout for Know Your World game with seamless
pointer lock UX:

## Layout Changes
- Add react-resizable-panels for vertical panel layout (info top, map bottom)
- Wrap playing phase with StandardGameLayout for 100vh no-scroll behavior
- Extract game info (prompt, progress, error) into compact GameInfoPanel
- Map panel fills remaining space with ResizeObserver for dynamic scaling
- SVG uses aspect-ratio to prevent distortion during panel resize

## Pointer Lock UX
- Remove obtrusive "Enable Precision Controls" prompt entirely
- First click silently enables pointer lock (seamless gameplay)
- Cursor squish-through escape at boundaries:
  - 40px dampen zone: movement slows quadratically near edges
  - 20px squish zone: cursor visually compresses (50%) and stretches (140%)
  - 2px escape threshold: pointer lock releases when squished through
- Custom cursor distortion provides visual feedback for escape progress

## Testing
- Unit tests: GameInfoPanel (20+ tests), PlayingPhase (15+ tests)
- E2E tests: Layout, panel resizing, magnifier behavior
- Update vitest config with Panda CSS aliases

## Technical Details
- ResizeObserver replaces window resize listeners for panel-aware updates
- Labels and magnifier recalculate on panel resize
- All magnifier math preserved (zoom, region indicator, coordinate transforms)
- Boundary dampening uses quadratic easing for natural feel
- Squish effect animates with 0.1s ease-out transition

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-22 21:50:13 -06:00
Thomas Hallock b36df3a40c fix(worksheets): ten-frames not rendering in mastery mode
Fixed two critical bugs preventing ten-frames from rendering:

1. **Mastery mode not handled** (typstGenerator.ts:61)
   - Code only checked for 'smart' | 'manual' modes
   - Mastery mode fell into manual path, tried to use boolean flags that don't exist
   - Resulted in all display options being `undefined`
   - Fix: Check for both 'smart' OR 'mastery' modes (both use displayRules)

2. **Typst array membership syntax** (already fixed in previous commit)
   - Used `(i in array)` which doesn't work in Typst
   - Changed to `array.contains(i)`

Added comprehensive unit tests (tenFrames.test.ts):
- Problem analysis tests (regrouping detection)
- Display rule evaluation tests
- Full Typst template generation tests
- Mastery mode specific tests
- All 14 tests now passing

Added debug logging to trace display rules resolution:
- displayRules.ts: Shows rule evaluation per problem
- typstGenerator.ts: Shows enriched problems and Typst data
- Helps diagnose future issues

The issue was that mastery mode (which uses displayRules like smart mode)
was being treated as manual mode (which uses boolean flags), resulting in
undefined display options.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-10 10:06:27 -06:00
Thomas Hallock cd75df7221 chore: restore stashed work from previous session
Recover all changes from stash including:
- Linter/formatter updates across codebase
- Settings permission updates for git checkout

This commit captures the complete state of work that was
stashed during the previous session's git operations.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-08 14:59:40 -06:00
Thomas Hallock f9af0f169e chore: biome formatting fixes 2025-10-11 07:17:38 -05:00
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 60d70cd2f2 style: apply Biome formatting to entire codebase
Run Biome formatter on all files to ensure consistent code style:
- Single quotes for JS/TS
- Double quotes for JSX
- 2-space indentation
- 100 character line width
- Semicolons as needed
- ES5 trailing commas

This is the result of running: npx @biomejs/biome format . --write

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-07 12:48:26 -05:00
Thomas Hallock 5d2083903e test: add comprehensive unit tests for refactored hooks and components
Added 56 unit tests covering:
- usePassengerAnimations hook (7 tests) - boarding/disembarking animations
- useTrainTransforms hook (14 tests) - train positioning and opacity
- useTrackManagement hook (12 tests) - track generation and route transitions
- TrainTerrainBackground component (10 tests) - terrain rendering
- GameHUD component (13 tests) - HUD overlay elements

Also configured vitest to properly inject React for JSX transforms, eliminating
the need for explicit React imports in test files and components.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-01 11:13:32 -05:00
Thomas Hallock a557362c9e feat: add comprehensive unit test suite for memory quiz functionality
- Add Vitest test framework setup with jsdom environment
- Create memory-quiz-utils.ts with testable prefix matching functions
- Add comprehensive test suite covering:
  - Prefix matching logic with found/unfound number exclusion
  - Edge cases for input validation
  - 55/555 bug scenario reproduction and fix
  - Integration test scenarios

Tests currently have 3 failures that need debugging in prefix logic.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-15 11:23:08 -05:00