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>
24 lines
600 B
TypeScript
24 lines
600 B
TypeScript
/// <reference types="vitest" />
|
|
|
|
import path from 'path'
|
|
import { defineConfig } from 'vitest/config'
|
|
|
|
export default defineConfig({
|
|
esbuild: {
|
|
jsxInject: `import React from 'react'`,
|
|
},
|
|
test: {
|
|
globals: true,
|
|
environment: 'jsdom',
|
|
setupFiles: ['./src/test/setup.ts'],
|
|
},
|
|
resolve: {
|
|
alias: {
|
|
'@': path.resolve(__dirname, './src'),
|
|
'@styled/css': path.resolve(__dirname, './styled-system/css'),
|
|
'@styled/jsx': path.resolve(__dirname, './styled-system/jsx'),
|
|
'@styled/patterns': path.resolve(__dirname, './styled-system/patterns'),
|
|
},
|
|
},
|
|
})
|