feat: add game board UI

[ONEONUORA]

🎲 Implement Interactive Monopoly Board Game Interface

📋 Summary

This PR introduces a fully functional Blockopoly board game interface built with Next.js, TypeScript, and Tailwind CSS. The implementation recreates the classic board game layout with accurate property positioning, color coding, and responsive design.

🚀 Features Added

• Complete Monopoly Board Layout: All 40 spaces including properties, utilities, and special squares
• Accurate Property Groups: Color-coded property groups (brown, light blue, pink, orange, red, yellow, green, blue)
• Special Squares: Corner squares (GO, Jail, Free Parking, Go to Jail), Chance/Community Chest cards
• Responsive Design: Centered layout that adapts to different screen sizes
• Enhanced Typography: Bold text styling with special emphasis on "FLEET ST" properties
• Proper Rotations: Text rotated appropriately for each side of the board

🏗️ Technical Implementation

Architecture

• Component-based Structure: Modular PropertyCard component for reusability
• TypeScript Integration: Full type safety with proper interfaces
• Tailwind CSS Styling: Utility-first CSS approach for consistent design

Key Components

1. PropertyCard Component (components/property-card.tsx)

   • Handles different card types (property, corner, chance, utility, tax)
   • Dynamic color mapping for property groups
   • Conditional text styling for enhanced readability
   • Rotation support for proper board positioning

2. MonopolyBoard Component (monopoly-board.tsx)

   • Main board layout with 600x600px dimensions
   • Four property arrays for each side of the board
   • Absolute positioning for precise card placement
   • Dark theme matching the original design

Styling Highlights

• Color System: Comprehensive color mapping for all property groups
• Typography: Responsive font sizes (8px-4xl) with bold emphasis
• Layout: CSS Grid and Flexbox for precise positioning
• Theme: Dark background with high contrast for accessibility

🎨 Visual Features

• Property Color Bands: Each property displays its group color at the top
• Price Display: Property values shown in appropriate currency format
• Special Card Styling: Distinct appearance for Chance/Community Chest cards
• Corner Square Design: Larger squares for special board positions
• Center Branding: "MONOPOLY" title in the board center

📱 Responsive Design

• Mobile-friendly layout with proper scaling
• Maintains aspect ratio across different screen sizes
• Centered positioning with appropriate padding
• Touch-friendly card dimensions

🔧 Code Quality

• TypeScript: 100% type coverage with proper interfaces
• Component Reusability: Single PropertyCard component handles all card types
• Clean Architecture: Separation of concerns between layout and styling
• Maintainable Code: Clear naming conventions and organized structure

🧪 Testing Considerations

• All property names and prices accurately match classic Monopoly
• Color groups properly assigned and visually distinct
• Responsive behavior tested across viewport sizes
• Text readability verified at all rotation angles

🎯 Future Enhancements

• Add game piece tokens and dice
• Implement interactive gameplay mechanics
• Add hover effects and animations
• Include sound effects and music
• Add multiplayer functionality
• Implement game state management

🔍 Screenshots

The implementation accurately recreates the classic Monopoly board with:

• Proper property positioning and color coding
• Readable text at all orientations
• Professional dark theme styling
• Responsive layout for all devices

✅ Checklist

• Component architecture implemented
• TypeScript interfaces defined
• Responsive design tested
• Color coding verified
• Text styling optimized
• Cross-browser compatibility checked
• Code review completed
• Documentation updated

Closes: #6

[Yunusabdul38]

LGTM
Thanks for your contribution on Blockopoly @ONEONUORA