react-native-chess-kit 0.5.2 → 0.5.3

package/src/static-board.tsx

@@ -1,187 +1,186 @@
-import React, { useState, useCallback, useMemo } from 'react';
-import { View, type LayoutChangeEvent } from 'react-native';
-
-import type { StaticBoardProps, ChessColor, PieceCode } from './types';
-import { DEFAULT_BOARD_COLORS, DEFAULT_LAST_MOVE_COLOR, COORDINATE_GUTTER_SCALE } from './constants';
-import { DefaultPieceSet } from './pieces';
-import { useBoardPieces, squareToXY } from './use-board-pieces';
-import { BoardBackground } from './board-background';
-import { BoardCoordinates } from './board-coordinates';
-import { BoardHighlights } from './board-highlights';
-import { BoardArrows } from './board-arrows';
-import { BoardAnnotations } from './board-annotations';
-
-/**
- * Non-interactive chess board — optimized for lists, thumbnails, and analysis previews.
- *
- * No gesture handler, no drag ghost, no legal move dots.
- * Just: background + coordinates + highlights + pieces + arrows + annotations.
- *
- * Significantly lighter than the full Board component.
- */
-export const StaticBoard = React.memo(function StaticBoard({
-  fen,
-  orientation = 'white',
-  boardSize: boardSizeProp,
-  colors,
-  coordinatePosition: coordinatePositionProp,
-  withCoordinates,
-  renderPiece,
-  pieceSet,
-  lastMove,
-  highlights,
-  arrows,
-  annotations,
-}: StaticBoardProps) {
-  // --- Auto-sizing via onLayout when boardSize not provided ---
-  const [measuredSize, setMeasuredSize] = useState(0);
-  const handleLayout = useCallback((e: LayoutChangeEvent) => {
-    const { width, height } = e.nativeEvent.layout;
-    setMeasuredSize(Math.min(width, height));
-  }, []);
-
-  const outerSize = boardSizeProp ?? measuredSize;
-  const boardColors = colors ?? DEFAULT_BOARD_COLORS;
-
-  // Resolve coordinate position: new prop > legacy boolean > 'none'
-  const coordinatePosition = coordinatePositionProp
-    ?? (withCoordinates ? 'inside' : 'none');
-  const isOutside = coordinatePosition === 'outside';
-  const isCoordVisible = coordinatePosition !== 'none';
-
-  const gutterWidth = isOutside ? Math.round((outerSize / 8) * COORDINATE_GUTTER_SCALE) : 0;
-  const boardSize = isOutside ? outerSize - gutterWidth : outerSize;
-  const squareSize = boardSize / 8;
-
-  // --- Piece data from FEN ---
-  const pieces = useBoardPieces(fen);
-
-  // --- Resolve piece renderer: renderPiece > pieceSet > DefaultPieceSet ---
-  const resolvedRenderer = useMemo(() => {
-    if (renderPiece) return renderPiece;
-    const set = pieceSet ?? DefaultPieceSet;
-    return (code: string, size: number) => {
-      const renderer = set[code as PieceCode];
-      if (renderer) return renderer(size);
-      // Fallback for unknown piece codes
-      return <View style={{ width: size, height: size }} />;
-    };
-  }, [renderPiece, pieceSet]);
-
-  // If no size yet (auto-sizing), render invisible container for measurement
-  if (outerSize === 0) {
-    return (
-      <View style={{ flex: 1, aspectRatio: 1 }} onLayout={handleLayout} />
-    );
-  }
-
-  const boardContent = (
-    <View
-      style={isOutside
-        ? { width: boardSize, height: boardSize, position: 'absolute', top: 0, right: 0 }
-        : { width: boardSize, height: boardSize }}
-      onLayout={!isOutside && !boardSizeProp ? handleLayout : undefined}
-      accessibilityLabel="Chess board"
-      accessibilityRole="image"
-    >
-      {/* Layer 1: Board background */}
-      <BoardBackground
-        boardSize={boardSize}
-        lightColor={boardColors.light}
-        darkColor={boardColors.dark}
-      />
-
-      {/* Layer 2: Inside coordinates */}
-      {isCoordVisible && !isOutside && (
-        <BoardCoordinates
-          boardSize={boardSize}
-          orientation={orientation}
-          lightColor={boardColors.light}
-          darkColor={boardColors.dark}
-          withLetters
-          withNumbers
-          position="inside"
-        />
-      )}
-
-      {/* Layer 3: Highlights */}
-      <BoardHighlights
-        boardSize={boardSize}
-        orientation={orientation}
-        squareSize={squareSize}
-        lastMove={lastMove}
-        lastMoveColor={DEFAULT_LAST_MOVE_COLOR}
-        checkColor="transparent"
-        selectedColor="transparent"
-        premoveColor="transparent"
-        highlights={highlights}
-      />
-
-      {/* Layer 4: Pieces (static — no animation needed) */}
-      <View
-        style={{ position: 'absolute', width: boardSize, height: boardSize }}
-        pointerEvents="none"
-      >
-        {pieces.map((piece) => {
-          const { x, y } = squareToXY(piece.square, squareSize, orientation);
-          return (
-            <View
-              key={piece.id}
-              style={{
-                position: 'absolute',
-                width: squareSize,
-                height: squareSize,
-                transform: [{ translateX: x }, { translateY: y }],
-              }}
-            >
-              {resolvedRenderer(piece.code, squareSize)}
-            </View>
-          );
-        })}
-      </View>
-
-      {/* Layer 5: Arrows */}
-      {arrows && arrows.length > 0 && (
-        <BoardArrows
-          boardSize={boardSize}
-          orientation={orientation}
-          arrows={arrows}
-        />
-      )}
-
-      {/* Layer 6: Annotations */}
-      {annotations && annotations.length > 0 && (
-        <BoardAnnotations
-          boardSize={boardSize}
-          orientation={orientation}
-          squareSize={squareSize}
-          annotations={annotations}
-        />
-      )}
-    </View>
-  );
-
-  if (isOutside) {
-    return (
-      <View
-        style={{ width: outerSize, height: boardSize + gutterWidth }}
-        onLayout={boardSizeProp ? undefined : handleLayout}
-      >
-        {boardContent}
-
-        <BoardCoordinates
-          boardSize={boardSize}
-          orientation={orientation}
-          lightColor={boardColors.light}
-          darkColor={boardColors.dark}
-          withLetters
-          withNumbers
-          position="outside"
-          gutterWidth={gutterWidth}
-        />
-      </View>
-    );
-  }
-
-  return boardContent;
-});
+import React, { useState, useCallback, useMemo } from 'react';
+import { View, type LayoutChangeEvent } from 'react-native';
+
+import type { StaticBoardProps, PieceCode } from './types';
+import {
+  DEFAULT_BOARD_COLORS,
+  DEFAULT_LAST_MOVE_COLOR,
+  COORDINATE_GUTTER_SCALE,
+} from './constants';
+import { DefaultPieceSet } from './pieces';
+import { useBoardPieces, squareToXY } from './use-board-pieces';
+import { BoardBackground } from './board-background';
+import { BoardCoordinates } from './board-coordinates';
+import { BoardHighlights } from './board-highlights';
+import { BoardArrows } from './board-arrows';
+import { BoardAnnotations } from './board-annotations';
+
+/**
+ * Non-interactive chess board — optimized for lists, thumbnails, and analysis previews.
+ *
+ * No gesture handler, no drag ghost, no legal move dots.
+ * Just: background + coordinates + highlights + pieces + arrows + annotations.
+ *
+ * Significantly lighter than the full Board component.
+ */
+export const StaticBoard = React.memo(function StaticBoard({
+  fen,
+  orientation = 'white',
+  boardSize: boardSizeProp,
+  colors,
+  coordinatePosition: coordinatePositionProp,
+  withCoordinates,
+  renderPiece,
+  pieceSet,
+  lastMove,
+  highlights,
+  arrows,
+  annotations,
+}: StaticBoardProps) {
+  // --- Auto-sizing via onLayout when boardSize not provided ---
+  const [measuredSize, setMeasuredSize] = useState(0);
+  const handleLayout = useCallback((e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    setMeasuredSize(Math.min(width, height));
+  }, []);
+
+  const outerSize = boardSizeProp ?? measuredSize;
+  const boardColors = colors ?? DEFAULT_BOARD_COLORS;
+
+  // Resolve coordinate position: new prop > legacy boolean > 'none'
+  const coordinatePosition = coordinatePositionProp ?? (withCoordinates ? 'inside' : 'none');
+  const isOutside = coordinatePosition === 'outside';
+  const isCoordVisible = coordinatePosition !== 'none';
+
+  const gutterWidth = isOutside ? Math.round((outerSize / 8) * COORDINATE_GUTTER_SCALE) : 0;
+  const boardSize = isOutside ? outerSize - gutterWidth : outerSize;
+  const squareSize = boardSize / 8;
+
+  // --- Piece data from FEN ---
+  const pieces = useBoardPieces(fen);
+
+  // --- Resolve piece renderer: renderPiece > pieceSet > DefaultPieceSet ---
+  const resolvedRenderer = useMemo(() => {
+    if (renderPiece) return renderPiece;
+    const set = pieceSet ?? DefaultPieceSet;
+    return (code: string, size: number) => {
+      const renderer = set[code as PieceCode];
+      if (renderer) return renderer(size);
+      // Fallback for unknown piece codes
+      return <View style={{ width: size, height: size }} />;
+    };
+  }, [renderPiece, pieceSet]);
+
+  // If no size yet (auto-sizing), render invisible container for measurement
+  if (outerSize === 0) {
+    return <View style={{ flex: 1, aspectRatio: 1 }} onLayout={handleLayout} />;
+  }
+
+  const boardContent = (
+    <View
+      style={
+        isOutside
+          ? { width: boardSize, height: boardSize, position: 'absolute', top: 0, right: 0 }
+          : { width: boardSize, height: boardSize }
+      }
+      onLayout={!isOutside && !boardSizeProp ? handleLayout : undefined}
+      accessibilityLabel="Chess board"
+      accessibilityRole="image"
+    >
+      {/* Layer 1: Board background */}
+      <BoardBackground
+        boardSize={boardSize}
+        lightColor={boardColors.light}
+        darkColor={boardColors.dark}
+      />
+
+      {/* Layer 2: Inside coordinates */}
+      {isCoordVisible && !isOutside && (
+        <BoardCoordinates
+          boardSize={boardSize}
+          orientation={orientation}
+          lightColor={boardColors.light}
+          darkColor={boardColors.dark}
+          withLetters
+          withNumbers
+          position="inside"
+        />
+      )}
+
+      {/* Layer 3: Highlights */}
+      <BoardHighlights
+        boardSize={boardSize}
+        orientation={orientation}
+        squareSize={squareSize}
+        lastMove={lastMove}
+        lastMoveColor={DEFAULT_LAST_MOVE_COLOR}
+        checkColor="transparent"
+        selectedColor="transparent"
+        premoveColor="transparent"
+        highlights={highlights}
+      />
+
+      {/* Layer 4: Pieces (static — no animation needed) */}
+      <View
+        style={{ position: 'absolute', width: boardSize, height: boardSize }}
+        pointerEvents="none"
+      >
+        {pieces.map((piece) => {
+          const { x, y } = squareToXY(piece.square, squareSize, orientation);
+          return (
+            <View
+              key={piece.id}
+              style={{
+                position: 'absolute',
+                width: squareSize,
+                height: squareSize,
+                transform: [{ translateX: x }, { translateY: y }],
+              }}
+            >
+              {resolvedRenderer(piece.code, squareSize)}
+            </View>
+          );
+        })}
+      </View>
+
+      {/* Layer 5: Arrows */}
+      {arrows && arrows.length > 0 && (
+        <BoardArrows boardSize={boardSize} orientation={orientation} arrows={arrows} />
+      )}
+
+      {/* Layer 6: Annotations */}
+      {annotations && annotations.length > 0 && (
+        <BoardAnnotations
+          boardSize={boardSize}
+          orientation={orientation}
+          squareSize={squareSize}
+          annotations={annotations}
+        />
+      )}
+    </View>
+  );
+
+  if (isOutside) {
+    return (
+      <View
+        style={{ width: outerSize, height: boardSize + gutterWidth }}
+        onLayout={boardSizeProp ? undefined : handleLayout}
+      >
+        {boardContent}
+
+        <BoardCoordinates
+          boardSize={boardSize}
+          orientation={orientation}
+          lightColor={boardColors.light}
+          darkColor={boardColors.dark}
+          withLetters
+          withNumbers
+          position="outside"
+          gutterWidth={gutterWidth}
+        />
+      </View>
+    );
+  }
+
+  return boardContent;
+});

package/src/themes.ts

@@ -1,129 +1,129 @@
-import type { BoardTheme, BoardColors } from './types';
-
-// ---------------------------------------------------------------------------
-// Board color presets (matching popular chess platforms)
-// ---------------------------------------------------------------------------
-
-const greenTheme: BoardTheme = {
-  name: 'Green',
-  board: { light: '#eeeed2', dark: '#769656' },
-  lastMove: 'rgba(255, 255, 0, 0.4)',
-  check: 'rgba(235, 97, 80, 0.8)',
-  selected: 'rgba(20, 85, 200, 0.5)',
-  legalDot: 'rgba(0, 0, 0, 0.25)',
-  premove: 'rgba(20, 85, 200, 0.3)',
-  arrow: 'rgba(243, 166, 50, 0.85)',
-  coordinates: { light: '#769656', dark: '#eeeed2' },
-};
-
-const brownTheme: BoardTheme = {
-  name: 'Brown',
-  board: { light: '#f0d9b5', dark: '#b58863' },
-  lastMove: 'rgba(255, 255, 0, 0.4)',
-  check: 'rgba(235, 97, 80, 0.8)',
-  selected: 'rgba(20, 85, 200, 0.5)',
-  legalDot: 'rgba(0, 0, 0, 0.25)',
-  premove: 'rgba(20, 85, 200, 0.3)',
-  arrow: 'rgba(243, 166, 50, 0.85)',
-  coordinates: { light: '#b58863', dark: '#f0d9b5' },
-};
-
-const blueTheme: BoardTheme = {
-  name: 'Blue',
-  board: { light: '#dee3e6', dark: '#8ca2ad' },
-  lastMove: 'rgba(255, 255, 0, 0.4)',
-  check: 'rgba(235, 97, 80, 0.8)',
-  selected: 'rgba(20, 85, 200, 0.5)',
-  legalDot: 'rgba(0, 0, 0, 0.25)',
-  premove: 'rgba(20, 85, 200, 0.3)',
-  arrow: 'rgba(243, 166, 50, 0.85)',
-  coordinates: { light: '#8ca2ad', dark: '#dee3e6' },
-};
-
-const purpleTheme: BoardTheme = {
-  name: 'Purple',
-  board: { light: '#e8daf0', dark: '#9b72b0' },
-  lastMove: 'rgba(255, 255, 0, 0.4)',
-  check: 'rgba(235, 97, 80, 0.8)',
-  selected: 'rgba(20, 85, 200, 0.5)',
-  legalDot: 'rgba(0, 0, 0, 0.25)',
-  premove: 'rgba(20, 85, 200, 0.3)',
-  arrow: 'rgba(243, 166, 50, 0.85)',
-  coordinates: { light: '#9b72b0', dark: '#e8daf0' },
-};
-
-const grayTheme: BoardTheme = {
-  name: 'Gray',
-  board: { light: '#e0e0e0', dark: '#888888' },
-  lastMove: 'rgba(255, 255, 0, 0.4)',
-  check: 'rgba(235, 97, 80, 0.8)',
-  selected: 'rgba(20, 85, 200, 0.5)',
-  legalDot: 'rgba(0, 0, 0, 0.25)',
-  premove: 'rgba(20, 85, 200, 0.3)',
-  arrow: 'rgba(243, 166, 50, 0.85)',
-  coordinates: { light: '#888888', dark: '#e0e0e0' },
-};
-
-const woodTheme: BoardTheme = {
-  name: 'Wood',
-  board: { light: '#e6c88c', dark: '#a67c52' },
-  lastMove: 'rgba(255, 255, 0, 0.35)',
-  check: 'rgba(235, 97, 80, 0.8)',
-  selected: 'rgba(20, 85, 200, 0.5)',
-  legalDot: 'rgba(0, 0, 0, 0.2)',
-  premove: 'rgba(20, 85, 200, 0.3)',
-  arrow: 'rgba(243, 166, 50, 0.85)',
-  coordinates: { light: '#a67c52', dark: '#e6c88c' },
-};
-
-const iceTheme: BoardTheme = {
-  name: 'Ice',
-  board: { light: '#e8f0f8', dark: '#7ba0c4' },
-  lastMove: 'rgba(255, 255, 0, 0.35)',
-  check: 'rgba(235, 97, 80, 0.8)',
-  selected: 'rgba(20, 85, 200, 0.5)',
-  legalDot: 'rgba(0, 0, 0, 0.25)',
-  premove: 'rgba(20, 85, 200, 0.3)',
-  arrow: 'rgba(243, 166, 50, 0.85)',
-  coordinates: { light: '#7ba0c4', dark: '#e8f0f8' },
-};
-
-const tournamentTheme: BoardTheme = {
-  name: 'Tournament',
-  board: { light: '#fffff0', dark: '#3d945e' },
-  lastMove: 'rgba(255, 255, 0, 0.4)',
-  check: 'rgba(235, 97, 80, 0.8)',
-  selected: 'rgba(20, 85, 200, 0.5)',
-  legalDot: 'rgba(0, 0, 0, 0.25)',
-  premove: 'rgba(20, 85, 200, 0.3)',
-  arrow: 'rgba(243, 166, 50, 0.85)',
-  coordinates: { light: '#3d945e', dark: '#fffff0' },
-};
-
-// ---------------------------------------------------------------------------
-// Exports
-// ---------------------------------------------------------------------------
-
-/** All built-in board themes */
-export const BOARD_THEMES = {
-  green: greenTheme,
-  brown: brownTheme,
-  blue: blueTheme,
-  purple: purpleTheme,
-  gray: grayTheme,
-  wood: woodTheme,
-  ice: iceTheme,
-  tournament: tournamentTheme,
-} as const;
-
-/** Shorthand board color presets (just light/dark, no overlay colors) */
-export const BOARD_COLORS: Record<keyof typeof BOARD_THEMES, BoardColors> = {
-  green: greenTheme.board,
-  brown: brownTheme.board,
-  blue: blueTheme.board,
-  purple: purpleTheme.board,
-  gray: grayTheme.board,
-  wood: woodTheme.board,
-  ice: iceTheme.board,
-  tournament: tournamentTheme.board,
-};
+import type { BoardTheme, BoardColors } from './types';
+
+// ---------------------------------------------------------------------------
+// Board color presets (matching popular chess platforms)
+// ---------------------------------------------------------------------------
+
+const greenTheme: BoardTheme = {
+  name: 'Green',
+  board: { light: '#eeeed2', dark: '#769656' },
+  lastMove: 'rgba(255, 255, 0, 0.4)',
+  check: 'rgba(235, 97, 80, 0.8)',
+  selected: 'rgba(20, 85, 200, 0.5)',
+  legalDot: 'rgba(0, 0, 0, 0.25)',
+  premove: 'rgba(20, 85, 200, 0.3)',
+  arrow: 'rgba(243, 166, 50, 0.85)',
+  coordinates: { light: '#769656', dark: '#eeeed2' },
+};
+
+const brownTheme: BoardTheme = {
+  name: 'Brown',
+  board: { light: '#f0d9b5', dark: '#b58863' },
+  lastMove: 'rgba(255, 255, 0, 0.4)',
+  check: 'rgba(235, 97, 80, 0.8)',
+  selected: 'rgba(20, 85, 200, 0.5)',
+  legalDot: 'rgba(0, 0, 0, 0.25)',
+  premove: 'rgba(20, 85, 200, 0.3)',
+  arrow: 'rgba(243, 166, 50, 0.85)',
+  coordinates: { light: '#b58863', dark: '#f0d9b5' },
+};
+
+const blueTheme: BoardTheme = {
+  name: 'Blue',
+  board: { light: '#dee3e6', dark: '#8ca2ad' },
+  lastMove: 'rgba(255, 255, 0, 0.4)',
+  check: 'rgba(235, 97, 80, 0.8)',
+  selected: 'rgba(20, 85, 200, 0.5)',
+  legalDot: 'rgba(0, 0, 0, 0.25)',
+  premove: 'rgba(20, 85, 200, 0.3)',
+  arrow: 'rgba(243, 166, 50, 0.85)',
+  coordinates: { light: '#8ca2ad', dark: '#dee3e6' },
+};
+
+const purpleTheme: BoardTheme = {
+  name: 'Purple',
+  board: { light: '#e8daf0', dark: '#9b72b0' },
+  lastMove: 'rgba(255, 255, 0, 0.4)',
+  check: 'rgba(235, 97, 80, 0.8)',
+  selected: 'rgba(20, 85, 200, 0.5)',
+  legalDot: 'rgba(0, 0, 0, 0.25)',
+  premove: 'rgba(20, 85, 200, 0.3)',
+  arrow: 'rgba(243, 166, 50, 0.85)',
+  coordinates: { light: '#9b72b0', dark: '#e8daf0' },
+};
+
+const grayTheme: BoardTheme = {
+  name: 'Gray',
+  board: { light: '#e0e0e0', dark: '#888888' },
+  lastMove: 'rgba(255, 255, 0, 0.4)',
+  check: 'rgba(235, 97, 80, 0.8)',
+  selected: 'rgba(20, 85, 200, 0.5)',
+  legalDot: 'rgba(0, 0, 0, 0.25)',
+  premove: 'rgba(20, 85, 200, 0.3)',
+  arrow: 'rgba(243, 166, 50, 0.85)',
+  coordinates: { light: '#888888', dark: '#e0e0e0' },
+};
+
+const woodTheme: BoardTheme = {
+  name: 'Wood',
+  board: { light: '#e6c88c', dark: '#a67c52' },
+  lastMove: 'rgba(255, 255, 0, 0.35)',
+  check: 'rgba(235, 97, 80, 0.8)',
+  selected: 'rgba(20, 85, 200, 0.5)',
+  legalDot: 'rgba(0, 0, 0, 0.2)',
+  premove: 'rgba(20, 85, 200, 0.3)',
+  arrow: 'rgba(243, 166, 50, 0.85)',
+  coordinates: { light: '#a67c52', dark: '#e6c88c' },
+};
+
+const iceTheme: BoardTheme = {
+  name: 'Ice',
+  board: { light: '#e8f0f8', dark: '#7ba0c4' },
+  lastMove: 'rgba(255, 255, 0, 0.35)',
+  check: 'rgba(235, 97, 80, 0.8)',
+  selected: 'rgba(20, 85, 200, 0.5)',
+  legalDot: 'rgba(0, 0, 0, 0.25)',
+  premove: 'rgba(20, 85, 200, 0.3)',
+  arrow: 'rgba(243, 166, 50, 0.85)',
+  coordinates: { light: '#7ba0c4', dark: '#e8f0f8' },
+};
+
+const tournamentTheme: BoardTheme = {
+  name: 'Tournament',
+  board: { light: '#fffff0', dark: '#3d945e' },
+  lastMove: 'rgba(255, 255, 0, 0.4)',
+  check: 'rgba(235, 97, 80, 0.8)',
+  selected: 'rgba(20, 85, 200, 0.5)',
+  legalDot: 'rgba(0, 0, 0, 0.25)',
+  premove: 'rgba(20, 85, 200, 0.3)',
+  arrow: 'rgba(243, 166, 50, 0.85)',
+  coordinates: { light: '#3d945e', dark: '#fffff0' },
+};
+
+// ---------------------------------------------------------------------------
+// Exports
+// ---------------------------------------------------------------------------
+
+/** All built-in board themes */
+export const BOARD_THEMES = {
+  green: greenTheme,
+  brown: brownTheme,
+  blue: blueTheme,
+  purple: purpleTheme,
+  gray: grayTheme,
+  wood: woodTheme,
+  ice: iceTheme,
+  tournament: tournamentTheme,
+} as const;
+
+/** Shorthand board color presets (just light/dark, no overlay colors) */
+export const BOARD_COLORS: Record<keyof typeof BOARD_THEMES, BoardColors> = {
+  green: greenTheme.board,
+  brown: brownTheme.board,
+  blue: blueTheme.board,
+  purple: purpleTheme.board,
+  gray: grayTheme.board,
+  wood: woodTheme.board,
+  ice: iceTheme.board,
+  tournament: tournamentTheme.board,
+};