Skip to content

Refactor(board): major performance improvements and interaction bug fixes#81

Open
Klimbar wants to merge 5 commits intoGuillaumeSD:mainfrom
Klimbar:main
Open

Refactor(board): major performance improvements and interaction bug fixes#81
Klimbar wants to merge 5 commits intoGuillaumeSD:mainfrom
Klimbar:main

Conversation

@Klimbar
Copy link

@Klimbar Klimbar commented Mar 3, 2026

This PR introduces a major overhaul to the chessboard rendering logic, significantly improving performance, fixing interaction bugs, and adding new shortcut features for a smoother gameplay and analysis experience.

  • Custom Piece Rendering: Replaced the default piece renderer with a highly optimized CustomPiece component. This prevents unnecessary re-renders across the board during interactions and uses hardware acceleration (translateZ) for z-index management.

  • Preloaded Assets: Added <link rel="preload"> to _document.tsx for the default maestro king and pawn SVGs, drastically cutting down the perceived initial load time.

  • Zero-Latency Drops: Dynamically disables piece transition animations when a piece is dropped to ensure instantaneous visual snapping.

  • Jotai State Granularity: Refactored currentPositionAtom usage to derive primitive values, preventing the board from re-rendering every time the complex engine evaluation object updates.

  • Drag Cancellation Fix: Fixed a bug where a right-click during a piece drag would incorrectly drop the piece if it's a movable square. Implemented a custom ghost-piece system animateReturnFlight() to smoothly fly the piece back to its origin square upon cancellation.

  • Annotation Modifiers:

    • `Ctrl + Right Click: Draws red arrows with yellow squares.
    • Alt + Right Click: Draws blue arrows with blue squares.
    • Default Right Click remains yellow arrows with red squares.
  • Spacebar Best Move Shortcut: Implemented a global keyboard listener (ignoring input fields) that allows users to instantly execute the engine's current top recommended move by pressing the spacebar.

  • Check Visuals and Audio: Added a red drop-shadow filter to the King when in check. Also integrated a new check.mp3 sound effect to trigger on checking moves.

  • Stale State Prevention: Added FEN tracking to the CurrentPosition type. This ensures that old engine lines and previous opening names don't briefly flash on the UI during rapid, multi-move sequences.

  • CSS Improvements: Added board.css to remove mobile swipe defaults (touch-action: none), improve piece dragging cursors, and fix z-index clipping issues with the promotion dialog.

  • Added bench.js at the root directory for profiling chess.js history and PGN loading performance.

  • Added a circle indicator to the capturable pieces after clicking on a piece.

…te bugs

This commit introduces a major overhaul to the chessboard rendering logic, significantly improving performance, fixing interaction bugs, and adding new shortcut features for a smoother gameplay and analysis experience.

- **Custom Piece Rendering**: Replaced the default piece renderer with a highly optimized `CustomPiece` component. This prevents unnecessary re-renders across the board during interactions and uses hardware acceleration (`translateZ`) for z-index management.
- **Preloaded Assets**: Added `<link rel="preload">` to `_document.tsx` for the default `maestro` king and pawn SVGs, drastically cutting down the perceived initial load time.
- **Zero-Latency Drops**: Dynamically disables piece transition animations when a piece is dropped to ensure instantaneous visual snapping.
- **Jotai State Granularity**: Refactored `currentPositionAtom` usage to derive primitive values, preventing the board from re-rendering every time the complex engine evaluation object updates.

- **Drag Cancellation Fix**: Fixed a bug where a right-click during a piece drag would incorrectly drop the piece if it's a movable square. Implemented a custom ghost-piece system `animateReturnFlight()` to smoothly fly the piece back to its origin square upon cancellation.
- **Annotation Modifiers**:
  - `Ctrl + Right Click: Draws **red** arrows with **yellow** squares.
  - `Alt` + Right Click: Draws **blue** arrows with **blue** squares.
  - Default Right Click remains **yellow** arrows with **red** squares.
- **Spacebar Best Move Shortcut**: Implemented a global keyboard listener (ignoring input fields) that allows users to instantly execute the engine's current top recommended move by pressing the spacebar.

- **Check Visuals and Audio**: Added a red drop-shadow `filter` to the King when in check. Also integrated a new `check.mp3` sound effect to trigger on checking moves.
- **Stale State Prevention**: Added FEN tracking to the `CurrentPosition` type. This ensures that old engine lines and previous opening names don't briefly flash on the UI during rapid, multi-move sequences.
- **CSS Improvements**: Added `board.css` to remove mobile swipe defaults (`touch-action: none`), improve piece dragging cursors, and fix z-index clipping issues with the promotion dialog.

- Added `bench.js` at the root directory for profiling `chess.js` history and PGN loading performance.
- Added a circle indicator to the capturable pieces
@GuillaumeSD
Copy link
Owner

Thanks for your PR @Klimbar , I have read it quickly and it seems of high quality, good job 👍
Due to my lack of free time currently and the amount of changes this PR brings, bear in mind that I won't be able to review and handle it quickly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants