react-native-chess-kit 0.1.0 → 0.2.1

package/src/constants.ts

@@ -0,0 +1,100 @@
+import type { BoardColors } from './types';
+
+// ---------------------------------------------------------------------------
+// Default colors
+// ---------------------------------------------------------------------------
+
+/** Default board colors (chess.com green) */
+export const DEFAULT_BOARD_COLORS: BoardColors = {
+  light: '#eeeed2',
+  dark: '#769656',
+};
+
+/** Default last-move highlight color */
+export const DEFAULT_LAST_MOVE_COLOR = 'rgba(255, 255, 0, 0.4)';
+
+/** Default check highlight color (red radial feel) */
+export const DEFAULT_CHECK_COLOR = 'rgba(235, 97, 80, 0.8)';
+
+/** Default selected piece square color */
+export const DEFAULT_SELECTED_COLOR = 'rgba(20, 85, 200, 0.5)';
+
+/** Default premove highlight color */
+export const DEFAULT_PREMOVE_COLOR = 'rgba(20, 85, 200, 0.3)';
+
+/** Default drag target highlight color */
+export const DEFAULT_DRAG_TARGET_COLOR = 'rgba(0, 0, 0, 0.1)';
+
+/** Default arrow color */
+export const DEFAULT_ARROW_COLOR = 'rgba(243, 166, 50, 0.85)';
+
+/** Default shape (circle) color */
+export const DEFAULT_SHAPE_COLOR = 'rgba(21, 120, 27, 0.7)';
+
+/** Default annotation background color */
+export const DEFAULT_ANNOTATION_BG = 'rgba(235, 97, 80, 0.9)';
+
+/** Default annotation text color */
+export const DEFAULT_ANNOTATION_TEXT = '#ffffff';
+
+// ---------------------------------------------------------------------------
+// Animation defaults
+// ---------------------------------------------------------------------------
+
+/** Default move animation duration in ms */
+export const DEFAULT_MOVE_DURATION = 200;
+
+/** Duration for capture fade-out animation in ms */
+export const CAPTURE_FADE_DURATION = 150;
+
+// ---------------------------------------------------------------------------
+// Layout constants
+// ---------------------------------------------------------------------------
+
+/** Legal move dot size as fraction of square size */
+export const DOT_SCALE = 0.28;
+
+/** Legal move capture ring size as fraction of square size */
+export const RING_SCALE = 0.85;
+
+/** Legal move capture ring border as fraction of square size */
+export const RING_BORDER_RATIO = 0.08;
+
+/** Arrow stroke width as fraction of square size (percentage-based viewBox) */
+export const ARROW_STROKE_WIDTH = 2.5;
+
+/** Arrow head size */
+export const ARROW_HEAD_SIZE = 2.5;
+
+/** Arrow shorten amount (to avoid overlapping squares) */
+export const ARROW_SHORTEN_BY = 4;
+
+/** Annotation badge size as fraction of square size */
+export const ANNOTATION_SCALE = 0.35;
+
+/** Coordinate font size as fraction of square size */
+export const COORDINATE_FONT_SCALE = 0.22;
+
+/** Drag ghost scale factor (1.1x larger than normal piece) */
+export const DRAG_GHOST_SCALE = 1.1;
+
+/** Promotion picker piece padding as fraction of square size */
+export const PROMOTION_PIECE_PADDING = 0.1;
+
+// ---------------------------------------------------------------------------
+// Piece codes (pre-computed to avoid allocation)
+// ---------------------------------------------------------------------------
+
+export const PIECE_CODES = [
+  'wp', 'wn', 'wb', 'wr', 'wq', 'wk',
+  'bp', 'bn', 'bb', 'br', 'bq', 'bk',
+] as const;
+
+/** Board square indices 0-63 (pre-computed) */
+export const SQUARE_INDICES = Array.from({ length: 64 }, (_, i) => i);
+
+/** File letters in order */
+export const FILES_WHITE = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'] as const;
+export const FILES_BLACK = ['h', 'g', 'f', 'e', 'd', 'c', 'b', 'a'] as const;
+export const RANKS_WHITE = ['8', '7', '6', '5', '4', '3', '2', '1'] as const;
+export const RANKS_BLACK = ['1', '2', '3', '4', '5', '6', '7', '8'] as const;

package/src/index.ts

@@ -2,10 +2,51 @@
 // High-performance chess board for React Native
 
 // ---------------------------------------------------------------------------
-// Main component
+// Main components
 // ---------------------------------------------------------------------------
 
 export { Board } from './board';
+export { StaticBoard } from './static-board';
+
+// ---------------------------------------------------------------------------
+// Overlay primitives (for advanced consumers building custom layers)
+// ---------------------------------------------------------------------------
+
+export { SquareHighlight } from './board-highlights';
+export { Arrow } from './board-arrows';
+export { Annotation } from './board-annotations';
+export { PromotionPicker } from './promotion-picker';
+
+// ---------------------------------------------------------------------------
+// Default piece set
+// ---------------------------------------------------------------------------
+
+export { DefaultPieceSet } from './pieces';
+
+// ---------------------------------------------------------------------------
+// Themes
+// ---------------------------------------------------------------------------
+
+export { BOARD_THEMES, BOARD_COLORS } from './themes';
+
+// ---------------------------------------------------------------------------
+// Constants (useful for custom overlays matching library defaults)
+// ---------------------------------------------------------------------------
+
+export {
+  DEFAULT_BOARD_COLORS,
+  DEFAULT_LAST_MOVE_COLOR,
+  DEFAULT_CHECK_COLOR,
+  DEFAULT_SELECTED_COLOR,
+  DEFAULT_PREMOVE_COLOR,
+  DEFAULT_DRAG_TARGET_COLOR,
+  DEFAULT_ARROW_COLOR,
+  DEFAULT_SHAPE_COLOR,
+  DEFAULT_ANNOTATION_BG,
+  DEFAULT_ANNOTATION_TEXT,
+  DEFAULT_MOVE_DURATION,
+  CAPTURE_FADE_DURATION,
+} from './constants';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -15,15 +56,35 @@ export type {
   // Core chess types
   ChessColor,
   MoveMethod,
+  PromotionPiece,
+  HapticType,
+  PieceCode,
 
   // Board component API
   BoardRef,
   BoardProps,
   BoardColors,
+  StaticBoardProps,
 
   // Piece data (useful for custom piece renderers)
   BoardPiece,
   ParsedPiece,
+  PieceSetMap,
+
+  // Overlay data types
+  HighlightData,
+  ArrowData,
+  ShapeData,
+  AnnotationData,
+  PremoveData,
+
+  // Animation config
+  AnimationConfig,
+  TimingAnimationConfig,
+  SpringAnimationConfig,
+
+  // Board theme
+  BoardTheme,
 
   // Gesture state (useful for advanced overlays)
   GestureState,

package/src/pieces/default-pieces.tsx

@@ -0,0 +1,383 @@
+import React from 'react';
+import Svg, { Path, Circle, G } from 'react-native-svg';
+import type { PieceSetMap } from '../types';
+
+// ---------------------------------------------------------------------------
+// Shared stroke / fill constants
+// ---------------------------------------------------------------------------
+
+const WHITE_FILL = '#ffffff';
+const WHITE_STROKE = '#333333';
+const BLACK_FILL = '#333333';
+const BLACK_STROKE = '#1a1a1a';
+const STROKE_WIDTH = 1.5;
+
+// ---------------------------------------------------------------------------
+// King
+// ---------------------------------------------------------------------------
+
+const WhiteKing = React.memo(({ size }: { size: number }) => (
+  <Svg width={size} height={size} viewBox="0 0 45 45">
+    <G
+      fill={WHITE_FILL}
+      stroke={WHITE_STROKE}
+      strokeWidth={STROKE_WIDTH}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      {/* Cross */}
+      <Path d="M 22.5,11.63 L 22.5,6" fill="none" />
+      <Path d="M 20,8 L 25,8" fill="none" />
+      {/* Head */}
+      <Path d="M 22.5,25 C 22.5,25 27,17.5 25.5,14.5 C 25.5,14.5 24.5,12 22.5,12 C 20.5,12 19.5,14.5 19.5,14.5 C 18,17.5 22.5,25 22.5,25" />
+      {/* Body and base */}
+      <Path d="M 12.5,37 C 18,33.5 27,33.5 32.5,37 L 32.5,30 C 32.5,30 41.5,25.5 38.5,19.5 C 34.5,13 25,16 22.5,23.5 L 22.5,27 L 22.5,23.5 C 20,16 10.5,13 6.5,19.5 C 3.5,25.5 12.5,30 12.5,30 L 12.5,37" />
+      {/* Base line */}
+      <Path d="M 12,37.5 C 18,40.5 27,40.5 33,37.5" fill="none" />
+      {/* Crown detail lines */}
+      <Path d="M 20,8 L 25,8" fill="none" />
+      <Path
+        d="M 32,29.5 C 32,29.5 40.5,25.5 38.03,19.85 C 34.15,14 25,18 22.5,24.5 L 22.5,26.6 L 22.5,24.5 C 20,18 10.85,14 6.97,19.85 C 4.5,25.5 13,29.5 13,29.5"
+        fill="none"
+        stroke={WHITE_STROKE}
+        strokeWidth={1}
+      />
+    </G>
+  </Svg>
+));
+
+const BlackKing = React.memo(({ size }: { size: number }) => (
+  <Svg width={size} height={size} viewBox="0 0 45 45">
+    <G
+      fill={BLACK_FILL}
+      stroke={BLACK_STROKE}
+      strokeWidth={STROKE_WIDTH}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      {/* Cross */}
+      <Path d="M 22.5,11.63 L 22.5,6" stroke={BLACK_STROKE} fill="none" />
+      <Path d="M 20,8 L 25,8" stroke={BLACK_STROKE} fill="none" />
+      {/* Head */}
+      <Path d="M 22.5,25 C 22.5,25 27,17.5 25.5,14.5 C 25.5,14.5 24.5,12 22.5,12 C 20.5,12 19.5,14.5 19.5,14.5 C 18,17.5 22.5,25 22.5,25" />
+      {/* Body and base */}
+      <Path d="M 12.5,37 C 18,33.5 27,33.5 32.5,37 L 32.5,30 C 32.5,30 41.5,25.5 38.5,19.5 C 34.5,13 25,16 22.5,23.5 L 22.5,27 L 22.5,23.5 C 20,16 10.5,13 6.5,19.5 C 3.5,25.5 12.5,30 12.5,30 L 12.5,37" />
+      {/* Base line */}
+      <Path d="M 12,37.5 C 18,40.5 27,40.5 33,37.5" fill="none" />
+      {/* Crown detail lines (white inner lines for contrast) */}
+      <Path
+        d="M 32,29.5 C 32,29.5 40.5,25.5 38.03,19.85 C 34.15,14 25,18 22.5,24.5 L 22.5,26.6 L 22.5,24.5 C 20,18 10.85,14 6.97,19.85 C 4.5,25.5 13,29.5 13,29.5"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth={1}
+      />
+    </G>
+  </Svg>
+));
+
+// ---------------------------------------------------------------------------
+// Queen
+// ---------------------------------------------------------------------------
+
+const WhiteQueen = React.memo(({ size }: { size: number }) => (
+  <Svg width={size} height={size} viewBox="0 0 45 45">
+    <G
+      fill={WHITE_FILL}
+      stroke={WHITE_STROKE}
+      strokeWidth={STROKE_WIDTH}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      {/* Crown tip circles */}
+      <Circle cx={6} cy={12} r={2.75} />
+      <Circle cx={14} cy={9} r={2.75} />
+      <Circle cx={22.5} cy={8} r={2.75} />
+      <Circle cx={31} cy={9} r={2.75} />
+      <Circle cx={39} cy={12} r={2.75} />
+      {/* Crown body */}
+      <Path d="M 9,26 C 17.5,24.5 30,24.5 36,26 L 38.5,13.5 L 31,25 L 30.5,10.5 L 26,27.5 L 22.5,10 L 19,27.5 L 14.5,10.5 L 14,25 L 6.5,13.5 L 9,26 Z" />
+      {/* Lower body */}
+      <Path d="M 9,26 C 9,28 10.5,29.5 11.5,30 C 17,31.5 28,31.5 33.5,30 C 34.5,29.5 36,28 36,26" />
+      {/* Base curves */}
+      <Path d="M 11.5,30 C 15,33.5 30,33.5 33.5,30" fill="none" />
+      <Path d="M 12,33.5 C 18,37.5 27,37.5 33,33.5" fill="none" />
+    </G>
+  </Svg>
+));
+
+const BlackQueen = React.memo(({ size }: { size: number }) => (
+  <Svg width={size} height={size} viewBox="0 0 45 45">
+    <G
+      fill={BLACK_FILL}
+      stroke={BLACK_STROKE}
+      strokeWidth={STROKE_WIDTH}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      {/* Crown tip circles */}
+      <Circle cx={6} cy={12} r={2.75} />
+      <Circle cx={14} cy={9} r={2.75} />
+      <Circle cx={22.5} cy={8} r={2.75} />
+      <Circle cx={31} cy={9} r={2.75} />
+      <Circle cx={39} cy={12} r={2.75} />
+      {/* Crown body */}
+      <Path d="M 9,26 C 17.5,24.5 30,24.5 36,26 L 38.5,13.5 L 31,25 L 30.5,10.5 L 26,27.5 L 22.5,10 L 19,27.5 L 14.5,10.5 L 14,25 L 6.5,13.5 L 9,26 Z" />
+      {/* Lower body */}
+      <Path d="M 9,26 C 9,28 10.5,29.5 11.5,30 C 17,31.5 28,31.5 33.5,30 C 34.5,29.5 36,28 36,26" />
+      {/* Base curves */}
+      <Path d="M 11.5,30 C 15,33.5 30,33.5 33.5,30" fill="none" />
+      <Path d="M 12,33.5 C 18,37.5 27,37.5 33,33.5" fill="none" />
+      {/* Inner detail lines for contrast */}
+      <Path
+        d="M 11,29.5 C 15,32 30,32 34,29.5"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth={1}
+      />
+    </G>
+  </Svg>
+));
+
+// ---------------------------------------------------------------------------
+// Rook
+// ---------------------------------------------------------------------------
+
+const WhiteRook = React.memo(({ size }: { size: number }) => (
+  <Svg width={size} height={size} viewBox="0 0 45 45">
+    <G
+      fill={WHITE_FILL}
+      stroke={WHITE_STROKE}
+      strokeWidth={STROKE_WIDTH}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      {/* Crenellations (merlons) */}
+      <Path d="M 9,39 L 36,39 L 36,36 L 9,36 L 9,39 Z" />
+      <Path d="M 12,36 L 12,32 L 33,32 L 33,36 L 12,36 Z" />
+      <Path d="M 11,14 L 11,9 L 15,9 L 15,11 L 20,11 L 20,9 L 25,9 L 25,11 L 30,11 L 30,9 L 34,9 L 34,14 L 11,14 Z" />
+      {/* Body */}
+      <Path d="M 34,14 L 31,17 L 14,17 L 11,14" />
+      <Path d="M 31,17 L 31,29.5 L 14,29.5 L 14,17" fill={WHITE_FILL} />
+      <Path d="M 31,29.5 L 33,32 L 12,32 L 14,29.5" />
+      {/* Inner lines */}
+      <Path d="M 14,17 L 31,17" fill="none" />
+      <Path d="M 14,29.5 L 31,29.5" fill="none" />
+      <Path d="M 14,17 L 14,29.5" fill="none" />
+      <Path d="M 31,17 L 31,29.5" fill="none" />
+    </G>
+  </Svg>
+));
+
+const BlackRook = React.memo(({ size }: { size: number }) => (
+  <Svg width={size} height={size} viewBox="0 0 45 45">
+    <G
+      fill={BLACK_FILL}
+      stroke={BLACK_STROKE}
+      strokeWidth={STROKE_WIDTH}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      {/* Crenellations (merlons) */}
+      <Path d="M 9,39 L 36,39 L 36,36 L 9,36 L 9,39 Z" />
+      <Path d="M 12,36 L 12,32 L 33,32 L 33,36 L 12,36 Z" />
+      <Path d="M 11,14 L 11,9 L 15,9 L 15,11 L 20,11 L 20,9 L 25,9 L 25,11 L 30,11 L 30,9 L 34,9 L 34,14 L 11,14 Z" />
+      {/* Body */}
+      <Path d="M 34,14 L 31,17 L 14,17 L 11,14" />
+      <Path d="M 31,17 L 31,29.5 L 14,29.5 L 14,17" fill={BLACK_FILL} />
+      <Path d="M 31,29.5 L 33,32 L 12,32 L 14,29.5" />
+      {/* Inner lines for contrast */}
+      <Path d="M 14,17 L 31,17" fill="none" stroke="#ffffff" strokeWidth={1} />
+      <Path d="M 14,29.5 L 31,29.5" fill="none" stroke="#ffffff" strokeWidth={1} />
+      <Path d="M 14,17 L 14,29.5" fill="none" stroke="#ffffff" strokeWidth={1} />
+      <Path d="M 31,17 L 31,29.5" fill="none" stroke="#ffffff" strokeWidth={1} />
+    </G>
+  </Svg>
+));
+
+// ---------------------------------------------------------------------------
+// Bishop
+// ---------------------------------------------------------------------------
+
+const WhiteBishop = React.memo(({ size }: { size: number }) => (
+  <Svg width={size} height={size} viewBox="0 0 45 45">
+    <G
+      fill={WHITE_FILL}
+      stroke={WHITE_STROKE}
+      strokeWidth={STROKE_WIDTH}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      {/* Top ball */}
+      <Circle cx={22.5} cy={8} r={2.5} />
+      {/* Mitre (head) */}
+      <Path d="M 17.5,26 L 15,13 L 22.5,7 L 30,13 L 27.5,26" />
+      {/* Mitre slit */}
+      <Path d="M 22.5,15.5 L 22.5,20.5" fill="none" strokeWidth={1.5} />
+      <Path d="M 20,18 L 25,18" fill="none" strokeWidth={1.5} />
+      {/* Collar */}
+      <Path d="M 17.5,26 C 21,28 24,28 27.5,26 C 28.5,27.5 29,29 29,31 C 29,33 27.5,34.5 22.5,34.5 C 17.5,34.5 16,33 16,31 C 16,29 16.5,27.5 17.5,26" />
+      {/* Base */}
+      <Path d="M 14.5,34.5 C 18,37.5 27,37.5 30.5,34.5 L 31,39 L 14,39 L 14.5,34.5 Z" />
+    </G>
+  </Svg>
+));
+
+const BlackBishop = React.memo(({ size }: { size: number }) => (
+  <Svg width={size} height={size} viewBox="0 0 45 45">
+    <G
+      fill={BLACK_FILL}
+      stroke={BLACK_STROKE}
+      strokeWidth={STROKE_WIDTH}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      {/* Top ball */}
+      <Circle cx={22.5} cy={8} r={2.5} />
+      {/* Mitre (head) */}
+      <Path d="M 17.5,26 L 15,13 L 22.5,7 L 30,13 L 27.5,26" />
+      {/* Mitre slit */}
+      <Path d="M 22.5,15.5 L 22.5,20.5" fill="none" stroke="#ffffff" strokeWidth={1.5} />
+      <Path d="M 20,18 L 25,18" fill="none" stroke="#ffffff" strokeWidth={1.5} />
+      {/* Collar */}
+      <Path d="M 17.5,26 C 21,28 24,28 27.5,26 C 28.5,27.5 29,29 29,31 C 29,33 27.5,34.5 22.5,34.5 C 17.5,34.5 16,33 16,31 C 16,29 16.5,27.5 17.5,26" />
+      {/* Base */}
+      <Path d="M 14.5,34.5 C 18,37.5 27,37.5 30.5,34.5 L 31,39 L 14,39 L 14.5,34.5 Z" />
+      {/* Inner detail line for contrast */}
+      <Path
+        d="M 17.5,26 C 21,28 24,28 27.5,26"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth={1}
+      />
+    </G>
+  </Svg>
+));
+
+// ---------------------------------------------------------------------------
+// Knight
+// ---------------------------------------------------------------------------
+
+const WhiteKnight = React.memo(({ size }: { size: number }) => (
+  <Svg width={size} height={size} viewBox="0 0 45 45">
+    <G
+      fill={WHITE_FILL}
+      stroke={WHITE_STROKE}
+      strokeWidth={STROKE_WIDTH}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      {/* Horse head */}
+      <Path d="M 22,10 C 32.5,11 38.5,18 38,39 L 15,39 C 15,30 25,32.5 23,18" />
+      <Path d="M 24,18 C 24.38,20.91 18.45,25.37 16,27 C 13,29 13.18,31.34 11,31 C 9.958,30.06 12.41,27.96 11,28 C 10,28 11.19,29.23 10,30 C 9,30 5.997,31 6,26 C 6,24 12,14 12,14 C 12,14 13.89,12.1 14,10.5 C 13.27,9.506 13.5,8.5 13.5,7.5 C 14.5,6.5 16.5,10 16.5,10 L 18.5,10 C 18.5,10 19.28,8.008 21,7 C 22,7 22,10 22,10" />
+      {/* Eye */}
+      <Circle cx={12} cy={25.5} r={0.5} fill={WHITE_STROKE} stroke="none" />
+      {/* Nostril */}
+      <Path
+        d="M 17,34.5 C 18.5,32 19.28,30 19,28.25"
+        fill="none"
+        strokeWidth={1}
+      />
+    </G>
+  </Svg>
+));
+
+const BlackKnight = React.memo(({ size }: { size: number }) => (
+  <Svg width={size} height={size} viewBox="0 0 45 45">
+    <G
+      fill={BLACK_FILL}
+      stroke={BLACK_STROKE}
+      strokeWidth={STROKE_WIDTH}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      {/* Horse head */}
+      <Path d="M 22,10 C 32.5,11 38.5,18 38,39 L 15,39 C 15,30 25,32.5 23,18" />
+      <Path d="M 24,18 C 24.38,20.91 18.45,25.37 16,27 C 13,29 13.18,31.34 11,31 C 9.958,30.06 12.41,27.96 11,28 C 10,28 11.19,29.23 10,30 C 9,30 5.997,31 6,26 C 6,24 12,14 12,14 C 12,14 13.89,12.1 14,10.5 C 13.27,9.506 13.5,8.5 13.5,7.5 C 14.5,6.5 16.5,10 16.5,10 L 18.5,10 C 18.5,10 19.28,8.008 21,7 C 22,7 22,10 22,10" />
+      {/* Eye (white for contrast) */}
+      <Circle cx={12} cy={25.5} r={0.5} fill="#ffffff" stroke="none" />
+      {/* Nostril / mane detail */}
+      <Path
+        d="M 17,34.5 C 18.5,32 19.28,30 19,28.25"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth={1}
+      />
+      {/* Mane line for contrast */}
+      <Path
+        d="M 24,18 C 24.38,20.91 18.45,25.37 16,27 C 13,29 13.18,31.34 11,31"
+        fill="none"
+        stroke="#ffffff"
+        strokeWidth={1}
+      />
+    </G>
+  </Svg>
+));
+
+// ---------------------------------------------------------------------------
+// Pawn
+// ---------------------------------------------------------------------------
+
+const WhitePawn = React.memo(({ size }: { size: number }) => (
+  <Svg width={size} height={size} viewBox="0 0 45 45">
+    <G
+      fill={WHITE_FILL}
+      stroke={WHITE_STROKE}
+      strokeWidth={STROKE_WIDTH}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <Path d="M 22.5,9 C 19.79,9 17.609,11.19 17.609,13.9 C 17.609,15.42 18.34,16.77 19.47,17.62 C 16.98,19.04 15.35,21.72 15.35,24.79 C 15.35,25.87 15.59,26.88 15.99,27.81 C 13.08,29.21 11,32.16 11,35.6 L 11,37.5 C 11,38.33 11.67,39 12.5,39 L 32.5,39 C 33.33,39 34,38.33 34,37.5 L 34,35.6 C 34,32.16 31.92,29.21 29.01,27.81 C 29.41,26.88 29.65,25.87 29.65,24.79 C 29.65,21.72 28.02,19.04 25.53,17.62 C 26.66,16.77 27.39,15.42 27.39,13.9 C 27.39,11.19 25.21,9 22.5,9 Z" />
+    </G>
+  </Svg>
+));
+
+const BlackPawn = React.memo(({ size }: { size: number }) => (
+  <Svg width={size} height={size} viewBox="0 0 45 45">
+    <G
+      fill={BLACK_FILL}
+      stroke={BLACK_STROKE}
+      strokeWidth={STROKE_WIDTH}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <Path d="M 22.5,9 C 19.79,9 17.609,11.19 17.609,13.9 C 17.609,15.42 18.34,16.77 19.47,17.62 C 16.98,19.04 15.35,21.72 15.35,24.79 C 15.35,25.87 15.59,26.88 15.99,27.81 C 13.08,29.21 11,32.16 11,35.6 L 11,37.5 C 11,38.33 11.67,39 12.5,39 L 32.5,39 C 33.33,39 34,38.33 34,37.5 L 34,35.6 C 34,32.16 31.92,29.21 29.01,27.81 C 29.41,26.88 29.65,25.87 29.65,24.79 C 29.65,21.72 28.02,19.04 25.53,17.62 C 26.66,16.77 27.39,15.42 27.39,13.9 C 27.39,11.19 25.21,9 22.5,9 Z" />
+    </G>
+  </Svg>
+));
+
+// ---------------------------------------------------------------------------
+// Piece render functions
+// ---------------------------------------------------------------------------
+
+const wp = (size: number) => <WhitePawn size={size} />;
+const wn = (size: number) => <WhiteKnight size={size} />;
+const wb = (size: number) => <WhiteBishop size={size} />;
+const wr = (size: number) => <WhiteRook size={size} />;
+const wq = (size: number) => <WhiteQueen size={size} />;
+const wk = (size: number) => <WhiteKing size={size} />;
+
+const bp = (size: number) => <BlackPawn size={size} />;
+const bn = (size: number) => <BlackKnight size={size} />;
+const bb = (size: number) => <BlackBishop size={size} />;
+const br = (size: number) => <BlackRook size={size} />;
+const bq = (size: number) => <BlackQueen size={size} />;
+const bk = (size: number) => <BlackKing size={size} />;
+
+// ---------------------------------------------------------------------------
+// Default piece set
+// ---------------------------------------------------------------------------
+
+export const DefaultPieceSet: PieceSetMap = {
+  wp,
+  wn,
+  wb,
+  wr,
+  wq,
+  wk,
+  bp,
+  bn,
+  bb,
+  br,
+  bq,
+  bk,
+};

package/src/pieces/index.ts

@@ -0,0 +1 @@
+export { DefaultPieceSet } from './default-pieces';