#8 Pretty frontend

[timofeykafanov]

🎨 Frontend — New Design

• Game board — bigger cells (28px), no gaps, 3D beveled pieces with gradients, highlights and shadows
• Color consistency — unified hex-based piece colors across main board, hold/next previews and opponent views
• Opponent panels — horizontal layout (info + board side by side), larger and easier to read
• Welcome page — real player stats (games played, wins, win rate, high score) and recent game history from the API
• Auth forms — restyled login and register pages
• Loading states — reusable LoadingOverlay component with a Tetris-themed animation; used for navigation and socket operations (create / join / start / restart)
• Navigation — back button in the game header

🌐 Network

• LAN support — Vite auto-detects network IP (VITE_SERVER_URL=auto), dev server binds to 0.0.0.0
• CORS — multi-origin whitelist via comma-separated CLIENT_URL env variable
• Socket feedback — loading overlay while waiting for socket acknowledgements, with per-event error handling

📊 Game History (merged from game-history)

• Database — games and game_records tables with foreign keys and indexes
• API — GET /api/games with pagination and Swagger documentation
• Persistence — finished games are saved with player scores and placements
• Client service — gamesService fetches history and computes stats (wins, high score, average score, best place)

🧹 Cleanup

• Removed unused player-name input (name comes from auth)
• Added +types/ to .gitignore (auto-generated React Router types)
• Extracted three duplicate loading overlays into a single shared component

[Copilot]

Pull request overview

This pull request introduces a comprehensive frontend redesign with a "Red Tetris" theme, adds game history persistence with database-backed statistics, and improves LAN connectivity support. The changes span both client and server codebases with significant visual improvements and new API endpoints.

Changes:

• Frontend redesign: 3D beveled Tetris pieces with gradients, new welcome page with player stats and game history, redesigned authentication forms, and a reusable LoadingOverlay component
• Game history feature: Database tables for persisting finished games and player records, new /api/games endpoint with pagination, client service for fetching and computing statistics
• Network improvements: Automatic LAN IP detection for CORS whitelist, Vite auto-configuration for network access, server binding to 0.0.0.0

Reviewed changes

Copilot reviewed 33 out of 34 changed files in this pull request and generated 20 comments.

Show a summary per file

File	Description
server/migrations/002_create_games_and_records.sql	Adds games and game_records tables for persisting game history
server/core/GameService.ts	Implements game persistence logic with placement ranking
server/controllers/gamesController.ts	API controller for fetching user's game history with pagination
server/routes/games.ts	Route definition with Swagger documentation for games API
server/routes/pagination.ts	Generic pagination utility function
server/types/pagination.ts	TypeScript interface for paginated results
server/game/types.ts	Adds diedAt field to PlayerState for tracking death time
server/game/GameEngine.ts	Updates to set diedAt timestamp when players die
server/core/Player.ts	Adds diedAt field to Player class
server/net/socketHandlers.ts	Emits diedAt in state and calls GameService to persist finished games
server/db.ts	Adds test environment support and removes error re-throwing in migrations
server/app.ts	Implements dynamic CORS origins based on network IPs
server/tests/setup.test.ts	Test setup file with database cleanup hooks
server/tests/db.test.ts	Tests for database migration logic
server/package.json	Adds proxyquire dev dependency and updates test command
client/app/services/games.ts	Service for fetching game history and computing stats
client/app/services/auth.ts	Updates API_URL configuration
client/app/welcome/welcome.tsx	Complete redesign with stats dashboard and recent games list
client/app/routes/game.tsx	3D piece styling, larger cells, improved layout, back button
client/app/routes/home.tsx	Updates page metadata
client/app/components/LoadingOverlay.tsx	Reusable loading overlay with Tetris-themed animation
client/app/components/auth/LoginForm.tsx	Redesigned login form with gradient styling
client/app/components/auth/RegisterForm.tsx	Redesigned registration form with gradient styling
client/app/components/auth/ProtectedRoute.tsx	Uses LoadingOverlay instead of inline loading UI
client/app/components/auth/PublicOnlyRoute.tsx	Uses LoadingOverlay instead of inline loading UI
client/app/root.tsx	Adds global LoadingOverlay for navigation states
client/app/app.css	Updates background gradient
client/vite.config.ts	Implements auto-detection of network IP for VITE_SERVER_URL
client/package.json	Changes package type to 'module' and updates dev script for 0.0.0.0 binding
client/.gitignore	Adds +types/ to ignore auto-generated React Router types
.env.example	Updates with test database config and new port defaults
.devcontainer/start-dev.sh	Creates test database during setup
pnpm-lock.yaml	Adds proxyquire and related dependencies

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[LuckyIntegral]

Well, the interface works, but it looks way too "vibecoded", and a few tiny things:

• Please delete all emojis and gradients from the CSS, or at least don't use the purple-blue copilot ones.
• Disable the input form when a player joins the game or creates one.
• Start the transition when a player presses the right button and continue until he releases it, the default short pause after pressing the button should be removed (If it's too difficult to implement, feel free to skip it)