Add selected piece highlighting to chess board

[Copilot]

Fixes #35 by adding visual highlighting for the currently selected chess piece.

Problem

Previously, only the available move destinations were highlighted when a piece was selected, but the selected piece itself had no visual indication. This made it difficult for users to clearly see which piece they had chosen, especially when multiple pieces could move to similar positions.

Solution

Added a new SelectedPieceHighlight styled component that displays a cyan background (#04d09fc1) for the currently selected piece. The implementation:

1. Created SelectedPieceHighlight component - A styled div with cyan background that matches the existing AvailableMoveDestination pattern
2. Added selection detection logic - Checks if the current tile contains the selected piece by comparing fileIndex and tileIndex with the stored selectedPiece state
3. Updated rendering - Displays the selected piece highlight alongside existing available move highlights

Visual Result

• Selected piece: Now highlighted with cyan/turquoise background
• Available moves: Continue to be highlighted with yellow/gold background (unchanged)
• Selection updates: Highlighting properly updates when clicking different pieces

The changes are minimal and follow existing code patterns, ensuring consistency with the current highlighting system while providing clear visual feedback to users.


Screenshot shows the white knight selected (cyan highlight) with its available moves highlighted in yellow

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.