feat: add Game Room feature with loading and settings component

[OSEH-svg]

Blockopoly Game Room Settings

Features

Game Room Settings Interface: Complete UI matching Figma designs
Context API State Management: Centralized state management for all game settings
Responsive Design: Fully responsive layout with modern glassmorphism effects
Custom Toggle Switches: Pixel-perfect toggle components matching the design
Loading States: Beautiful loading animation when starting the game
TypeScript Support: Full type safety throughout the application

📁 Project Structure
blockopoly-game-room/
├── app/
│ └── gameroom/
│ └── page.tsx # Game room route page
├── components/
│ ├── GameRoomContext.tsx # Context API for state management
│ ├── GameSettings.tsx # Main game settings UI
│ ├── GameLoading.tsx # Loading component
│ └── ToggleSwitch.tsx # Custom toggle switch component
├── styles/
│ └── globals.css # Global styles and animations
├── tailwind.config.js # Tailwind configuration
├── next.config.js # Next.js configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Dependencies and scripts
🎮 Game Settings Features
Game Room Configuration

Maximum Players: Adjustable from 2-6 players
Private Room: Toggle for private room access

🎯 State Management
The application uses React Context API for state management:

GameRoomProvider: Wraps the entire game room functionality
useGameRoom: Custom hook for accessing game room state
Actions: Typed actions for all state updates
Persistence: Settings are maintained throughout the session

🎨 Styling
Tailwind CSS: Utility-first CSS framework
Custom Animations: Loading spinners, button hover effects
Glassmorphism: Modern UI design pattern
Responsive Design: Mobile-first approach

📋 Requirements Met
✅ Pixel-perfect UI matching Figma designs
✅ Context API for state management
✅ Responsive design implementation
✅ Play button with loading transition
✅ Clean, maintainable code structure
✅ TypeScript support throughout
✅ Build process passes without errors
✅ Route implementation at /app/gameroom/page.tsx

🎪 Demo Flow
Settings Page: Configure all game parameters
Loading Screen: Animated loading with progress indicators

[Yunusabdul38]

LGTM
Thanks for contributing to Blockopoly