Scrabble Game
+Game board will appear here
+diff --git a/README.md b/README.md new file mode 100644 index 0000000..5d97d44 --- /dev/null +++ b/README.md @@ -0,0 +1,95 @@ +# Scrabble Game - HTML5 Interactive Multiplayer + +An interactive multiplayer HTML5 implementation of the classic Scrabble word game. + +## Project Structure + +``` +scrabble-game/ +├── index.html # Main game page +├── css/ +│ └── styles.css # Game styling and responsive design +├── js/ +│ └── game.js # Core game logic and initialization +└── README.md # Project documentation +``` + +## Features (Planned) + +- Interactive game board +- Multiplayer support (up to 4 players) +- Word validation +- Score calculation +- Responsive design for mobile and desktop +- Turn-based gameplay +- Tile management system + +## Getting Started + +1. Open `index.html` in a modern web browser +2. The game will initialize automatically +3. Check the browser console for initialization confirmation + +## Development Status + +### ✅ Completed +- Basic HTML5 project structure +- Responsive CSS styling +- JavaScript game object framework +- Mobile-friendly design + +### 🚧 In Progress +- Game board rendering +- Tile system implementation +- Player management + +### 📋 Planned +- Multiplayer functionality +- Dictionary integration +- Score tracking +- Game state persistence +- Sound effects +- Animations + +## Technical Stack + +- **HTML5** - Semantic markup and game structure +- **CSS3** - Styling with responsive design +- **Vanilla JavaScript (ES6)** - Game logic without external dependencies + +## Browser Compatibility + +- Chrome (latest) +- Firefox (latest) +- Safari (latest) +- Edge (latest) +- Mobile browsers (iOS Safari, Chrome Mobile) + +## Game Configuration + +The game configuration can be modified in `js/game.js`: + +```javascript +config: { + boardSize: 15, + maxPlayers: 4, + tilesPerPlayer: 7 +} +``` + +## Future Enhancements + +- Online multiplayer via WebSockets +- AI opponent +- Tournament mode +- Statistics tracking +- Custom word lists +- Theme customization + +## Contributing + +This project is part of the TEST-104 initiative to build an interactive multiplayer HTML5 game of Scrabble. + +## License + +This project is for educational purposes as part of the development workflow testing. \ No newline at end of file diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..5a3f04a --- /dev/null +++ b/css/styles.css @@ -0,0 +1,124 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + line-height: 1.6; + color: #333; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + min-height: 100vh; + display: flex; + justify-content: center; + align-items: center; + padding: 20px; +} + +.container { + background: white; + border-radius: 20px; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); + padding: 40px; + max-width: 900px; + width: 100%; + animation: fadeIn 0.5s ease-in; +} + +header { + text-align: center; + margin-bottom: 30px; +} + +.game-title { + font-size: 3rem; + color: #5a67d8; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); + font-weight: 700; + letter-spacing: 2px; +} + +.welcome-section { + text-align: center; + margin-bottom: 40px; +} + +.welcome-message { + font-size: 1.2rem; + color: #4a5568; + max-width: 600px; + margin: 0 auto; +} + +.game-container { + min-height: 400px; + background: #f7fafc; + border: 2px dashed #cbd5e0; + border-radius: 15px; + display: flex; + justify-content: center; + align-items: center; + padding: 20px; + transition: all 0.3s ease; +} + +.game-container:hover { + border-color: #9f7aea; + background: #faf5ff; +} + +.placeholder-text { + color: #a0aec0; + font-size: 1.1rem; + font-style: italic; +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(-20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@media (max-width: 768px) { + .game-title { + font-size: 2rem; + } + + .container { + padding: 30px 20px; + } + + .welcome-message { + font-size: 1rem; + } + + .game-container { + min-height: 300px; + } +} + +@media (max-width: 480px) { + .game-title { + font-size: 1.5rem; + letter-spacing: 1px; + } + + .container { + padding: 20px 15px; + border-radius: 10px; + } + + .welcome-message { + font-size: 0.9rem; + } + + .game-container { + min-height: 250px; + } +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..161bfd1 --- /dev/null +++ b/index.html @@ -0,0 +1,30 @@ + + +
+ + + +Game board will appear here
+