Skip to content

TEST-106: Create Static Scrabble Game Board with Grid Layout #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

TEST-106: Create Static Scrabble Game Board with Grid Layout #12

wants to merge 2 commits into from

Conversation

@ceedarcyrus
Copy link
Collaborator

@ceedarcyrus ceedarcyrus commented Aug 27, 2025

Summary

This PR implements the complete 15x15 Scrabble game board with proper grid layout and all special squares positioned correctly according to official Scrabble rules.

Changes Made

JavaScript Implementation (js/game.js)

  • Added comprehensive special squares configuration with exact positions
  • Implemented board generation logic creating 225 squares programmatically
  • Added helper functions for square type detection and labeling
  • Created coordinate system (A-O columns, 1-15 rows)
  • Implemented click handlers that log square coordinates to console
  • Stored board state in 2D array data structure

CSS Styling (css/styles.css)

  • Implemented CSS Grid layout for precise 15x15 board
  • Added distinct colors for all square types using CSS custom properties:
    • Regular squares: Light beige (#F5E6D3)
    • Triple Word Score: Dark red (#DC143C)
    • Double Word Score: Light pink (#FFB6C1)
    • Triple Letter Score: Dark blue (#00008B)
    • Double Letter Score: Light blue (#87CEEB)
    • Center star: Gold (#FFD700)
  • Created responsive design that works from mobile to desktop
  • Added smooth hover effects with scale and shadow
  • Styled coordinate labels with proper alignment

Special Squares Implementation

  • Triple Word Score (8 squares): A1, A8, A15, H1, H15, O1, O8, O15
  • Double Word Score (16 squares): Diagonal patterns plus center
  • Triple Letter Score (12 squares): Strategic positions
  • Double Letter Score (24 squares): Throughout the board
  • Center Star (1 square): H8 with star symbol (★)

Testing

  • ✅ 15x15 grid displays correctly with all 225 squares
  • ✅ All special squares are in correct Scrabble positions
  • ✅ Special squares have distinct colors and labels
  • ✅ Board is responsive and maintains aspect ratio
  • ✅ Coordinate labels (A-O, 1-15) are visible
  • ✅ Center star position is clearly marked
  • ✅ Click on any square logs its coordinates to console
  • ✅ Board configuration is stored in JavaScript data structure
  • ✅ Code is well-organized and commented

Related Issues

  • Part of TEST-104: Build an interactive multiplayer HTML5 game of Scrabble
  • Builds on TEST-105: Basic HTML5 project structure

Next Steps

The board is now ready for the next phases:

  • Tile placement functionality
  • Word validation
  • Scoring system
  • Multiplayer features

ceedarcyrus and others added 2 commits August 26, 2025 18:55
@ceedarcyrus @claude
Setup basic HTML5 project structure for Scrabble game
ff960be 
- Created index.html with proper HTML5 structure and viewport meta tag
- Added CSS styling with responsive design and gradient background
- Implemented JavaScript game initialization with console logging
- Created basic game object structure with config and placeholder methods
- Added README.md with project documentation
- Organized files in clear directory structure (css/, js/)
- All requirements met: centered title, welcome message, game container placeholder
- Tested and verified cross-browser compatibility and mobile responsiveness

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
@ceedarcyrus
Implement 15x15 Scrabble game board with special squares
5e2be19 
- Add complete board generation logic with 225 squares
- Implement all special square types (TWS, DWS, TLS, DLS, Center)
- Position special squares according to official Scrabble layout
- Add coordinate labels (A-O columns, 1-15 rows)
- Style board with distinct colors for each square type
- Implement responsive design for mobile/tablet/desktop
- Add hover effects and click handlers with coordinate logging
- Store board state in JavaScript data structure
- Use CSS Grid for precise layout control
- Add CSS custom properties for maintainable color scheme

All requirements from TEST-106 successfully implemented.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@ceedarcyrus