1729418dc5
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> |
||
|---|---|---|
| .. | ||
| .claude | ||
| .storybook | ||
| __tests__ | ||
| content/blog | ||
| data | ||
| docs | ||
| drizzle | ||
| e2e | ||
| public | ||
| scripts | ||
| src | ||
| .dockerignore.test | ||
| .gitignore | ||
| CARD_SORTING_PORT_PLAN.md | ||
| COMPLEMENT_RACE_PORT_PLAN.md | ||
| DEVELOPMENT_STANDARDS.md | ||
| LINTING.md | ||
| README.md | ||
| biome.jsonc | ||
| drizzle.config.ts | ||
| eslint.config.js | ||
| next-env.d.ts | ||
| next.config.js | ||
| package.json | ||
| panda.config.ts | ||
| playwright.config.ts | ||
| pnpm-lock.yaml | ||
| server.js | ||
| svg-processing-test.js | ||
| test-arcade-api.sh | ||
| test-flashcards-final.pdf | ||
| test-flashcards.pdf | ||
| test-simplified.pdf | ||
| test_fullscreen_persistence.html | ||
| test_panda_simple.html | ||
| tsconfig.json | ||
| tsconfig.server.json | ||
| vitest.config.ts | ||