refactor(board): optimize rendering, refine interactions, and fix state 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

Author: Klimbar

.gitignore

@@ -20,3 +20,5 @@ tsconfig.tsbuildinfo
 .cdk.staging
 cdk.out
 cdk.context.json
+
+/docs

bench.js

@@ -0,0 +1,24 @@
+const { Chess } = require('chess.js');
+const c = new Chess();
+for(let i=0; i<40; i++) {
+  const moves = c.moves();
+  c.move(moves[Math.floor(Math.random() * moves.length)]);
+}
+const pgn = c.pgn();
+const history = c.history({verbose:true});
+
+console.time('loadPgn');
+for(let i=0; i<100; i++) {
+  const c2 = new Chess();
+  c2.loadPgn(pgn);
+}
+console.timeEnd('loadPgn');
+
+console.time('replayHistory');
+for(let i=0; i<100; i++) {
+  const c3 = new Chess();
+  for(const m of history) {
+    c3.move(m);
+  }
+}
+console.timeEnd('replayHistory');

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "license": "GPL-3.0-only",
   "scripts": {
-    "dev": "next dev --turbo",
+    "dev": "SENTRY_SUPPRESS_TURBOPACK_WARNING=1 next dev --turbo",
     "build": "next build",
     "start": "next start",
     "lint": "next lint && tsc --noEmit",

public/sounds/check.mp3

@@ -0,0 +1,48 @@
+/* Override react-chessboard's piece slide animation easing.
+   ease-out-cubic: snappy initial velocity, smooth deceleration. */
+[data-boardid] div[style*="transition: transform"] {
+  transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1) !important;
+  z-index: 300 !important;
+}
+
+/* Temporarily disable animations for zero-latency drops */
+.disable-piece-animations div[style*="transition: transform"] {
+  transition: none !important;
+}
+
+/* Piece cursor: hand on hover */
+[data-piece] {
+  cursor: grab !important;
+  touch-action: none !important; /* Prevent mobile page swipe on pieces */
+  -webkit-user-drag: none !important; /* Prevent browser-default image drag */
+}
+
+/* Disable text/element selection on the board */
+[data-boardid],
+[data-boardid] * {
+  user-select: none !important;
+  -webkit-user-select: none !important;
+}
+
+/* Piece return flight */
+.piece-return-ghost {
+  position: absolute;
+  pointer-events: none;
+  z-index: 15;
+  will-change: transform;
+  transition: transform 150ms cubic-bezier(0.33, 1, 0.68, 1);
+}
+
+/* Ensure react-chessboard promotion dialog rises above hardware-accelerated custom pieces */
+[data-boardid] > div:not([data-piece]):not([data-square]) {
+  z-index: 1000 !important;
+  transform: translateZ(1px);
+}
+
+/* Prevent the board container from cutting off the overflowing promotion dialog */
+[data-boardid],
+[data-boardid] div {
+  overflow: visible !important;
+  clip-path: none !important;
+  transform-style: preserve-3d !important;
+}

src/components/board/board.css

@@ -1,7 +1,7 @@
 import { getCapturedPieces, getMaterialDifference } from "@/lib/chess";
 import { Color } from "@/types/enums";
 import { Box, Grid2 as Grid, Stack, Typography } from "@mui/material";
-import { ReactElement, useMemo } from "react";
+import { ReactElement, useMemo, memo } from "react";
 
 export interface Props {
   fen: string;
@@ -10,7 +10,7 @@ export interface Props {
 
 const PIECE_SCALE = 0.55;
 
-export default function CapturedPieces({ fen, color }: Props) {
+const CapturedPieces = memo(function CapturedPieces({ fen, color }: Props) {
   const piecesComponents = useMemo(() => {
     const capturedPieces = getCapturedPieces(fen, color);
     return capturedPieces.map(({ piece, count }) =>
@@ -46,7 +46,7 @@ export default function CapturedPieces({ fen, color }: Props) {
       )}
     </Grid>
   );
-}
+});
 
 const getCapturedPiecesComponents = (
   pieceSymbol: string,
@@ -74,3 +74,5 @@ const getCapturedPiecesComponents = (
     </Stack>
   );
 };
+
+export default CapturedPieces;

src/components/board/capturedPieces.tsx

@@ -1,6 +1,6 @@
 import { Box, Grid2 as Grid, Typography } from "@mui/material";
 import { PrimitiveAtom, atom, useAtomValue } from "jotai";
-import { useEffect, useState } from "react";
+import { useEffect, useState, memo } from "react";
 import { getEvaluationBarValue } from "@/lib/chess";
 import { Color } from "@/types/enums";
 import { CurrentPosition } from "@/types/eval";
@@ -11,7 +11,7 @@ interface Props {
   currentPositionAtom?: PrimitiveAtom<CurrentPosition>;
 }
 
-export default function EvaluationBar({
+const EvaluationBar = memo(function EvaluationBar({
   height,
   boardOrientation,
   currentPositionAtom = atom({}),
@@ -107,4 +107,6 @@ export default function EvaluationBar({
       </Box>
     </Grid>
   );
-}
+});
+
+export default EvaluationBar;