Build a React component that shows an 8x8 chessboard. When a user hovers or clicks on a square, highlight all the diagonal cells a bishop can move to. Clear highlights on mouse leave or new selection.
Requirements
- Render an 8×8 board = 64 cells.
- Each cell must use
role="gridcell"
- When the user hovers over a square, it:
- Highlights that cell with the CSS class "hovered"
- Highlights all diagonally reachable squares from the hovered cell using the CSS class
bishop-move
- Clear all highlights on mouse leave.
Edge Cases
-
Hover or click on (0,0)
→ Should highlight only the diagonal from (1,1) to (7,7)
-
Rapid hover on and off the board
→ Highlights should clear immediately when the cursor leaves
-
Multiple selections (hover/click repeatedly)
→ Only the latest bishop path should be visible; previous highlights should be cleared
-
Hover on a middle cell (e.g., 3,3)
→ Should highlight all 4 diagonals from that point, respecting board boundaries
Reference UI
