Refactor(board): major performance improvements and interaction bug fixes#81
Open
Klimbar wants to merge 5 commits intoGuillaumeSD:mainfrom
Open
Refactor(board): major performance improvements and interaction bug fixes#81Klimbar wants to merge 5 commits intoGuillaumeSD:mainfrom
Klimbar wants to merge 5 commits intoGuillaumeSD:mainfrom
Conversation
…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
Owner
|
Thanks for your PR @Klimbar , I have read it quickly and it seems of high quality, good job 👍 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
CustomPiececomponent. 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.tsxfor the defaultmaestroking 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
currentPositionAtomusage 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:
Alt+ Right Click: Draws blue arrows with blue 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
filterto the King when in check. Also integrated a newcheck.mp3sound effect to trigger on checking moves.Stale State Prevention: Added FEN tracking to the
CurrentPositiontype. 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.cssto remove mobile swipe defaults (touch-action: none), improve piece dragging cursors, and fix z-index clipping issues with the promotion dialog.Added
bench.jsat the root directory for profilingchess.jshistory and PGN loading performance.Added a circle indicator to the capturable pieces after clicking on a piece.