@react-chess-tools/react-chess-game 0.5.2 → 1.0.0

package/src/theme/presets.ts

@@ -0,0 +1,41 @@
+import type { ChessGameTheme } from "./types";
+
+/**
+ * Lichess-inspired theme with green highlights
+ */
+export const lichessTheme: ChessGameTheme = {
+  board: {
+    lightSquare: { backgroundColor: "#f0d9b5" },
+    darkSquare: { backgroundColor: "#b58863" },
+  },
+  state: {
+    lastMove: "rgba(155, 199, 0, 0.41)",
+    check: "rgba(255, 0, 0, 0.5)",
+    activeSquare: "rgba(20, 85, 30, 0.5)",
+    dropSquare: { backgroundColor: "rgba(20, 85, 30, 0.3)" },
+  },
+  indicators: {
+    move: "rgba(20, 85, 30, 0.3)",
+    capture: "rgba(20, 85, 30, 0.3)",
+  },
+};
+
+/**
+ * Chess.com-inspired theme with green board and yellow highlights
+ */
+export const chessComTheme: ChessGameTheme = {
+  board: {
+    lightSquare: { backgroundColor: "#ebecd0" },
+    darkSquare: { backgroundColor: "#779556" },
+  },
+  state: {
+    lastMove: "rgba(255, 255, 0, 0.5)",
+    check: "rgba(255, 0, 0, 0.7)",
+    activeSquare: "rgba(255, 255, 0, 0.5)",
+    dropSquare: { backgroundColor: "rgba(255, 255, 0, 0.4)" },
+  },
+  indicators: {
+    move: "rgba(0, 0, 0, 0.1)",
+    capture: "rgba(0, 0, 0, 0.1)",
+  },
+};

package/src/theme/types.ts

@@ -0,0 +1,56 @@
+import { CSSProperties } from "react";
+
+/**
+ * Board appearance configuration - colors for light and dark squares
+ */
+export interface BoardTheme {
+  /** Style for light squares */
+  lightSquare: CSSProperties;
+  /** Style for dark squares */
+  darkSquare: CSSProperties;
+}
+
+/**
+ * Game state highlight colors (RGBA color strings)
+ */
+export interface StateTheme {
+  /** Background color for last move from/to squares */
+  lastMove: string;
+  /** Background color for king when in check */
+  check: string;
+  /** Background color for currently selected piece's square */
+  activeSquare: string;
+  /** Full CSSProperties for valid drop target squares */
+  dropSquare: CSSProperties;
+}
+
+/**
+ * Move indicator styling - colors for move dots and capture rings
+ */
+export interface IndicatorTheme {
+  /** Color for move dots on empty destination squares (used in radial-gradient) */
+  move: string;
+  /** Color for capture rings on capturable pieces (used in radial-gradient) */
+  capture: string;
+}
+
+/**
+ * Complete theme configuration for ChessGame component
+ */
+export interface ChessGameTheme {
+  board: BoardTheme;
+  state: StateTheme;
+  indicators: IndicatorTheme;
+}
+
+/**
+ * Utility type for creating partial versions of nested objects
+ */
+export type DeepPartial<T> = {
+  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+
+/**
+ * Partial theme for user customization - allows overriding only specific properties
+ */
+export type PartialChessGameTheme = DeepPartial<ChessGameTheme>;

package/src/theme/utils.ts

@@ -0,0 +1,47 @@
+import { merge } from "lodash";
+import type { ChessGameTheme, PartialChessGameTheme } from "./types";
+import { defaultGameTheme } from "./defaults";
+
+/**
+ * Deep merges a partial theme with the default theme.
+ * Allows users to override only specific theme properties while keeping defaults for the rest.
+ *
+ * @param partialTheme - Partial theme with only the properties to override
+ * @returns Complete theme with overridden properties merged with defaults
+ *
+ * @example
+ * ```typescript
+ * const customTheme = mergeTheme({
+ *   state: { lastMove: "rgba(100, 200, 100, 0.6)" }
+ * });
+ * // Returns full theme with only lastMove color changed
+ * ```
+ */
+export const mergeTheme = (
+  partialTheme?: PartialChessGameTheme,
+): ChessGameTheme => {
+  if (!partialTheme) {
+    return { ...defaultGameTheme };
+  }
+
+  return merge({}, defaultGameTheme, partialTheme);
+};
+
+/**
+ * Deep merges a partial theme with a base theme.
+ * Useful when extending an existing theme.
+ *
+ * @param baseTheme - The base theme to extend
+ * @param partialTheme - Partial theme with properties to override
+ * @returns Complete theme with overridden properties
+ */
+export const mergeThemeWith = (
+  baseTheme: ChessGameTheme,
+  partialTheme?: PartialChessGameTheme,
+): ChessGameTheme => {
+  if (!partialTheme) {
+    return { ...baseTheme };
+  }
+
+  return merge({}, baseTheme, partialTheme);
+};

package/src/utils/__tests__/board.test.ts

@@ -1,6 +1,8 @@
 import { Chess } from "chess.js";
 import { getCustomSquareStyles, deepMergeChessboardOptions } from "../board";
 import { getGameInfo } from "../chess";
+import { defaultGameTheme } from "../../theme/defaults";
+import type { ChessGameTheme } from "../../theme/types";
 
 describe("Board Utilities", () => {
   describe("getCustomSquareStyles", () => {
@@ -139,6 +141,122 @@ describe("Board Utilities", () => {
       expect(styles.a3.background).toContain("25%");
       expect(styles.c3.background).toContain("25%");
     });
+
+    describe("with custom theme", () => {
+      const customTheme: ChessGameTheme = {
+        ...defaultGameTheme,
+        state: {
+          ...defaultGameTheme.state,
+          lastMove: "rgba(100, 200, 100, 0.6)",
+          check: "rgba(200, 50, 50, 0.7)",
+          activeSquare: "rgba(100, 100, 255, 0.5)",
+        },
+        indicators: {
+          move: "rgba(50, 50, 50, 0.2)",
+          capture: "rgba(200, 50, 50, 0.3)",
+        },
+      };
+
+      it("should use custom theme colors for last move", () => {
+        const game = new Chess();
+        game.move("e4");
+        const orientation = "w";
+        const info = getGameInfo(game, orientation);
+        const activeSquare = null;
+
+        const styles = getCustomSquareStyles(
+          game,
+          info,
+          activeSquare,
+          customTheme,
+        );
+
+        expect(styles.e2).toHaveProperty(
+          "backgroundColor",
+          "rgba(100, 200, 100, 0.6)",
+        );
+        expect(styles.e4).toHaveProperty(
+          "backgroundColor",
+          "rgba(100, 200, 100, 0.6)",
+        );
+      });
+
+      it("should use custom theme colors for active square", () => {
+        const game = new Chess();
+        const orientation = "w";
+        const info = getGameInfo(game, orientation);
+        const activeSquare = "e2";
+
+        const styles = getCustomSquareStyles(
+          game,
+          info,
+          activeSquare,
+          customTheme,
+        );
+
+        expect(styles.e2).toHaveProperty(
+          "backgroundColor",
+          "rgba(100, 100, 255, 0.5)",
+        );
+      });
+
+      it("should use custom theme colors for check", () => {
+        const game = new Chess(
+          "rnbqkbnr/ppp2ppp/8/3pp3/4P3/5Q2/PPPP1PPP/RNB1KBNR b KQkq - 1 3",
+        );
+        const orientation = "b";
+        const info = getGameInfo(game, orientation);
+        const modifiedInfo = { ...info, isCheck: true };
+        const activeSquare = null;
+
+        const styles = getCustomSquareStyles(
+          game,
+          modifiedInfo,
+          activeSquare,
+          customTheme,
+        );
+
+        expect(styles.e8).toHaveProperty(
+          "backgroundColor",
+          "rgba(200, 50, 50, 0.7)",
+        );
+      });
+
+      it("should use custom theme colors for move indicators", () => {
+        const game = new Chess();
+        const orientation = "w";
+        const info = getGameInfo(game, orientation);
+        const activeSquare = "e2";
+
+        const styles = getCustomSquareStyles(
+          game,
+          info,
+          activeSquare,
+          customTheme,
+        );
+
+        expect(styles.e3.background).toContain("rgba(50, 50, 50, 0.2)");
+        expect(styles.e4.background).toContain("rgba(50, 50, 50, 0.2)");
+      });
+
+      it("should use custom theme colors for capture indicators", () => {
+        const game = new Chess(
+          "rnbqkbnr/ppp1pppp/8/3p4/4P3/8/PPPP1PPP/RNBQKBNR w KQkq - 0 2",
+        );
+        const orientation = "w";
+        const info = getGameInfo(game, orientation);
+        const activeSquare = "e4";
+
+        const styles = getCustomSquareStyles(
+          game,
+          info,
+          activeSquare,
+          customTheme,
+        );
+
+        expect(styles.d5.background).toContain("rgba(200, 50, 50, 0.3)");
+      });
+    });
   });
 
   describe("deepMergeChessboardOptions", () => {

package/src/utils/board.ts

@@ -3,14 +3,23 @@ import { type CSSProperties } from "react";
 import { merge } from "lodash";
 import type { ChessboardOptions } from "react-chessboard";
 import { getDestinationSquares, type GameInfo } from "./chess";
+import type { ChessGameTheme } from "../theme/types";
+import { defaultGameTheme } from "../theme/defaults";
 
-const LAST_MOVE_COLOR = "rgba(255, 255, 0, 0.5)";
-const CHECK_COLOR = "rgba(255, 0, 0, 0.5)";
-
+/**
+ * Generates custom square styles based on game state and theme.
+ *
+ * @param game - Chess.js game instance
+ * @param info - Game info containing lastMove, isCheck, turn
+ * @param activeSquare - Currently selected square (if any)
+ * @param theme - Theme configuration (defaults to defaultGameTheme)
+ * @returns Record of square names to CSS properties
+ */
 export const getCustomSquareStyles = (
   game: Chess,
   info: GameInfo,
   activeSquare: Square | null,
+  theme: ChessGameTheme = defaultGameTheme,
 ) => {
   const customSquareStyles: Record<string, CSSProperties> = {};
 
@@ -18,16 +27,16 @@ export const getCustomSquareStyles = (
 
   if (lastMove) {
     customSquareStyles[lastMove.from] = {
-      backgroundColor: LAST_MOVE_COLOR,
+      backgroundColor: theme.state.lastMove,
     };
     customSquareStyles[lastMove.to] = {
-      backgroundColor: LAST_MOVE_COLOR,
+      backgroundColor: theme.state.lastMove,
     };
   }
 
   if (activeSquare) {
     customSquareStyles[activeSquare] = {
-      backgroundColor: LAST_MOVE_COLOR,
+      backgroundColor: theme.state.activeSquare,
     };
   }
 
@@ -37,8 +46,8 @@ export const getCustomSquareStyles = (
       customSquareStyles[square] = {
         background:
           game.get(square) && game.get(square)?.color !== turn
-            ? "radial-gradient(circle, rgba(1, 0, 0, 0.1) 85%, transparent 85%)"
-            : "radial-gradient(circle, rgba(0,0,0,.1) 25%, transparent 25%)",
+            ? `radial-gradient(circle, ${theme.indicators.capture} 85%, transparent 85%)`
+            : `radial-gradient(circle, ${theme.indicators.move} 25%, transparent 25%)`,
       };
     });
   }
@@ -48,7 +57,7 @@ export const getCustomSquareStyles = (
       return row.forEach((square) => {
         if (square?.type === "k" && square?.color === info.turn) {
           customSquareStyles[square.square] = {
-            backgroundColor: CHECK_COLOR,
+            backgroundColor: theme.state.check,
           };
         }
       });

package/src/utils/chess.ts

@@ -8,9 +8,17 @@ import _ from "lodash";
  * @returns A new Chess.js instance with the same state as the original.
  */
 export const cloneGame = (game: Chess) => {
-  const copy = new Chess();
-  copy.loadPgn(game.pgn());
-  return copy;
+  try {
+    const copy = new Chess();
+    const pgn = game?.pgn();
+    if (pgn) {
+      copy.loadPgn(pgn);
+    }
+    return copy;
+  } catch (e) {
+    console.error("Failed to clone game:", e);
+    return new Chess();
+  }
 };
 
 /**
@@ -74,6 +82,10 @@ export const requiresPromotion = (
   game: Chess,
   move: Parameters<Chess["move"]>[0],
 ) => {
+  if (!game) {
+    throw new Error("Game is required");
+  }
+
   try {
     const copy = cloneGame(game);
     const result = copy.move(move);
@@ -100,13 +112,21 @@ export const getCurrentFen = (
   const tempGame = new Chess();
   if (currentMoveIndex === -1) {
     if (fen) {
-      tempGame.load(fen);
+      try {
+        tempGame.load(fen);
+      } catch (e) {
+        console.error("Failed to load FEN in getCurrentFen:", fen, e);
+      }
     }
   } else {
     const moves = game.history().slice(0, currentMoveIndex + 1);
 
     if (fen) {
-      tempGame.load(fen);
+      try {
+        tempGame.load(fen);
+      } catch (e) {
+        console.error("Failed to load FEN in getCurrentFen:", fen, e);
+      }
     }
     moves.forEach((move) => tempGame.move(move));
   }

package/coverage/clover.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<coverage generated="1746218683707" clover="3.2.0">
-  <project timestamp="1746218683707" name="All files">
-    <metrics statements="0" coveredstatements="0" conditionals="0" coveredconditionals="0" methods="0" coveredmethods="0" elements="0" coveredelements="0" complexity="0" loc="0" ncloc="0" packages="0" files="0" classes="0"/>
-  </project>
-</coverage>

package/coverage/coverage-final.json

@@ -1 +0,0 @@
-{}

package/coverage/lcov-report/base.css

@@ -1,224 +0,0 @@
-body, html {
-  margin:0; padding: 0;
-  height: 100%;
-}
-body {
-    font-family: Helvetica Neue, Helvetica, Arial;
-    font-size: 14px;
-    color:#333;
-}
-.small { font-size: 12px; }
-*, *:after, *:before {
-  -webkit-box-sizing:border-box;
-     -moz-box-sizing:border-box;
-          box-sizing:border-box;
-  }
-h1 { font-size: 20px; margin: 0;}
-h2 { font-size: 14px; }
-pre {
-    font: 12px/1.4 Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    margin: 0;
-    padding: 0;
-    -moz-tab-size: 2;
-    -o-tab-size:  2;
-    tab-size: 2;
-}
-a { color:#0074D9; text-decoration:none; }
-a:hover { text-decoration:underline; }
-.strong { font-weight: bold; }
-.space-top1 { padding: 10px 0 0 0; }
-.pad2y { padding: 20px 0; }
-.pad1y { padding: 10px 0; }
-.pad2x { padding: 0 20px; }
-.pad2 { padding: 20px; }
-.pad1 { padding: 10px; }
-.space-left2 { padding-left:55px; }
-.space-right2 { padding-right:20px; }
-.center { text-align:center; }
-.clearfix { display:block; }
-.clearfix:after {
-  content:'';
-  display:block;
-  height:0;
-  clear:both;
-  visibility:hidden;
-  }
-.fl { float: left; }
-@media only screen and (max-width:640px) {
-  .col3 { width:100%; max-width:100%; }
-  .hide-mobile { display:none!important; }
-}
-
-.quiet {
-  color: #7f7f7f;
-  color: rgba(0,0,0,0.5);
-}
-.quiet a { opacity: 0.7; }
-
-.fraction {
-  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
-  font-size: 10px;
-  color: #555;
-  background: #E8E8E8;
-  padding: 4px 5px;
-  border-radius: 3px;
-  vertical-align: middle;
-}
-
-div.path a:link, div.path a:visited { color: #333; }
-table.coverage {
-  border-collapse: collapse;
-  margin: 10px 0 0 0;
-  padding: 0;
-}
-
-table.coverage td {
-  margin: 0;
-  padding: 0;
-  vertical-align: top;
-}
-table.coverage td.line-count {
-    text-align: right;
-    padding: 0 5px 0 20px;
-}
-table.coverage td.line-coverage {
-    text-align: right;
-    padding-right: 10px;
-    min-width:20px;
-}
-
-table.coverage td span.cline-any {
-    display: inline-block;
-    padding: 0 5px;
-    width: 100%;
-}
-.missing-if-branch {
-    display: inline-block;
-    margin-right: 5px;
-    border-radius: 3px;
-    position: relative;
-    padding: 0 4px;
-    background: #333;
-    color: yellow;
-}
-
-.skip-if-branch {
-    display: none;
-    margin-right: 10px;
-    position: relative;
-    padding: 0 4px;
-    background: #ccc;
-    color: white;
-}
-.missing-if-branch .typ, .skip-if-branch .typ {
-    color: inherit !important;
-}
-.coverage-summary {
-  border-collapse: collapse;
-  width: 100%;
-}
-.coverage-summary tr { border-bottom: 1px solid #bbb; }
-.keyline-all { border: 1px solid #ddd; }
-.coverage-summary td, .coverage-summary th { padding: 10px; }
-.coverage-summary tbody { border: 1px solid #bbb; }
-.coverage-summary td { border-right: 1px solid #bbb; }
-.coverage-summary td:last-child { border-right: none; }
-.coverage-summary th {
-  text-align: left;
-  font-weight: normal;
-  white-space: nowrap;
-}
-.coverage-summary th.file { border-right: none !important; }
-.coverage-summary th.pct { }
-.coverage-summary th.pic,
-.coverage-summary th.abs,
-.coverage-summary td.pct,
-.coverage-summary td.abs { text-align: right; }
-.coverage-summary td.file { white-space: nowrap;  }
-.coverage-summary td.pic { min-width: 120px !important;  }
-.coverage-summary tfoot td { }
-
-.coverage-summary .sorter {
-    height: 10px;
-    width: 7px;
-    display: inline-block;
-    margin-left: 0.5em;
-    background: url(sort-arrow-sprite.png) no-repeat scroll 0 0 transparent;
-}
-.coverage-summary .sorted .sorter {
-    background-position: 0 -20px;
-}
-.coverage-summary .sorted-desc .sorter {
-    background-position: 0 -10px;
-}
-.status-line {  height: 10px; }
-/* yellow */
-.cbranch-no { background: yellow !important; color: #111; }
-/* dark red */
-.red.solid, .status-line.low, .low .cover-fill { background:#C21F39 }
-.low .chart { border:1px solid #C21F39 }
-.highlighted,
-.highlighted .cstat-no, .highlighted .fstat-no, .highlighted .cbranch-no{
-  background: #C21F39 !important;
-}
-/* medium red */
-.cstat-no, .fstat-no, .cbranch-no, .cbranch-no { background:#F6C6CE }
-/* light red */
-.low, .cline-no { background:#FCE1E5 }
-/* light green */
-.high, .cline-yes { background:rgb(230,245,208) }
-/* medium green */
-.cstat-yes { background:rgb(161,215,106) }
-/* dark green */
-.status-line.high, .high .cover-fill { background:rgb(77,146,33) }
-.high .chart { border:1px solid rgb(77,146,33) }
-/* dark yellow (gold) */
-.status-line.medium, .medium .cover-fill { background: #f9cd0b; }
-.medium .chart { border:1px solid #f9cd0b; }
-/* light yellow */
-.medium { background: #fff4c2; }
-
-.cstat-skip { background: #ddd; color: #111; }
-.fstat-skip { background: #ddd; color: #111 !important; }
-.cbranch-skip { background: #ddd !important; color: #111; }
-
-span.cline-neutral { background: #eaeaea; }
-
-.coverage-summary td.empty {
-    opacity: .5;
-    padding-top: 4px;
-    padding-bottom: 4px;
-    line-height: 1;
-    color: #888;
-}
-
-.cover-fill, .cover-empty {
-  display:inline-block;
-  height: 12px;
-}
-.chart {
-  line-height: 0;
-}
-.cover-empty {
-    background: white;
-}
-.cover-full {
-    border-right: none !important;
-}
-pre.prettyprint {
-    border: none !important;
-    padding: 0 !important;
-    margin: 0 !important;
-}
-.com { color: #999 !important; }
-.ignore-none { color: #999; font-weight: normal; }
-
-.wrapper {
-  min-height: 100%;
-  height: auto !important;
-  height: 100%;
-  margin: 0 auto -48px;
-}
-.footer, .push {
-  height: 48px;
-}