Commit Graph

5 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 07c25a2296 fix: lazy-load map data in know-your-world validator
Fix production error where know-your-world game failed to load sessions due to ES module imports in CommonJS context.

**Problem:**
- Validator imported maps.ts at module init time
- maps.ts statically imports @svg-maps/world and @svg-maps/usa (ES modules)
- Server (CommonJS) cannot require() ES modules synchronously
- Error: "Unexpected token 'export'"

**Solution:**
- Make validateMove() async (already supported by GameValidator interface)
- Lazy-load getFilteredMapData() only when needed via dynamic import()
- Prevents ES module loading until validator method is actually called
- Client-side code continues to work normally (bundled by Next.js)
- Mark know-your-world page as force-dynamic to avoid SSR issues

**Changes:**
- GameValidator.validateMove: Now supports Promise<ValidationResult>
- KnowYourWorldValidator: Use getFilteredMapDataLazy() wrapper
- session-manager: Await validator.validateMove()
- know-your-world page: Add dynamic = 'force-dynamic' export

Fixes the "Failed to fetch session" error for know-your-world game.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-20 07:24:27 -06:00
Thomas Hallock 3bf127f344 feat: add precision controls for tiny regions in Know Your World
Implement automatic cursor dampening, super zoom on hover, and quick-escape to make sub-pixel regions (Gibraltar 0.08px, Jersey 0.82px) clickable. Fix crosshair accuracy to match dampened cursor position, add excluded region visualization (gray pre-labeled), and increase unfound region contrast (0.3→0.7 opacity).

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-19 18:06:34 -06:00
Thomas Hallock 7bb03b8409 feat: add continent filtering to Know Your World game
Add continent-based filtering for the world map to make the game more playable by reducing visual clutter:

Continent Selection:
- Add continent selector to setup screen (only for world map)
- 7 continents + "All" option: Africa, Asia, Europe, North America, South America, Oceania, Antarctica
- Each continent button shows emoji and name

Map Filtering:
- Filter world map regions by selected continent using ISO 3166-1 country codes
- Calculate bounding box for filtered regions
- Automatically crop and scale viewBox to show only selected continent
- Add 10% padding around continent bounding box for better visibility

Technical Implementation:
- Create continents.ts with comprehensive country-to-continent mappings (256 countries)
- Add getFilteredMapData() function to filter regions and adjust viewBox
- Add calculateBoundingBox() to compute min/max coordinates from SVG paths
- Add selectedContinent field to game state and config (persisted to database)
- Add SET_CONTINENT move type and validator
- Update all map rendering components (StudyPhase, PlayingPhase, MapRenderer)

Benefits:
- Solves "too many small countries" problem on world map
- Allows focused study of specific geographic regions
- Dynamic viewBox adjustment provides optimal zoom level
- Maintains full world map option for comprehensive play

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-18 20:04:52 -06:00
Thomas Hallock 25e24a7cbc feat: add Know Your World geography quiz game
Add new arcade game for testing geography knowledge:

Game Features:
- 4 phases: Setup, Study, Playing, Results
- 3 multiplayer modes: Cooperative, Race, Turn-Based
- 2 maps: World countries, USA states
- Configurable study mode (0, 30, 60, or 120 seconds)
- Return to Setup and New Game options in game menu
- Small region labels with arrows for improved visibility

Map Rendering:
- 8-color deterministic palette with hash-based assignment
- Opacity-based states (20-27% unfound, 100% found)
- Enhanced label visibility with text shadows
- Smart bounding box calculation for small regions
- Supports both easy (outlines always visible) and hard (outlines on hover/found) difficulty

Game Modes:
- Cooperative: All players work together to find all regions
- Race: First to click gets the point
- Turn-Based: Players take turns finding regions

Study Phase:
- Optional timed study period before quiz starts
- Shows all region labels for memorization
- Countdown timer with skip option

Dependencies:
- Add @svg-maps/world and @svg-maps/usa packages

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-18 20:04:52 -06:00