Refactor: Improve UI structure and review responsiveness

[daruoktab]

This commit introduces several refactoring changes to enhance the project's structure, maintainability, and ease of future UI development.

Key changes include:

• Modularization:

  • Extracted CapturedPiecesDisplay from App.tsx into its own component file (components/CapturedPiecesDisplay.tsx).

• App.tsx Refactoring:

  • Grouped useState hooks for better readability.
  • Reorganized handlers and useEffect hooks.
  • Extracted complex logic from handlers into new memoized helper functions:
    • getLegalMoves: Determines legal moves for a piece.
    • performMoveOnBoard: Applies a move to the board state. - calculateNewCastlingRights: Updates castling rights. This simplifies the main handlers (handleSquareClick, checkGameStatus).

• Layout Abstraction:

  • Introduced components/AppLayout.tsx to manage the main page layout (header, sidebars, main content area).
  • App.tsx now uses AppLayout for its structure, making App.tsx cleaner and the layout reusable.

• Code Readability:

  • Reviewed and reformatted long Tailwind CSS className strings in various components (App.tsx, AppLayout.tsx, SquareComponent.tsx, CapturedPiecesDisplay.tsx, NotationDisplay.tsx) using multi-line template literals for better readability.

• Responsiveness Review:

  • Conducted a thorough review of the application's responsiveness across components.
  • Confirmed that the existing Tailwind CSS-based responsive design is robust and effectively handles various screen sizes. No adjustments were needed.

These changes aim to create a more organized and maintainable codebase, facilitating future development and ensuring a consistent user experience.

[openhands-ai]

Looks like there are a few issues preventing this PR from being merged!

• GitHub Actions are failing:
  • NodeJS with Grunt

If you'd like me to help, just leave a comment, like

@OpenHands please fix the failing actions on PR #1

Feel free to include any additional details that might help me get this PR into a better state.

_{^{You can manage your notification settings}}