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

.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",

src/components/board/board.css

@@ -0,0 +1,55 @@
+/* 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;
+}
+
+@font-face {
+  font-family: 'ChessMerida';
+  src: url('/fonts/chess_merida_unicode.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}

src/components/board/capturedPieces.tsx

@@ -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/evaluationBar.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;