react-native-chess-kit 0.5.2 → 0.5.4

package/src/board-coordinates.tsx

@@ -1,192 +1,192 @@
-import React from 'react';
-import { View, Text } from 'react-native';
-
-import type { ChessColor, CoordinatePosition } from './types';
-
-type BoardCoordinatesProps = {
-  boardSize: number;
-  orientation: ChessColor;
-  lightColor: string;
-  darkColor: string;
-  withLetters: boolean;
-  withNumbers: boolean;
-  /** 'inside' overlays on edge squares, 'outside' renders in a gutter area. */
-  position?: 'inside' | 'outside';
-  /** Gutter width in pixels (only used when position='outside'). */
-  gutterWidth?: number;
-};
-
-const FILES_WHITE = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
-const FILES_BLACK = ['h', 'g', 'f', 'e', 'd', 'c', 'b', 'a'];
-const RANKS_WHITE = ['8', '7', '6', '5', '4', '3', '2', '1'];
-const RANKS_BLACK = ['1', '2', '3', '4', '5', '6', '7', '8'];
-
-/**
- * File letters (a-h) and rank numbers (1-8) drawn on or around the board.
- *
- * Two modes:
- * - **inside** (default): absolute-positioned inside each edge square, colors
- *   alternate to contrast with the square behind them.
- * - **outside**: rendered in a gutter area around the board. Rank numbers to
- *   the left, file letters along the bottom. Uses the dark square color.
- */
-export const BoardCoordinates = React.memo(function BoardCoordinates({
-  boardSize,
-  orientation,
-  lightColor,
-  darkColor,
-  withLetters,
-  withNumbers,
-  position = 'inside',
-  gutterWidth = 0,
-}: BoardCoordinatesProps) {
-  if (!withLetters && !withNumbers) return null;
-
-  const squareSize = boardSize / 8;
-  const files = orientation === 'white' ? FILES_WHITE : FILES_BLACK;
-  const ranks = orientation === 'white' ? RANKS_WHITE : RANKS_BLACK;
-
-  // ── Outside mode: labels in gutter area around the board ──
-  if (position === 'outside') {
-    const fontSize = gutterWidth * 0.65;
-    const textColor = darkColor;
-
-    return (
-      <>
-        {/* Rank numbers — left gutter, vertically centered on each row */}
-        {withNumbers && (
-          <View
-            style={{
-              position: 'absolute',
-              left: 0,
-              top: 0,
-              width: gutterWidth,
-              height: boardSize,
-            }}
-            pointerEvents="none"
-          >
-            {ranks.map((rank, row) => (
-              <View
-                key={`r-${rank}`}
-                style={{
-                  position: 'absolute',
-                  top: row * squareSize,
-                  width: gutterWidth,
-                  height: squareSize,
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-              >
-                <Text
-                  style={{
-                    fontSize,
-                    fontWeight: '600',
-                    color: textColor,
-                  }}
-                >
-                  {rank}
-                </Text>
-              </View>
-            ))}
-          </View>
-        )}
-
-        {/* File letters — bottom gutter, horizontally centered on each column */}
-        {withLetters && (
-          <View
-            style={{
-              position: 'absolute',
-              left: withNumbers ? gutterWidth : 0,
-              bottom: 0,
-              width: boardSize,
-              height: gutterWidth,
-            }}
-            pointerEvents="none"
-          >
-            {files.map((file, col) => (
-              <View
-                key={`f-${file}`}
-                style={{
-                  position: 'absolute',
-                  left: col * squareSize,
-                  width: squareSize,
-                  height: gutterWidth,
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-              >
-                <Text
-                  style={{
-                    fontSize,
-                    fontWeight: '600',
-                    color: textColor,
-                  }}
-                >
-                  {file}
-                </Text>
-              </View>
-            ))}
-          </View>
-        )}
-      </>
-    );
-  }
-
-  // ── Inside mode (default): absolute-positioned inside edge squares ──
-  const fontSize = squareSize * 0.22;
-  const padding = squareSize * 0.06;
-
-  return (
-    <View
-      style={{ position: 'absolute', width: boardSize, height: boardSize }}
-      pointerEvents="none"
-    >
-      {/* Rank numbers along left edge (inside each row's first square) */}
-      {withNumbers &&
-        ranks.map((rank, row) => {
-          const isLight = row % 2 === 0;
-          const textColor = isLight ? darkColor : lightColor;
-
-          return (
-            <Text
-              key={`r-${rank}`}
-              style={{
-                position: 'absolute',
-                left: padding,
-                top: row * squareSize + padding,
-                fontSize,
-                fontWeight: '700',
-                color: textColor,
-              }}
-            >
-              {rank}
-            </Text>
-          );
-        })}
-
-      {/* File letters along bottom edge (inside each column's last square) */}
-      {withLetters &&
-        files.map((file, col) => {
-          const isLight = (7 + col) % 2 === 0;
-          const textColor = isLight ? darkColor : lightColor;
-
-          return (
-            <Text
-              key={`f-${file}`}
-              style={{
-                position: 'absolute',
-                right: (7 - col) * squareSize + padding,
-                bottom: padding,
-                fontSize,
-                fontWeight: '700',
-                color: textColor,
-                textAlign: 'right',
-              }}
-            >
-              {file}
-            </Text>
-          );
-        })}
-    </View>
-  );
-});
+import React from 'react';
+import { View, Text } from 'react-native';
+
+import type { ChessColor } from './types';
+
+type BoardCoordinatesProps = {
+  boardSize: number;
+  orientation: ChessColor;
+  lightColor: string;
+  darkColor: string;
+  withLetters: boolean;
+  withNumbers: boolean;
+  /** 'inside' overlays on edge squares, 'outside' renders in a gutter area. */
+  position?: 'inside' | 'outside';
+  /** Gutter width in pixels (only used when position='outside'). */
+  gutterWidth?: number;
+};
+
+const FILES_WHITE = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
+const FILES_BLACK = ['h', 'g', 'f', 'e', 'd', 'c', 'b', 'a'];
+const RANKS_WHITE = ['8', '7', '6', '5', '4', '3', '2', '1'];
+const RANKS_BLACK = ['1', '2', '3', '4', '5', '6', '7', '8'];
+
+/**
+ * File letters (a-h) and rank numbers (1-8) drawn on or around the board.
+ *
+ * Two modes:
+ * - **inside** (default): absolute-positioned inside each edge square, colors
+ *   alternate to contrast with the square behind them.
+ * - **outside**: rendered in a gutter area around the board. Rank numbers to
+ *   the left, file letters along the bottom. Uses the dark square color.
+ */
+export const BoardCoordinates = React.memo(function BoardCoordinates({
+  boardSize,
+  orientation,
+  lightColor,
+  darkColor,
+  withLetters,
+  withNumbers,
+  position = 'inside',
+  gutterWidth = 0,
+}: BoardCoordinatesProps) {
+  if (!withLetters && !withNumbers) return null;
+
+  const squareSize = boardSize / 8;
+  const files = orientation === 'white' ? FILES_WHITE : FILES_BLACK;
+  const ranks = orientation === 'white' ? RANKS_WHITE : RANKS_BLACK;
+
+  // ── Outside mode: labels in gutter area around the board ──
+  if (position === 'outside') {
+    const fontSize = gutterWidth * 0.65;
+    const textColor = darkColor;
+
+    return (
+      <>
+        {/* Rank numbers — left gutter, vertically centered on each row */}
+        {withNumbers && (
+          <View
+            style={{
+              position: 'absolute',
+              left: 0,
+              top: 0,
+              width: gutterWidth,
+              height: boardSize,
+            }}
+            pointerEvents="none"
+          >
+            {ranks.map((rank, row) => (
+              <View
+                key={`r-${rank}`}
+                style={{
+                  position: 'absolute',
+                  top: row * squareSize,
+                  width: gutterWidth,
+                  height: squareSize,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <Text
+                  style={{
+                    fontSize,
+                    fontWeight: '600',
+                    color: textColor,
+                  }}
+                >
+                  {rank}
+                </Text>
+              </View>
+            ))}
+          </View>
+        )}
+
+        {/* File letters — bottom gutter, horizontally centered on each column */}
+        {withLetters && (
+          <View
+            style={{
+              position: 'absolute',
+              left: withNumbers ? gutterWidth : 0,
+              bottom: 0,
+              width: boardSize,
+              height: gutterWidth,
+            }}
+            pointerEvents="none"
+          >
+            {files.map((file, col) => (
+              <View
+                key={`f-${file}`}
+                style={{
+                  position: 'absolute',
+                  left: col * squareSize,
+                  width: squareSize,
+                  height: gutterWidth,
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                }}
+              >
+                <Text
+                  style={{
+                    fontSize,
+                    fontWeight: '600',
+                    color: textColor,
+                  }}
+                >
+                  {file}
+                </Text>
+              </View>
+            ))}
+          </View>
+        )}
+      </>
+    );
+  }
+
+  // ── Inside mode (default): absolute-positioned inside edge squares ──
+  const fontSize = squareSize * 0.22;
+  const padding = squareSize * 0.06;
+
+  return (
+    <View
+      style={{ position: 'absolute', width: boardSize, height: boardSize }}
+      pointerEvents="none"
+    >
+      {/* Rank numbers along left edge (inside each row's first square) */}
+      {withNumbers &&
+        ranks.map((rank, row) => {
+          const isLight = row % 2 === 0;
+          const textColor = isLight ? darkColor : lightColor;
+
+          return (
+            <Text
+              key={`r-${rank}`}
+              style={{
+                position: 'absolute',
+                left: padding,
+                top: row * squareSize + padding,
+                fontSize,
+                fontWeight: '700',
+                color: textColor,
+              }}
+            >
+              {rank}
+            </Text>
+          );
+        })}
+
+      {/* File letters along bottom edge (inside each column's last square) */}
+      {withLetters &&
+        files.map((file, col) => {
+          const isLight = (7 + col) % 2 === 0;
+          const textColor = isLight ? darkColor : lightColor;
+
+          return (
+            <Text
+              key={`f-${file}`}
+              style={{
+                position: 'absolute',
+                right: (7 - col) * squareSize + padding,
+                bottom: padding,
+                fontSize,
+                fontWeight: '700',
+                color: textColor,
+                textAlign: 'right',
+              }}
+            >
+              {file}
+            </Text>
+          );
+        })}
+    </View>
+  );
+});

package/src/board.tsx

@@ -9,12 +9,7 @@ import React, {
 } from 'react';
 import { View, type LayoutChangeEvent } from 'react-native';
 import { GestureDetector } from 'react-native-gesture-handler';
-import Animated, {
-  useSharedValue,
-  useAnimatedStyle,
-  withTiming,
-  FadeOut,
-} from 'react-native-reanimated';
+import { useSharedValue, withTiming, FadeOut } from 'react-native-reanimated';
 
 import type {
   BoardRef,
@@ -160,6 +155,7 @@ export const Board = forwardRef<BoardRef, BoardProps>(function Board(
     pieceExitAnimation,
 
     // Promotion
+    autoPromoteTo,
     onPromotion,
 
     // Callbacks
@@ -185,8 +181,9 @@ export const Board = forwardRef<BoardRef, BoardProps>(function Board(
   const boardColors = colors ?? DEFAULT_BOARD_COLORS;
 
   // Resolve coordinate position: new prop takes precedence over legacy booleans
-  const coordinatePosition = coordinatePositionProp
-    ?? (withLettersProp === false && withNumbersProp === false ? 'none' : 'inside');
+  const coordinatePosition =
+    coordinatePositionProp ??
+    (withLettersProp === false && withNumbersProp === false ? 'none' : 'inside');
   const isOutside = coordinatePosition === 'outside';
   const isCoordVisible = coordinatePosition !== 'none';
 
@@ -209,10 +206,7 @@ export const Board = forwardRef<BoardRef, BoardProps>(function Board(
     if (prevOrientationRef.current !== orientation) {
       prevOrientationRef.current = orientation;
       if (animateFlip) {
-        flipRotation.value = withTiming(
-          orientation === 'black' ? 180 : 0,
-          { duration: 300 },
-        );
+        flipRotation.value = withTiming(orientation === 'black' ? 180 : 0, { duration: 300 });
       } else {
         flipRotation.value = orientation === 'black' ? 180 : 0;
       }
@@ -253,11 +247,7 @@ export const Board = forwardRef<BoardRef, BoardProps>(function Board(
   // attacked, highlight it.
   const checkSquareState = useMemo(() => {
     try {
-      return detectCheckSquare(
-        internalFen,
-        () => boardState.isInCheck(),
-        boardState.getTurn,
-      );
+      return detectCheckSquare(internalFen, () => boardState.isInCheck(), boardState.getTurn);
     } catch {
       return null;
     }
@@ -331,18 +321,35 @@ export const Board = forwardRef<BoardRef, BoardProps>(function Board(
 
       // Check for promotion
       if (isPromotionMove(from, to)) {
-        if (onPromotion) {
-          const piece = pieces.find((p) => p.square === from);
-          const color = piece?.color ?? 'w';
-          setPromotionState({ from, to, color });
+        // 1. Auto-promote to a specific piece (no picker, no callback)
+        if (autoPromoteTo) {
+          const result = boardState.applyMove(from, to, autoPromoteTo);
+          if (result.applied && result.fen) {
+            setInternalFen(result.fen);
+          }
+          onMove?.({ from, to, promotion: autoPromoteTo });
           return;
         }
-        // Auto-promote to queen
-        const result = boardState.applyMove(from, to, 'q');
-        if (result.applied && result.fen) {
-          setInternalFen(result.fen);
+
+        // 2. Consumer handles promotion UI externally via callback
+        if (onPromotion) {
+          try {
+            const choice = await onPromotion(from, to);
+            const result = boardState.applyMove(from, to, choice);
+            if (result.applied && result.fen) {
+              setInternalFen(result.fen);
+            }
+            onMove?.({ from, to, promotion: choice });
+          } catch {
+            // Promotion cancelled by consumer — piece stays at origin
+          }
+          return;
         }
-        onMove?.({ from, to });
+
+        // 3. Default: show built-in promotion picker
+        const piece = pieces.find((p) => p.square === from);
+        const color = piece?.color ?? 'w';
+        setPromotionState({ from, to, color });
         return;
       }
 
@@ -357,38 +364,24 @@ export const Board = forwardRef<BoardRef, BoardProps>(function Board(
       // If chess.js rejected the move (truly illegal), do nothing —
       // piece stays at its original square.
     },
-    [onMove, onPromotion, isPromotionMove, pieces, boardState],
+    [onMove, onPromotion, autoPromoteTo, isPromotionMove, pieces, boardState],
   );
 
   // --- Promotion picker handlers ---
+  // Only reached when neither autoPromoteTo nor onPromotion is set.
   const handlePromotionSelect = useCallback(
-    async (piece: PromotionPiece) => {
+    (piece: PromotionPiece) => {
       if (!promotionState) return;
       const { from, to } = promotionState;
       setPromotionState(null);
 
-      const promo = piece.toLowerCase();
-
-      if (onPromotion) {
-        try {
-          const choice = await onPromotion(from, to);
-          const result = boardState.applyMove(from, to, choice);
-          if (result.applied && result.fen) {
-            setInternalFen(result.fen);
-          }
-          onMove?.({ from, to });
-        } catch {
-          // Promotion cancelled — piece stays at origin
-        }
-      } else {
-        const result = boardState.applyMove(from, to, promo);
-        if (result.applied && result.fen) {
-          setInternalFen(result.fen);
-        }
-        onMove?.({ from, to });
+      const result = boardState.applyMove(from, to, piece);
+      if (result.applied && result.fen) {
+        setInternalFen(result.fen);
       }
+      onMove?.({ from, to, promotion: piece });
     },
-    [promotionState, onPromotion, onMove, boardState],
+    [promotionState, onMove, boardState],
   );
 
   const handlePromotionCancel = useCallback(() => {
@@ -424,7 +417,7 @@ export const Board = forwardRef<BoardRef, BoardProps>(function Board(
         const result = boardState.applyMove(consumed.from, consumed.to, consumed.promotion);
         if (result.applied && result.fen) {
           setInternalFen(result.fen);
-          onMove?.({ from: consumed.from, to: consumed.to });
+          onMove?.({ from: consumed.from, to: consumed.to, promotion: consumed.promotion });
           onHaptic?.('move');
         } else {
           // Premove was illegal — discard silently
@@ -432,7 +425,17 @@ export const Board = forwardRef<BoardRef, BoardProps>(function Board(
         }
       }
     }
-  }, [fen, premovesEnabled, premove, pieces, boardState, consumePremove, clearPremove, onMove, onHaptic]);
+  }, [
+    fen,
+    premovesEnabled,
+    premove,
+    pieces,
+    boardState,
+    consumePremove,
+    clearPremove,
+    onMove,
+    onHaptic,
+  ]);
 
   // --- Rich callbacks ref (stable, for gesture hook) ---
   const richCallbacks = useMemo(
@@ -525,18 +528,18 @@ export const Board = forwardRef<BoardRef, BoardProps>(function Board(
 
   // If no size yet (auto-sizing), render invisible container for measurement
   if (outerSize === 0) {
-    return (
-      <View style={{ flex: 1, aspectRatio: 1 }} onLayout={handleLayout} />
-    );
+    return <View style={{ flex: 1, aspectRatio: 1 }} onLayout={handleLayout} />;
   }
 
   // Inner board with all interactive layers
   const boardContent = (
     <GestureDetector gesture={gesture}>
       <View
-        style={isOutside
-          ? { width: boardSize, height: boardSize, position: 'absolute', top: 0, right: 0 }
-          : { width: boardSize, height: boardSize }}
+        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="adjustable"